flex-layout-system - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

dist/base.min.js

 /*! For license information please see base.min.js.LICENSE.txt */
-(()=>{"use strict";var t={858:function(t,e,s){var i,r=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCanvas=void 0;const n=s(62),l=s(595);let a=i=class extends n.LitElement{constructor(){super(...arguments),this.width=null,this.margin=null,this.padding=null}render(){return this.padding&&this.style.setProperty("--flex-canvas-padding",this.padding),this.width&&this.style.setProperty("--flex-canvas-max-width",this.width),this.margin&&this.style.setProperty("--flex-canvas-margin",this.margin),n.html`<slot></slot>`}};a.defaultProps={maxWidth:"1400px",display:"block",margin:"0 auto",padding:"0"},a.styles=n.css`
+(()=>{"use strict";var t={732:function(t,e,s){var o,i=this&&this.__decorate||function(t,e,s,o){var i,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(r<3?i(n):r>3?i(e,s,n):i(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexBox=void 0;const n=s(62),l=s(595);let a=o=class extends n.LitElement{constructor(){super(...arguments),this.row=null,this.column=null,this.gap=null}get mode(){return this.row||this.column?this.row?"row":"column":o.defaultProps.mode}render(){if(this.gap&&this.style.setProperty("--f-b-gap",this.gap),this.row&&this.column)throw new Error("flex-box cannot be both row and column");return n.html`<slot></slot>`}};a.defaultProps={reverse:!1,display:"flex",mode:"row",wrap:!0,gap:"0",justifyContent:"flex-start",alignItems:"flex-start",alignContent:"flex-start"},a.styles=n.css`
+    :host([nowrap]) {
+      flex-wrap: nowrap;
+    }
+    :host([row]) {
+      flex-direction: row;
+    }
+    :host([column]) {
+      flex-direction: column;
+    }
+    :host([reverse][row]) {
+      flex-direction: row-reverse;
+    }
+    :host([reverse][column]) {
+      flex-direction: column-reverse;
+    }
+    :host([inline]) {
+      display: inline-flex;
+    }
+    :host([center]) {
+      align-items: center;
+      justify-content: center;
+    }
+    :host([middle]) {
+      align-items: center;
+    }
+    :host([spread]) {
+      justify-content: space-between;
+    }
+    :host([stretch]) {
+      align-items: stretch;
+    }
+    :host([start]) {
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+    :host([end]) {
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+    :host([ai="flex-start"]) {
+      align-items: flex-start;
+    }
+    :host([ai="flex-end"]) {
+      align-items: flex-end;
+    }
+    :host([ai="center"]) {
+      align-items: center;
+    }
+    :host([ai="baseline"]) {
+      align-items: baseline;
+    }
+    :host([ai="stretch"]) {
+      align-items: stretch;
+    }
+    :host([jc="flex-start"]) {
+      justify-content: flex-start;
+    }
+    :host([jc="flex-end"]) {
+      justify-content: flex-end;
+    }
+    :host([jc="center"]) {
+      justify-content: center;
+    }
+    :host([jc="space-between"]) {
+      justify-content: space-between;
+    }
+    :host([jc="space-around"]) {
+      justify-content: space-around;
+    }
+    :host([jc="space-evenly"]) {
+      justify-content: space-evenly;
+    }
+    :host([jc="start"]) {
+      justify-content: flex-start;
+    }
+    :host([jc="end"]) {
+      justify-content: flex-end;
+    }
+    :host([ac="start"]) {
+      align-content: flex-start;
+    }
+    :host([ac="end"]) {
+      align-content: flex-end;
+    }
+    :host([ac="center"]) {
+      align-content: center;
+    }
+    :host([ac="space-between"]) {
+      align-content: space-between;
+    }
+    :host([ac="space-around"]) {
+      align-content: space-around;
+    }
+    :host([ac="space-evenly"]) {
+      align-content: space-evenly;
+    }
+    :host([ac="stretch"]) {
+      align-content: stretch;
+    }
     :host {
       box-sizing: border-box;
-      display: var(
-        --flex-canvas-display,
-        ${(0,n.unsafeCSS)(i.defaultProps.display)}
+      display: var(--f-b-db, ${(0,n.unsafeCSS)(o.defaultProps.display)});
+      flex-direction: var(
+        --f-b-dir,
+        ${(0,n.unsafeCSS)(o.defaultProps.reverse?o.defaultProps.mode+"-reverse":o.defaultProps.mode)}
       );
-      margin: var(
-        --flex-canvas-margin,
-        ${(0,n.unsafeCSS)(i.defaultProps.margin)}
+      gap: var(--f-b-gap, ${(0,n.unsafeCSS)(o.defaultProps.gap)});
+      flex-wrap: var(
+        --f-b-wp,
+        ${(0,n.unsafeCSS)(o.defaultProps.wrap?"wrap":"nowrap")}
       );
-      max-width: var(
-        --flex-canvas-max-width,
-        ${(0,n.unsafeCSS)(i.defaultProps.maxWidth)}
+      justify-content: var(
+        --f-b-jc,
+        ${(0,n.unsafeCSS)(o.defaultProps.justifyContent)}
       );
-      padding: var(
-        --flex-canvas-padding,
-        ${(0,n.unsafeCSS)(i.defaultProps.padding)}
+      align-items: var(--f-b-ai, ${(0,n.unsafeCSS)(o.defaultProps.alignItems)});
+      align-content: var(
+        --f-b-ac,
+        ${(0,n.unsafeCSS)(o.defaultProps.alignContent)}
       );
     }
+
+    :host ::slotted(*) {
+      --f-b-dir: ${(0,n.unsafeCSS)(o.defaultProps.reverse?o.defaultProps.mode+"-reverse":o.defaultProps.mode)};
+      --f-b-db: ${(0,n.unsafeCSS)(o.defaultProps.display)};
+      --f-b-wp: ${(0,n.unsafeCSS)(o.defaultProps.wrap?"wrap":"nowrap")};
+      --f-b-jc: ${(0,n.unsafeCSS)(o.defaultProps.justifyContent)};
+      --f-b-ai: ${(0,n.unsafeCSS)(o.defaultProps.alignItems)};
+      --f-b-ac: ${(0,n.unsafeCSS)(o.defaultProps.alignContent)};
+      --f-b-gap: ${(0,n.unsafeCSS)(o.defaultProps.gap)};
+    }
+
+    :host([column][stretch]) ::slotted(*) {
+      width: 100%;
+    }
+
+    :host(:not([column])) ::slotted(f-divider:not([h]):not([v])) {
+      min-width: var(--f-vd-w, var(--f-divider-size));
+      width: var(--f-vd-w, var(--f-divider-size));
+      height: var(--f-vd-ops-size, auto);
+      margin: 0 var(--f-divider-m, 0);
+    }
+
+    :host([column]) ::slotted(f-divider:not([h]):not([v])) {
+      min-height: var(--f-divider-h, var(--f-divider-size));
+      height: var(--f-divider-h, var(--f-divider-size));
+      margin: var(--f-divider-m, 0) 0;
+      width: var(--f-vd-ops-size, auto);
+      max-width: var(--f-vd-ops-size, 100%);
+    }
+    
+    :host([column]) ::slotted(f-divider[stretch]:not([h]):not([v])) {
+      width: 100%;
+    }
+
+    :host([fill]) ::slotted(*:not([priority])) {
+      flex: 1 1 auto;
+    }
+    :host([fit]) ::slotted(*:not([priority])) {
+      flex: 1;
+    }
+    :host([snug]) ::slotted(*:not([priority])) {
+      flex: 0;
+    }
+  `,i([(0,l.property)({type:Boolean,reflect:!0}),r("design:type",Boolean)],a.prototype,"row",void 0),i([(0,l.property)({type:Boolean,reflect:!0}),r("design:type",Boolean)],a.prototype,"column",void 0),i([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"gap",void 0),a=o=i([(0,l.customElement)("flex-box")],a),e.FlexBox=a},858:function(t,e,s){var o,i=this&&this.__decorate||function(t,e,s,o){var i,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(r<3?i(n):r>3?i(e,s,n):i(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCanvas=void 0;const n=s(62),l=s(595);let a=o=class extends n.LitElement{constructor(){super(...arguments),this.width=null,this.mg=null,this.pd=null}render(){return this.pd&&this.style.setProperty("--f-cs-pd",this.pd),this.width&&this.style.setProperty("--f-cs-mw",this.width),this.mg&&this.style.setProperty("--f-cs-mg",this.mg),n.html`<slot></slot>`}};a.defaultProps={maxWidth:"1400px",display:"block",margin:"0 auto",padding:"0"},a.styles=n.css`
+    :host {
+      box-sizing: border-box;
+      display: var(
+        --f-cs-db,
+        ${(0,n.unsafeCSS)(o.defaultProps.display)}
+      );
+      margin: var(--f-cs-mg, ${(0,n.unsafeCSS)(o.defaultProps.margin)});
+      max-width: var(--f-cs-mw, ${(0,n.unsafeCSS)(o.defaultProps.maxWidth)});
+      padding: var(--f-cs-pd, ${(0,n.unsafeCSS)(o.defaultProps.padding)});
+    }
     :host([flex]) {
@@ -27,28 +183,25 @@ display: flex;
     :host ::slotted(*) {
-      --flex-canvas-display: ${(0,n.unsafeCSS)(i.defaultProps.display)};
-      --flex-canvas-margin: ${(0,n.unsafeCSS)(i.defaultProps.margin)};
-      --flex-canvas-max-width: ${(0,n.unsafeCSS)(i.defaultProps.maxWidth)};
-      --flex-canvas-padding: ${(0,n.unsafeCSS)(i.defaultProps.padding)};
+      --f-cs-db: ${(0,n.unsafeCSS)(o.defaultProps.display)};
+      --f-cs-mg: ${(0,n.unsafeCSS)(o.defaultProps.margin)};
+      --f-cs-mw: ${(0,n.unsafeCSS)(o.defaultProps.maxWidth)};
+      --f-cs-pd: ${(0,n.unsafeCSS)(o.defaultProps.padding)};
     }
-  `,r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"width",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"margin",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"padding",void 0),a=i=r([(0,l.customElement)("flex-canvas")],a),e.FlexCanvas=a},627:function(t,e,s){var i,r=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCell=void 0;const n=s(62),l=s(595);let a=i=class extends n.LitElement{constructor(){super(...arguments),this.order=null,this.grow=null,this.shrink=null,this.width=null}render(){return this.width&&this.style.setProperty("--flex-cell-basis",this.width),(this.order&&this.order<0||this.order>10)&&this.style.setProperty("--flex-cell-order",this.order.toString()),(this.grow&&this.grow>10||this.grow<0)&&this.style.setProperty("--flex-cell-grow",this.grow.toString()),(this.shrink&&this.shrink>10||this.shrink<0)&&this.style.setProperty("--flex-cell-shrink",this.shrink.toString()),n.html`<slot></slot>`}};a.defaultProps={display:"block"},a.styles=n.css`
+  `,i([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"width",void 0),i([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"mg",void 0),i([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"pd",void 0),a=o=i([(0,l.customElement)("flex-canvas")],a),e.FlexCanvas=a},627:function(t,e,s){var o,i=this&&this.__decorate||function(t,e,s,o){var i,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(r<3?i(n):r>3?i(e,s,n):i(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCell=void 0;const n=s(62),l=s(595);let a=o=class extends n.LitElement{constructor(){super(...arguments),this.order=null,this.grow=null,this.shrink=null,this.width=null}render(){return this.width&&this.style.setProperty("--f-c-b",this.width),(this.order&&this.order<0||this.order>10)&&this.style.setProperty("--f-c-o",this.order.toString()),(this.grow&&this.grow>10||this.grow<0)&&this.style.setProperty("--f-c-g",this.grow.toString()),(this.shrink&&this.shrink>10||this.shrink<0)&&this.style.setProperty("--f-c-sh",this.shrink.toString()),n.html`<slot></slot>`}};a.defaultProps={display:"block"},a.styles=n.css`
     :host {
       box-sizing: border-box;
-      display: var(
-        --flex-cell-display,
-        ${(0,n.unsafeCSS)(i.defaultProps.display)}
-      );
-      padding: var(--flex-grid-padding, 0);
-      flex-basis: var(--flex-cell-basis, auto);
-      max-width: var(--flex-cell-basis, none);
-      order: var(--flex-cell-order, 0);
-      flex-grow: var(--flex-cell-grow, 0);
-      flex-shrink: var(--flex-cell-shrink, 1);
+      display: var(--f-c-db, ${(0,n.unsafeCSS)(o.defaultProps.display)});
+      padding: var(--f-g-pd, 0);
+      flex-basis: var(--f-c-b, auto);
+      max-width: var(--f-c-b, none);
+      order: var(--f-c-o, 0);
+      flex-grow: var(--f-c-g, 0);
+      flex-shrink: var(--f-c-sh, 1);
     }
     ::slotted(*) {
-      --flex-grid-padding: 0;
-      --flex-cell-display: ${(0,n.unsafeCSS)(i.defaultProps.display)};
-      --flex-cell-basis: auto;
-      --flex-cell-order: 0;
-      --flex-cell-grow: 0;
-      --flex-cell-shrink: 1;
+      --f-g-pd: 0;
+      --f-c-db: ${(0,n.unsafeCSS)(o.defaultProps.display)};
+      --f-c-b: auto;
+      --f-c-o: 0;
+      --f-c-g: 0;
+      --f-c-sh: 1;
     }
@@ -71,2 +224,13 @@ :host(.cell-1) {
     }
+    :host([scrollable]:not([flex])) {
+      flex-grow: 1;
+      overflow: auto;
+    }
+    :host([scrollable][flex]) {
+      min-height: 0;
+      flex-grow: 1;
+    }
+    :host([scrollable][flex]) ::slotted(*) {
+      overflow: auto;
+    }
     :host(.cell-5) {
@@ -227,166 +391,8 @@ flex-basis: 41.6666666667%;
     }
-  `,r([(0,l.property)({type:Number,reflect:!0}),o("design:type",Number)],a.prototype,"order",void 0),r([(0,l.property)({type:Number,reflect:!0}),o("design:type",Number)],a.prototype,"grow",void 0),r([(0,l.property)({type:Number,reflect:!0}),o("design:type",Number)],a.prototype,"shrink",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"width",void 0),a=i=r([(0,l.customElement)("flex-cell")],a),e.FlexCell=a},517:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCenterBox=void 0;const r=s(62),o=s(595);let n=class extends r.LitElement{render(){return r.html`<div><slot></slot></div>`}};n.styles=r.css`
+  `,i([(0,l.property)({type:Number,reflect:!0}),r("design:type",Number)],a.prototype,"order",void 0),i([(0,l.property)({type:Number,reflect:!0}),r("design:type",Number)],a.prototype,"grow",void 0),i([(0,l.property)({type:Number,reflect:!0}),r("design:type",Number)],a.prototype,"shrink",void 0),i([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"width",void 0),a=o=i([(0,l.customElement)("flex-cell")],a),e.FlexCell=a},580:function(t,e,s){var o=this&&this.__decorate||function(t,e,s,o){var i,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(r<3?i(n):r>3?i(e,s,n):i(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},i=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexGrid=void 0;const r=s(62),n=s(595);let l=class extends r.LitElement{constructor(){super(...arguments),this.gap=null}render(){return this.gap&&this.style.setProperty("--f-g-gap",this.gap),r.html`<slot></slot>`}};l.styles=r.css`
     :host {
       box-sizing: border-box;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    :host(.full-height) {
-      min-height: 100vh;
-    }
-  `,n=i([(0,o.customElement)("flex-centerbox")],n),e.FlexCenterBox=n},472:function(t,e,s){var i,r=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexContainer=void 0;const n=s(62),l=s(595);let a=i=class extends n.LitElement{constructor(){super(...arguments),this.row=null,this.column=null,this.gap=null}get mode(){return this.row||this.column?this.row?"row":"column":i.defaultProps.mode}render(){if(this.gap&&this.style.setProperty("--flex-container-gap",this.gap),this.row&&this.column)throw new Error("flex-container cannot be both row and column");return n.html`<slot></slot>`}};a.defaultProps={reverse:!1,display:"flex",mode:"row",wrap:!0,gap:"0",justifyContent:"flex-start",alignItems:"flex-start",alignContent:"flex-start"},a.styles=n.css`
-    :host([nowrap]) {
-      flex-wrap: nowrap;
-    }
-    :host([row]) {
-      flex-direction: row;
-    }
-    :host([column]) {
-      flex-direction: column;
-    }
-    :host([reverse][row]) {
-      flex-direction: row-reverse;
-    }
-    :host([reverse][column]) {
-      flex-direction: column-reverse;
-    }
-    :host([inline]) {
-      display: inline-flex;
-    }
-    :host([center]) {
-      align-items: center;
-      justify-content: center;
-    }
-    :host([middle]) {
-      align-items: center;
-    }
-    :host([spread]) {
-      justify-content: space-between;
-    }
-    :host([start]) {
-      justify-content: flex-start;
-      align-items: flex-start;
-    }
-    :host([end]) {
-      justify-content: flex-end;
-      align-items: flex-end;
-    }
-    :host([ai="flex-start"]) {
-      align-items: flex-start;
-    }
-    :host([ai="flex-end"]) {
-      align-items: flex-end;
-    }
-    :host([ai="center"]) {
-      align-items: center;
-    }
-    :host([ai="baseline"]) {
-      align-items: baseline;
-    }
-    :host([ai="stretch"]) {
-      align-items: stretch;
-    }
-    :host([jc="flex-start"]) {
-      justify-content: flex-start;
-    }
-    :host([jc="flex-end"]) {
-      justify-content: flex-end;
-    }
-    :host([jc="center"]) {
-      justify-content: center;
-    }
-    :host([jc="space-between"]) {
-      justify-content: space-between;
-    }
-    :host([jc="space-around"]) {
-      justify-content: space-around;
-    }
-    :host([jc="space-evenly"]) {
-      justify-content: space-evenly;
-    }
-    :host([jc="start"]) {
-      justify-content: flex-start;
-    }
-    :host([jc="end"]) {
-      justify-content: flex-end;
-    }
-    :host([ac="start"]) {
-      align-content: flex-start;
-    }
-    :host([ac="end"]) {
-      align-content: flex-end;
-    }
-    :host([ac="center"]) {
-      align-content: center;
-    }
-    :host([ac="space-between"]) {
-      align-content: space-between;
-    }
-    :host([ac="space-around"]) {
-      align-content: space-around;
-    }
-    :host([ac="space-evenly"]) {
-      align-content: space-evenly;
-    }
-    :host([ac="stretch"]) {
-      align-content: stretch;
-    }
-    :host {
-      box-sizing: border-box;
-      display: var(
-        --flex-container-display,
-        ${(0,n.unsafeCSS)(i.defaultProps.display)}
-      );
-      flex-direction: var(
-        --flex-container-direction,
-        ${(0,n.unsafeCSS)(i.defaultProps.reverse?i.defaultProps.mode+"-reverse":i.defaultProps.mode)}
-      );
-      gap: var(
-        --flex-container-gap,
-        ${(0,n.unsafeCSS)(i.defaultProps.gap)}
-      );
-      flex-wrap: var(
-        --flex-container-wrap,
-        ${(0,n.unsafeCSS)(i.defaultProps.wrap?"wrap":"nowrap")}
-      );
-      justify-content: var(
-        --flex-container-justify-content,
-        ${(0,n.unsafeCSS)(i.defaultProps.justifyContent)}
-      );
-      align-items: var(
-        --flex-container-align-items,
-        ${(0,n.unsafeCSS)(i.defaultProps.alignItems)}
-      );
-      align-content: var(
-        --flex-container-align-content,
-        ${(0,n.unsafeCSS)(i.defaultProps.alignContent)}
-      );
-    }
-
-    :host ::slotted(*) {
-      --flex-container-display: ${(0,n.unsafeCSS)(i.defaultProps.display)};
-      --flex-container-wrap: ${(0,n.unsafeCSS)(i.defaultProps.wrap?"wrap":"nowrap")};
-      --flex-container-justify-content: ${(0,n.unsafeCSS)(i.defaultProps.justifyContent)};
-      --flex-container-align-items: ${(0,n.unsafeCSS)(i.defaultProps.alignItems)};
-      --flex-container-align-content: ${(0,n.unsafeCSS)(i.defaultProps.alignContent)};
-      --flex-container-gap: ${(0,n.unsafeCSS)(i.defaultProps.gap)};
-    }
-
-    :host([fill]) ::slotted(flex-cell:not([priority])) {
-      flex: 1 1 auto;
-    }
-    :host([fit]) ::slotted(flex-cell:not([priority])) {
-      flex: 1;
-    }
-    :host([snug]) ::slotted(flex-cell:not([priority])) {
-      flex: 0;
-    }
-  `,r([(0,l.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],a.prototype,"row",void 0),r([(0,l.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],a.prototype,"column",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"gap",void 0),a=i=r([(0,l.customElement)("flex-container")],a),e.FlexContainer=a},580:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexGrid=void 0;const o=s(62),n=s(595);let l=class extends o.LitElement{constructor(){super(...arguments),this.gap=null}render(){return this.gap&&this.style.setProperty("--flex-grid-gap",this.gap),o.html`<slot></slot>`}};l.styles=o.css`
-    :host {
-      box-sizing: border-box;
       display: block;
       overflow: hidden;
-      padding: var(--flex-grid-gap, 0);
+      padding: var(--f-g-gap, 0);
     }
@@ -396,8 +402,12 @@ :host([flex]) {
     }
-    :host ::slotted(flex-container) {
-      --flex-grid-padding: var(--flex-grid-gap);
+
+    :host([compact]) {
+      padding: 0;
     }
-    :host ::slotted(flex-container) {
-      margin: calc(-1 * var(--flex-grid-gap));
+    :host ::slotted(*) {
+      --f-g-pd: var(--f-g-gap);
     }
-  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],l.prototype,"gap",void 0),l=i([(0,n.customElement)("flex-grid")],l),e.FlexGrid=l},929:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0}),s(858),s(472),s(627),s(580),s(517)},701:(t,e,s)=>{s.r(e)},595:(t,e,s)=>{s.r(e),s.d(e,{customElement:()=>i,eventOptions:()=>a,property:()=>o,query:()=>h,queryAll:()=>d,queryAssignedElements:()=>f,queryAssignedNodes:()=>v,queryAsync:()=>c,state:()=>n});const i=t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:s,elements:i}=e;return{kind:s,elements:i,finisher(e){customElements.define(t,e)}}})(t,e),r=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(s){s.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(s){s.createProperty(e.key,t)}};function o(t){return(e,s)=>void 0!==s?((t,e,s)=>{e.constructor.createProperty(s,t)})(t,e,s):r(t,e)}function n(t){return o({...t,state:!0})}const l=({finisher:t,descriptor:e})=>(s,i)=>{var r;if(void 0===i){const i=null!==(r=s.originalKey)&&void 0!==r?r:s.key,o=null!=e?{kind:"method",placement:"prototype",key:i,descriptor:e(s.key)}:{...s,key:i};return null!=t&&(o.finisher=function(e){t(e,i)}),o}{const r=s.constructor;void 0!==e&&Object.defineProperty(s,i,e(i)),null==t||t(r,i)}};function a(t){return l({finisher:(e,s)=>{Object.assign(e.prototype[s],t)}})}function h(t,e){return l({descriptor:s=>{const i={get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null},enumerable:!0,configurable:!0};if(e){const e="symbol"==typeof s?Symbol():"__"+s;i.get=function(){var s,i;return void 0===this[e]&&(this[e]=null!==(i=null===(s=this.renderRoot)||void 0===s?void 0:s.querySelector(t))&&void 0!==i?i:null),this[e]}}return i}})}function d(t){return l({descriptor:e=>({get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelectorAll(t))&&void 0!==s?s:[]},enumerable:!0,configurable:!0})})}function c(t){return l({descriptor:e=>({async get(){var e;return await this.updateComplete,null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t)},enumerable:!0,configurable:!0})})}var u;const p=null!=(null===(u=window.HTMLSlotElement)||void 0===u?void 0:u.prototype.assignedElements)?(t,e)=>t.assignedElements(e):(t,e)=>t.assignedNodes(e).filter((t=>t.nodeType===Node.ELEMENT_NODE));function f(t){const{slot:e,selector:s}=null!=t?t:{};return l({descriptor:i=>({get(){var i;const r="slot"+(e?`[name=${e}]`:":not([name])"),o=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(r),n=null!=o?p(o,t):[];return s?n.filter((t=>t.matches(s))):n},enumerable:!0,configurable:!0})})}function v(t,e,s){let i,r=t;return"object"==typeof t?(r=t.slot,i=t):i={flatten:e},s?f({slot:r,flatten:e,selector:s}):l({descriptor:t=>({get(){var t,e;const s="slot"+(r?`[name=${r}]`:":not([name])"),o=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(s);return null!==(e=null==o?void 0:o.assignedNodes(i))&&void 0!==e?e:[]},enumerable:!0,configurable:!0})})}},62:(t,e,s)=>{s.r(e),s.d(e,{CSSResult:()=>l,LitElement:()=>ut,ReactiveElement:()=>$,UpdatingElement:()=>ct,_$LE:()=>ft,_$LH:()=>nt,adoptStyles:()=>d,css:()=>h,defaultConverter:()=>g,getCompatibleStyle:()=>c,html:()=>q,isServer:()=>vt,noChange:()=>V,notEqual:()=>m,nothing:()=>W,render:()=>at,supportsAdoptingStyleSheets:()=>r,svg:()=>F,unsafeCSS:()=>a});const i=window,r=i.ShadowRoot&&(void 0===i.ShadyCSS||i.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),n=new WeakMap;class l{constructor(t,e,s){if(this._$cssResult$=!0,s!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(r&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}}const a=t=>new l("string"==typeof t?t:t+"",void 0,o),h=(t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1]),t[0]);return new l(s,t,o)},d=(t,e)=>{r?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const s=document.createElement("style"),r=i.litNonce;void 0!==r&&s.setAttribute("nonce",r),s.textContent=e.cssText,t.appendChild(s)}))},c=r?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return a(e)})(t):t;var u;const p=window,f=p.trustedTypes,v=f?f.emptyScript:"",y=p.reactiveElementPolyfillSupport,g={toAttribute(t,e){switch(e){case Boolean:t=t?v:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},m=(t,e)=>e!==t&&(e==e||t==t),x={attribute:!0,type:String,converter:g,reflect:!1,hasChanged:m};class $ extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const i=this._$Ep(s,e);void 0!==i&&(this._$Ev.set(i,s),t.push(i))})),t}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const r=this[t];this[e]=i,this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||x}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(c(t))}else void 0!==t&&e.push(c(t));return e}static _$Ep(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return d(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EO(t,e,s=x){var i;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const o=(void 0!==(null===(i=s.converter)||void 0===i?void 0:i.toAttribute)?s.converter:g).toAttribute(e,s.type);this._$El=t,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$El=null}}_$AK(t,e){var s;const i=this.constructor,r=i._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=i.getPropertyOptions(r),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:g;this._$El=r,this[r]=o.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,s){let i=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||m)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var _;$.finalized=!0,$.elementProperties=new Map,$.elementStyles=[],$.shadowRootOptions={mode:"open"},null==y||y({ReactiveElement:$}),(null!==(u=p.reactiveElementVersions)&&void 0!==u?u:p.reactiveElementVersions=[]).push("1.6.1");const b=window,S=b.trustedTypes,w=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,A="$lit$",E=`lit$${(Math.random()+"").slice(9)}$`,C="?"+E,P=`<${C}>`,j=document,k=()=>j.createComment(""),R=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,N=t=>O(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),U="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,T=/>/g,L=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),z=/'/g,B=/"/g,D=/^(?:script|style|textarea|title)$/i,I=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),q=I(1),F=I(2),V=Symbol.for("lit-noChange"),W=Symbol.for("lit-nothing"),K=new WeakMap,G=j.createTreeWalker(j,129,null,!1),J=(t,e)=>{const s=t.length-1,i=[];let r,o=2===e?"<svg>":"",n=H;for(let e=0;e<s;e++){const s=t[e];let l,a,h=-1,d=0;for(;d<s.length&&(n.lastIndex=d,a=n.exec(s),null!==a);)d=n.lastIndex,n===H?"!--"===a[1]?n=M:void 0!==a[1]?n=T:void 0!==a[2]?(D.test(a[2])&&(r=RegExp("</"+a[2],"g")),n=L):void 0!==a[3]&&(n=L):n===L?">"===a[0]?(n=null!=r?r:H,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?L:'"'===a[3]?B:z):n===B||n===z?n=L:n===M||n===T?n=H:(n=L,r=void 0);const c=n===L&&t[e+1].startsWith("/>")?" ":"";o+=n===H?s+P:h>=0?(i.push(l),s.slice(0,h)+A+s.slice(h)+E+c):s+E+(-2===h?(i.push(void 0),e):c)}const l=o+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==w?w.createHTML(l):l,i]};class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,o=0;const n=t.length-1,l=this.parts,[a,h]=J(t,e);if(this.el=Z.createElement(a,s),G.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=G.nextNode())&&l.length<n;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith(A)||e.startsWith(E)){const s=h[o++];if(t.push(e),void 0!==s){const t=i.getAttribute(s.toLowerCase()+A).split(E),e=/([.?@])?(.*)/.exec(s);l.push({type:1,index:r,name:e[2],strings:t,ctor:"."===e[1]?et:"?"===e[1]?it:"@"===e[1]?rt:tt})}else l.push({type:6,index:r})}for(const e of t)i.removeAttribute(e)}if(D.test(i.tagName)){const t=i.textContent.split(E),e=t.length-1;if(e>0){i.textContent=S?S.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],k()),G.nextNode(),l.push({type:2,index:++r});i.append(t[e],k())}}}else if(8===i.nodeType)if(i.data===C)l.push({type:2,index:r});else{let t=-1;for(;-1!==(t=i.data.indexOf(E,t+1));)l.push({type:7,index:r}),t+=E.length-1}r++}}static createElement(t,e){const s=j.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,i){var r,o,n,l;if(e===V)return e;let a=void 0!==i?null===(r=s._$Co)||void 0===r?void 0:r[i]:s._$Cl;const h=R(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(o=null==a?void 0:a._$AO)||void 0===o||o.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,s,i)),void 0!==i?(null!==(n=(l=s)._$Co)&&void 0!==n?n:l._$Co=[])[i]=a:s._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,i)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:s},parts:i}=this._$AD,r=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:j).importNode(s,!0);G.currentNode=r;let o=G.nextNode(),n=0,l=0,a=i[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new Y(o,o.nextSibling,this,t):1===a.type?e=new a.ctor(o,a.name,a.strings,this,t):6===a.type&&(e=new ot(o,this,t)),this._$AV.push(e),a=i[++l]}n!==(null==a?void 0:a.index)&&(o=G.nextNode(),n++)}return G.currentNode=j,r}v(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class Y{constructor(t,e,s,i){var r;this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cp=null===(r=null==i?void 0:i.isConnected)||void 0===r||r}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),R(t)?t===W||null==t||""===t?(this._$AH!==W&&this._$AR(),this._$AH=W):t!==this._$AH&&t!==V&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):N(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==W&&R(this._$AH)?this._$AA.nextSibling.data=t:this.$(j.createTextNode(t)),this._$AH=t}g(t){var e;const{values:s,_$litType$:i}=t,r="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=Z.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===r)this._$AH.v(s);else{const t=new X(r,this),e=t.u(this.options);t.v(s),this.$(e),this._$AH=t}}_$AC(t){let e=K.get(t.strings);return void 0===e&&K.set(t.strings,e=new Z(t)),e}T(t){O(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new Y(this.k(k()),this.k(k()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class tt{constructor(t,e,s,i,r){this.type=1,this._$AH=W,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=W}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const r=this.strings;let o=!1;if(void 0===r)t=Q(this,t,e,0),o=!R(t)||t!==this._$AH&&t!==V,o&&(this._$AH=t);else{const i=t;let n,l;for(t=r[0],n=0;n<r.length-1;n++)l=Q(this,i[s+n],e,n),l===V&&(l=this._$AH[n]),o||(o=!R(l)||l!==this._$AH[n]),l===W?t=W:t!==W&&(t+=(null!=l?l:"")+r[n+1]),this._$AH[n]=l}o&&!i&&this.j(t)}j(t){t===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===W?void 0:t}}const st=S?S.emptyScript:"";class it extends tt{constructor(){super(...arguments),this.type=4}j(t){t&&t!==W?this.element.setAttribute(this.name,st):this.element.removeAttribute(this.name)}}class rt extends tt{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=Q(this,t,e,0))&&void 0!==s?s:W)===V)return;const i=this._$AH,r=t===W&&i!==W||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==W&&(i===W||r);r&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class ot{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt={O:A,P:E,A:C,C:1,M:J,L:X,D:N,R:Q,I:Y,V:tt,H:it,N:rt,U:et,F:ot},lt=b.litHtmlPolyfillSupport;null==lt||lt(Z,Y),(null!==(_=b.litHtmlVersions)&&void 0!==_?_:b.litHtmlVersions=[]).push("2.7.4");const at=(t,e,s)=>{var i,r;const o=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let n=o._$litPart$;if(void 0===n){const t=null!==(r=null==s?void 0:s.renderBefore)&&void 0!==r?r:null;o._$litPart$=n=new Y(e.insertBefore(k(),t),t,void 0,null!=s?s:{})}return n._$AI(t),n};var ht,dt;const ct=$;class ut extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=at(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return V}}ut.finalized=!0,ut._$litElement$=!0,null===(ht=globalThis.litElementHydrateSupport)||void 0===ht||ht.call(globalThis,{LitElement:ut});const pt=globalThis.litElementPolyfillSupport;null==pt||pt({LitElement:ut});const ft={_$AK:(t,e,s)=>{t._$AK(e,s)},_$AL:t=>t._$AL};(null!==(dt=globalThis.litElementVersions)&&void 0!==dt?dt:globalThis.litElementVersions=[]).push("3.3.2");const vt=!1}},e={};function s(i){var r=e[i];if(void 0!==r)return r.exports;var o=e[i]={exports:{}};return t[i].call(o.exports,o,o.exports,s),o.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};s(929),s(701)})();
+    :host ::slotted(*) {
+      margin: calc(-1 * var(--f-g-gap));
+    }
+  `,o([(0,n.property)({type:String,reflect:!0}),i("design:type",String)],l.prototype,"gap",void 0),l=o([(0,n.customElement)("flex-grid")],l),e.FlexGrid=l},929:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0}),s(858),s(732),s(627),s(580)},595:(t,e,s)=>{s.r(e),s.d(e,{customElement:()=>o,eventOptions:()=>a,property:()=>r,query:()=>h,queryAll:()=>d,queryAssignedElements:()=>f,queryAssignedNodes:()=>v,queryAsync:()=>c,state:()=>n});const o=t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:s,elements:o}=e;return{kind:s,elements:o,finisher(e){customElements.define(t,e)}}})(t,e),i=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(s){s.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(s){s.createProperty(e.key,t)}};function r(t){return(e,s)=>void 0!==s?((t,e,s)=>{e.constructor.createProperty(s,t)})(t,e,s):i(t,e)}function n(t){return r({...t,state:!0})}const l=({finisher:t,descriptor:e})=>(s,o)=>{var i;if(void 0===o){const o=null!==(i=s.originalKey)&&void 0!==i?i:s.key,r=null!=e?{kind:"method",placement:"prototype",key:o,descriptor:e(s.key)}:{...s,key:o};return null!=t&&(r.finisher=function(e){t(e,o)}),r}{const i=s.constructor;void 0!==e&&Object.defineProperty(s,o,e(o)),null==t||t(i,o)}};function a(t){return l({finisher:(e,s)=>{Object.assign(e.prototype[s],t)}})}function h(t,e){return l({descriptor:s=>{const o={get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null},enumerable:!0,configurable:!0};if(e){const e="symbol"==typeof s?Symbol():"__"+s;o.get=function(){var s,o;return void 0===this[e]&&(this[e]=null!==(o=null===(s=this.renderRoot)||void 0===s?void 0:s.querySelector(t))&&void 0!==o?o:null),this[e]}}return o}})}function d(t){return l({descriptor:e=>({get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelectorAll(t))&&void 0!==s?s:[]},enumerable:!0,configurable:!0})})}function c(t){return l({descriptor:e=>({async get(){var e;return await this.updateComplete,null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t)},enumerable:!0,configurable:!0})})}var u;const p=null!=(null===(u=window.HTMLSlotElement)||void 0===u?void 0:u.prototype.assignedElements)?(t,e)=>t.assignedElements(e):(t,e)=>t.assignedNodes(e).filter((t=>t.nodeType===Node.ELEMENT_NODE));function f(t){const{slot:e,selector:s}=null!=t?t:{};return l({descriptor:o=>({get(){var o;const i="slot"+(e?`[name=${e}]`:":not([name])"),r=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i),n=null!=r?p(r,t):[];return s?n.filter((t=>t.matches(s))):n},enumerable:!0,configurable:!0})})}function v(t,e,s){let o,i=t;return"object"==typeof t?(i=t.slot,o=t):o={flatten:e},s?f({slot:i,flatten:e,selector:s}):l({descriptor:t=>({get(){var t,e;const s="slot"+(i?`[name=${i}]`:":not([name])"),r=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(s);return null!==(e=null==r?void 0:r.assignedNodes(o))&&void 0!==e?e:[]},enumerable:!0,configurable:!0})})}},62:(t,e,s)=>{s.r(e),s.d(e,{CSSResult:()=>l,LitElement:()=>ut,ReactiveElement:()=>_,UpdatingElement:()=>ct,_$LE:()=>ft,_$LH:()=>nt,adoptStyles:()=>d,css:()=>h,defaultConverter:()=>g,getCompatibleStyle:()=>c,html:()=>q,isServer:()=>vt,noChange:()=>F,notEqual:()=>m,nothing:()=>W,render:()=>at,supportsAdoptingStyleSheets:()=>i,svg:()=>V,unsafeCSS:()=>a});const o=window,i=o.ShadowRoot&&(void 0===o.ShadyCSS||o.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,r=Symbol(),n=new WeakMap;class l{constructor(t,e,s){if(this._$cssResult$=!0,s!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(i&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}}const a=t=>new l("string"==typeof t?t:t+"",void 0,r),h=(t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new l(s,t,r)},d=(t,e)=>{i?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const s=document.createElement("style"),i=o.litNonce;void 0!==i&&s.setAttribute("nonce",i),s.textContent=e.cssText,t.appendChild(s)}))},c=i?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return a(e)})(t):t;var u;const p=window,f=p.trustedTypes,v=f?f.emptyScript:"",y=p.reactiveElementPolyfillSupport,g={toAttribute(t,e){switch(e){case Boolean:t=t?v:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},m=(t,e)=>e!==t&&(e==e||t==t),$={attribute:!0,type:String,converter:g,reflect:!1,hasChanged:m};class _ extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const o=this._$Ep(s,e);void 0!==o&&(this._$Ev.set(o,s),t.push(o))})),t}static createProperty(t,e=$){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,o=this.getPropertyDescriptor(t,s,e);void 0!==o&&Object.defineProperty(this.prototype,t,o)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(o){const i=this[t];this[e]=o,this.requestUpdate(t,i,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||$}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(c(t))}else void 0!==t&&e.push(c(t));return e}static _$Ep(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return d(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EO(t,e,s=$){var o;const i=this.constructor._$Ep(t,s);if(void 0!==i&&!0===s.reflect){const r=(void 0!==(null===(o=s.converter)||void 0===o?void 0:o.toAttribute)?s.converter:g).toAttribute(e,s.type);this._$El=t,null==r?this.removeAttribute(i):this.setAttribute(i,r),this._$El=null}}_$AK(t,e){var s;const o=this.constructor,i=o._$Ev.get(t);if(void 0!==i&&this._$El!==i){const t=o.getPropertyOptions(i),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:g;this._$El=i,this[i]=r.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,s){let o=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||m)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):o=!1),!this.isUpdatePending&&o&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var b;_.finalized=!0,_.elementProperties=new Map,_.elementStyles=[],_.shadowRootOptions={mode:"open"},null==y||y({ReactiveElement:_}),(null!==(u=p.reactiveElementVersions)&&void 0!==u?u:p.reactiveElementVersions=[]).push("1.6.1");const x=window,w=x.trustedTypes,S=w?w.createPolicy("lit-html",{createHTML:t=>t}):void 0,A="$lit$",E=`lit$${(Math.random()+"").slice(9)}$`,P="?"+E,C=`<${P}>`,k=document,j=()=>k.createComment(""),R=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,N=t=>O(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),U="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,T=/>/g,z=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),L=/'/g,B=/"/g,D=/^(?:script|style|textarea|title)$/i,I=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),q=I(1),V=I(2),F=Symbol.for("lit-noChange"),W=Symbol.for("lit-nothing"),K=new WeakMap,G=k.createTreeWalker(k,129,null,!1),J=(t,e)=>{const s=t.length-1,o=[];let i,r=2===e?"<svg>":"",n=H;for(let e=0;e<s;e++){const s=t[e];let l,a,h=-1,d=0;for(;d<s.length&&(n.lastIndex=d,a=n.exec(s),null!==a);)d=n.lastIndex,n===H?"!--"===a[1]?n=M:void 0!==a[1]?n=T:void 0!==a[2]?(D.test(a[2])&&(i=RegExp("</"+a[2],"g")),n=z):void 0!==a[3]&&(n=z):n===z?">"===a[0]?(n=null!=i?i:H,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?z:'"'===a[3]?B:L):n===B||n===L?n=z:n===M||n===T?n=H:(n=z,i=void 0);const c=n===z&&t[e+1].startsWith("/>")?" ":"";r+=n===H?s+C:h>=0?(o.push(l),s.slice(0,h)+A+s.slice(h)+E+c):s+E+(-2===h?(o.push(void 0),e):c)}const l=r+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==S?S.createHTML(l):l,o]};class Z{constructor({strings:t,_$litType$:e},s){let o;this.parts=[];let i=0,r=0;const n=t.length-1,l=this.parts,[a,h]=J(t,e);if(this.el=Z.createElement(a,s),G.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(o=G.nextNode())&&l.length<n;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const e of o.getAttributeNames())if(e.endsWith(A)||e.startsWith(E)){const s=h[r++];if(t.push(e),void 0!==s){const t=o.getAttribute(s.toLowerCase()+A).split(E),e=/([.?@])?(.*)/.exec(s);l.push({type:1,index:i,name:e[2],strings:t,ctor:"."===e[1]?et:"?"===e[1]?ot:"@"===e[1]?it:tt})}else l.push({type:6,index:i})}for(const e of t)o.removeAttribute(e)}if(D.test(o.tagName)){const t=o.textContent.split(E),e=t.length-1;if(e>0){o.textContent=w?w.emptyScript:"";for(let s=0;s<e;s++)o.append(t[s],j()),G.nextNode(),l.push({type:2,index:++i});o.append(t[e],j())}}}else if(8===o.nodeType)if(o.data===P)l.push({type:2,index:i});else{let t=-1;for(;-1!==(t=o.data.indexOf(E,t+1));)l.push({type:7,index:i}),t+=E.length-1}i++}}static createElement(t,e){const s=k.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,o){var i,r,n,l;if(e===F)return e;let a=void 0!==o?null===(i=s._$Co)||void 0===i?void 0:i[o]:s._$Cl;const h=R(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,s,o)),void 0!==o?(null!==(n=(l=s)._$Co)&&void 0!==n?n:l._$Co=[])[o]=a:s._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,o)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:s},parts:o}=this._$AD,i=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:k).importNode(s,!0);G.currentNode=i;let r=G.nextNode(),n=0,l=0,a=o[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new Y(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new rt(r,this,t)),this._$AV.push(e),a=o[++l]}n!==(null==a?void 0:a.index)&&(r=G.nextNode(),n++)}return G.currentNode=k,i}v(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class Y{constructor(t,e,s,o){var i;this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=o,this._$Cp=null===(i=null==o?void 0:o.isConnected)||void 0===i||i}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),R(t)?t===W||null==t||""===t?(this._$AH!==W&&this._$AR(),this._$AH=W):t!==this._$AH&&t!==F&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):N(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==W&&R(this._$AH)?this._$AA.nextSibling.data=t:this.$(k.createTextNode(t)),this._$AH=t}g(t){var e;const{values:s,_$litType$:o}=t,i="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=Z.createElement(o.h,this.options)),o);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===i)this._$AH.v(s);else{const t=new X(i,this),e=t.u(this.options);t.v(s),this.$(e),this._$AH=t}}_$AC(t){let e=K.get(t.strings);return void 0===e&&K.set(t.strings,e=new Z(t)),e}T(t){O(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,o=0;for(const i of t)o===e.length?e.push(s=new Y(this.k(j()),this.k(j()),this,this.options)):s=e[o],s._$AI(i),o++;o<e.length&&(this._$AR(s&&s._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class tt{constructor(t,e,s,o,i){this.type=1,this._$AH=W,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=i,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=W}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,o){const i=this.strings;let r=!1;if(void 0===i)t=Q(this,t,e,0),r=!R(t)||t!==this._$AH&&t!==F,r&&(this._$AH=t);else{const o=t;let n,l;for(t=i[0],n=0;n<i.length-1;n++)l=Q(this,o[s+n],e,n),l===F&&(l=this._$AH[n]),r||(r=!R(l)||l!==this._$AH[n]),l===W?t=W:t!==W&&(t+=(null!=l?l:"")+i[n+1]),this._$AH[n]=l}r&&!o&&this.j(t)}j(t){t===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===W?void 0:t}}const st=w?w.emptyScript:"";class ot extends tt{constructor(){super(...arguments),this.type=4}j(t){t&&t!==W?this.element.setAttribute(this.name,st):this.element.removeAttribute(this.name)}}class it extends tt{constructor(t,e,s,o,i){super(t,e,s,o,i),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=Q(this,t,e,0))&&void 0!==s?s:W)===F)return;const o=this._$AH,i=t===W&&o!==W||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,r=t!==W&&(o===W||i);i&&this.element.removeEventListener(this.name,this,o),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt={O:A,P:E,A:P,C:1,M:J,L:X,D:N,R:Q,I:Y,V:tt,H:ot,N:it,U:et,F:rt},lt=x.litHtmlPolyfillSupport;null==lt||lt(Z,Y),(null!==(b=x.litHtmlVersions)&&void 0!==b?b:x.litHtmlVersions=[]).push("2.7.4");const at=(t,e,s)=>{var o,i;const r=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:e;let n=r._$litPart$;if(void 0===n){const t=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:null;r._$litPart$=n=new Y(e.insertBefore(j(),t),t,void 0,null!=s?s:{})}return n._$AI(t),n};var ht,dt;const ct=_;class ut extends _{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=at(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return F}}ut.finalized=!0,ut._$litElement$=!0,null===(ht=globalThis.litElementHydrateSupport)||void 0===ht||ht.call(globalThis,{LitElement:ut});const pt=globalThis.litElementPolyfillSupport;null==pt||pt({LitElement:ut});const ft={_$AK:(t,e,s)=>{t._$AK(e,s)},_$AL:t=>t._$AL};(null!==(dt=globalThis.litElementVersions)&&void 0!==dt?dt:globalThis.litElementVersions=[]).push("3.3.2");const vt=!1}},e={};function s(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={exports:{}};return t[o].call(r.exports,r,r.exports,s),r.exports}s.d=(t,e)=>{for(var o in e)s.o(e,o)&&!s.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};s(929)})();

dist/full.min.js

 /*! For license information please see full.min.js.LICENSE.txt */
-(()=>{"use strict";var t={858:function(t,e,s){var i,o=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCanvas=void 0;const n=s(62),l=s(595);let a=i=class extends n.LitElement{constructor(){super(...arguments),this.width=null,this.margin=null,this.padding=null}render(){return this.padding&&this.style.setProperty("--flex-canvas-padding",this.padding),this.width&&this.style.setProperty("--flex-canvas-max-width",this.width),this.margin&&this.style.setProperty("--flex-canvas-margin",this.margin),n.html`<slot></slot>`}};a.defaultProps={maxWidth:"1400px",display:"block",margin:"0 auto",padding:"0"},a.styles=n.css`
+(()=>{"use strict";var t={732:function(t,e,s){var i,r=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexBox=void 0;const n=s(62),l=s(595);let h=i=class extends n.LitElement{constructor(){super(...arguments),this.row=null,this.column=null,this.gap=null}get mode(){return this.row||this.column?this.row?"row":"column":i.defaultProps.mode}render(){if(this.gap&&this.style.setProperty("--f-b-gap",this.gap),this.row&&this.column)throw new Error("flex-box cannot be both row and column");return n.html`<slot></slot>`}};h.defaultProps={reverse:!1,display:"flex",mode:"row",wrap:!0,gap:"0",justifyContent:"flex-start",alignItems:"flex-start",alignContent:"flex-start"},h.styles=n.css`
+    :host([nowrap]) {
+      flex-wrap: nowrap;
+    }
+    :host([row]) {
+      flex-direction: row;
+    }
+    :host([column]) {
+      flex-direction: column;
+    }
+    :host([reverse][row]) {
+      flex-direction: row-reverse;
+    }
+    :host([reverse][column]) {
+      flex-direction: column-reverse;
+    }
+    :host([inline]) {
+      display: inline-flex;
+    }
+    :host([center]) {
+      align-items: center;
+      justify-content: center;
+    }
+    :host([middle]) {
+      align-items: center;
+    }
+    :host([spread]) {
+      justify-content: space-between;
+    }
+    :host([stretch]) {
+      align-items: stretch;
+    }
+    :host([start]) {
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+    :host([end]) {
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+    :host([ai="flex-start"]) {
+      align-items: flex-start;
+    }
+    :host([ai="flex-end"]) {
+      align-items: flex-end;
+    }
+    :host([ai="center"]) {
+      align-items: center;
+    }
+    :host([ai="baseline"]) {
+      align-items: baseline;
+    }
+    :host([ai="stretch"]) {
+      align-items: stretch;
+    }
+    :host([jc="flex-start"]) {
+      justify-content: flex-start;
+    }
+    :host([jc="flex-end"]) {
+      justify-content: flex-end;
+    }
+    :host([jc="center"]) {
+      justify-content: center;
+    }
+    :host([jc="space-between"]) {
+      justify-content: space-between;
+    }
+    :host([jc="space-around"]) {
+      justify-content: space-around;
+    }
+    :host([jc="space-evenly"]) {
+      justify-content: space-evenly;
+    }
+    :host([jc="start"]) {
+      justify-content: flex-start;
+    }
+    :host([jc="end"]) {
+      justify-content: flex-end;
+    }
+    :host([ac="start"]) {
+      align-content: flex-start;
+    }
+    :host([ac="end"]) {
+      align-content: flex-end;
+    }
+    :host([ac="center"]) {
+      align-content: center;
+    }
+    :host([ac="space-between"]) {
+      align-content: space-between;
+    }
+    :host([ac="space-around"]) {
+      align-content: space-around;
+    }
+    :host([ac="space-evenly"]) {
+      align-content: space-evenly;
+    }
+    :host([ac="stretch"]) {
+      align-content: stretch;
+    }
     :host {
       box-sizing: border-box;
-      display: var(
-        --flex-canvas-display,
-        ${(0,n.unsafeCSS)(i.defaultProps.display)}
+      display: var(--f-b-db, ${(0,n.unsafeCSS)(i.defaultProps.display)});
+      flex-direction: var(
+        --f-b-dir,
+        ${(0,n.unsafeCSS)(i.defaultProps.reverse?i.defaultProps.mode+"-reverse":i.defaultProps.mode)}
       );
-      margin: var(
-        --flex-canvas-margin,
-        ${(0,n.unsafeCSS)(i.defaultProps.margin)}
+      gap: var(--f-b-gap, ${(0,n.unsafeCSS)(i.defaultProps.gap)});
+      flex-wrap: var(
+        --f-b-wp,
+        ${(0,n.unsafeCSS)(i.defaultProps.wrap?"wrap":"nowrap")}
       );
-      max-width: var(
-        --flex-canvas-max-width,
-        ${(0,n.unsafeCSS)(i.defaultProps.maxWidth)}
+      justify-content: var(
+        --f-b-jc,
+        ${(0,n.unsafeCSS)(i.defaultProps.justifyContent)}
       );
-      padding: var(
-        --flex-canvas-padding,
-        ${(0,n.unsafeCSS)(i.defaultProps.padding)}
+      align-items: var(--f-b-ai, ${(0,n.unsafeCSS)(i.defaultProps.alignItems)});
+      align-content: var(
+        --f-b-ac,
+        ${(0,n.unsafeCSS)(i.defaultProps.alignContent)}
       );
     }
-    :host([flex]) {
-      display: flex;
-    }
 
     :host ::slotted(*) {
-      --flex-canvas-display: ${(0,n.unsafeCSS)(i.defaultProps.display)};
-      --flex-canvas-margin: ${(0,n.unsafeCSS)(i.defaultProps.margin)};
-      --flex-canvas-max-width: ${(0,n.unsafeCSS)(i.defaultProps.maxWidth)};
-      --flex-canvas-padding: ${(0,n.unsafeCSS)(i.defaultProps.padding)};
+      --f-b-dir: ${(0,n.unsafeCSS)(i.defaultProps.reverse?i.defaultProps.mode+"-reverse":i.defaultProps.mode)};
+      --f-b-db: ${(0,n.unsafeCSS)(i.defaultProps.display)};
+      --f-b-wp: ${(0,n.unsafeCSS)(i.defaultProps.wrap?"wrap":"nowrap")};
+      --f-b-jc: ${(0,n.unsafeCSS)(i.defaultProps.justifyContent)};
+      --f-b-ai: ${(0,n.unsafeCSS)(i.defaultProps.alignItems)};
+      --f-b-ac: ${(0,n.unsafeCSS)(i.defaultProps.alignContent)};
+      --f-b-gap: ${(0,n.unsafeCSS)(i.defaultProps.gap)};
     }
-  `,o([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"width",void 0),o([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"margin",void 0),o([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"padding",void 0),a=i=o([(0,l.customElement)("flex-canvas")],a),e.FlexCanvas=a},627:function(t,e,s){var i,o=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCell=void 0;const n=s(62),l=s(595);let a=i=class extends n.LitElement{constructor(){super(...arguments),this.order=null,this.grow=null,this.shrink=null,this.width=null}render(){return this.width&&this.style.setProperty("--flex-cell-basis",this.width),(this.order&&this.order<0||this.order>10)&&this.style.setProperty("--flex-cell-order",this.order.toString()),(this.grow&&this.grow>10||this.grow<0)&&this.style.setProperty("--flex-cell-grow",this.grow.toString()),(this.shrink&&this.shrink>10||this.shrink<0)&&this.style.setProperty("--flex-cell-shrink",this.shrink.toString()),n.html`<slot></slot>`}};a.defaultProps={display:"block"},a.styles=n.css`
+
+    :host([column][stretch]) ::slotted(*) {
+      width: 100%;
+    }
+
+    :host(:not([column])) ::slotted(f-divider:not([h]):not([v])) {
+      min-width: var(--f-vd-w, var(--f-divider-size));
+      width: var(--f-vd-w, var(--f-divider-size));
+      height: var(--f-vd-ops-size, auto);
+      margin: 0 var(--f-divider-m, 0);
+    }
+
+    :host([column]) ::slotted(f-divider:not([h]):not([v])) {
+      min-height: var(--f-divider-h, var(--f-divider-size));
+      height: var(--f-divider-h, var(--f-divider-size));
+      margin: var(--f-divider-m, 0) 0;
+      width: var(--f-vd-ops-size, auto);
+      max-width: var(--f-vd-ops-size, 100%);
+    }
+    
+    :host([column]) ::slotted(f-divider[stretch]:not([h]):not([v])) {
+      width: 100%;
+    }
+
+    :host([fill]) ::slotted(*:not([priority])) {
+      flex: 1 1 auto;
+    }
+    :host([fit]) ::slotted(*:not([priority])) {
+      flex: 1;
+    }
+    :host([snug]) ::slotted(*:not([priority])) {
+      flex: 0;
+    }
+  `,r([(0,l.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],h.prototype,"row",void 0),r([(0,l.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],h.prototype,"column",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],h.prototype,"gap",void 0),h=i=r([(0,l.customElement)("flex-box")],h),e.FlexBox=h},858:function(t,e,s){var i,r=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCanvas=void 0;const n=s(62),l=s(595);let h=i=class extends n.LitElement{constructor(){super(...arguments),this.width=null,this.mg=null,this.pd=null}render(){return this.pd&&this.style.setProperty("--f-cs-pd",this.pd),this.width&&this.style.setProperty("--f-cs-mw",this.width),this.mg&&this.style.setProperty("--f-cs-mg",this.mg),n.html`<slot></slot>`}};h.defaultProps={maxWidth:"1400px",display:"block",margin:"0 auto",padding:"0"},h.styles=n.css`
     :host {
       box-sizing: border-box;
       display: var(
-        --flex-cell-display,
+        --f-cs-db,
         ${(0,n.unsafeCSS)(i.defaultProps.display)}
       );
-      padding: var(--flex-grid-padding, 0);
-      flex-basis: var(--flex-cell-basis, auto);
-      max-width: var(--flex-cell-basis, none);
-      order: var(--flex-cell-order, 0);
-      flex-grow: var(--flex-cell-grow, 0);
-      flex-shrink: var(--flex-cell-shrink, 1);
+      margin: var(--f-cs-mg, ${(0,n.unsafeCSS)(i.defaultProps.margin)});
+      max-width: var(--f-cs-mw, ${(0,n.unsafeCSS)(i.defaultProps.maxWidth)});
+      padding: var(--f-cs-pd, ${(0,n.unsafeCSS)(i.defaultProps.padding)});
     }
+    :host([flex]) {
+      display: flex;
+    }
+
+    :host ::slotted(*) {
+      --f-cs-db: ${(0,n.unsafeCSS)(i.defaultProps.display)};
+      --f-cs-mg: ${(0,n.unsafeCSS)(i.defaultProps.margin)};
+      --f-cs-mw: ${(0,n.unsafeCSS)(i.defaultProps.maxWidth)};
+      --f-cs-pd: ${(0,n.unsafeCSS)(i.defaultProps.padding)};
+    }
+  `,r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],h.prototype,"width",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],h.prototype,"mg",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],h.prototype,"pd",void 0),h=i=r([(0,l.customElement)("flex-canvas")],h),e.FlexCanvas=h},627:function(t,e,s){var i,r=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCell=void 0;const n=s(62),l=s(595);let h=i=class extends n.LitElement{constructor(){super(...arguments),this.order=null,this.grow=null,this.shrink=null,this.width=null}render(){return this.width&&this.style.setProperty("--f-c-b",this.width),(this.order&&this.order<0||this.order>10)&&this.style.setProperty("--f-c-o",this.order.toString()),(this.grow&&this.grow>10||this.grow<0)&&this.style.setProperty("--f-c-g",this.grow.toString()),(this.shrink&&this.shrink>10||this.shrink<0)&&this.style.setProperty("--f-c-sh",this.shrink.toString()),n.html`<slot></slot>`}};h.defaultProps={display:"block"},h.styles=n.css`
+    :host {
+      box-sizing: border-box;
+      display: var(--f-c-db, ${(0,n.unsafeCSS)(i.defaultProps.display)});
+      padding: var(--f-g-pd, 0);
+      flex-basis: var(--f-c-b, auto);
+      max-width: var(--f-c-b, none);
+      order: var(--f-c-o, 0);
+      flex-grow: var(--f-c-g, 0);
+      flex-shrink: var(--f-c-sh, 1);
+    }
     ::slotted(*) {
-      --flex-grid-padding: 0;
-      --flex-cell-display: ${(0,n.unsafeCSS)(i.defaultProps.display)};
-      --flex-cell-basis: auto;
-      --flex-cell-order: 0;
-      --flex-cell-grow: 0;
-      --flex-cell-shrink: 1;
+      --f-g-pd: 0;
+      --f-c-db: ${(0,n.unsafeCSS)(i.defaultProps.display)};
+      --f-c-b: auto;
+      --f-c-o: 0;
+      --f-c-g: 0;
+      --f-c-sh: 1;
     }
@@ -70,2 +223,13 @@ :host(.cell-1) {
     }
+    :host([scrollable]:not([flex])) {
+      flex-grow: 1;
+      overflow: auto;
+    }
+    :host([scrollable][flex]) {
+      min-height: 0;
+      flex-grow: 1;
+    }
+    :host([scrollable][flex]) ::slotted(*) {
+      overflow: auto;
+    }
     :host(.cell-5) {
@@ -226,166 +390,8 @@ flex-basis: 41.6666666667%;
     }
-  `,o([(0,l.property)({type:Number,reflect:!0}),r("design:type",Number)],a.prototype,"order",void 0),o([(0,l.property)({type:Number,reflect:!0}),r("design:type",Number)],a.prototype,"grow",void 0),o([(0,l.property)({type:Number,reflect:!0}),r("design:type",Number)],a.prototype,"shrink",void 0),o([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"width",void 0),a=i=o([(0,l.customElement)("flex-cell")],a),e.FlexCell=a},517:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexCenterBox=void 0;const o=s(62),r=s(595);let n=class extends o.LitElement{render(){return o.html`<div><slot></slot></div>`}};n.styles=o.css`
+  `,r([(0,l.property)({type:Number,reflect:!0}),o("design:type",Number)],h.prototype,"order",void 0),r([(0,l.property)({type:Number,reflect:!0}),o("design:type",Number)],h.prototype,"grow",void 0),r([(0,l.property)({type:Number,reflect:!0}),o("design:type",Number)],h.prototype,"shrink",void 0),r([(0,l.property)({type:String,reflect:!0}),o("design:type",String)],h.prototype,"width",void 0),h=i=r([(0,l.customElement)("flex-cell")],h),e.FlexCell=h},580:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexGrid=void 0;const o=s(62),n=s(595);let l=class extends o.LitElement{constructor(){super(...arguments),this.gap=null}render(){return this.gap&&this.style.setProperty("--f-g-gap",this.gap),o.html`<slot></slot>`}};l.styles=o.css`
     :host {
       box-sizing: border-box;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    :host(.full-height) {
-      min-height: 100vh;
-    }
-  `,n=i([(0,r.customElement)("flex-centerbox")],n),e.FlexCenterBox=n},472:function(t,e,s){var i,o=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexContainer=void 0;const n=s(62),l=s(595);let a=i=class extends n.LitElement{constructor(){super(...arguments),this.row=null,this.column=null,this.gap=null}get mode(){return this.row||this.column?this.row?"row":"column":i.defaultProps.mode}render(){if(this.gap&&this.style.setProperty("--flex-container-gap",this.gap),this.row&&this.column)throw new Error("flex-container cannot be both row and column");return n.html`<slot></slot>`}};a.defaultProps={reverse:!1,display:"flex",mode:"row",wrap:!0,gap:"0",justifyContent:"flex-start",alignItems:"flex-start",alignContent:"flex-start"},a.styles=n.css`
-    :host([nowrap]) {
-      flex-wrap: nowrap;
-    }
-    :host([row]) {
-      flex-direction: row;
-    }
-    :host([column]) {
-      flex-direction: column;
-    }
-    :host([reverse][row]) {
-      flex-direction: row-reverse;
-    }
-    :host([reverse][column]) {
-      flex-direction: column-reverse;
-    }
-    :host([inline]) {
-      display: inline-flex;
-    }
-    :host([center]) {
-      align-items: center;
-      justify-content: center;
-    }
-    :host([middle]) {
-      align-items: center;
-    }
-    :host([spread]) {
-      justify-content: space-between;
-    }
-    :host([start]) {
-      justify-content: flex-start;
-      align-items: flex-start;
-    }
-    :host([end]) {
-      justify-content: flex-end;
-      align-items: flex-end;
-    }
-    :host([ai="flex-start"]) {
-      align-items: flex-start;
-    }
-    :host([ai="flex-end"]) {
-      align-items: flex-end;
-    }
-    :host([ai="center"]) {
-      align-items: center;
-    }
-    :host([ai="baseline"]) {
-      align-items: baseline;
-    }
-    :host([ai="stretch"]) {
-      align-items: stretch;
-    }
-    :host([jc="flex-start"]) {
-      justify-content: flex-start;
-    }
-    :host([jc="flex-end"]) {
-      justify-content: flex-end;
-    }
-    :host([jc="center"]) {
-      justify-content: center;
-    }
-    :host([jc="space-between"]) {
-      justify-content: space-between;
-    }
-    :host([jc="space-around"]) {
-      justify-content: space-around;
-    }
-    :host([jc="space-evenly"]) {
-      justify-content: space-evenly;
-    }
-    :host([jc="start"]) {
-      justify-content: flex-start;
-    }
-    :host([jc="end"]) {
-      justify-content: flex-end;
-    }
-    :host([ac="start"]) {
-      align-content: flex-start;
-    }
-    :host([ac="end"]) {
-      align-content: flex-end;
-    }
-    :host([ac="center"]) {
-      align-content: center;
-    }
-    :host([ac="space-between"]) {
-      align-content: space-between;
-    }
-    :host([ac="space-around"]) {
-      align-content: space-around;
-    }
-    :host([ac="space-evenly"]) {
-      align-content: space-evenly;
-    }
-    :host([ac="stretch"]) {
-      align-content: stretch;
-    }
-    :host {
-      box-sizing: border-box;
-      display: var(
-        --flex-container-display,
-        ${(0,n.unsafeCSS)(i.defaultProps.display)}
-      );
-      flex-direction: var(
-        --flex-container-direction,
-        ${(0,n.unsafeCSS)(i.defaultProps.reverse?i.defaultProps.mode+"-reverse":i.defaultProps.mode)}
-      );
-      gap: var(
-        --flex-container-gap,
-        ${(0,n.unsafeCSS)(i.defaultProps.gap)}
-      );
-      flex-wrap: var(
-        --flex-container-wrap,
-        ${(0,n.unsafeCSS)(i.defaultProps.wrap?"wrap":"nowrap")}
-      );
-      justify-content: var(
-        --flex-container-justify-content,
-        ${(0,n.unsafeCSS)(i.defaultProps.justifyContent)}
-      );
-      align-items: var(
-        --flex-container-align-items,
-        ${(0,n.unsafeCSS)(i.defaultProps.alignItems)}
-      );
-      align-content: var(
-        --flex-container-align-content,
-        ${(0,n.unsafeCSS)(i.defaultProps.alignContent)}
-      );
-    }
-
-    :host ::slotted(*) {
-      --flex-container-display: ${(0,n.unsafeCSS)(i.defaultProps.display)};
-      --flex-container-wrap: ${(0,n.unsafeCSS)(i.defaultProps.wrap?"wrap":"nowrap")};
-      --flex-container-justify-content: ${(0,n.unsafeCSS)(i.defaultProps.justifyContent)};
-      --flex-container-align-items: ${(0,n.unsafeCSS)(i.defaultProps.alignItems)};
-      --flex-container-align-content: ${(0,n.unsafeCSS)(i.defaultProps.alignContent)};
-      --flex-container-gap: ${(0,n.unsafeCSS)(i.defaultProps.gap)};
-    }
-
-    :host([fill]) ::slotted(flex-cell:not([priority])) {
-      flex: 1 1 auto;
-    }
-    :host([fit]) ::slotted(flex-cell:not([priority])) {
-      flex: 1;
-    }
-    :host([snug]) ::slotted(flex-cell:not([priority])) {
-      flex: 0;
-    }
-  `,o([(0,l.property)({type:Boolean,reflect:!0}),r("design:type",Boolean)],a.prototype,"row",void 0),o([(0,l.property)({type:Boolean,reflect:!0}),r("design:type",Boolean)],a.prototype,"column",void 0),o([(0,l.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"gap",void 0),a=i=o([(0,l.customElement)("flex-container")],a),e.FlexContainer=a},580:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexGrid=void 0;const r=s(62),n=s(595);let l=class extends r.LitElement{constructor(){super(...arguments),this.gap=null}render(){return this.gap&&this.style.setProperty("--flex-grid-gap",this.gap),r.html`<slot></slot>`}};l.styles=r.css`
-    :host {
-      box-sizing: border-box;
       display: block;
       overflow: hidden;
-      padding: var(--flex-grid-gap, 0);
+      padding: var(--f-g-gap, 0);
     }
@@ -395,9 +401,13 @@ :host([flex]) {
     }
-    :host ::slotted(flex-container) {
-      --flex-grid-padding: var(--flex-grid-gap);
+
+    :host([compact]) {
+      padding: 0;
     }
-    :host ::slotted(flex-container) {
-      margin: calc(-1 * var(--flex-grid-gap));
+    :host ::slotted(*) {
+      --f-g-pd: var(--f-g-gap);
     }
-  `,i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],l.prototype,"gap",void 0),l=i([(0,n.customElement)("flex-grid")],l),e.FlexGrid=l},929:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0}),s(858),s(472),s(627),s(580),s(517)},506:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexMediaBox=void 0;const r=s(62),n=s(595);s(222);let l=class extends r.LitElement{constructor(){super(...arguments),this._targetEl=null,this._resizeListener=null,this.breakpoints=null,this.target=null,this.sizes=null}connectedCallback(){super.connectedCallback(),this._targetEl=this.getTargetElement(),this._targetEl instanceof Window?(window.addEventListener("resize",(t=>{this.onResize(t.target.innerWidth)})),this.onResize(window.innerWidth)):(this._targetEl.startResizeListener(),this._resizeListener=t=>{this.onResize(t.detail.width)},this._targetEl.addEventListener("resize",this._resizeListener))}onResize(t){this.setMedia(t)}getTargetElement(){return"window"===this.target?window:this.target?document.querySelector(this.target):this}disconnectedCallback(){super.disconnectedCallback(),this._targetEl&&this._targetEl instanceof HTMLElement?this._targetEl.stopResizeListener():this._resizeListener&&window.removeEventListener("resize",this._resizeListener)}getMediaString(){if(!this.breakpoints)return null;if(!/^(\d+\s*,\s*)*\d+$/.test(this.breakpoints))throw new Error("Invalid breakpoints string, must be comma separated list of numbers");let t=["xs","sm","md","lg","xl","xxl"];const e=this.breakpoints.split(",").map((t=>parseInt(t.trim())));e.unshift(0),e.length>t.length&&console.error("Too many breakpoints defined, max is "+(t.length-1)+" from sm to xxl");let s=[];for(let i=0;i<e.length;i++)s.push({width:e[i],mode:t[i]});return s}setMedia(t){let e=this.getMediaString();if(e){let s=[];for(let i=0;i<e.length;i++){let{width:o,mode:r}=e[i];if(!(t>=o))break;s.push(r)}if(s.length){let t=s.map((t=>`[${t}]`)).join("");this.sizes=t}}}render(){return r.html`<slot></slot>`}};l.styles=r.css`
+    :host ::slotted(*) {
+      margin: calc(-1 * var(--f-g-gap));
+    }
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],l.prototype,"gap",void 0),l=i([(0,n.customElement)("flex-grid")],l),e.FlexGrid=l},929:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0}),s(858),s(732),s(627),s(580)},506:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.FlexMediaBox=void 0;const o=s(62),n=s(595);s(222);let l=class extends o.LitElement{constructor(){super(...arguments),this._targetEl=null,this._resizeListener=null,this.breakpoints=null,this.target=null,this.sizes=null}connectedCallback(){super.connectedCallback(),this._targetEl=this.getTargetElement(),this._targetEl instanceof Window?(window.addEventListener("resize",(t=>{this.onResize(t.target.innerWidth)})),this.onResize(window.innerWidth)):(this._targetEl.startResizeListener(),this._resizeListener=t=>{this.onResize(t.detail.width)},this._targetEl.addEventListener("resize",this._resizeListener))}onResize(t){this.setMedia(t)}getTargetElement(){return"window"===this.target?window:this.target?document.querySelector(this.target):this}disconnectedCallback(){super.disconnectedCallback(),this._targetEl&&this._targetEl instanceof HTMLElement?this._targetEl.stopResizeListener():this._resizeListener&&window.removeEventListener("resize",this._resizeListener)}getMediaString(){if(!this.breakpoints)return null;if(!/^(\d+\s*,\s*)*\d+$/.test(this.breakpoints))throw new Error("Invalid breakpoints string, must be comma separated list of numbers");let t=["xs","sm","md","lg","xl","xxl"];const e=this.breakpoints.split(",").map((t=>parseInt(t.trim())));e.unshift(0),e.length>t.length&&console.error("Too many breakpoints defined, max is "+(t.length-1)+" from sm to xxl");let s=[];for(let i=0;i<e.length;i++)s.push({width:e[i],mode:t[i]});return s}setMedia(t){let e=this.getMediaString();if(e){let s=[];for(let i=0;i<e.length;i++){let{width:r,mode:o}=e[i];if(!(t>=r))break;s.push(o)}if(s.length){let t=s.map((t=>`[${t}]`)).join("");this.sizes=t}}}render(){return o.html`<slot></slot>`}};l.styles=o.css`
     :host {
@@ -407,3 +417,3 @@ box-sizing: border-box;
     }
-  `,i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],l.prototype,"breakpoints",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],l.prototype,"target",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],l.prototype,"sizes",void 0),l=i([(0,n.customElement)("flex-mediabox")],l),e.FlexMediaBox=l},352:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.SpaceBox=e.AspectRatio=e.FillConainer=e.FitConainer=e.StackedItem=e.StackedContainer=void 0;const r=s(62),n=s(595);let l=class extends r.LitElement{render(){return r.html` <slot></slot> `}};l.styles=r.css`
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],l.prototype,"breakpoints",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],l.prototype,"target",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],l.prototype,"sizes",void 0),l=i([(0,n.customElement)("flex-media")],l),e.FlexMediaBox=l},352:function(t,e,s){var i=this&&this.__decorate||function(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n},r=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0}),e.StyleBox=e.SpaceBox=e.FlexDivider=e.AspectRatio=e.FitBox=e.StackedCell=e.StackedBox=void 0;const o=s(62),n=s(595);let l=class extends o.LitElement{render(){return o.html` <slot></slot> `}};l.styles=o.css`
     :host {
@@ -422,11 +432,11 @@ display: block;
     }
-  `,l=i([(0,n.customElement)("stacked-container")],l),e.StackedContainer=l;let a=class extends r.LitElement{constructor(){super(...arguments),this.xa=null,this.xb=null,this.ya=null,this.yb=null,this.z=null}render(){return this.xa&&this.style.setProperty("--stacked-item-start",this.xa),this.xb&&this.style.setProperty("--stacked-item-end",this.xb),this.ya&&this.style.setProperty("--stacked-item-top",this.ya),this.yb&&this.style.setProperty("--stacked-item-bottom",this.yb),this.z&&this.style.setProperty("--stacked-item-z-index",this.z),r.html`<slot></slot>`}};a.styles=r.css`
+  `,l=i([(0,n.customElement)("stacked-box")],l),e.StackedBox=l;let h=class extends o.LitElement{constructor(){super(...arguments),this.xa=null,this.xb=null,this.ya=null,this.yb=null,this.z=null,this.oc=null}render(){return this.oc&&this.style.setProperty("--f-sc-oc",this.oc),this.xa&&this.style.setProperty("--f-sc-s",this.xa),this.xb&&this.style.setProperty("--f-sc-e",this.xb),this.ya&&this.style.setProperty("--f-sc-t",this.ya),this.yb&&this.style.setProperty("--f-sc-b",this.yb),this.z&&this.style.setProperty("--f-sc-z",this.z),o.html`<slot></slot>`}};h.styles=o.css`
     :host {
       position: absolute;
       box-sizing: border-box;
-      inset-inline-start: var(--stacked-item-start, auto);
-      inset-inline-end: var(--stacked-item-end, auto);
-      inset-block-start: var(--stacked-item-top, auto);
-      inset-block-end: var(--stacked-item-bottom, auto);
-      z-index: var(--stacked-item-z-index, auto);
+      inset-inline-start: var(--f-sc-s, auto);
+      inset-inline-end: var(--f-sc-e, auto);
+      inset-block-start: var(--f-sc-t, auto);
+      inset-block-end: var(--f-sc-b, auto);
+      z-index: var(--f-sc-z, auto);
     }
@@ -438,32 +448,23 @@ :host([rel]) {
     :host ::slotted(*) {
-      --stacked-item-start: auto;
-      --stacked-item-end: auto;
-      --stacked-item-top: auto;
-      --stacked-item-bottom: auto;
-      --stacked-item-z-index: auto;
+      --f-sc-s: auto;
+      --f-sc-e: auto;
+      --f-sc-t: auto;
+      --f-sc-b: auto;
+      --f-sc-z: auto;
     }
 
+    :host([overlay]) {
+      background: var(--f-sc-oc, rgba(0, 0, 0, 0.5));
+    }
+
     :host([stretch]) {
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      inset-block-start: 0;
-      inset-block-end: 0;
+      inset: 0;
     }
-  `,i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"xa",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"xb",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"ya",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"yb",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],a.prototype,"z",void 0),a=i([(0,n.customElement)("stacked-item")],a),e.StackedItem=a;let h=class extends r.LitElement{render(){return r.html` <slot></slot> `}};h.styles=r.css`
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],h.prototype,"xa",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],h.prototype,"xb",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],h.prototype,"ya",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],h.prototype,"yb",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],h.prototype,"z",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],h.prototype,"oc",void 0),h=i([(0,n.customElement)("stacked-cell")],h),e.StackedCell=h;let a=class extends o.LitElement{constructor(){super(...arguments),this.width=null,this.height=null}render(){return this.width&&this.style.setProperty("--f-fb-w",this.width),this.height&&this.style.setProperty("--f-fb-h",this.height),o.html`<slot></slot>`}};a.styles=o.css`
     :host {
       display: block;
-      width: 100%;
-      height: 100%;
       box-sizing: border-box;
-    }
-    :host([flex]) {
-      display: flex;
-    }
-  `,h=i([(0,n.customElement)("fit-container")],h),e.FitConainer=h;let d=class extends r.LitElement{constructor(){super(...arguments),this.width=null,this.height=null}render(){return this.width&&this.style.setProperty("--fill-container-width",this.width),this.height&&this.style.setProperty("--fill-container-height",this.height),r.html`<slot></slot>`}};d.styles=r.css`
-    :host {
-      display: block;
-      box-sizing: border-box;
       position: relative;
-      width: var(--fill-container-width, 100%);
-      height: var(--fill-container-height, auto);
+      width: var(--f-fb-w, 100%);
+      height: var(--f-fb-h, auto);
     }
@@ -476,3 +477,10 @@ :host([flex]) {
       height: 100%;
+      flex-grow: 1;
     }
+    :host([crop]) {
+      overflow: hidden;
+    }
+    :host([scrollable]) {
+      overflow: auto;
+    }
     :host([center]) {
@@ -483,37 +491,39 @@ display: flex;
     }
-    :host ::slotted(*) {
+    :host([fill]) ::slotted(*) {
       width: 100%;
       height: 100%;
-      --fill-container-width: 100%;
-      --fill-container-height: auto;
+      --f-fb-w: 100%;
+      --f-fb-h: auto;
     }
-    :host ::slotted(img) {
-      object-fit: contain;
+    :host([round]) {
+      overflow: hidden;
+      border-radius: 50%;
+    }
+    :host([cover]) ::slotted(img) {
+      object-fit: cover;
       object-position: center;
+    }
+    :host([contain]) ::slotted(img) {
+      width: auto;
       height: auto;
-      width: auto;
       max-width: 100%;
       max-height: 100%;
+      object-fit: contain;
     }
-    :host([cover]) ::slotted(img) {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
+    :host([stretch][force]) {
+      width: 100% !important;
+      height: 100% !important;
     }
-    :host([round]) {
-      overflow: hidden;
-      border-radius: 50%;
+    :host([force][fill]) ::slotted(*) {
+      width: 100% !important;
+      height: 100% !important;
+      display: block !important;
     }
-    :host([round]) ::slotted(img) {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  `,i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],d.prototype,"width",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],d.prototype,"height",void 0),d=i([(0,n.customElement)("fill-container")],d),e.FillConainer=d;let c=class extends r.LitElement{constructor(){super(...arguments),this.center=!0,this.ratio=null}render(){return r.html`<slot></slot>`}};c.defaultProps={display:"flex"},c.styles=r.css`
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"width",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],a.prototype,"height",void 0),a=i([(0,n.customElement)("fit-box")],a),e.FitBox=a;let d=class extends o.LitElement{constructor(){super(...arguments),this.center=!0,this.ratio=null}render(){return o.html`<slot></slot>`}};d.defaultProps={display:"flex"},d.styles=o.css`
     :host {
       box-sizing: border-box;
-      aspect-ratio: var(--aspect-ratio, auto);
+      aspect-ratio: var(--f-ar-v, auto);
     }
     :host ::slotted(*) {
-      --aspect-ratio: auto;
+      --f-ar-v: auto;
     }
@@ -535,68 +545,189 @@ :host([fit]) ::slotted(*) {
     :host([ratio="1/1"]) {
-      --aspect-ratio: 1/1;
+      --f-ar-v: 1/1;
     }
     :host([ratio="4/3"]) {
-      --aspect-ratio: 4/3;
+      --f-ar-v: 4/3;
     }
     :host([ratio="16/9"]) {
-      --aspect-ratio: 16/9;
+      --f-ar-v: 16/9;
     }
     :host([ratio="21/9"]) {
-      --aspect-ratio: 21/9;
+      --f-ar-v: 21/9;
     }
     :host([ratio="3/4"]) {
-      --aspect-ratio: 3/4;
+      --f-ar-v: 3/4;
     }
     :host([ratio="9/16"]) {
-      --aspect-ratio: 9/16;
+      --f-ar-v: 9/16;
     }
     :host([ratio="9/21"]) {
-      --aspect-ratio: 9/21;
+      --f-ar-v: 9/21;
     }
     :host([ratio="1/2"]) {
-      --aspect-ratio: 1/2;
+      --f-ar-v: 1/2;
     }
     :host([ratio="2/1"]) {
-      --aspect-ratio: 2/1;
+      --f-ar-v: 2/1;
     }
     :host([ratio="1/3"]) {
-      --aspect-ratio: 1/3;
+      --f-ar-v: 1/3;
     }
     :host([ratio="3/1"]) {
-      --aspect-ratio: 3/1;
+      --f-ar-v: 3/1;
     }
     :host([ratio="1/4"]) {
-      --aspect-ratio: 1/4;
+      --f-ar-v: 1/4;
     }
     :host([ratio="4/1"]) {
-      --aspect-ratio: 4/1;
+      --f-ar-v: 4/1;
     }
     :host([ratio="1/5"]) {
-      --aspect-ratio: 1/5;
+      --f-ar-v: 1/5;
     }
     :host([ratio="5/1"]) {
-      --aspect-ratio: 5/1;
+      --f-ar-v: 5/1;
     }
     :host([ratio="1/6"]) {
-      --aspect-ratio: 1/6;
+      --f-ar-v: 1/6;
     }
     :host([ratio="6/1"]) {
-      --aspect-ratio: 6/1;
+      --f-ar-v: 6/1;
     }
-  `,i([(0,n.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],c.prototype,"center",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],c.prototype,"ratio",void 0),c=i([(0,n.customElement)("aspect-ratio")],c),e.AspectRatio=c;let p=class extends r.LitElement{constructor(){super(...arguments),this.width=null,this.height=null,this.pd=null,this.mg=null}render(){return this.width&&this.style.setProperty("--space-box-width",this.width),this.height&&this.style.setProperty("--space-box-height",this.height),this.pd&&this.style.setProperty("--space-box-padding",this.pd),this.mg&&this.style.setProperty("--space-box-margin",this.mg),r.html`<slot></slot>`}};p.styles=r.css`
+  `,i([(0,n.property)({type:Boolean,reflect:!0}),r("design:type",Boolean)],d.prototype,"center",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],d.prototype,"ratio",void 0),d=i([(0,n.customElement)("a-ratio")],d),e.AspectRatio=d;let p=class extends o.LitElement{constructor(){super(...arguments),this.mg=null,this.width=null,this.color=null,this.size=null}render(){return this.size&&this.style.setProperty("--f-vd-ops-size",this.size),this.color&&this.style.setProperty("--f-divider-bg",this.color),this.width&&this.style.setProperty("--f-divider-size",this.width),this.mg&&this.style.setProperty("--f-divider-m",this.mg),o.html``}};p.styles=o.css`
     :host {
+      --f-divider-size: 1px;
+      --f-divider-bg-dark: rgba(255, 255, 255, 0.12);
+      --f-divider-bg-light: rgba(0, 0, 0, 0.12);
       box-sizing: border-box;
+      display: var(--f-divider-db, block);
+      align-self: center;
+    }
+    :host([v]) {
+      min-width: var(--f-vd-w, var(--f-divider-size));
+      width: var(--f-vd-w, var(--f-divider-size));
+      height: var(--f-vd-ops-size, auto);
+      margin: 0 var(--f-divider-m, 0);
+    }
+
+    :host([h]) {
+      min-height: var(--f-divider-h, var(--f-divider-size));
+      height: var(--f-divider-h, var(--f-divider-size));
+      margin: var(--f-divider-m, 0) 0;
+      width: var(--f-vd-ops-size, auto);
+      max-width: var(--f-vd-ops-size, 100%);
+    }
+    :host([stretch][h]) {
+      width: 100%;
+    }
+    :host([stretch]) {
+      align-self: stretch;
+    }
+
+    :host([dark]) {
+      background-color: var(
+        --f-divider-bg,
+        var(--f-divider-fallback-bg-dark, var(--f-divider-bg-dark))
+      );
+    }
+    :host(:not([dark])) {
+      background-color: var(
+        --f-divider-bg,
+        var(--f-divider-fallback-bg-light, var(--f-divider-bg-light))
+      );
+    }
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],p.prototype,"mg",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],p.prototype,"width",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],p.prototype,"color",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],p.prototype,"size",void 0),p=i([(0,n.customElement)("flex-divider")],p),e.FlexDivider=p;let c=class extends o.LitElement{constructor(){super(...arguments),this.width=null,this.height=null,this.size=null}render(){return this.width&&this.style.setProperty("--f-sbx-w",this.width),this.height&&this.style.setProperty("--f-sbx-h",this.height),this.size&&(this.style.setProperty("--f-sbx-w",this.size),this.style.setProperty("--f-sbx-h",this.size)),o.html``}};c.styles=o.css`
+    :host {
+      box-sizing: border-box;
+      display: var(--f-sbx-db, block);
+      width: var(--f-sbx-w, 100%);
+      height: var(--f-sbx-h, auto);
+    }
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],c.prototype,"width",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],c.prototype,"height",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],c.prototype,"size",void 0),c=i([(0,n.customElement)("space-box")],c),e.SpaceBox=c;let f=class extends o.LitElement{constructor(){super(...arguments),this.fz=null,this.fw=null,this.lh=null,this.w=null,this.h=null,this.mw=null,this.mxw=null,this.mh=null,this.tt=null,this.mxh=null,this.pis=null,this.pie=null,this.pbs=null,this.pbe=null,this.mbs=null,this.mbe=null,this.mis=null,this.mie=null,this.mg=null,this.pd=null,this.ta=null,this.op=null,this.td=null,this.br=null,this.px=null,this.py=null,this.mx=null,this.my=null}render(){return this.pd&&this.style.setProperty("--f-sb-pd-gb",this.pd),this.mg&&this.style.setProperty("--f-sb-mg-gb",this.mg),this.px&&(this.style.setProperty("--f-sb-pis",this.px),this.style.setProperty("--f-sb-pie",this.px)),this.py&&(this.style.setProperty("--f-sb-pbs",this.py),this.style.setProperty("--f-sb-pbe",this.py)),this.mx&&(this.style.setProperty("--f-sb-mis",this.mx),this.style.setProperty("--f-sb-mie",this.mx)),this.my&&(this.style.setProperty("--f-sb-mbs",this.my),this.style.setProperty("--f-sb-mbe",this.my)),this.tt&&this.style.setProperty("--f-sb-tt",this.tt),this.w&&this.style.setProperty("--f-sb-w",this.w),this.h&&this.style.setProperty("--f-sb-h",this.h),this.mw&&this.style.setProperty("--f-sb-mw",this.mw),this.mxw&&this.style.setProperty("--f-sb-mxw",this.mxw),this.mh&&this.style.setProperty("--f-sb-mh",this.mh),this.mxh&&this.style.setProperty("--f-sb-mxh",this.mxh),this.pis&&this.style.setProperty("--f-sb-pis",this.pis),this.pie&&this.style.setProperty("--f-sb-pie",this.pie),this.pbs&&this.style.setProperty("--f-sb-pbs",this.pbs),this.pbe&&this.style.setProperty("--f-sb-pbe",this.pbe),this.mis&&this.style.setProperty("--f-sb-mis",this.mis),this.mie&&this.style.setProperty("--f-sb-mie",this.mie),this.mbs&&this.style.setProperty("--f-sb-mbs",this.mbs),this.mbe&&this.style.setProperty("--f-sb-mbe",this.mbe),this.ta&&this.style.setProperty("--f-sb-ta",this.ta),this.op&&this.style.setProperty("--f-sb-op",this.op),this.td&&this.style.setProperty("--f-sb-td",this.td),this.br&&this.style.setProperty("--f-sb-br",this.br),this.fz&&this.style.setProperty("--f-sb-fsz",this.fz),this.fw&&this.style.setProperty("--f-sb-fw",this.fw),this.lh&&this.style.setProperty("--f-sb-lh",this.lh),o.html`<div class="box"><slot></slot></div>`}};f.styles=o.css`
+    :host {
+      --f-sb-fb-display: var(--f-sb-fallback-display, inline-block);
+      --f-sb-fb-fsz: var(--f-sb-fallback-font-size, 1rem);
+      --f-sb-fb-lh: var(--f-sb-fallback-line-height, normal);
+      --f-sb-fb-fw: var(--f-sb-fallback-font-weight, normal);
+
+      display: var(--f-sb-db, var(--f-sb-fb-display));
+      font-size: var(--f-sb-fsz, inherit);
+      font-weight: var(--f-sb-fw, inherit);
+      line-height: var(--f-sb-lh, inherit);
+      box-sizing: border-box;
+      width: var(--f-sb-w, auto);
+      height: var(--f-sb-h, auto);
+      min-width: var(--f-sb-mw, auto);
+      max-width: var(--f-sb-mxw, auto);
+      min-height: var(--f-sb-mh, auto);
+      max-height: var(--f-sb-mxh, auto);
+      padding-inline-start: var(--f-sb-pis, var(--f-sb-pd-gb, 0));
+      padding-inline-end: var(--f-sb-pie, var(--f-sb-pd-gb, 0));
+      padding-block-start: var(--f-sb-pbs, var(--f-sb-pd-gb, 0));
+      padding-block-end: var(--f-sb-pbe, var(--f-sb-pd-gb, 0));
+      margin-inline-start: var(--f-sb-mis, var(--f-sb-mg-gb, 0));
+      margin-inline-end: var(--f-sb-mie, var(--f-sb-mg-gb, 0));
+      margin-block-start: var(--f-sb-mbs, var(--f-sb-mg-gb, 0));
+      margin-block-end: var(--f-sb-mbe, var(--f-sb-mg-gb, 0));
+      text-align: var(--f-sb-ta, start);
+      opacity: var(--f-sb-op, 1);
+      text-decoration: var(--f-sb-td, none);
+      border-radius: var(--f-sb-br, 0);
+      text-transform: var(--f-sb-tt, none);
+    }
+
+    :host([inline]) {
+      display: inline;
+    }
+
+    :host([block]) {
       display: block;
-      width: var(--space-box-width, 100%);
-      height: var(--space-box-height, auto);
-      padding: var(--space-box-padding, 0);
-      margin: var(--space-box-margin, 0);
     }
 
-    :host ::slotted(*) {
-      --space-box-width: 100%;
-      --space-box-height: auto;
-      --space-box-padding: 0;
-      --space-box-margin: 0;
+    .box {
+      --f-sb-w: auto;
+      --f-sb-h: auto;
+      --f-sb-mw: auto;
+      --f-sb-mxw: auto;
+      --f-sb-mh: auto;
+      --f-sb-mxh: auto;
+      --f-sb-pis: 0;
+      --f-sb-pie: 0;
+      --f-sb-pbs: 0;
+      --f-sb-pbe: 0;
+      --f-sb-mis: 0;
+      --f-sb-mie: 0;
+      --f-sb-mbs: 0;
+      --f-sb-tt: none;
+      --f-sb-td: none;
+      --f-sb-mbe: 0;
+      --f-sb-ta: start;
+      --f-sb-op: 1;
+      --f-sb-br: 0;
+      --f-sb-fsz: inherit;
+      --f-sb-lh: inherit;
+      --f-sb-fw: inherit;
     }
-  `,i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],p.prototype,"width",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],p.prototype,"height",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],p.prototype,"pd",void 0),i([(0,n.property)({type:String,reflect:!0}),o("design:type",String)],p.prototype,"mg",void 0),p=i([(0,n.customElement)("space-box")],p),e.SpaceBox=p},222:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.ResizeObserverWrapper=void 0;class s{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.options=t,this.observer=null}create(){this.observer||(this.observer=new ResizeObserver((t=>{for(let e of t)e.target.dispatchEvent(new CustomEvent("resize",{detail:e.contentRect}))})))}addElement(t){var e,s;this.create(),t instanceof Element&&this.observer.observe(t,{box:(null===(s=null===(e=this.options)||void 0===e?void 0:e.resizeObserverOptions)||void 0===s?void 0:s.box)||"content-box"})}removeElement(t){t instanceof Element&&this.observer.unobserve(t)}destroy(){this.observer&&this.observer.disconnect(),this.observer=null}}e.ResizeObserverWrapper=s;const i=new s;HTMLElement.prototype.startResizeListener=function(){i.addElement(this)},HTMLElement.prototype.stopResizeListener=function(){i.removeElement(this)}},701:(t,e,s)=>{s.r(e)},595:(t,e,s)=>{s.r(e),s.d(e,{customElement:()=>i,eventOptions:()=>a,property:()=>r,query:()=>h,queryAll:()=>d,queryAssignedElements:()=>f,queryAssignedNodes:()=>y,queryAsync:()=>c,state:()=>n});const i=t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:s,elements:i}=e;return{kind:s,elements:i,finisher(e){customElements.define(t,e)}}})(t,e),o=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(s){s.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(s){s.createProperty(e.key,t)}};function r(t){return(e,s)=>void 0!==s?((t,e,s)=>{e.constructor.createProperty(s,t)})(t,e,s):o(t,e)}function n(t){return r({...t,state:!0})}const l=({finisher:t,descriptor:e})=>(s,i)=>{var o;if(void 0===i){const i=null!==(o=s.originalKey)&&void 0!==o?o:s.key,r=null!=e?{kind:"method",placement:"prototype",key:i,descriptor:e(s.key)}:{...s,key:i};return null!=t&&(r.finisher=function(e){t(e,i)}),r}{const o=s.constructor;void 0!==e&&Object.defineProperty(s,i,e(i)),null==t||t(o,i)}};function a(t){return l({finisher:(e,s)=>{Object.assign(e.prototype[s],t)}})}function h(t,e){return l({descriptor:s=>{const i={get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null},enumerable:!0,configurable:!0};if(e){const e="symbol"==typeof s?Symbol():"__"+s;i.get=function(){var s,i;return void 0===this[e]&&(this[e]=null!==(i=null===(s=this.renderRoot)||void 0===s?void 0:s.querySelector(t))&&void 0!==i?i:null),this[e]}}return i}})}function d(t){return l({descriptor:e=>({get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelectorAll(t))&&void 0!==s?s:[]},enumerable:!0,configurable:!0})})}function c(t){return l({descriptor:e=>({async get(){var e;return await this.updateComplete,null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t)},enumerable:!0,configurable:!0})})}var p;const u=null!=(null===(p=window.HTMLSlotElement)||void 0===p?void 0:p.prototype.assignedElements)?(t,e)=>t.assignedElements(e):(t,e)=>t.assignedNodes(e).filter((t=>t.nodeType===Node.ELEMENT_NODE));function f(t){const{slot:e,selector:s}=null!=t?t:{};return l({descriptor:i=>({get(){var i;const o="slot"+(e?`[name=${e}]`:":not([name])"),r=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(o),n=null!=r?u(r,t):[];return s?n.filter((t=>t.matches(s))):n},enumerable:!0,configurable:!0})})}function y(t,e,s){let i,o=t;return"object"==typeof t?(o=t.slot,i=t):i={flatten:e},s?f({slot:o,flatten:e,selector:s}):l({descriptor:t=>({get(){var t,e;const s="slot"+(o?`[name=${o}]`:":not([name])"),r=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(s);return null!==(e=null==r?void 0:r.assignedNodes(i))&&void 0!==e?e:[]},enumerable:!0,configurable:!0})})}},62:(t,e,s)=>{s.r(e),s.d(e,{CSSResult:()=>l,LitElement:()=>pt,ReactiveElement:()=>b,UpdatingElement:()=>ct,_$LE:()=>ft,_$LH:()=>nt,adoptStyles:()=>d,css:()=>h,defaultConverter:()=>v,getCompatibleStyle:()=>c,html:()=>F,isServer:()=>yt,noChange:()=>W,notEqual:()=>m,nothing:()=>V,render:()=>at,supportsAdoptingStyleSheets:()=>o,svg:()=>q,unsafeCSS:()=>a});const i=window,o=i.ShadowRoot&&(void 0===i.ShadyCSS||i.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,r=Symbol(),n=new WeakMap;class l{constructor(t,e,s){if(this._$cssResult$=!0,s!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(o&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}}const a=t=>new l("string"==typeof t?t:t+"",void 0,r),h=(t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1]),t[0]);return new l(s,t,r)},d=(t,e)=>{o?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const s=document.createElement("style"),o=i.litNonce;void 0!==o&&s.setAttribute("nonce",o),s.textContent=e.cssText,t.appendChild(s)}))},c=o?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return a(e)})(t):t;var p;const u=window,f=u.trustedTypes,y=f?f.emptyScript:"",g=u.reactiveElementPolyfillSupport,v={toAttribute(t,e){switch(e){case Boolean:t=t?y:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},m=(t,e)=>e!==t&&(e==e||t==t),x={attribute:!0,type:String,converter:v,reflect:!1,hasChanged:m};class b extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const i=this._$Ep(s,e);void 0!==i&&(this._$Ev.set(i,s),t.push(i))})),t}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const o=this[t];this[e]=i,this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||x}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(c(t))}else void 0!==t&&e.push(c(t));return e}static _$Ep(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return d(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EO(t,e,s=x){var i;const o=this.constructor._$Ep(t,s);if(void 0!==o&&!0===s.reflect){const r=(void 0!==(null===(i=s.converter)||void 0===i?void 0:i.toAttribute)?s.converter:v).toAttribute(e,s.type);this._$El=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$El=null}}_$AK(t,e){var s;const i=this.constructor,o=i._$Ev.get(t);if(void 0!==o&&this._$El!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:v;this._$El=o,this[o]=r.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,s){let i=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||m)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var _;b.finalized=!0,b.elementProperties=new Map,b.elementStyles=[],b.shadowRootOptions={mode:"open"},null==g||g({ReactiveElement:b}),(null!==(p=u.reactiveElementVersions)&&void 0!==p?p:u.reactiveElementVersions=[]).push("1.6.1");const $=window,w=$.trustedTypes,S=w?w.createPolicy("lit-html",{createHTML:t=>t}):void 0,E="$lit$",A=`lit$${(Math.random()+"").slice(9)}$`,P="?"+A,k=`<${P}>`,C=document,j=()=>C.createComment(""),R=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,z=t=>O(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),L="[ \t\n\f\r]",M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,N=/-->/g,U=/>/g,H=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),T=/'/g,B=/"/g,D=/^(?:script|style|textarea|title)$/i,I=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),F=I(1),q=I(2),W=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),K=new WeakMap,G=C.createTreeWalker(C,129,null,!1),J=(t,e)=>{const s=t.length-1,i=[];let o,r=2===e?"<svg>":"",n=M;for(let e=0;e<s;e++){const s=t[e];let l,a,h=-1,d=0;for(;d<s.length&&(n.lastIndex=d,a=n.exec(s),null!==a);)d=n.lastIndex,n===M?"!--"===a[1]?n=N:void 0!==a[1]?n=U:void 0!==a[2]?(D.test(a[2])&&(o=RegExp("</"+a[2],"g")),n=H):void 0!==a[3]&&(n=H):n===H?">"===a[0]?(n=null!=o?o:M,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?H:'"'===a[3]?B:T):n===B||n===T?n=H:n===N||n===U?n=M:(n=H,o=void 0);const c=n===H&&t[e+1].startsWith("/>")?" ":"";r+=n===M?s+k:h>=0?(i.push(l),s.slice(0,h)+E+s.slice(h)+A+c):s+A+(-2===h?(i.push(void 0),e):c)}const l=r+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==S?S.createHTML(l):l,i]};class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const n=t.length-1,l=this.parts,[a,h]=J(t,e);if(this.el=Z.createElement(a,s),G.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=G.nextNode())&&l.length<n;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith(E)||e.startsWith(A)){const s=h[r++];if(t.push(e),void 0!==s){const t=i.getAttribute(s.toLowerCase()+E).split(A),e=/([.?@])?(.*)/.exec(s);l.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?et:"?"===e[1]?it:"@"===e[1]?ot:tt})}else l.push({type:6,index:o})}for(const e of t)i.removeAttribute(e)}if(D.test(i.tagName)){const t=i.textContent.split(A),e=t.length-1;if(e>0){i.textContent=w?w.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],j()),G.nextNode(),l.push({type:2,index:++o});i.append(t[e],j())}}}else if(8===i.nodeType)if(i.data===P)l.push({type:2,index:o});else{let t=-1;for(;-1!==(t=i.data.indexOf(A,t+1));)l.push({type:7,index:o}),t+=A.length-1}o++}}static createElement(t,e){const s=C.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,i){var o,r,n,l;if(e===W)return e;let a=void 0!==i?null===(o=s._$Co)||void 0===o?void 0:o[i]:s._$Cl;const h=R(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,s,i)),void 0!==i?(null!==(n=(l=s)._$Co)&&void 0!==n?n:l._$Co=[])[i]=a:s._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,i)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:s},parts:i}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:C).importNode(s,!0);G.currentNode=o;let r=G.nextNode(),n=0,l=0,a=i[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new Y(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new rt(r,this,t)),this._$AV.push(e),a=i[++l]}n!==(null==a?void 0:a.index)&&(r=G.nextNode(),n++)}return G.currentNode=C,o}v(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class Y{constructor(t,e,s,i){var o;this.type=2,this._$AH=V,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cp=null===(o=null==i?void 0:i.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),R(t)?t===V||null==t||""===t?(this._$AH!==V&&this._$AR(),this._$AH=V):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):z(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==V&&R(this._$AH)?this._$AA.nextSibling.data=t:this.$(C.createTextNode(t)),this._$AH=t}g(t){var e;const{values:s,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=Z.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.v(s);else{const t=new X(o,this),e=t.u(this.options);t.v(s),this.$(e),this._$AH=t}}_$AC(t){let e=K.get(t.strings);return void 0===e&&K.set(t.strings,e=new Z(t)),e}T(t){O(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new Y(this.k(j()),this.k(j()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class tt{constructor(t,e,s,i,o){this.type=1,this._$AH=V,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=V}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const o=this.strings;let r=!1;if(void 0===o)t=Q(this,t,e,0),r=!R(t)||t!==this._$AH&&t!==W,r&&(this._$AH=t);else{const i=t;let n,l;for(t=o[0],n=0;n<o.length-1;n++)l=Q(this,i[s+n],e,n),l===W&&(l=this._$AH[n]),r||(r=!R(l)||l!==this._$AH[n]),l===V?t=V:t!==V&&(t+=(null!=l?l:"")+o[n+1]),this._$AH[n]=l}r&&!i&&this.j(t)}j(t){t===V?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===V?void 0:t}}const st=w?w.emptyScript:"";class it extends tt{constructor(){super(...arguments),this.type=4}j(t){t&&t!==V?this.element.setAttribute(this.name,st):this.element.removeAttribute(this.name)}}class ot extends tt{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=Q(this,t,e,0))&&void 0!==s?s:V)===W)return;const i=this._$AH,o=t===V&&i!==V||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,r=t!==V&&(i===V||o);o&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt={O:E,P:A,A:P,C:1,M:J,L:X,D:z,R:Q,I:Y,V:tt,H:it,N:ot,U:et,F:rt},lt=$.litHtmlPolyfillSupport;null==lt||lt(Z,Y),(null!==(_=$.litHtmlVersions)&&void 0!==_?_:$.litHtmlVersions=[]).push("2.7.4");const at=(t,e,s)=>{var i,o;const r=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let n=r._$litPart$;if(void 0===n){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;r._$litPart$=n=new Y(e.insertBefore(j(),t),t,void 0,null!=s?s:{})}return n._$AI(t),n};var ht,dt;const ct=b;class pt extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=at(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return W}}pt.finalized=!0,pt._$litElement$=!0,null===(ht=globalThis.litElementHydrateSupport)||void 0===ht||ht.call(globalThis,{LitElement:pt});const ut=globalThis.litElementPolyfillSupport;null==ut||ut({LitElement:pt});const ft={_$AK:(t,e,s)=>{t._$AK(e,s)},_$AL:t=>t._$AL};(null!==(dt=globalThis.litElementVersions)&&void 0!==dt?dt:globalThis.litElementVersions=[]).push("3.3.2");const yt=!1}},e={};function s(i){var o=e[i];if(void 0!==o)return o.exports;var r=e[i]={exports:{}};return t[i].call(r.exports,r,r.exports,s),r.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};s(929),s(506),s(352),s(701)})();
+    :host([fb]) .box {
+      --f-sb-fsz: var(--f-sb-fb-fsz);
+      --f-sb-lh: var(--f-sb-fb-lh);
+      --f-sb-fw: var(--f-sb-fb-fw);
+    }
+    :host([fb][td]) ::slotted(*) {
+      text-decoration: var(--f-sb-td);
+    }
+    :host([fb][fz]) ::slotted(*) {
+      font-size: var(--f-sb-fsz);
+    }
+    :host([fb][fw]) ::slotted(*) {
+      font-weight: var(--f-sb-fw);
+    }
+    :host([fb][lh]) ::slotted(*) {
+      line-height: var(--f-sb-lh);
+    }
+    :host([fb][ta]) ::slotted(*) {
+      text-align: var(--f-sb-ta);
+    }
+    :host([fb][tt]) ::slotted(*) {
+      text-transform: var(--f-sb-tt);
+    }
+  `,i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"fz",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"fw",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"lh",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"w",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"h",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mw",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mxw",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mh",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"tt",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mxh",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"pis",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"pie",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"pbs",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"pbe",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mbs",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mbe",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mis",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mie",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mg",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"pd",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"ta",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"op",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"td",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"br",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"px",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"py",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"mx",void 0),i([(0,n.property)({type:String,reflect:!0}),r("design:type",String)],f.prototype,"my",void 0),f=i([(0,n.customElement)("s-box")],f),e.StyleBox=f},222:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.ResizeObserverWrapper=void 0;class s{constructor(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.options=t,this.observer=null}create(){this.observer||(this.observer=new ResizeObserver((t=>{window.requestAnimationFrame((()=>{for(let e of t)e.target.dispatchEvent(new CustomEvent("resize",{detail:e.contentRect}))}))})))}addElement(t){var e,s;this.create(),t instanceof Element&&this.observer.observe(t,{box:(null===(s=null===(e=this.options)||void 0===e?void 0:e.resizeObserverOptions)||void 0===s?void 0:s.box)||"content-box"})}removeElement(t){t instanceof Element&&this.observer.unobserve(t)}destroy(){this.observer&&this.observer.disconnect(),this.observer=null}}e.ResizeObserverWrapper=s;const i=window.FlexResizeObserver?window.FlexResizeObserver:new s;HTMLElement.prototype.startResizeListener=function(){i.addElement(this)},HTMLElement.prototype.stopResizeListener=function(){i.removeElement(this)}},595:(t,e,s)=>{s.r(e),s.d(e,{customElement:()=>i,eventOptions:()=>h,property:()=>o,query:()=>a,queryAll:()=>d,queryAssignedElements:()=>u,queryAssignedNodes:()=>y,queryAsync:()=>p,state:()=>n});const i=t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:s,elements:i}=e;return{kind:s,elements:i,finisher(e){customElements.define(t,e)}}})(t,e),r=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(s){s.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(s){s.createProperty(e.key,t)}};function o(t){return(e,s)=>void 0!==s?((t,e,s)=>{e.constructor.createProperty(s,t)})(t,e,s):r(t,e)}function n(t){return o({...t,state:!0})}const l=({finisher:t,descriptor:e})=>(s,i)=>{var r;if(void 0===i){const i=null!==(r=s.originalKey)&&void 0!==r?r:s.key,o=null!=e?{kind:"method",placement:"prototype",key:i,descriptor:e(s.key)}:{...s,key:i};return null!=t&&(o.finisher=function(e){t(e,i)}),o}{const r=s.constructor;void 0!==e&&Object.defineProperty(s,i,e(i)),null==t||t(r,i)}};function h(t){return l({finisher:(e,s)=>{Object.assign(e.prototype[s],t)}})}function a(t,e){return l({descriptor:s=>{const i={get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null},enumerable:!0,configurable:!0};if(e){const e="symbol"==typeof s?Symbol():"__"+s;i.get=function(){var s,i;return void 0===this[e]&&(this[e]=null!==(i=null===(s=this.renderRoot)||void 0===s?void 0:s.querySelector(t))&&void 0!==i?i:null),this[e]}}return i}})}function d(t){return l({descriptor:e=>({get(){var e,s;return null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelectorAll(t))&&void 0!==s?s:[]},enumerable:!0,configurable:!0})})}function p(t){return l({descriptor:e=>({async get(){var e;return await this.updateComplete,null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t)},enumerable:!0,configurable:!0})})}var c;const f=null!=(null===(c=window.HTMLSlotElement)||void 0===c?void 0:c.prototype.assignedElements)?(t,e)=>t.assignedElements(e):(t,e)=>t.assignedNodes(e).filter((t=>t.nodeType===Node.ELEMENT_NODE));function u(t){const{slot:e,selector:s}=null!=t?t:{};return l({descriptor:i=>({get(){var i;const r="slot"+(e?`[name=${e}]`:":not([name])"),o=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(r),n=null!=o?f(o,t):[];return s?n.filter((t=>t.matches(s))):n},enumerable:!0,configurable:!0})})}function y(t,e,s){let i,r=t;return"object"==typeof t?(r=t.slot,i=t):i={flatten:e},s?u({slot:r,flatten:e,selector:s}):l({descriptor:t=>({get(){var t,e;const s="slot"+(r?`[name=${r}]`:":not([name])"),o=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(s);return null!==(e=null==o?void 0:o.assignedNodes(i))&&void 0!==e?e:[]},enumerable:!0,configurable:!0})})}},62:(t,e,s)=>{s.r(e),s.d(e,{CSSResult:()=>l,LitElement:()=>ct,ReactiveElement:()=>x,UpdatingElement:()=>pt,_$LE:()=>ut,_$LH:()=>nt,adoptStyles:()=>d,css:()=>a,defaultConverter:()=>v,getCompatibleStyle:()=>p,html:()=>I,isServer:()=>yt,noChange:()=>W,notEqual:()=>b,nothing:()=>V,render:()=>ht,supportsAdoptingStyleSheets:()=>r,svg:()=>q,unsafeCSS:()=>h});const i=window,r=i.ShadowRoot&&(void 0===i.ShadyCSS||i.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),n=new WeakMap;class l{constructor(t,e,s){if(this._$cssResult$=!0,s!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(r&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}}const h=t=>new l("string"==typeof t?t:t+"",void 0,o),a=(t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1]),t[0]);return new l(s,t,o)},d=(t,e)=>{r?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const s=document.createElement("style"),r=i.litNonce;void 0!==r&&s.setAttribute("nonce",r),s.textContent=e.cssText,t.appendChild(s)}))},p=r?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return h(e)})(t):t;var c;const f=window,u=f.trustedTypes,y=u?u.emptyScript:"",g=f.reactiveElementPolyfillSupport,v={toAttribute(t,e){switch(e){case Boolean:t=t?y:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},b=(t,e)=>e!==t&&(e==e||t==t),m={attribute:!0,type:String,converter:v,reflect:!1,hasChanged:b};class x extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;this.finalize(),(null!==(e=this.h)&&void 0!==e?e:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const i=this._$Ep(s,e);void 0!==i&&(this._$Ev.set(i,s),t.push(i))})),t}static createProperty(t,e=m){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const r=this[t];this[e]=i,this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||m}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(p(t))}else void 0!==t&&e.push(p(t));return e}static _$Ep(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return d(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EO(t,e,s=m){var i;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const o=(void 0!==(null===(i=s.converter)||void 0===i?void 0:i.toAttribute)?s.converter:v).toAttribute(e,s.type);this._$El=t,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$El=null}}_$AK(t,e){var s;const i=this.constructor,r=i._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=i.getPropertyOptions(r),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:v;this._$El=r,this[r]=o.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,s){let i=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||b)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var w;x.finalized=!0,x.elementProperties=new Map,x.elementStyles=[],x.shadowRootOptions={mode:"open"},null==g||g({ReactiveElement:x}),(null!==(c=f.reactiveElementVersions)&&void 0!==c?c:f.reactiveElementVersions=[]).push("1.6.1");const S=window,_=S.trustedTypes,$=_?_.createPolicy("lit-html",{createHTML:t=>t}):void 0,P="$lit$",E=`lit$${(Math.random()+"").slice(9)}$`,A="?"+E,k=`<${A}>`,C=document,z=()=>C.createComment(""),R=t=>null===t||"object"!=typeof t&&"function"!=typeof t,j=Array.isArray,O=t=>j(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),L="[ \t\n\f\r]",M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,N=/-->/g,U=/>/g,H=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),T=/'/g,B=/"/g,D=/^(?:script|style|textarea|title)$/i,F=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),I=F(1),q=F(2),W=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),K=new WeakMap,G=C.createTreeWalker(C,129,null,!1),J=(t,e)=>{const s=t.length-1,i=[];let r,o=2===e?"<svg>":"",n=M;for(let e=0;e<s;e++){const s=t[e];let l,h,a=-1,d=0;for(;d<s.length&&(n.lastIndex=d,h=n.exec(s),null!==h);)d=n.lastIndex,n===M?"!--"===h[1]?n=N:void 0!==h[1]?n=U:void 0!==h[2]?(D.test(h[2])&&(r=RegExp("</"+h[2],"g")),n=H):void 0!==h[3]&&(n=H):n===H?">"===h[0]?(n=null!=r?r:M,a=-1):void 0===h[1]?a=-2:(a=n.lastIndex-h[2].length,l=h[1],n=void 0===h[3]?H:'"'===h[3]?B:T):n===B||n===T?n=H:n===N||n===U?n=M:(n=H,r=void 0);const p=n===H&&t[e+1].startsWith("/>")?" ":"";o+=n===M?s+k:a>=0?(i.push(l),s.slice(0,a)+P+s.slice(a)+E+p):s+E+(-2===a?(i.push(void 0),e):p)}const l=o+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==$?$.createHTML(l):l,i]};class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,o=0;const n=t.length-1,l=this.parts,[h,a]=J(t,e);if(this.el=Z.createElement(h,s),G.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=G.nextNode())&&l.length<n;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith(P)||e.startsWith(E)){const s=a[o++];if(t.push(e),void 0!==s){const t=i.getAttribute(s.toLowerCase()+P).split(E),e=/([.?@])?(.*)/.exec(s);l.push({type:1,index:r,name:e[2],strings:t,ctor:"."===e[1]?et:"?"===e[1]?it:"@"===e[1]?rt:tt})}else l.push({type:6,index:r})}for(const e of t)i.removeAttribute(e)}if(D.test(i.tagName)){const t=i.textContent.split(E),e=t.length-1;if(e>0){i.textContent=_?_.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],z()),G.nextNode(),l.push({type:2,index:++r});i.append(t[e],z())}}}else if(8===i.nodeType)if(i.data===A)l.push({type:2,index:r});else{let t=-1;for(;-1!==(t=i.data.indexOf(E,t+1));)l.push({type:7,index:r}),t+=E.length-1}r++}}static createElement(t,e){const s=C.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,i){var r,o,n,l;if(e===W)return e;let h=void 0!==i?null===(r=s._$Co)||void 0===r?void 0:r[i]:s._$Cl;const a=R(e)?void 0:e._$litDirective$;return(null==h?void 0:h.constructor)!==a&&(null===(o=null==h?void 0:h._$AO)||void 0===o||o.call(h,!1),void 0===a?h=void 0:(h=new a(t),h._$AT(t,s,i)),void 0!==i?(null!==(n=(l=s)._$Co)&&void 0!==n?n:l._$Co=[])[i]=h:s._$Cl=h),void 0!==h&&(e=Q(t,h._$AS(t,e.values),h,i)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:s},parts:i}=this._$AD,r=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:C).importNode(s,!0);G.currentNode=r;let o=G.nextNode(),n=0,l=0,h=i[0];for(;void 0!==h;){if(n===h.index){let e;2===h.type?e=new Y(o,o.nextSibling,this,t):1===h.type?e=new h.ctor(o,h.name,h.strings,this,t):6===h.type&&(e=new ot(o,this,t)),this._$AV.push(e),h=i[++l]}n!==(null==h?void 0:h.index)&&(o=G.nextNode(),n++)}return G.currentNode=C,r}v(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class Y{constructor(t,e,s,i){var r;this.type=2,this._$AH=V,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cp=null===(r=null==i?void 0:i.isConnected)||void 0===r||r}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),R(t)?t===V||null==t||""===t?(this._$AH!==V&&this._$AR(),this._$AH=V):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):O(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==V&&R(this._$AH)?this._$AA.nextSibling.data=t:this.$(C.createTextNode(t)),this._$AH=t}g(t){var e;const{values:s,_$litType$:i}=t,r="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=Z.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===r)this._$AH.v(s);else{const t=new X(r,this),e=t.u(this.options);t.v(s),this.$(e),this._$AH=t}}_$AC(t){let e=K.get(t.strings);return void 0===e&&K.set(t.strings,e=new Z(t)),e}T(t){j(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new Y(this.k(z()),this.k(z()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class tt{constructor(t,e,s,i,r){this.type=1,this._$AH=V,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=V}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const r=this.strings;let o=!1;if(void 0===r)t=Q(this,t,e,0),o=!R(t)||t!==this._$AH&&t!==W,o&&(this._$AH=t);else{const i=t;let n,l;for(t=r[0],n=0;n<r.length-1;n++)l=Q(this,i[s+n],e,n),l===W&&(l=this._$AH[n]),o||(o=!R(l)||l!==this._$AH[n]),l===V?t=V:t!==V&&(t+=(null!=l?l:"")+r[n+1]),this._$AH[n]=l}o&&!i&&this.j(t)}j(t){t===V?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===V?void 0:t}}const st=_?_.emptyScript:"";class it extends tt{constructor(){super(...arguments),this.type=4}j(t){t&&t!==V?this.element.setAttribute(this.name,st):this.element.removeAttribute(this.name)}}class rt extends tt{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=Q(this,t,e,0))&&void 0!==s?s:V)===W)return;const i=this._$AH,r=t===V&&i!==V||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==V&&(i===V||r);r&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class ot{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt={O:P,P:E,A,C:1,M:J,L:X,D:O,R:Q,I:Y,V:tt,H:it,N:rt,U:et,F:ot},lt=S.litHtmlPolyfillSupport;null==lt||lt(Z,Y),(null!==(w=S.litHtmlVersions)&&void 0!==w?w:S.litHtmlVersions=[]).push("2.7.4");const ht=(t,e,s)=>{var i,r;const o=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let n=o._$litPart$;if(void 0===n){const t=null!==(r=null==s?void 0:s.renderBefore)&&void 0!==r?r:null;o._$litPart$=n=new Y(e.insertBefore(z(),t),t,void 0,null!=s?s:{})}return n._$AI(t),n};var at,dt;const pt=x;class ct extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=ht(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return W}}ct.finalized=!0,ct._$litElement$=!0,null===(at=globalThis.litElementHydrateSupport)||void 0===at||at.call(globalThis,{LitElement:ct});const ft=globalThis.litElementPolyfillSupport;null==ft||ft({LitElement:ct});const ut={_$AK:(t,e,s)=>{t._$AK(e,s)},_$AL:t=>t._$AL};(null!==(dt=globalThis.litElementVersions)&&void 0!==dt?dt:globalThis.litElementVersions=[]).push("3.3.2");const yt=!1}},e={};function s(i){var r=e[i];if(void 0!==r)return r.exports;var o=e[i]={exports:{}};return t[i].call(o.exports,o,o.exports,s),o.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};s(929),s(506),s(352)})();

dist/js-responsive.min.js

@@ -1,359 +0,1 @@
-/*! For license information please see js-responsive.min.js.LICENSE.txt */
-(()=>{"use strict";var e={382:function(e,t,i){var s,n,l,r=this&&this.__decorate||function(e,t,i,s){var n,l=arguments.length,r=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(l<3?n(r):l>3?n(t,i,r):n(t,i))||r);return l>3&&r&&Object.defineProperty(t,i,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0}),t.Cell=t.Grid=t.Container=t.Canvas=void 0;const a=i(62),c=i(595);let d=s=class extends a.LitElement{constructor(){super(...arguments),this.width=null,this.margin=null}render(){return this.width&&this.style.setProperty("max-width",this.width),this.margin&&this.style.setProperty("margin",this.margin),a.html`<slot></slot>`}};d.defaultProps={maxWidth:"1400px",display:"block",margin:"0 auto"},d.styles=a.css`
-    :host {
-      box-sizing: border-box;
-      display: var(
-        --flex-container-display,
-        ${(0,a.unsafeCSS)(s.defaultProps.display)}
-      );
-      margin: var(
-        --flex-container-margin,
-        ${(0,a.unsafeCSS)(s.defaultProps.margin)}
-      );
-      max-width: var(
-        --flex-container-max-width,
-        ${(0,a.unsafeCSS)(s.defaultProps.maxWidth)}
-      );
-      padding: var(--flex-container-padding, 0 1rem);
-    }
-  `,r([(0,c.property)({type:String,reflect:!0}),o("design:type",String)],d.prototype,"width",void 0),r([(0,c.property)({type:String,reflect:!0}),o("design:type",String)],d.prototype,"margin",void 0),d=s=r([(0,c.customElement)("flex-canvas")],d),t.Canvas=d;let h=n=class extends a.LitElement{constructor(){super(...arguments),this.row=null,this.column=null,this.gap=null}get mode(){return this.row||this.column?this.row?"row":"column":n.defaultProps.mode}render(){if(this.gap&&this.style.setProperty("--flex-container-gap",this.gap),this.row&&this.column)throw new Error("flex-container cannot be both row and column");return a.html`<slot></slot>`}};h.defaultProps={reverse:!1,display:"flex",mode:"row",wrap:!0,justifyContent:"flex-start",alignItems:"flex-start",alignContent:"flex-start"},h.styles=a.css`
-    :host([nowrap]) {
-      flex-wrap: nowrap;
-    }
-    :host([row]) {
-      flex-direction: row;
-    }
-    :host([column]) {
-      flex-direction: column;
-    }
-    :host([reverse][row]) {
-      flex-direction: row-reverse;
-    }
-    :host([reverse][column]) {
-      flex-direction: column-reverse;
-    }
-    :host([inline]) {
-      display: inline-flex;
-    }
-    :host([center]) {
-      align-items: center;
-      justify-content: center;
-    }
-    :host([middle]) {
-      align-items: center;
-    }
-    :host([spread]) {
-      justify-content: space-between;
-    }
-    :host([start]) {
-      justify-content: flex-start;
-      align-items: flex-start;
-    }
-    :host([end]) {
-      justify-content: flex-end;
-      align-items: flex-end;
-    }
-    :host([ai="flex-start"]) {
-      align-items: flex-start;
-    }
-    :host([ai="flex-end"]) {
-      align-items: flex-end;
-    }
-    :host([ai="center"]) {
-      align-items: center;
-    }
-    :host([ai="baseline"]) {
-      align-items: baseline;
-    }
-    :host([ai="stretch"]) {
-      align-items: stretch;
-    }
-    :host([jc="flex-start"]) {
-      justify-content: flex-start;
-    }
-    :host([jc="flex-end"]) {
-      justify-content: flex-end;
-    }
-    :host([jc="center"]) {
-      justify-content: center;
-    }
-    :host([jc="space-between"]) {
-      justify-content: space-between;
-    }
-    :host([jc="space-around"]) {
-      justify-content: space-around;
-    }
-    :host([jc="space-evenly"]) {
-      justify-content: space-evenly;
-    }
-    :host([jc="start"]) {
-      justify-content: flex-start;
-    }
-    :host([jc="end"]) {
-      justify-content: flex-end;
-    }
-    :host([ac="start"]) {
-      align-content: flex-start;
-    }
-    :host([ac="end"]) {
-      align-content: flex-end;
-    }
-    :host([ac="center"]) {
-      align-content: center;
-    }
-    :host([ac="space-between"]) {
-      align-content: space-between;
-    }
-    :host([ac="space-around"]) {
-      align-content: space-around;
-    }
-    :host([ac="space-evenly"]) {
-      align-content: space-evenly;
-    }
-    :host([ac="stretch"]) {
-      align-content: stretch;
-    }
-    :host {
-      --flex-grid-padding: 0;
-      box-sizing: border-box;
-      display: var(
-        --flex-container-display,
-        ${(0,a.unsafeCSS)(n.defaultProps.display)}
-      );
-      flex-direction: var(
-        --flex-container-direction,
-        ${(0,a.unsafeCSS)(n.defaultProps.reverse?n.defaultProps.mode+"-reverse":n.defaultProps.mode)}
-      );
-      gap: var(--flex-container-gap, 0);
-      flex-wrap: var(
-        --flex-container-wrap,
-        ${(0,a.unsafeCSS)(n.defaultProps.wrap?"wrap":"nowrap")}
-      );
-      justify-content: var(
-        --flex-container-justify-content,
-        ${(0,a.unsafeCSS)(n.defaultProps.justifyContent)}
-      );
-      align-items: var(
-        --flex-container-align-items,
-        ${(0,a.unsafeCSS)(n.defaultProps.alignItems)}
-      );
-      align-content: var(
-        --flex-container-align-content,
-        ${(0,a.unsafeCSS)(n.defaultProps.alignContent)}
-      );
-    }
-
-    :host([fill]) ::slotted(flex-cell:not([priority])) {
-      flex: 1 1 auto;
-    }
-    :host([fit]) ::slotted(flex-cell:not([priority])) {
-      flex: 1;
-    }
-    :host([snug]) ::slotted(flex-cell:not([priority])) {
-      flex: 0;
-    }
-  `,r([(0,c.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],h.prototype,"row",void 0),r([(0,c.property)({type:Boolean,reflect:!0}),o("design:type",Boolean)],h.prototype,"column",void 0),r([(0,c.property)({type:String,reflect:!0}),o("design:type",String)],h.prototype,"gap",void 0),h=n=r([(0,c.customElement)("flex-container")],h),t.Container=h;let x=class extends a.LitElement{constructor(){super(...arguments),this.gap=null}render(){return this.gap&&this.style.setProperty("--flex-grid-gap",this.gap),a.html`<slot></slot>`}};x.styles=a.css`
-    :host {
-      box-sizing: border-box;
-      display: block;
-      overflow: hidden;
-      padding: var(--flex-grid-gap, 0);
-    }
-    :host([flex]) {
-      display: flex;
-    }
-    :host ::slotted(flex-container) {
-      --flex-grid-padding: var(--flex-grid-gap) !important;
-    }
-    :host ::slotted(flex-container) {
-      margin: calc(-1 * var(--flex-grid-gap));
-    }
-  `,r([(0,c.property)({type:String,reflect:!0}),o("design:type",String)],x.prototype,"gap",void 0),x=r([(0,c.customElement)("flex-grid")],x),t.Grid=x;let f=l=class extends a.LitElement{constructor(){super(...arguments),this.order=null,this.grow=null,this.shrink=null,this.width=null}render(){return this.width&&(this.style.setProperty("flex-basis",this.width),this.style.setProperty("max-width",this.width)),(this.order&&this.order<0||this.order>10)&&this.style.setProperty("order",this.order.toString()),(this.grow&&this.grow>10||this.grow<0)&&this.style.setProperty("flex-grow",this.grow.toString()),(this.shrink&&this.shrink>10||this.shrink<0)&&this.style.setProperty("flex-shrink",this.shrink.toString()),a.html`<div><slot></slot></div>`}};f.defaultProps={display:"block"},f.styles=a.css`
-    :host {
-      box-sizing: border-box;
-      display: var(
-        --flex-cell-display,
-        ${(0,a.unsafeCSS)(l.defaultProps.display)}
-      );
-      padding: var(--flex-grid-padding, 0);
-    }
-    :host(.cell-1) {
-      flex-basis: 8.3333333333%;
-      max-width: 8.3333333333%;
-    }
-    :host(.cell-2) {
-      flex-basis: 16.6666666667%;
-      max-width: 16.6666666667%;
-    }
-    :host(.cell-3) {
-      flex-basis: 25%;
-      max-width: 25%;
-    }
-    :host(.cell-4) {
-      flex-basis: 33.3333333333%;
-      max-width: 33.3333333333%;
-    }
-    :host(.cell-5) {
-      flex-basis: 41.6666666667%;
-      max-width: 41.6666666667%;
-    }
-    :host(.cell-6) {
-      flex-basis: 50%;
-      max-width: 50%;
-    }
-    :host(.cell-7) {
-      flex-basis: 58.3333333333%;
-      max-width: 58.3333333333%;
-    }
-    :host(.cell-8) {
-      flex-basis: 66.6666666667%;
-      max-width: 66.6666666667%;
-    }
-    :host(.cell-9) {
-      flex-basis: 75%;
-      max-width: 75%;
-    }
-    :host(.cell-10) {
-      flex-basis: 83.3333333333%;
-      max-width: 83.3333333333%;
-    }
-    :host(.cell-11) {
-      flex-basis: 91.6666666667%;
-      max-width: 91.6666666667%;
-    }
-    :host(.cell-12) {
-      flex-basis: 100%;
-      max-width: 100%;
-    }
-    :host([display="flex"]) {
-      display: flex;
-    }
-    :host([display="inline-flex"]) {
-      display: inline-flex;
-    }
-    :host([display="inline-block"]) {
-      display: inline-block;
-    }
-    :host([display="block"]) {
-      display: block;
-    }
-    :host([fill]) {
-      flex: 1 1 auto;
-    }
-    :host([fit]) {
-      flex: 1;
-    }
-    :host([snug]) {
-      flex: 0;
-    }
-    :host([auto]) {
-      flex: 0 1 auto;
-    }
-    :host([stretch]) {
-      flex-grow: 1;
-    }
-    :host([order="0"]) {
-      order: 0;
-    }
-    :host([order="1"]) {
-      order: 1;
-    }
-    :host([order="2"]) {
-      order: 2;
-    }
-    :host([order="3"]) {
-      order: 3;
-    }
-    :host([order="4"]) {
-      order: 4;
-    }
-    :host([order="5"]) {
-      order: 5;
-    }
-    :host([order="6"]) {
-      order: 6;
-    }
-    :host([order="7"]) {
-      order: 7;
-    }
-    :host([order="8"]) {
-      order: 8;
-    }
-    :host([order="9"]) {
-      order: 9;
-    }
-    :host([order="10"]) {
-      order: 10;
-    }
-    :host([grow="0"]) {
-      flex-grow: 0;
-    }
-    :host([grow="1"]) {
-      flex-grow: 1;
-    }
-    :host([grow="2"]) {
-      flex-grow: 2;
-    }
-    :host([grow="3"]) {
-      flex-grow: 3;
-    }
-    :host([grow="4"]) {
-      flex-grow: 4;
-    }
-    :host([grow="5"]) {
-      flex-grow: 5;
-    }
-    :host([grow="6"]) {
-      flex-grow: 6;
-    }
-    :host([grow="7"]) {
-      flex-grow: 7;
-    }
-    :host([grow="8"]) {
-      flex-grow: 8;
-    }
-    :host([grow="9"]) {
-      flex-grow: 9;
-    }
-    :host([grow="10"]) {
-      flex-grow: 10;
-    }
-    :host([shrink="0"]) {
-      flex-shrink: 0;
-    }
-    :host([shrink="1"]) {
-      flex-shrink: 1;
-    }
-    :host([shrink="2"]) {
-      flex-shrink: 2;
-    }
-    :host([shrink="3"]) {
-      flex-shrink: 3;
-    }
-    :host([shrink="4"]) {
-      flex-shrink: 4;
-    }
-    :host([shrink="5"]) {
-      flex-shrink: 5;
-    }
-    :host([shrink="6"]) {
-      flex-shrink: 6;
-    }
-    :host([shrink="7"]) {
-      flex-shrink: 7;
-    }
-    :host([shrink="8"]) {
-      flex-shrink: 8;
-    }
-    :host([shrink="9"]) {
-      flex-shrink: 9;
-    }
-    :host([shrink="10"]) {
-      flex-shrink: 10;
-    }
-  `,r([(0,c.property)({type:Number,reflect:!0}),o("design:type",Number)],f.prototype,"order",void 0),r([(0,c.property)({type:Number,reflect:!0}),o("design:type",Number)],f.prototype,"grow",void 0),r([(0,c.property)({type:Number,reflect:!0}),o("design:type",Number)],f.prototype,"shrink",void 0),r([(0,c.property)({type:String,reflect:!0}),o("design:type",String)],f.prototype,"width",void 0),f=l=r([(0,c.customElement)("flex-cell")],f),t.Cell=f},244:function(e,t,i){var s=this&&this.__decorate||function(e,t,i,s){var n,l=arguments.length,r=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(r=(l<3?n(r):l>3?n(t,i,r):n(t,i))||r);return l>3&&r&&Object.defineProperty(t,i,r),r},n=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0}),t.MediaBox=void 0;const l=i(62),r=i(595);i(222);let o=class extends l.LitElement{constructor(){super(...arguments),this._targetEl=null,this._resizeListener=null,this.breakpoints=null,this.target=null,this.sizes=null}connectedCallback(){super.connectedCallback(),this._targetEl=this.getTargetElement(),this._targetEl instanceof Window?(window.addEventListener("resize",(e=>{this.onResize(e.target.innerWidth)})),this.onResize(window.innerWidth)):(this._targetEl.startResizeListener(),this._resizeListener=e=>{this.onResize(e.detail.width)},this._targetEl.addEventListener("resize",this._resizeListener))}onResize(e){this.setMedia(e)}getTargetElement(){return"window"===this.target?window:this.target?document.querySelector(this.target):this}disconnectedCallback(){super.disconnectedCallback(),this._targetEl&&this._targetEl instanceof HTMLElement?this._targetEl.stopResizeListener():this._resizeListener&&window.removeEventListener("resize",this._resizeListener)}getMediaString(){if(!this.breakpoints)return null;if(!/^(\d+\s*,\s*)*\d+$/.test(this.breakpoints))throw new Error("Invalid breakpoints string, must be comma separated list of numbers");let e=["xs","sm","md","lg","xl","xxl"];const t=this.breakpoints.split(",").map((e=>parseInt(e.trim())));t.unshift(0),t.length>e.length&&console.error("Too many breakpoints defined, max is "+(e.length-1)+" from sm to xxl");let i=[];for(let s=0;s<t.length;s++)i.push({width:t[s],mode:e[s]});return i}setMedia(e){let t=this.getMediaString();if(t){let i=[];for(let s=0;s<t.length;s++){let{width:n,mode:l}=t[s];if(!(e>=n))break;i.push(l)}if(i.length){let e=i.map((e=>`[${e}]`)).join("");this.sizes=e}}}render(){return l.html`<slot></slot>`}};o.styles=l.css`
-    :host {
-      box-sizing: border-box;
-      display: block;
-    }
-  `,s([(0,r.property)({type:String,reflect:!0}),n("design:type",String)],o.prototype,"breakpoints",void 0),s([(0,r.property)({type:String,reflect:!0}),n("design:type",String)],o.prototype,"target",void 0),s([(0,r.property)({type:String,reflect:!0}),n("design:type",String)],o.prototype,"sizes",void 0),o=s([(0,r.customElement)("flex-mediabox")],o),t.MediaBox=o},222:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.resizeObserver=void 0;class i{constructor(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.options=e,this.observer=null}create(){this.observer||(this.observer=window.resizeObserver?window.resizeObserver:new ResizeObserver((e=>{for(let t of e)t.target.dispatchEvent(new CustomEvent("resize",{detail:t.contentRect}))})),window.resizeObserver=this.observer)}addElement(e){var t,i;this.create(),e instanceof Element&&this.observer.observe(e,{box:(null===(i=null===(t=this.options)||void 0===t?void 0:t.resizeObserverOptions)||void 0===i?void 0:i.box)||"content-box"})}removeElement(e){e instanceof Element&&this.observer.unobserve(e)}destroy(){this.observer&&this.observer.disconnect(),this.observer=null,delete window.resizeObserver}}t.resizeObserver=i;const s=new i;HTMLElement.prototype.startResizeListener=function(){s.addElement(this)},HTMLElement.prototype.stopResizeListener=function(){s.removeElement(this)}},353:(e,t,i)=>{i.d(t,{Z:()=>o});var s=i(81),n=i.n(s),l=i(645),r=i.n(l)()(n());r.push([e.id,".hide{display:none}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.inline-block{display:inline-block}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-start{text-align:start}.text-end{text-align:end}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-column{flex-direction:column}.flex-column-reverse{flex-direction:column-reverse}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-center{align-items:center}.ai-baseline{align-items:baseline}.ai-stretch{align-items:stretch}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-between{justify-content:space-between}.jc-around{justify-content:space-around}.jc-evenly{justify-content:space-evenly}@media screen and (min-width: 780px){.hide-xs{display:none}.block-xs{display:block}.inline-xs{display:inline}.flex-xs{display:flex}.inline-flex-xs{display:inline-flex}.inline-block-xs{display:inline-block}.text-left-xs{text-align:left}.text-center-xs{text-align:center}.text-right-xs{text-align:right}.text-justify-xs{text-align:justify}.text-start-xs{text-align:start}.text-end-xs{text-align:end}.flex-row-xs{flex-direction:row}.flex-row-reverse-xs{flex-direction:row-reverse}.flex-column-xs{flex-direction:column}.flex-column-reverse-xs{flex-direction:column-reverse}.ai-start-xs{align-items:flex-start}.ai-end-xs{align-items:flex-end}.ai-center-xs{align-items:center}.ai-baseline-xs{align-items:baseline}.ai-stretch-xs{align-items:stretch}.jc-start-xs{justify-content:flex-start}.jc-end-xs{justify-content:flex-end}.jc-center-xs{justify-content:center}.jc-between-xs{justify-content:space-between}.jc-around-xs{justify-content:space-around}.jc-evenly-xs{justify-content:space-evenly}.cell-xs-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.cell-xs-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.cell-xs-3{flex-basis:25%;max-width:25%}.cell-xs-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.cell-xs-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.cell-xs-6{flex-basis:50%;max-width:50%}.cell-xs-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.cell-xs-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.cell-xs-9{flex-basis:75%;max-width:75%}.cell-xs-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.cell-xs-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.cell-xs-12{flex-basis:100%;max-width:100%}}@media screen and (min-width: 1024px){.hide-sm{display:none}.block-sm{display:block}.inline-sm{display:inline}.flex-sm{display:flex}.inline-flex-sm{display:inline-flex}.inline-block-sm{display:inline-block}.text-left-sm{text-align:left}.text-center-sm{text-align:center}.text-right-sm{text-align:right}.text-justify-sm{text-align:justify}.text-start-sm{text-align:start}.text-end-sm{text-align:end}.flex-row-sm{flex-direction:row}.flex-row-reverse-sm{flex-direction:row-reverse}.flex-column-sm{flex-direction:column}.flex-column-reverse-sm{flex-direction:column-reverse}.ai-start-sm{align-items:flex-start}.ai-end-sm{align-items:flex-end}.ai-center-sm{align-items:center}.ai-baseline-sm{align-items:baseline}.ai-stretch-sm{align-items:stretch}.jc-start-sm{justify-content:flex-start}.jc-end-sm{justify-content:flex-end}.jc-center-sm{justify-content:center}.jc-between-sm{justify-content:space-between}.jc-around-sm{justify-content:space-around}.jc-evenly-sm{justify-content:space-evenly}.cell-sm-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.cell-sm-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.cell-sm-3{flex-basis:25%;max-width:25%}.cell-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.cell-sm-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.cell-sm-6{flex-basis:50%;max-width:50%}.cell-sm-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.cell-sm-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.cell-sm-9{flex-basis:75%;max-width:75%}.cell-sm-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.cell-sm-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.cell-sm-12{flex-basis:100%;max-width:100%}}@media screen and (max-width: 1024px){.show-sm{display:none}}@media screen and (min-width: 1280px){.hide-md{display:none}.block-md{display:block}.inline-md{display:inline}.flex-md{display:flex}.inline-flex-md{display:inline-flex}.inline-block-md{display:inline-block}.text-left-md{text-align:left}.text-center-md{text-align:center}.text-right-md{text-align:right}.text-justify-md{text-align:justify}.text-start-md{text-align:start}.text-end-md{text-align:end}.flex-row-md{flex-direction:row}.flex-row-reverse-md{flex-direction:row-reverse}.flex-column-md{flex-direction:column}.flex-column-reverse-md{flex-direction:column-reverse}.ai-start-md{align-items:flex-start}.ai-end-md{align-items:flex-end}.ai-center-md{align-items:center}.ai-baseline-md{align-items:baseline}.ai-stretch-md{align-items:stretch}.jc-start-md{justify-content:flex-start}.jc-end-md{justify-content:flex-end}.jc-center-md{justify-content:center}.jc-between-md{justify-content:space-between}.jc-around-md{justify-content:space-around}.jc-evenly-md{justify-content:space-evenly}.cell-md-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.cell-md-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.cell-md-3{flex-basis:25%;max-width:25%}.cell-md-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.cell-md-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.cell-md-6{flex-basis:50%;max-width:50%}.cell-md-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.cell-md-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.cell-md-9{flex-basis:75%;max-width:75%}.cell-md-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.cell-md-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.cell-md-12{flex-basis:100%;max-width:100%}}@media screen and (max-width: 1280px){.show-md{display:none}}@media screen and (min-width: 1440px){.hide-lg{display:none}.block-lg{display:block}.inline-lg{display:inline}.flex-lg{display:flex}.inline-flex-lg{display:inline-flex}.inline-block-lg{display:inline-block}.text-left-lg{text-align:left}.text-center-lg{text-align:center}.text-right-lg{text-align:right}.text-justify-lg{text-align:justify}.text-start-lg{text-align:start}.text-end-lg{text-align:end}.flex-row-lg{flex-direction:row}.flex-row-reverse-lg{flex-direction:row-reverse}.flex-column-lg{flex-direction:column}.flex-column-reverse-lg{flex-direction:column-reverse}.ai-start-lg{align-items:flex-start}.ai-end-lg{align-items:flex-end}.ai-center-lg{align-items:center}.ai-baseline-lg{align-items:baseline}.ai-stretch-lg{align-items:stretch}.jc-start-lg{justify-content:flex-start}.jc-end-lg{justify-content:flex-end}.jc-center-lg{justify-content:center}.jc-between-lg{justify-content:space-between}.jc-around-lg{justify-content:space-around}.jc-evenly-lg{justify-content:space-evenly}.cell-lg-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.cell-lg-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.cell-lg-3{flex-basis:25%;max-width:25%}.cell-lg-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.cell-lg-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.cell-lg-6{flex-basis:50%;max-width:50%}.cell-lg-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.cell-lg-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.cell-lg-9{flex-basis:75%;max-width:75%}.cell-lg-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.cell-lg-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.cell-lg-12{flex-basis:100%;max-width:100%}}@media screen and (max-width: 1440px){.show-lg{display:none}}@media screen and (min-width: 1920px){.hide-xl{display:none}.block-xl{display:block}.inline-xl{display:inline}.flex-xl{display:flex}.inline-flex-xl{display:inline-flex}.inline-block-xl{display:inline-block}.text-left-xl{text-align:left}.text-center-xl{text-align:center}.text-right-xl{text-align:right}.text-justify-xl{text-align:justify}.text-start-xl{text-align:start}.text-end-xl{text-align:end}.flex-row-xl{flex-direction:row}.flex-row-reverse-xl{flex-direction:row-reverse}.flex-column-xl{flex-direction:column}.flex-column-reverse-xl{flex-direction:column-reverse}.ai-start-xl{align-items:flex-start}.ai-end-xl{align-items:flex-end}.ai-center-xl{align-items:center}.ai-baseline-xl{align-items:baseline}.ai-stretch-xl{align-items:stretch}.jc-start-xl{justify-content:flex-start}.jc-end-xl{justify-content:flex-end}.jc-center-xl{justify-content:center}.jc-between-xl{justify-content:space-between}.jc-around-xl{justify-content:space-around}.jc-evenly-xl{justify-content:space-evenly}.cell-xl-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.cell-xl-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.cell-xl-3{flex-basis:25%;max-width:25%}.cell-xl-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.cell-xl-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.cell-xl-6{flex-basis:50%;max-width:50%}.cell-xl-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.cell-xl-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.cell-xl-9{flex-basis:75%;max-width:75%}.cell-xl-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.cell-xl-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.cell-xl-12{flex-basis:100%;max-width:100%}}@media screen and (max-width: 1920px){.show-xl{display:none}}@media screen and (min-width: 2560px){.hide-xxl{display:none}.block-xxl{display:block}.inline-xxl{display:inline}.flex-xxl{display:flex}.inline-flex-xxl{display:inline-flex}.inline-block-xxl{display:inline-block}.text-left-xxl{text-align:left}.text-center-xxl{text-align:center}.text-right-xxl{text-align:right}.text-justify-xxl{text-align:justify}.text-start-xxl{text-align:start}.text-end-xxl{text-align:end}.flex-row-xxl{flex-direction:row}.flex-row-reverse-xxl{flex-direction:row-reverse}.flex-column-xxl{flex-direction:column}.flex-column-reverse-xxl{flex-direction:column-reverse}.ai-start-xxl{align-items:flex-start}.ai-end-xxl{align-items:flex-end}.ai-center-xxl{align-items:center}.ai-baseline-xxl{align-items:baseline}.ai-stretch-xxl{align-items:stretch}.jc-start-xxl{justify-content:flex-start}.jc-end-xxl{justify-content:flex-end}.jc-center-xxl{justify-content:center}.jc-between-xxl{justify-content:space-between}.jc-around-xxl{justify-content:space-around}.jc-evenly-xxl{justify-content:space-evenly}.cell-xxl-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.cell-xxl-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.cell-xxl-3{flex-basis:25%;max-width:25%}.cell-xxl-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.cell-xxl-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.cell-xxl-6{flex-basis:50%;max-width:50%}.cell-xxl-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.cell-xxl-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.cell-xxl-9{flex-basis:75%;max-width:75%}.cell-xxl-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.cell-xxl-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.cell-xxl-12{flex-basis:100%;max-width:100%}}@media screen and (max-width: 2560px){.show-xxl{display:none}}.reset-spaces h1,.reset-spaces h2,.reset-spaces h3,.reset-spaces h4,.reset-spaces h5,.reset-spaces h6,.reset-spaces p,.reset-spaces ul,.reset-spaces ol,.reset-spaces li,.reset-spaces figure,.reset-spaces blockquote,.reset-spaces dl,.reset-spaces dd{margin:0;padding:0}",""]);const o=r},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i="",s=void 0!==t[5];return t[4]&&(i+="@supports (".concat(t[4],") {")),t[2]&&(i+="@media ".concat(t[2]," {")),s&&(i+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),i+=e(t),s&&(i+="}"),t[2]&&(i+="}"),t[4]&&(i+="}"),i})).join("")},t.i=function(e,i,s,n,l){"string"==typeof e&&(e=[[null,e,void 0]]);var r={};if(s)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(r[a]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);s&&r[d[0]]||(void 0!==l&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=l),i&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=i):d[2]=i),n&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=n):d[4]="".concat(n)),t.push(d))}},t}},81:e=>{e.exports=function(e){return e[1]}},30:(e,t,i)=>{i.r(t),i.d(t,{default:()=>g});var s=i(379),n=i.n(s),l=i(795),r=i.n(l),o=i(569),a=i.n(o),c=i(565),d=i.n(c),h=i(216),x=i.n(h),f=i(589),u=i.n(f),p=i(353),m={};m.styleTagTransform=u(),m.setAttributes=d(),m.insert=a().bind(null,"head"),m.domAPI=r(),m.insertStyleElement=x();n()(p.Z,m);const g=p.Z&&p.Z.locals?p.Z.locals:void 0},379:e=>{var t=[];function i(e){for(var i=-1,s=0;s<t.length;s++)if(t[s].identifier===e){i=s;break}return i}function s(e,s){for(var l={},r=[],o=0;o<e.length;o++){var a=e[o],c=s.base?a[0]+s.base:a[0],d=l[c]||0,h="".concat(c," ").concat(d);l[c]=d+1;var x=i(h),f={css:a[1],media:a[2],sourceMap:a[3],supports:a[4],layer:a[5]};if(-1!==x)t[x].references++,t[x].updater(f);else{var u=n(f,s);s.byIndex=o,t.splice(o,0,{identifier:h,updater:u,references:1})}r.push(h)}return r}function n(e,t){var i=t.domAPI(t);i.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;i.update(e=t)}else i.remove()}}e.exports=function(e,n){var l=s(e=e||[],n=n||{});return function(e){e=e||[];for(var r=0;r<l.length;r++){var o=i(l[r]);t[o].references--}for(var a=s(e,n),c=0;c<l.length;c++){var d=i(l[c]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}l=a}}},569:e=>{var t={};e.exports=function(e,i){var s=function(e){if(void 0===t[e]){var i=document.querySelector(e);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(e){i=null}t[e]=i}return t[e]}(e);if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(i)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,i)=>{e.exports=function(e){var t=i.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(i){!function(e,t,i){var s="";i.supports&&(s+="@supports (".concat(i.supports,") {")),i.media&&(s+="@media ".concat(i.media," {"));var n=void 0!==i.layer;n&&(s+="@layer".concat(i.layer.length>0?" ".concat(i.layer):""," {")),s+=i.css,n&&(s+="}"),i.media&&(s+="}"),i.supports&&(s+="}");var l=i.sourceMap;l&&"undefined"!=typeof btoa&&(s+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(l))))," */")),t.styleTagTransform(s,e,t.options)}(t,e,i)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},595:(e,t,i)=>{i.r(t),i.d(t,{customElement:()=>s,eventOptions:()=>a,property:()=>l,query:()=>c,queryAll:()=>d,queryAssignedElements:()=>u,queryAssignedNodes:()=>p,queryAsync:()=>h,state:()=>r});const s=e=>t=>"function"==typeof t?((e,t)=>(customElements.define(e,t),t))(e,t):((e,t)=>{const{kind:i,elements:s}=t;return{kind:i,elements:s,finisher(t){customElements.define(e,t)}}})(e,t),n=(e,t)=>"method"===t.kind&&t.descriptor&&!("value"in t.descriptor)?{...t,finisher(i){i.createProperty(t.key,e)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){"function"==typeof t.initializer&&(this[t.key]=t.initializer.call(this))},finisher(i){i.createProperty(t.key,e)}};function l(e){return(t,i)=>void 0!==i?((e,t,i)=>{t.constructor.createProperty(i,e)})(e,t,i):n(e,t)}function r(e){return l({...e,state:!0})}const o=({finisher:e,descriptor:t})=>(i,s)=>{var n;if(void 0===s){const s=null!==(n=i.originalKey)&&void 0!==n?n:i.key,l=null!=t?{kind:"method",placement:"prototype",key:s,descriptor:t(i.key)}:{...i,key:s};return null!=e&&(l.finisher=function(t){e(t,s)}),l}{const n=i.constructor;void 0!==t&&Object.defineProperty(i,s,t(s)),null==e||e(n,s)}};function a(e){return o({finisher:(t,i)=>{Object.assign(t.prototype[i],e)}})}function c(e,t){return o({descriptor:i=>{const s={get(){var t,i;return null!==(i=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(e))&&void 0!==i?i:null},enumerable:!0,configurable:!0};if(t){const t="symbol"==typeof i?Symbol():"__"+i;s.get=function(){var i,s;return void 0===this[t]&&(this[t]=null!==(s=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(e))&&void 0!==s?s:null),this[t]}}return s}})}function d(e){return o({descriptor:t=>({get(){var t,i;return null!==(i=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelectorAll(e))&&void 0!==i?i:[]},enumerable:!0,configurable:!0})})}function h(e){return o({descriptor:t=>({async get(){var t;return await this.updateComplete,null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(e)},enumerable:!0,configurable:!0})})}var x;const f=null!=(null===(x=window.HTMLSlotElement)||void 0===x?void 0:x.prototype.assignedElements)?(e,t)=>e.assignedElements(t):(e,t)=>e.assignedNodes(t).filter((e=>e.nodeType===Node.ELEMENT_NODE));function u(e){const{slot:t,selector:i}=null!=e?e:{};return o({descriptor:s=>({get(){var s;const n="slot"+(t?`[name=${t}]`:":not([name])"),l=null===(s=this.renderRoot)||void 0===s?void 0:s.querySelector(n),r=null!=l?f(l,e):[];return i?r.filter((e=>e.matches(i))):r},enumerable:!0,configurable:!0})})}function p(e,t,i){let s,n=e;return"object"==typeof e?(n=e.slot,s=e):s={flatten:t},i?u({slot:n,flatten:t,selector:i}):o({descriptor:e=>({get(){var e,t;const i="slot"+(n?`[name=${n}]`:":not([name])"),l=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(i);return null!==(t=null==l?void 0:l.assignedNodes(s))&&void 0!==t?t:[]},enumerable:!0,configurable:!0})})}},62:(e,t,i)=>{i.r(t),i.d(t,{CSSResult:()=>o,LitElement:()=>xe,ReactiveElement:()=>b,UpdatingElement:()=>he,_$LE:()=>ue,_$LH:()=>re,adoptStyles:()=>d,css:()=>c,defaultConverter:()=>g,getCompatibleStyle:()=>h,html:()=>D,isServer:()=>pe,noChange:()=>W,notEqual:()=>y,nothing:()=>Z,render:()=>ae,supportsAdoptingStyleSheets:()=>n,svg:()=>V,unsafeCSS:()=>a});const s=window,n=s.ShadowRoot&&(void 0===s.ShadyCSS||s.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,l=Symbol(),r=new WeakMap;class o{constructor(e,t,i){if(this._$cssResult$=!0,i!==l)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(n&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=r.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&r.set(t,e))}return e}toString(){return this.cssText}}const a=e=>new o("string"==typeof e?e:e+"",void 0,l),c=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,s)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[s+1]),e[0]);return new o(i,e,l)},d=(e,t)=>{n?e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):t.forEach((t=>{const i=document.createElement("style"),n=s.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=t.cssText,e.appendChild(i)}))},h=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return a(t)})(e):e;var x;const f=window,u=f.trustedTypes,p=u?u.emptyScript:"",m=f.reactiveElementPolyfillSupport,g={toAttribute(e,t){switch(t){case Boolean:e=e?p:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},y=(e,t)=>t!==e&&(t==t||e==e),v={attribute:!0,type:String,converter:g,reflect:!1,hasChanged:y};class b extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(e){var t;this.finalize(),(null!==(t=this.h)&&void 0!==t?t:this.h=[]).push(e)}static get observedAttributes(){this.finalize();const e=[];return this.elementProperties.forEach(((t,i)=>{const s=this._$Ep(i,t);void 0!==s&&(this._$Ev.set(s,i),e.push(s))})),e}static createProperty(e,t=v){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){const i="symbol"==typeof e?Symbol():"__"+e,s=this.getPropertyDescriptor(e,i,t);void 0!==s&&Object.defineProperty(this.prototype,e,s)}}static getPropertyDescriptor(e,t,i){return{get(){return this[t]},set(s){const n=this[e];this[t]=s,this.requestUpdate(e,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||v}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const e=Object.getPrototypeOf(this);if(e.finalize(),void 0!==e.h&&(this.h=[...e.h]),this.elementProperties=new Map(e.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const i of t)this.createProperty(i,e[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(h(e))}else void 0!==e&&t.push(h(e));return t}static _$Ep(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}u(){var e;this._$E_=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(e=this.constructor.h)||void 0===e||e.forEach((e=>e(this)))}addController(e){var t,i;(null!==(t=this._$ES)&&void 0!==t?t:this._$ES=[]).push(e),void 0!==this.renderRoot&&this.isConnected&&(null===(i=e.hostConnected)||void 0===i||i.call(e))}removeController(e){var t;null===(t=this._$ES)||void 0===t||t.splice(this._$ES.indexOf(e)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((e,t)=>{this.hasOwnProperty(t)&&(this._$Ei.set(t,this[t]),delete this[t])}))}createRenderRoot(){var e;const t=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return d(t,this.constructor.elementStyles),t}connectedCallback(){var e;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(e=this._$ES)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostConnected)||void 0===t?void 0:t.call(e)}))}enableUpdating(e){}disconnectedCallback(){var e;null===(e=this._$ES)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostDisconnected)||void 0===t?void 0:t.call(e)}))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$EO(e,t,i=v){var s;const n=this.constructor._$Ep(e,i);if(void 0!==n&&!0===i.reflect){const l=(void 0!==(null===(s=i.converter)||void 0===s?void 0:s.toAttribute)?i.converter:g).toAttribute(t,i.type);this._$El=e,null==l?this.removeAttribute(n):this.setAttribute(n,l),this._$El=null}}_$AK(e,t){var i;const s=this.constructor,n=s._$Ev.get(e);if(void 0!==n&&this._$El!==n){const e=s.getPropertyOptions(n),l="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==(null===(i=e.converter)||void 0===i?void 0:i.fromAttribute)?e.converter:g;this._$El=n,this[n]=l.fromAttribute(t,e.type),this._$El=null}}requestUpdate(e,t,i){let s=!0;void 0!==e&&(((i=i||this.constructor.getPropertyOptions(e)).hasChanged||y)(this[e],t)?(this._$AL.has(e)||this._$AL.set(e,t),!0===i.reflect&&this._$El!==e&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(e,i))):s=!1),!this.isUpdatePending&&s&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var e;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((e,t)=>this[t]=e)),this._$Ei=void 0);let t=!1;const i=this._$AL;try{t=this.shouldUpdate(i),t?(this.willUpdate(i),null===(e=this._$ES)||void 0===e||e.forEach((e=>{var t;return null===(t=e.hostUpdate)||void 0===t?void 0:t.call(e)})),this.update(i)):this._$Ek()}catch(e){throw t=!1,this._$Ek(),e}t&&this._$AE(i)}willUpdate(e){}_$AE(e){var t;null===(t=this._$ES)||void 0===t||t.forEach((e=>{var t;return null===(t=e.hostUpdated)||void 0===t?void 0:t.call(e)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(e){return!0}update(e){void 0!==this._$EC&&(this._$EC.forEach(((e,t)=>this._$EO(t,this[t],e))),this._$EC=void 0),this._$Ek()}updated(e){}firstUpdated(e){}}var w;b.finalized=!0,b.elementProperties=new Map,b.elementStyles=[],b.shadowRootOptions={mode:"open"},null==m||m({ReactiveElement:b}),(null!==(x=f.reactiveElementVersions)&&void 0!==x?x:f.reactiveElementVersions=[]).push("1.6.1");const _=window,$=_.trustedTypes,j=$?$.createPolicy("lit-html",{createHTML:e=>e}):void 0,A="$lit$",S=`lit$${(Math.random()+"").slice(9)}$`,E="?"+S,k=`<${E}>`,C=document,P=()=>C.createComment(""),R=e=>null===e||"object"!=typeof e&&"function"!=typeof e,O=Array.isArray,z=e=>O(e)||"function"==typeof(null==e?void 0:e[Symbol.iterator]),M="[ \t\n\f\r]",T=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,N=/-->/g,L=/>/g,U=RegExp(`>|${M}(?:([^\\s"'>=/]+)(${M}*=${M}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),H=/'/g,I=/"/g,B=/^(?:script|style|textarea|title)$/i,q=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),D=q(1),V=q(2),W=Symbol.for("lit-noChange"),Z=Symbol.for("lit-nothing"),K=new WeakMap,F=C.createTreeWalker(C,129,null,!1),J=(e,t)=>{const i=e.length-1,s=[];let n,l=2===t?"<svg>":"",r=T;for(let t=0;t<i;t++){const i=e[t];let o,a,c=-1,d=0;for(;d<i.length&&(r.lastIndex=d,a=r.exec(i),null!==a);)d=r.lastIndex,r===T?"!--"===a[1]?r=N:void 0!==a[1]?r=L:void 0!==a[2]?(B.test(a[2])&&(n=RegExp("</"+a[2],"g")),r=U):void 0!==a[3]&&(r=U):r===U?">"===a[0]?(r=null!=n?n:T,c=-1):void 0===a[1]?c=-2:(c=r.lastIndex-a[2].length,o=a[1],r=void 0===a[3]?U:'"'===a[3]?I:H):r===I||r===H?r=U:r===N||r===L?r=T:(r=U,n=void 0);const h=r===U&&e[t+1].startsWith("/>")?" ":"";l+=r===T?i+k:c>=0?(s.push(o),i.slice(0,c)+A+i.slice(c)+S+h):i+S+(-2===c?(s.push(void 0),t):h)}const o=l+(e[i]||"<?>")+(2===t?"</svg>":"");if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==j?j.createHTML(o):o,s]};class G{constructor({strings:e,_$litType$:t},i){let s;this.parts=[];let n=0,l=0;const r=e.length-1,o=this.parts,[a,c]=J(e,t);if(this.el=G.createElement(a,i),F.currentNode=this.el.content,2===t){const e=this.el.content,t=e.firstChild;t.remove(),e.append(...t.childNodes)}for(;null!==(s=F.nextNode())&&o.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const e=[];for(const t of s.getAttributeNames())if(t.endsWith(A)||t.startsWith(S)){const i=c[l++];if(e.push(t),void 0!==i){const e=s.getAttribute(i.toLowerCase()+A).split(S),t=/([.?@])?(.*)/.exec(i);o.push({type:1,index:n,name:t[2],strings:e,ctor:"."===t[1]?te:"?"===t[1]?se:"@"===t[1]?ne:ee})}else o.push({type:6,index:n})}for(const t of e)s.removeAttribute(t)}if(B.test(s.tagName)){const e=s.textContent.split(S),t=e.length-1;if(t>0){s.textContent=$?$.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],P()),F.nextNode(),o.push({type:2,index:++n});s.append(e[t],P())}}}else if(8===s.nodeType)if(s.data===E)o.push({type:2,index:n});else{let e=-1;for(;-1!==(e=s.data.indexOf(S,e+1));)o.push({type:7,index:n}),e+=S.length-1}n++}}static createElement(e,t){const i=C.createElement("template");return i.innerHTML=e,i}}function Q(e,t,i=e,s){var n,l,r,o;if(t===W)return t;let a=void 0!==s?null===(n=i._$Co)||void 0===n?void 0:n[s]:i._$Cl;const c=R(t)?void 0:t._$litDirective$;return(null==a?void 0:a.constructor)!==c&&(null===(l=null==a?void 0:a._$AO)||void 0===l||l.call(a,!1),void 0===c?a=void 0:(a=new c(e),a._$AT(e,i,s)),void 0!==s?(null!==(r=(o=i)._$Co)&&void 0!==r?r:o._$Co=[])[s]=a:i._$Cl=a),void 0!==a&&(t=Q(e,a._$AS(e,t.values),a,s)),t}class X{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){var t;const{el:{content:i},parts:s}=this._$AD,n=(null!==(t=null==e?void 0:e.creationScope)&&void 0!==t?t:C).importNode(i,!0);F.currentNode=n;let l=F.nextNode(),r=0,o=0,a=s[0];for(;void 0!==a;){if(r===a.index){let t;2===a.type?t=new Y(l,l.nextSibling,this,e):1===a.type?t=new a.ctor(l,a.name,a.strings,this,e):6===a.type&&(t=new le(l,this,e)),this._$AV.push(t),a=s[++o]}r!==(null==a?void 0:a.index)&&(l=F.nextNode(),r++)}return F.currentNode=C,n}v(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Y{constructor(e,t,i,s){var n;this.type=2,this._$AH=Z,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=s,this._$Cp=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var e,t;return null!==(t=null===(e=this._$AM)||void 0===e?void 0:e._$AU)&&void 0!==t?t:this._$Cp}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===(null==e?void 0:e.nodeType)&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Q(this,e,t),R(e)?e===Z||null==e||""===e?(this._$AH!==Z&&this._$AR(),this._$AH=Z):e!==this._$AH&&e!==W&&this._(e):void 0!==e._$litType$?this.g(e):void 0!==e.nodeType?this.$(e):z(e)?this.T(e):this._(e)}k(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}$(e){this._$AH!==e&&(this._$AR(),this._$AH=this.k(e))}_(e){this._$AH!==Z&&R(this._$AH)?this._$AA.nextSibling.data=e:this.$(C.createTextNode(e)),this._$AH=e}g(e){var t;const{values:i,_$litType$:s}=e,n="number"==typeof s?this._$AC(e):(void 0===s.el&&(s.el=G.createElement(s.h,this.options)),s);if((null===(t=this._$AH)||void 0===t?void 0:t._$AD)===n)this._$AH.v(i);else{const e=new X(n,this),t=e.u(this.options);e.v(i),this.$(t),this._$AH=e}}_$AC(e){let t=K.get(e.strings);return void 0===t&&K.set(e.strings,t=new G(e)),t}T(e){O(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,s=0;for(const n of e)s===t.length?t.push(i=new Y(this.k(P()),this.k(P()),this,this.options)):i=t[s],i._$AI(n),s++;s<t.length&&(this._$AR(i&&i._$AB.nextSibling,s),t.length=s)}_$AR(e=this._$AA.nextSibling,t){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){var t;void 0===this._$AM&&(this._$Cp=e,null===(t=this._$AP)||void 0===t||t.call(this,e))}}class ee{constructor(e,t,i,s,n){this.type=1,this._$AH=Z,this._$AN=void 0,this.element=e,this.name=t,this._$AM=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Z}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(e,t=this,i,s){const n=this.strings;let l=!1;if(void 0===n)e=Q(this,e,t,0),l=!R(e)||e!==this._$AH&&e!==W,l&&(this._$AH=e);else{const s=e;let r,o;for(e=n[0],r=0;r<n.length-1;r++)o=Q(this,s[i+r],t,r),o===W&&(o=this._$AH[r]),l||(l=!R(o)||o!==this._$AH[r]),o===Z?e=Z:e!==Z&&(e+=(null!=o?o:"")+n[r+1]),this._$AH[r]=o}l&&!s&&this.j(e)}j(e){e===Z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=e?e:"")}}class te extends ee{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Z?void 0:e}}const ie=$?$.emptyScript:"";class se extends ee{constructor(){super(...arguments),this.type=4}j(e){e&&e!==Z?this.element.setAttribute(this.name,ie):this.element.removeAttribute(this.name)}}class ne extends ee{constructor(e,t,i,s,n){super(e,t,i,s,n),this.type=5}_$AI(e,t=this){var i;if((e=null!==(i=Q(this,e,t,0))&&void 0!==i?i:Z)===W)return;const s=this._$AH,n=e===Z&&s!==Z||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,l=e!==Z&&(s===Z||n);n&&this.element.removeEventListener(this.name,this,s),l&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(t=this.options)||void 0===t?void 0:t.host)&&void 0!==i?i:this.element,e):this._$AH.handleEvent(e)}}class le{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Q(this,e)}}const re={O:A,P:S,A:E,C:1,M:J,L:X,D:z,R:Q,I:Y,V:ee,H:se,N:ne,U:te,F:le},oe=_.litHtmlPolyfillSupport;null==oe||oe(G,Y),(null!==(w=_.litHtmlVersions)&&void 0!==w?w:_.litHtmlVersions=[]).push("2.7.4");const ae=(e,t,i)=>{var s,n;const l=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:t;let r=l._$litPart$;if(void 0===r){const e=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:null;l._$litPart$=r=new Y(t.insertBefore(P(),e),e,void 0,null!=i?i:{})}return r._$AI(e),r};var ce,de;const he=b;class xe extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e,t;const i=super.createRenderRoot();return null!==(e=(t=this.renderOptions).renderBefore)&&void 0!==e||(t.renderBefore=i.firstChild),i}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=ae(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),null===(e=this._$Do)||void 0===e||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this._$Do)||void 0===e||e.setConnected(!1)}render(){return W}}xe.finalized=!0,xe._$litElement$=!0,null===(ce=globalThis.litElementHydrateSupport)||void 0===ce||ce.call(globalThis,{LitElement:xe});const fe=globalThis.litElementPolyfillSupport;null==fe||fe({LitElement:xe});const ue={_$AK:(e,t,i)=>{e._$AK(t,i)},_$AL:e=>e._$AL};(null!==(de=globalThis.litElementVersions)&&void 0!==de?de:globalThis.litElementVersions=[]).push("3.3.2");const pe=!1}},t={};function i(s){var n=t[s];if(void 0!==n)return n.exports;var l=t[s]={id:s,exports:{}};return e[s].call(l.exports,l,l.exports,i),l.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var s in t)i.o(t,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nc=void 0;i(382),i(244),i(30)})();
+(()=>{"use strict";var e={701:(e,r,t)=>{t.r(r)}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var i=r[o]={exports:{}};return e[o](i,i.exports,t),i.exports}t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};t(701)})();

dist/src/base.d.ts

 import "./components/index";
-import "./styles/media-responsive.scss";

dist/src/components/canvas.d.ts

@@ -11,5 +11,5 @@ import { LitElement } from "lit";
     width: string | null;
-    margin: string | null;
-    padding: string | null;
+    mg: string | null;
+    pd: string | null;
     render(): import("lit-html").TemplateResult<1>;
 }

dist/src/components/centerbox.d.ts

 import { LitElement } from "lit";
 export declare class FlexCenterBox extends LitElement {
     static styles: import("lit").CSSResult;
+    pd: string;
     render(): import("lit-html").TemplateResult<1>;
 }

dist/src/components/index.d.ts

 import "./canvas";
-import "./container";
+import "./box";
 import "./cell";
 import "./grid";
-import "./centerbox";

dist/src/components/utils.d.ts

 import { LitElement } from "lit";
-export declare class StackedContainer extends LitElement {
+export declare class StackedBox extends LitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
-export declare class StackedItem extends LitElement {
+export declare class StackedCell extends LitElement {
     static styles: import("lit").CSSResult;
@@ -13,10 +13,7 @@ xa: string | null;
     z: string | null;
+    oc: string | null;
     render(): import("lit-html").TemplateResult<1>;
 }
-export declare class FitConainer extends LitElement {
+export declare class FitBox extends LitElement {
     static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export declare class FillConainer extends LitElement {
-    static styles: import("lit").CSSResult;
     width: string | null;
@@ -35,2 +32,10 @@ height: string | null;
 }
+export declare class FlexDivider extends LitElement {
+    static styles: import("lit").CSSResult;
+    mg: string | null;
+    width: string | null;
+    color: string | null;
+    size: string | null;
+    render(): import("lit-html").TemplateResult<1>;
+}
 export declare class SpaceBox extends LitElement {
@@ -40,5 +45,36 @@ static styles: import("lit").CSSResult;
     height: string | null;
+    size: string | null;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class StyleBox extends LitElement {
+    static styles: import("lit").CSSResult;
+    fz: string | null;
+    fw: string | null;
+    lh: string | null;
+    w: string | null;
+    h: string | null;
+    mw: string | null;
+    mxw: string | null;
+    mh: string | null;
+    tt: string | null;
+    mxh: string | null;
+    pis: string | null;
+    pie: string | null;
+    pbs: string | null;
+    pbe: string | null;
+    mbs: string | null;
+    mbe: string | null;
+    mis: string | null;
+    mie: string | null;
+    mg: string | null;
     pd: string | null;
-    mg: string | null;
+    ta: string | null;
+    op: string | null;
+    td: string | null;
+    br: string | null;
+    px: string | null;
+    py: string | null;
+    mx: string | null;
+    my: string | null;
     render(): import("lit-html").TemplateResult<1>;
 }

dist/src/css-responsive.d.ts

@@ -1,2 +0,1 @@
-import "./layout/base";
-import "./styles/responsive.scss";
+import "./styles/media-responsive.scss";

dist/src/full.d.ts

 import "./components/index";
 import "./components/media";
 import "./components/utils";
-import "./styles/media-responsive.scss";

dist/src/js-responsive.d.ts

@@ -1,3 +0,1 @@
-import "./layout/base";
-import "./layout/media";
 import "./styles/media-responsive.scss";

dist/src/utils/resize-observer.d.ts

@@ -0,1 +1,6 @@
+declare global {
+    interface Window {
+        FlexResizeObserver: ResizeObserverWrapper;
+    }
+}
 export declare class ResizeObserverWrapper {
@@ -2,0 +7,0 @@ private options;

package.json

@@ -41,3 +41,3 @@ {
   "dependencies": {},
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Flex Layout System",
@@ -44,0 +44,0 @@ "name": "flex-layout-system",

README.md

@@ -1,15 +0,59 @@
-# 🚀 Welcome to your new awesome project!
+# Introducing Flex Layout System: Empowering Effortless Web Design
 
-This project has been created using **webpack-cli**, you can now run
+Flex Layout System is a powerful library of web components designed to enhance web design development. It provides a range of flexible components for effortless layout creation and grid implementation. The primary objective of Flex Layout System is to simplify the process of building responsive layouts across different projects and frameworks.
 
+Key advantages of Flex Layout System include its intuitive component names, which eliminate the need for complex div structures. The "flex-box" serves as the container, while the "flex-cell" acts as the adaptable building block within the grid. This simplicity improves efficiency and promotes cleaner, more maintainable code.
+
+By importing Flex Layout System just once, you can seamlessly integrate it into any project and framework. The library offers well-designed components with thoughtful nesting, making it easy to customize gaps, grids, columns, and responsiveness. Additionally, the styles of these components are applied to the host element, allowing for effortless customization and overrides. Supplementary components are also included, providing efficient tools for rapid layout design with minimal CSS requirements.
+
+**See more on official website**: [https://flex-layout-system.netlify.app/](https://flex-layout-system.netlify.app/)
+
+## Get Started
+
+To get started with Flex Layout System, follow these simple steps:
+
+Step 1: Install the package Run the following command in your project to install the Flex Layout System package from npm:
+
+```bash
+npm install flex-layout-system
 ```
-npm run build
+
+Step 2: Importing and using the components In your TypeScript/JS file. For example, to use the base layout without utilities and styles, import the following:
+
+```js
+// Only one of the following is required.
+// If you want to use the base layout, import the following:
+import "flex-layout-system/dist/base.min.js";
+
+// If you want to use the layout with utilities, import the following:
+import "flex-layout-system/dist/full.min.js";
+
+// Optional. If you want to use the responsive utilities based on CSS Media Queries, import the following:
+import "flex-layout-system/dist/css-responsive.min.css";
+
+// Optional: If you want to use the responsive utilities based on the JavaScript system using the flex-media component, import the following:
+import "flex-layout-system/dist/js-responsive.min.css";
 ```
 
-or
+If yow want to use this library in your HTML file (browser), you can use the following:
 
+```html
+<!-- Only one of the following is required. -->
+<!-- If you want to use the base layout, import the following: -->
+<script src="https://unpkg.com/flex-layout-system/dist/base.min.js"></script>
+
+<!-- If you want to use the layout with utilities, import the following: -->
+<script src="https://unpkg.com/flex-layout-system/dist/full.min.js"></script>
+
+<!-- Optional. If you want to use the responsive utilities based on CSS Media Queries, import the following: -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/flex-layout-system/dist/css-responsive.min.css"
+/>
+
+<!-- Optional: If you want to use the responsive utilities based on the JavaScript system using the flex-media component, import the following: -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/flex-layout-system/dist/js-responsive.min.css"
+/>
 ```
-yarn build
-```
-
-to bundle your application

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

60

increased by275%

Worsened metrics

Total package byte prevSize

125261

decreased by-45.18%

Number of package files

25

decreased by-24.24%

Lines of code

1388

decreased by-40.86%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes