@oiz/stzh-components 2.10.0-beta → 2.10.0

package/dist/collection/components/stzh-ratio/stzh-ratio.css

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -122,8 +125,8 @@
 * @prop --stzh-ratio-background-color: **Global**: Background color of ratios
 */
 :host {
-  --ratio: 9 / 16;
   --background-color: var(--stzh-ratio-background-color);
+  --ratio: 0.5625;
 }
 :host ::slotted(*) {
   position: absolute;
@@ -140,52 +143,485 @@
      object-fit: contain;
 }
 
+/* Ratio variants */
 :host([portrait]:not([portrait=false])) {
-  --ratio: 16 / 9;
+  --ratio: 1.7777777778;
+}
+
+:host([ratio="16:9"]) {
+  --ratio: 0.5625;
+}
+
+:host([ratio="16:9"][portrait]:not([portrait=false])) {
+  --ratio: 1.7777777778;
 }
 
 :host([ratio="1:1"]) {
-  --ratio: 1 / 1;
+  --ratio: 1;
 }
 
-:host([ratio="5:4"]) {
-  --ratio: 4 / 5;
+:host([ratio="1:1"][portrait]:not([portrait=false])) {
+  --ratio: 1;
 }
 
-:host([ratio="5:4"][portrait]:not([portrait=false])) {
-  --ratio: 5 / 4;
+:host([ratio="21:9"]) {
+  --ratio: 0.4285714286;
 }
 
-:host([ratio="4:3"]) {
-  --ratio: 3 / 4;
+:host([ratio="21:9"][portrait]:not([portrait=false])) {
+  --ratio: 2.3333333333;
 }
 
-:host([ratio="4:3"][portrait]:not([portrait=false])) {
-  --ratio: 4 / 3;
+:host([ratio="2:1"]) {
+  --ratio: 0.5;
+}
+
+:host([ratio="2:1"][portrait]:not([portrait=false])) {
+  --ratio: 2;
 }
 
 :host([ratio="3:2"]) {
-  --ratio: 2 / 3;
+  --ratio: 0.6666666667;
 }
 
 :host([ratio="3:2"][portrait]:not([portrait=false])) {
-  --ratio: 3 / 2;
+  --ratio: 1.5;
 }
 
-:host([ratio="2:1"]) {
-  --ratio: 1 / 2;
+:host([ratio="4:3"]) {
+  --ratio: 0.75;
 }
 
-:host([ratio="2:1"][portrait]:not([portrait=false])) {
-  --ratio: 2 / 1;
+:host([ratio="4:3"][portrait]:not([portrait=false])) {
+  --ratio: 1.3333333333;
 }
 
-:host([ratio="21:9"]) {
-  --ratio: 9 / 21;
+:host([ratio="5:4"]) {
+  --ratio: 0.8;
 }
 
-:host([ratio="21:9"][portrait]:not([portrait=false])) {
-  --ratio: 21 / 9;
+:host([ratio="5:4"][portrait]:not([portrait=false])) {
+  --ratio: 1.25;
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="16:9"]) {
+    --ratio: 0.5625;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="16:9"][portrait]:not([portrait=false])) {
+    --ratio: 1.7777777778;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="1:1"]) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="1:1"][portrait]:not([portrait=false])) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="21:9"]) {
+    --ratio: 0.4285714286;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="21:9"][portrait]:not([portrait=false])) {
+    --ratio: 2.3333333333;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="2:1"]) {
+    --ratio: 0.5;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="2:1"][portrait]:not([portrait=false])) {
+    --ratio: 2;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="3:2"]) {
+    --ratio: 0.6666666667;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="3:2"][portrait]:not([portrait=false])) {
+    --ratio: 1.5;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="4:3"]) {
+    --ratio: 0.75;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="4:3"][portrait]:not([portrait=false])) {
+    --ratio: 1.3333333333;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="5:4"]) {
+    --ratio: 0.8;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([ratio-small="5:4"][portrait]:not([portrait=false])) {
+    --ratio: 1.25;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="16:9"]) {
+    --ratio: 0.5625;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="16:9"][portrait]:not([portrait=false])) {
+    --ratio: 1.7777777778;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="1:1"]) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="1:1"][portrait]:not([portrait=false])) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="21:9"]) {
+    --ratio: 0.4285714286;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="21:9"][portrait]:not([portrait=false])) {
+    --ratio: 2.3333333333;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="2:1"]) {
+    --ratio: 0.5;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="2:1"][portrait]:not([portrait=false])) {
+    --ratio: 2;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="3:2"]) {
+    --ratio: 0.6666666667;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="3:2"][portrait]:not([portrait=false])) {
+    --ratio: 1.5;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="4:3"]) {
+    --ratio: 0.75;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="4:3"][portrait]:not([portrait=false])) {
+    --ratio: 1.3333333333;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="5:4"]) {
+    --ratio: 0.8;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([ratio-smallheader="5:4"][portrait]:not([portrait=false])) {
+    --ratio: 1.25;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="16:9"]) {
+    --ratio: 0.5625;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="16:9"][portrait]:not([portrait=false])) {
+    --ratio: 1.7777777778;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="1:1"]) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="1:1"][portrait]:not([portrait=false])) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="21:9"]) {
+    --ratio: 0.4285714286;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="21:9"][portrait]:not([portrait=false])) {
+    --ratio: 2.3333333333;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="2:1"]) {
+    --ratio: 0.5;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="2:1"][portrait]:not([portrait=false])) {
+    --ratio: 2;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="3:2"]) {
+    --ratio: 0.6666666667;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="3:2"][portrait]:not([portrait=false])) {
+    --ratio: 1.5;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="4:3"]) {
+    --ratio: 0.75;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="4:3"][portrait]:not([portrait=false])) {
+    --ratio: 1.3333333333;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="5:4"]) {
+    --ratio: 0.8;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([ratio-medium="5:4"][portrait]:not([portrait=false])) {
+    --ratio: 1.25;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="16:9"]) {
+    --ratio: 0.5625;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="16:9"][portrait]:not([portrait=false])) {
+    --ratio: 1.7777777778;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="1:1"]) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="1:1"][portrait]:not([portrait=false])) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="21:9"]) {
+    --ratio: 0.4285714286;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="21:9"][portrait]:not([portrait=false])) {
+    --ratio: 2.3333333333;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="2:1"]) {
+    --ratio: 0.5;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="2:1"][portrait]:not([portrait=false])) {
+    --ratio: 2;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="3:2"]) {
+    --ratio: 0.6666666667;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="3:2"][portrait]:not([portrait=false])) {
+    --ratio: 1.5;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="4:3"]) {
+    --ratio: 0.75;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="4:3"][portrait]:not([portrait=false])) {
+    --ratio: 1.3333333333;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="5:4"]) {
+    --ratio: 0.8;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([ratio-large="5:4"][portrait]:not([portrait=false])) {
+    --ratio: 1.25;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="16:9"]) {
+    --ratio: 0.5625;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="16:9"][portrait]:not([portrait=false])) {
+    --ratio: 1.7777777778;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="1:1"]) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="1:1"][portrait]:not([portrait=false])) {
+    --ratio: 1;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="21:9"]) {
+    --ratio: 0.4285714286;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="21:9"][portrait]:not([portrait=false])) {
+    --ratio: 2.3333333333;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="2:1"]) {
+    --ratio: 0.5;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="2:1"][portrait]:not([portrait=false])) {
+    --ratio: 2;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="3:2"]) {
+    --ratio: 0.6666666667;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="3:2"][portrait]:not([portrait=false])) {
+    --ratio: 1.5;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="4:3"]) {
+    --ratio: 0.75;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="4:3"][portrait]:not([portrait=false])) {
+    --ratio: 1.3333333333;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="5:4"]) {
+    --ratio: 0.8;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ratio-ultra="5:4"][portrait]:not([portrait=false])) {
+    --ratio: 1.25;
+  }
 }
 
 .stzh-ratio {

package/dist/collection/components/stzh-ratio/stzh-ratio.js

@@ -5,6 +5,10 @@ import { Host, h } from "@stencil/core";
 export class StzhRatio {
   constructor() {
     this.ratio = "16:9";
+    this.ratioSmall = "inherit";
+    this.ratioMedium = "inherit";
+    this.ratioLarge = "inherit";
+    this.ratioUltra = "inherit";
     this.portrait = false;
     this.fit = "cover";
   }
@@ -32,20 +36,122 @@ export class StzhRatio {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"16:9\" | \"1:1\" | \"5:4\" | \"4:3\" | \"3:2\" | \"2:1\" | \"21:9\"",
+          "original": "Layout.Ratio",
           "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\"",
-          "references": {}
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::Layout"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Available aspect ratios"
+          "text": "Aspect ratio"
         },
         "attribute": "ratio",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "\"16:9\""
       },
+      "ratioSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Ratio | \"inherit\"",
+          "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\" | \"inherit\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::Layout"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aspect ratio above small breakpoint"
+        },
+        "attribute": "ratio-small",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "ratioMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Ratio | \"inherit\"",
+          "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\" | \"inherit\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::Layout"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aspect ratio above medium breakpoint"
+        },
+        "attribute": "ratio-medium",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "ratioLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Ratio | \"inherit\"",
+          "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\" | \"inherit\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::Layout"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aspect ratio above large breakpoint"
+        },
+        "attribute": "ratio-large",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "ratioUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Ratio | \"inherit\"",
+          "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\" | \"inherit\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::Layout"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aspect ratio above ultra breakpoint"
+        },
+        "attribute": "ratio-ultra",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
       "portrait": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-ratio/stzh-ratio.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-ratio.js","sourceRoot":"","sources":["../../../src/components/stzh-ratio/stzh-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACL,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAEsE,MAAM;oBAGnD,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true\n})\nexport class StzhRatio {\n  /** Available aspect ratios */\n  @Prop({ reflect: true }) ratio: \"16:9\" | \"1:1\" | \"5:4\" | \"4:3\" | \"3:2\" | \"2:1\" | \"21:9\" = \"16:9\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n  \n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-ratio.js","sourceRoot":"","sources":["../../../src/components/stzh-ratio/stzh-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,SAAS;;iBAEU,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAGX,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop() ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop() ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop() ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop() ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop() ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-readspeaker/stzh-readspeaker.css

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-richtext/stzh-richtext.css

@@ -79,6 +79,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-row/stzh-row.css

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */