@ptcwebops/ptcw-design 0.2.8 → 0.3.0

package/dist/collection/components/ptc-link/ptc-link.css

@@ -14,7 +14,6 @@
   font-weight: var(--ptc-font-weight-black);
   position: relative;
   line-height: var(--ptc-line-height-normal);
-  margin-bottom: var(--ptc-element-spacing-01);
   outline: none;
   text-decoration: none;
 }
@@ -65,14 +64,22 @@
   font-size: var(--ptc-font-size-large);
 }
 
-icon-asset {
+.ptc-link.arrow icon-asset {
   position: absolute;
   right: -25px;
   transition: transform var(--ptc-transition-fast) var(--ptc-standard-ease);
 }
-icon-asset svg {
+.ptc-link.arrow icon-asset svg {
   fill: var(--color-primary-green) !important;
 }
+.ptc-link.arrow-plm icon-asset {
+  position: absolute;
+  right: -6.75px;
+  transform: translate(100%, 8%);
+}
+.ptc-link.arrow-plm svg {
+  fill: #3DAB49 !important;
+}
 
 .ptc-link:hover.arrow icon-asset {
   transform: translateX(var(--ptc-element-spacing-04));
@@ -194,4 +201,19 @@ icon-asset svg {
   font-weight: var(--ptc-font-weight-normal);
   line-height: 2;
   display: inline-block;
+}
+
+.arrow-plm {
+  color: var(--color-white);
+  font-weight: var(--ptc-font-weight-extrabold);
+  font-size: var(--ptc-font-size-medium);
+  line-height: var(--ptc-line-height-19);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease);
+}
+.arrow-plm:hover {
+  text-decoration-color: #3DAB49;
 }

package/dist/collection/components/ptc-link/ptc-link.js

@@ -31,6 +31,7 @@ export class PtcLink {
     return (h(Host, null,
       h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle },
         this.theme == 'arrow' ? h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '',
+        this.theme == 'arrow-plm' ? h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '',
         h("slot", null))));
   }
   getCssClassMap() {
@@ -143,8 +144,8 @@ export class PtcLink {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link'",
-        "resolved": "\"arrow\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"secondary-nav-link\" | \"simple\"",
+        "original": "'simple' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm'",
+        "resolved": "\"arrow\" | \"arrow-plm\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"secondary-nav-link\" | \"simple\"",
         "references": {}
       },
       "required": false,

package/dist/collection/components/ptc-list/ptc-list.css

@@ -1,13 +1,17 @@
-ptc-list .link-primary li {
+:host {
+  display: block;
+}
+
+:host(.list-primary) li {
   font-size: var(--ptc-font-size-medium);
   line-height: var(--ptc-line-height-normal);
   letter-spacing: var(--ptc-letter-spacing-normal);
   list-style: none;
 }
-ptc-list .link-primary li:not(:last-child) {
+:host(.list-primary) li:not(:last-child) {
   margin-bottom: 0.625rem;
 }
-ptc-list .link-primary li a {
+:host(.list-primary) li a {
   color: var(--color-white);
   outline: none;
   text-decoration: none;
@@ -18,7 +22,7 @@ ptc-list .link-primary li a {
   text-transform: uppercase;
   letter-spacing: var(--ptc-letter-spacing-normal);
 }
-ptc-list .link-primary li a:hover {
+:host(.list-primary) li a:hover {
   color: var(--color-white);
   border-bottom: 1.5px solid var(--color-primary-green);
 }

package/dist/collection/components/ptc-list/ptc-list.js

@@ -1,8 +1,5 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcList {
-  constructor() {
-    this.listType = 'para-list';
-  }
   render() {
     const classMap = this.getCssClassMap();
     const listItems = this.listItems;
@@ -18,10 +15,11 @@ export class PtcList {
   }
   getCssClassMap() {
     return {
-      [this.listType]: true,
+      [this.listType]: this.listItems ? true : false,
     };
   }
   static get is() { return "ptc-list"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-list.scss"]
   }; }
@@ -33,8 +31,8 @@ export class PtcList {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'link-primary' | 'link-sub' | 'icon' | 'para-list'",
-        "resolved": "\"icon\" | \"link-primary\" | \"link-sub\" | \"para-list\"",
+        "original": "'list-primary'",
+        "resolved": "\"list-primary\"",
         "references": {}
       },
       "required": false,
@@ -44,8 +42,7 @@ export class PtcList {
         "text": ""
       },
       "attribute": "list-type",
-      "reflect": false,
-      "defaultValue": "'para-list'"
+      "reflect": false
     },
     "listItems": {
       "type": "unknown",

package/dist/collection/components/ptc-overlay/ptc-overlay.css

@@ -1,3 +1,84 @@
 :host {
   display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host(.blue) {
+  background: linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, #197BC0 100%);
+}
+
+:host(.red) {
+  background: linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, #D12C3A 100%);
+}
+
+:host(.orange) {
+  background: linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, #C37729 100%);
+}
+
+:host(.green) {
+  background: linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, #00890B 100%);
+}
+
+:host(.black-1-sm) {
+  background: linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%);
+}
+
+:host(.black-2-sm) {
+  background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
+}
+
+:host(.black-1-xs) {
+  background: linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%);
+}
+
+:host(.black-2-xs) {
+  background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
+}
+
+:host(.black-3) {
+  background: linear-gradient(180deg, #20262A 0%, rgba(32, 38, 42, 0.55) 100%);
+}
+
+:host(.slate-grey) {
+  background: linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, #617480 100%);
+}
+
+:host(.radius-sm) {
+  border-radius: var(--ptc-border-radius-small);
+}
+
+:host(.radius-md) {
+  border-radius: var(--ptc-border-radius-medium);
+}
+
+:host(.radius-lg) {
+  border-radius: var(--ptc-border-radius-large);
+}
+
+:host(.radius-x-lg) {
+  border-radius: var(--ptc-border-radius-x-large);
+}
+
+:host(.z-index-auto) {
+  z-index: auto;
+}
+
+:host(.z-index-n-1) {
+  z-index: -1;
+}
+
+:host(.z-index-n-2) {
+  z-index: -2;
+}
+
+:host(.z-index-p-1) {
+  z-index: 1;
+}
+
+:host(.z-index-p-2) {
+  z-index: 2;
 }

package/dist/collection/components/ptc-overlay/ptc-overlay.js

@@ -1,14 +1,99 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcOverlay {
+  constructor() {
+    /**
+     * Overlay z-index
+     */
+    this.overlayZIndex = 'z-index-auto';
+  }
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    const classMap = this.getCssClassMap();
+    return h(Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true
+    };
   }
   static get is() { return "ptc-overlay"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-overlay.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["ptc-overlay.css"]
   }; }
+  static get properties() { return {
+    "filterColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1-xs' | 'black-2-xs' | 'black-1-sm' | 'black-2-sm' | 'black-3' | 'slate-grey'",
+        "resolved": "\"black-1-sm\" | \"black-1-xs\" | \"black-2-sm\" | \"black-2-xs\" | \"black-3\" | \"blue\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Filter Color"
+      },
+      "attribute": "filter-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | 'radius-x-lg'",
+        "resolved": "\"radius-lg\" | \"radius-md\" | \"radius-sm\" | \"radius-x-lg\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Overlay border shape"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "overlayZIndex": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2'",
+        "resolved": "\"z-index-auto\" | \"z-index-n-1\" | \"z-index-n-2\" | \"z-index-p-1\" | \"z-index-p-2\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Overlay z-index"
+      },
+      "attribute": "overlay-z-index",
+      "reflect": false,
+      "defaultValue": "'z-index-auto'"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    }
+  }; }
 }

package/dist/collection/components/ptc-para/ptc-para.css

@@ -1,8 +1,24 @@
+:host {
+  z-index: 1;
+}
+
 p.default {
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
+}
+p.main {
   text-shadow: 0 3px 6px var(--color-white);
   line-height: var(--ptc-line-height-dense);
   color: var(--color-primary-grey);
 }
+p.primary-grey {
+  color: var(--color-primary-grey);
+}
+p.white {
+  color: var(--color-white);
+}
 p.xx-small {
   font-size: var(--ptc-font-size-xx-small);
 }
@@ -30,6 +46,9 @@ p.xxx-large {
 p.xxxx-large {
   font-size: var(--ptc-font-size-xxxx-large);
 }
+p.font-size-15 {
+  font-size: var(--ptc-font-size-15);
+}
 p.w-3 {
   font-weight: var(--ptc-font-weight-thin);
 }
@@ -79,6 +98,46 @@ p.margin-bottom-5 {
 p.margin-bottom-6 {
   margin-bottom: var(--ptc-element-spacing-06);
 }
+p.margin-3 {
+  margin-top: var(--ptc-element-spacing-03);
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+p.margin-4 {
+  margin-top: var(--ptc-element-spacing-04);
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+p.margin-5 {
+  margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+p.margin-6 {
+  margin-top: var(--ptc-element-spacing-06);
+  margin-bottom: var(--ptc-element-spacing-06);
+}
+p.line-height-17 {
+  line-height: var(--ptc-line-height-17);
+}
+p.line-height-18 {
+  line-height: var(--ptc-line-height-18);
+}
+p.line-height-19 {
+  line-height: var(--ptc-line-height-19);
+}
+p.line-height-denser {
+  line-height: var(--ptc-line-height-denser);
+}
+p.line-height-dense {
+  line-height: var(--ptc-line-height-dense);
+}
+p.line-height-normal {
+  line-height: var(--ptc-line-height-normal);
+}
+p.line-height-loose {
+  line-height: var(--ptc-line-height-loose);
+}
+p.line-height-looser {
+  line-height: var(--ptc-line-height-looser);
+}
 p.announcement {
   text-transform: uppercase;
   font-size: var(--ptc-font-size-small);

package/dist/collection/components/ptc-para/ptc-para.js

@@ -13,6 +13,14 @@ export class PtcPara {
      * Paragraph Style
      **/
     this.paraStyle = 'default';
+    /**
+     * Paragraph Color
+     */
+    this.paraColor = 'primary-grey';
+    /**
+     * line height
+     */
+    this.paraLineH = 'line-height-normal';
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -24,7 +32,9 @@ export class PtcPara {
       [this.fontSize]: true,
       [this.fontWeight]: true,
       [this.paraStyle]: true,
-      [this.paraMargin]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true
     };
   }
   static get is() { return "ptc-para"; }
@@ -40,8 +50,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'font-size-15'",
+        "resolved": "\"font-size-15\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
         "references": {}
       },
       "required": false,
@@ -76,8 +86,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'default' | 'intro' | 'small' | 'announcement'",
-        "resolved": "\"announcement\" | \"default\" | \"intro\" | \"small\"",
+        "original": "'default' | 'intro' | 'small' | 'announcement' | 'flush-style' | 'main'",
+        "resolved": "\"announcement\" | \"default\" | \"flush-style\" | \"intro\" | \"main\" | \"small\"",
         "references": {}
       },
       "required": false,
@@ -90,12 +100,48 @@ export class PtcPara {
       "reflect": false,
       "defaultValue": "'default'"
     },
+    "paraColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary-grey' | 'white'",
+        "resolved": "\"primary-grey\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph Color"
+      },
+      "attribute": "para-color",
+      "reflect": false,
+      "defaultValue": "'primary-grey'"
+    },
+    "paraLineH": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'line-height-17' | 'line-height-18' | 'line-height-19' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser'",
+        "resolved": "\"line-height-17\" | \"line-height-18\" | \"line-height-19\" | \"line-height-dense\" | \"line-height-denser\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "line height"
+      },
+      "attribute": "para-line-h",
+      "reflect": false,
+      "defaultValue": "'line-height-normal'"
+    },
     "paraMargin": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'",
-        "resolved": "\"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
+        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'| 'margin-3' | 'margin-4' | 'margin-5' | 'margin-6'",
+        "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
         "references": {}
       },
       "required": false,

package/dist/collection/components/ptc-picture/ptc-picture.css

@@ -3,9 +3,20 @@
   overflow: hidden;
 }
 
+:host(.relative) {
+  position: relative;
+}
+
+:host(.static) {
+  position: static;
+}
+
+:host(.absoltue) {
+  position: static;
+}
+
 img {
   max-width: 100%;
-  height: auto;
 }
 
 .cover {
@@ -34,4 +45,20 @@ img {
 
 .inherit {
   object-fit: inherit;
+}
+
+.radius-sm {
+  border-radius: var(--ptc-border-radius-small);
+}
+
+.radius-md {
+  border-radius: var(--ptc-border-radius-medium);
+}
+
+.radius-lg {
+  border-radius: var(--ptc-border-radius-large);
+}
+
+.radius-x-lg {
+  border-radius: var(--ptc-border-radius-x-large);
 }

package/dist/collection/components/ptc-picture/ptc-picture.js

@@ -27,9 +27,9 @@ export class PtcPicture {
      */
     this.sizeLg = '1920x1080';
     /**
-     * Image border shape
+     * Image Position
      */
-    this.borderRadius = '';
+    this.imagePosition = 'static';
     /**
      * Object Fit
      * Default: cover
@@ -99,9 +99,10 @@ export class PtcPicture {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null,
+    return (h(Host, { class: this.imagePosition },
       this.styles && h("style", null, this.styles),
-      h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt }))));
+      h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt })),
+      h("slot", null)));
   }
   getCurrentBreakPoints() {
     // Define local variables
@@ -142,7 +143,7 @@ export class PtcPicture {
   }
   getCssClassMap() {
     return {
-      [this.borderRadius]: true,
+      [this.borderRadius]: this.borderRadius ? true : false,
       [this.objectFit]: true,
     };
   }
@@ -262,12 +263,30 @@ export class PtcPicture {
       "reflect": false,
       "defaultValue": "'1920x1080'"
     },
+    "imagePosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'relative' | 'absolute' | 'static'",
+        "resolved": "\"absolute\" | \"relative\" | \"static\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image Position"
+      },
+      "attribute": "image-position",
+      "reflect": false,
+      "defaultValue": "'static'"
+    },
     "borderRadius": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | ''",
-        "resolved": "\"\" | \"radius-lg\" | \"radius-md\" | \"radius-sm\"",
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | 'radius-x-lg'",
+        "resolved": "\"radius-lg\" | \"radius-md\" | \"radius-sm\" | \"radius-x-lg\"",
         "references": {}
       },
       "required": false,
@@ -277,8 +296,7 @@ export class PtcPicture {
         "text": "Image border shape"
       },
       "attribute": "border-radius",
-      "reflect": false,
-      "defaultValue": "''"
+      "reflect": false
     },
     "height": {
       "type": "string",

package/dist/collection/components/ptc-spacer/ptc-spacer.css

@@ -236,6 +236,17 @@
 	}
 }
 
+:host(.ptc-spacer-vertical.space-144){
+	width: 100%;
+	height: 144px;
+	min-height: 144px;
+}
+:host(.ptc-spacer-vertical.space-120){
+	width: 100%;
+	height: 120px;
+	min-height: 120px;
+}
+
 :host(.ptc-spacer-xx-small) {
 	display: none
 }

package/dist/collection/components/ptc-spacer/ptc-spacer.js

@@ -63,8 +63,8 @@ export class PtcSpacer {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
         "references": {}
       },
       "required": false,