@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

package/dist/collection/components/calcite-filter/calcite-filter.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -83,13 +77,12 @@
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -108,33 +101,32 @@
 }
 
 label {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
   position: relative;
-  width: 100%;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
 }
 
 input[type=text] {
-  background-color: transparent;
-  border-style: none;
-  font-family: inherit;
-  color: var(--calcite-ui-text-1);
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
   margin-bottom: 0.25rem;
   width: 100%;
+  border-style: none;
+  background-color: transparent;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-right: 0.25rem;
   padding-left: 1.5rem;
-  transition: padding 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  font-family: inherit;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
+  color: var(--calcite-ui-text-1);
+  transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
-
 input[type=text]::-ms-clear {
   display: none;
 }
@@ -144,52 +136,32 @@ calcite-input {
 }
 
 .search-icon {
-  display: flex;
-  left: 0;
   position: absolute;
+  display: flex;
   color: var(--calcite-ui-text-2);
-  transition: left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;
-}
-
-.calcite--rtl .search-icon {
-  right: 0;
+  inset-inline-start: 0;
+  transition: left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);
 }
 
 input[type=text]:focus {
   border-color: var(--calcite-ui-brand);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
-
 input[type=text]:focus ~ .search-icon {
-  left: calc(1rem * -1);
+  inset-inline-start: calc(1rem * -1);
   opacity: 0;
 }
 
-.calcite--rtl input[type=text] {
-  padding-left: 0.25rem;
-  padding-right: 1.5rem;
-}
-
-.calcite--rtl input[type=text]:focus {
-  padding-right: 1.25rem;
-}
-
-.calcite--rtl input[type=text]:focus ~ .search-icon {
-  right: calc(1rem * -1);
-}
-
 .clear-button {
-  color: var(--calcite-ui-text-2);
-  background-color: transparent;
-  border-width: 0;
-  cursor: pointer;
   display: flex;
+  cursor: pointer;
   align-items: center;
+  border-width: 0px;
+  background-color: transparent;
+  color: var(--calcite-ui-text-2);
 }
-
 .clear-button:hover, .clear-button:focus {
   color: var(--calcite-ui-text-1);
 }

package/dist/collection/components/calcite-filter/calcite-filter.js

@@ -5,8 +5,7 @@
 import { Component, Element, Event, Prop, h, Method, Fragment, Watch } from "@stencil/core";
 import { debounce, forIn } from "lodash-es";
 import { CSS, ICONS, TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 const filterDebounceInMs = 250;
 export class CalciteFilter {
   constructor() {
@@ -67,25 +66,12 @@ export class CalciteFilter {
       this.setFocus();
     };
   }
-  watchDataHandler(value) {
-    this.items = value;
-  }
   watchItemsHandler() {
     this.filter(this.value);
   }
   valueHandler(value) {
     this.filter(value);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    if (this.data && !this.items) {
-      this.items = this.data;
-    }
-  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -98,7 +84,7 @@ export class CalciteFilter {
   updateFiltered(filtered) {
     this.filteredItems.length = 0;
     this.filteredItems = this.filteredItems.concat(filtered);
-    this.calciteFilterChange.emit(filtered);
+    this.calciteFilterChange.emit();
   }
   // --------------------------------------------------------------------------
   //
@@ -106,13 +92,12 @@ export class CalciteFilter {
   //
   // --------------------------------------------------------------------------
   render() {
-    const rtl = getElementDir(this.el) === "rtl";
     const { disabled } = this;
     return (h(Fragment, null,
       disabled ? h("calcite-scrim", null) : null,
       h("div", { class: CSS.container },
-        h("label", { class: rtl ? CSS_UTILITY.rtl : null },
-          h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, class: rtl ? CSS_UTILITY.rtl : null, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        h("label", null,
+          h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
               this.textInput = el;
             }, type: "text", value: this.value })),
         this.value ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear },
@@ -127,24 +112,6 @@ export class CalciteFilter {
     "$": ["calcite-filter.css"]
   }; }
   static get properties() { return {
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object[]",
-        "resolved": "object[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use `items` instead."
-          }],
-        "text": "The input data. The filter uses this as the starting point, and returns items\nthat contain the string entered in the input, using a partial match and recursive search."
-      }
-    },
     "items": {
       "type": "unknown",
       "mutable": true,
@@ -153,7 +120,7 @@ export class CalciteFilter {
         "resolved": "object[]",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
@@ -281,8 +248,8 @@ export class CalciteFilter {
         "text": "This event fires when the filter text changes."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }
@@ -306,9 +273,6 @@ export class CalciteFilter {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "data",
-      "methodName": "watchDataHandler"
-    }, {
       "propName": "items",
       "methodName": "watchItemsHandler"
     }, {

package/dist/collection/components/calcite-flow/calcite-flow.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -83,13 +77,12 @@
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -97,64 +90,63 @@
 }
 
 :host {
+  position: relative;
   display: flex;
+  width: 100%;
   flex: 1 1 auto;
   align-items: stretch;
   background-color: transparent;
-  width: 100%;
   overflow: hidden;
-  position: relative;
 }
-
 :host .frame {
+  position: relative;
+  margin: 0px;
   display: flex;
-  flex: 1 1 auto;
-  align-items: stretch;
   width: 100%;
-  padding: 0;
-  margin: 0;
+  flex: 1 1 auto;
   flex-direction: column;
-  position: relative;
+  align-items: stretch;
+  padding: 0px;
 }
-
 :host ::slotted(calcite-panel) {
   height: 100%;
 }
-
 :host ::slotted(.calcite-match-height:last-child) {
   display: flex;
   flex: 1 1 auto;
   overflow: hidden;
 }
-
 :host .frame--advancing {
-  animation: calcite-frame-advance 150ms ease-in-out;
+  animation: calcite-frame-advance var(--calcite-animation-timing);
 }
-
 :host .frame--retreating {
-  animation: calcite-frame-retreat 150ms ease-in-out;
+  animation: calcite-frame-retreat var(--calcite-animation-timing);
 }
-
 @keyframes calcite-frame-advance {
   0% {
-    --bg-opacity: 0.5;
+    --tw-bg-opacity: 0.5;
+  }
+  0% {
     transform: translate3d(50px, 0, 0);
   }
-
   100% {
-    --bg-opacity: 1;
+    --tw-bg-opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0);
   }
 }
-
 @keyframes calcite-frame-retreat {
   0% {
-    --bg-opacity: 0.5;
+    --tw-bg-opacity: 0.5;
+  }
+  0% {
     transform: translate3d(-50px, 0, 0);
   }
-
   100% {
-    --bg-opacity: 1;
+    --tw-bg-opacity: 1;
+  }
+  100% {
     transform: translate3d(0, 0, 0);
   }
 }

package/dist/collection/components/calcite-graph/calcite-graph.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -91,15 +85,14 @@
 .svg {
   fill: currentColor;
   stroke: transparent;
-  margin: 0;
-  padding: 0;
+  margin: 0px;
   display: block;
+  padding: 0px;
 }
 
 :host([data-style=slider-histogram]) svg {
   width: 100%;
 }
-
 :host([data-style=slider-histogram]) svg .graph-path--highlight {
   fill: var(--calcite-ui-brand);
   opacity: 0.5;

package/dist/collection/components/calcite-handle/calcite-handle.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -90,12 +84,12 @@
 
 .handle {
   display: flex;
+  cursor: move;
   align-items: center;
-  align-self: stretch;
   justify-content: center;
-  background-color: transparent;
+  align-self: stretch;
   border-style: none;
-  cursor: move;
+  background-color: transparent;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
@@ -103,23 +97,19 @@
   padding: 0.75rem 0.25rem;
   line-height: 0;
 }
-
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
-
 .handle:focus {
   color: var(--calcite-ui-text-1);
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .handle--activated {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-
 .handle calcite-icon {
   color: inherit;
 }

package/dist/collection/components/calcite-icon/assets/calcite-icon/centerAlign16.json

@@ -0,0 +1 @@
+"M1 2h14v1H1zm3 5h8V6H4zm-3 4h14v-1H1zm3 4h8v-1H4z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/centerAlign24.json

@@ -0,0 +1 @@
+"M2 3h20v1H2zm4 7h12V9H6zm-4 6h20v-1H2zm4 6h12v-1H6z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/centerAlign32.json

@@ -0,0 +1 @@
+"M2 4h28v1H2zm6 9h16v-1H8zm-6 8h28v-1H2zm6 8h16v-1H8z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/checkSquareF16.json

@@ -0,0 +1 @@
+"M14.071 2H2.93a.929.929 0 0 0-.93.929V14.07a.929.929 0 0 0 .929.929H14.07a.929.929 0 0 0 .929-.929V2.93a.929.929 0 0 0-.928-.93zM7.557 12.451L4.452 9.346l1.02-1.022 2.085 2.09 4.77-4.771 1.02 1.02z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/checkSquareF24.json

@@ -0,0 +1 @@
+"M20.719 3H4.28A1.281 1.281 0 0 0 3 4.281v16.437A1.282 1.282 0 0 0 4.281 22h16.437A1.282 1.282 0 0 0 22 20.718V4.281A1.281 1.281 0 0 0 20.719 3zM10.502 17.277l-3.79-3.585.92-.918 2.865 2.676 7.027-6.874.92.92z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/checkSquareF32.json

@@ -0,0 +1 @@
+"M27.198 4h-21.4A1.8 1.8 0 0 0 4 5.798V27.2A1.8 1.8 0 0 0 5.8 29h21.4a1.8 1.8 0 0 0 1.8-1.8V5.798A1.802 1.802 0 0 0 27.198 4zm-13.69 18.291l-4.213-4.01.92-.92 3.288 3.1 10.077-9.924.92.92z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/cloudy16.json

@@ -0,0 +1 @@
+"M13.93 6.312a3.978 3.978 0 0 0-6.49-2.371 2.48 2.48 0 0 0-3.977.118 1.98 1.98 0 0 0-2.427 2.295 2.224 2.224 0 0 0-.001 3.758A2.473 2.473 0 0 0 3.5 13h9a3.496 3.496 0 0 0 1.43-6.688zM12.5 12h-9a1.498 1.498 0 0 1-.273-2.97l.678-.126.124-.677a1.462 1.462 0 0 1 1.84-1.173l.986.252.233-.992a2.989 2.989 0 0 1 5.857.17l.092.522.484.218A2.496 2.496 0 0 1 12.5 12zM1 8.233a1.228 1.228 0 0 1 .574-1.036l.564-.36-.118-.66A.98.98 0 0 1 3 5a1.013 1.013 0 0 1 .231.032l.657.156.39-.55a1.491 1.491 0 0 1 2.48.051 3.987 3.987 0 0 0-.643 1.396 2.462 2.462 0 0 0-3.07 1.96A2.498 2.498 0 0 0 1.414 9.14 1.219 1.219 0 0 1 1 8.233z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/cloudy24.json

@@ -0,0 +1 @@
+"M19.95 8.719a5.48 5.48 0 0 0-8.723-2.429 3.41 3.41 0 0 0-5.466.166 2.722 2.722 0 0 0-3.337 3.155 3.05 3.05 0 0 0-.414 4.848c0 .035-.01.068-.01.104A3.438 3.438 0 0 0 5.438 18h12.75a4.807 4.807 0 0 0 1.761-9.281zM18.187 17H5.438a2.438 2.438 0 0 1-.066-4.874h.716l.268-.58a2.443 2.443 0 0 1 2.207-1.421 2.41 2.41 0 0 1 .593.085l.986.248.232-.99a4.494 4.494 0 0 1 8.63-.425l.149.436.43.17A3.807 3.807 0 0 1 18.187 17zM3.525 10.094l-.118-.659a1.775 1.775 0 0 1-.033-.31A1.725 1.725 0 0 1 5.53 7.429l.656.156.39-.55a2.42 2.42 0 0 1 3.95-.03A5.478 5.478 0 0 0 9.4 9.24a3.369 3.369 0 0 0-3.952 1.886l-.011-.001a3.437 3.437 0 0 0-3.16 2.086 2.038 2.038 0 0 1 .684-2.757z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/cloudy32.json

@@ -0,0 +1 @@
+"M26.921 12.471a7.489 7.489 0 0 0-12.566-4.422A4.454 4.454 0 0 0 7.72 9.073 3.964 3.964 0 0 0 3 13a3.954 3.954 0 0 0 .053.526 3.966 3.966 0 0 0-.046 6.923 4.669 4.669 0 0 0 .057.824A4.614 4.614 0 0 0 7.672 25H24.5a6.498 6.498 0 0 0 2.421-12.529zM24.5 24H7.672a3.621 3.621 0 0 1-3.621-2.892 3.5 3.5 0 0 1 3.271-4.098l.67-.033.223-.633A3.498 3.498 0 0 1 11.5 14a1.803 1.803 0 0 1 .246.025l1.212.144.063-1.057a6.49 6.49 0 0 1 12.91-.505l.079.575.538.217A5.498 5.498 0 0 1 24.5 24zM4.133 14.066l-.103-.776A2.065 2.065 0 0 1 4 13a2.965 2.965 0 0 1 3.541-2.944l.658.12.362-.562a3.46 3.46 0 0 1 5.122-.828 7.47 7.47 0 0 0-1.66 4.267A4.431 4.431 0 0 0 11.5 13a4.487 4.487 0 0 0-4.228 3.012 4.5 4.5 0 0 0-4.12 3.333 2.965 2.965 0 0 1 .39-4.947z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/convert16.json

@@ -0,0 +1 @@
+"M10.5 1H10V0h.5A2.503 2.503 0 0 1 13 2.5V3h1.176L12.5 5.058 10.824 3H12v-.5A1.502 1.502 0 0 0 10.5 1zM8 0H0v9h7V8H1V1h6v6a1 1 0 0 1 1-1zm8 9v7H8V7h6zm-1 1h-2V8H9v7h6zm0-1l-1-1v1zM5 2H2v1h3zM4 4H2v1h2zM2 7h2V6H2zm4-1H5v1h1zm0-2H5v1h1zm4 7h4v3h-4zm1 2h2v-1h-2z"