@ptcwebops/ptcw-design 3.1.6 → 3.1.8

package/dist/cjs/embedded-form_9.cjs.entry.js

@@ -11749,6 +11749,8 @@ const PtcTextfield = class {
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
+        this.inputValue = this.iti.getNumber();
+        // console.log('sending phone number: ' + this.inputValue);
       }
       else if (!this.iti.isValidNumber()) {
         if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {

package/dist/cjs/ptc-filter-dropdown_4.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-const ptcFilterDropdownCss = ":host{display:block;box-sizing:border-box}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;font-size:16px;color:var(--color-gray-10)}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-05);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;border-radius:4px}:host .dropdown .caret{display:inline-block;vertical-align:middle;margin-left:5px}:host .dropdown .dropdown-menu{position:absolute;top:100%;left:0;left:0;border:1px solid var(--color-gray-03);background-color:var(--color-white);overflow-y:auto;width:100%;border-radius:4px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);display:flex;flex-direction:column;margin-top:8px;min-width:278px;overflow:hidden;position:absolute;transition:max-height 0.25s ease-out;z-index:2000;max-height:1000px}:host .dropdown .dropdown-menu .filter-list{padding:24px 24px 16px 24px;margin:0;list-style:none;border-bottom:1px solid var(--color-gray-02)}:host .dropdown .dropdown-menu .filter-btns{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}:host .dropdown .dropdown-menu .filter-btns .clear-btn{cursor:pointer}:host .dropdown .dropdown-menu .filter-btns .clear-btn:hover{text-decoration:underline}:host .dropdown::-webkit-scrollbar{width:5px}:host .dropdown::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .radio-label{margin-bottom:16px;font-size:16px;font-weight:500;cursor:pointer;display:block;font-weight:500;position:relative;user-select:none;line-height:1.5;display:flex;align-items:baseline;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host .radio-label input{margin-right:10px}:host .radio-label .checkmark{width:20px;height:20px;background-color:#fff;border:1px solid #1f2024;border-radius:0.4rem;margin-right:8px;position:absolute;left:0;top:0}:host .radio-label .checkmark::after{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M1.5 4L5.5 8L12.5 1\" stroke=\"white\" stroke-width=\"2\"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:75% 100%;content:\"\";height:20px;width:20px;position:absolute;left:0;top:0;display:none}";
+const ptcFilterDropdownCss = ":host{display:block;box-sizing:border-box}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;font-size:16px;color:var(--color-gray-10)}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-05);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;border-radius:4px}:host .dropdown .dropdown-toggle .dropdown-placeholder{display:flex}:host .dropdown .dropdown-toggle .dropdown-placeholder .dropdown-filter-name{padding-left:10px;padding-right:5px}:host .dropdown .caret{display:inline-block;vertical-align:middle;margin-left:5px}:host .dropdown .dropdown-menu{position:absolute;top:100%;left:0;left:0;border:1px solid var(--color-gray-03);background-color:var(--color-white);overflow-y:auto;width:100%;border-radius:4px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);display:flex;flex-direction:column;margin-top:8px;min-width:278px;overflow:hidden;position:absolute;transition:max-height 0.25s ease-out;z-index:2000;max-height:1000px}:host .dropdown .dropdown-menu .filter-list{padding:24px 24px 16px 24px;margin:0;list-style:none;border-bottom:1px solid var(--color-gray-02)}:host .dropdown .dropdown-menu .filter-btns{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}:host .dropdown .dropdown-menu .filter-btns .clear-btn{cursor:pointer}:host .dropdown .dropdown-menu .filter-btns .clear-btn:hover{text-decoration:underline}:host .dropdown::-webkit-scrollbar{width:5px}:host .dropdown::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .radio-label{margin-bottom:16px;font-size:16px;font-weight:500;cursor:pointer;display:block;font-weight:500;position:relative;user-select:none;line-height:1.5;display:flex;align-items:baseline;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host .radio-label input{margin-right:10px}:host .radio-label .checkmark{width:20px;height:20px;background-color:#fff;border:1px solid #1f2024;border-radius:0.4rem;margin-right:8px;position:absolute;left:0;top:0}:host .radio-label .checkmark::after{background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\"><path d=\"M1.5 4L5.5 8L12.5 1\" stroke=\"white\" stroke-width=\"2\"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:75% 100%;content:\"\";height:20px;width:20px;position:absolute;left:0;top:0;display:none}";
 
 const PtcFilterDropdown = class {
   constructor(hostRef) {
@@ -16,6 +16,9 @@ const PtcFilterDropdown = class {
     this.selectedTag = undefined;
     this.isOpen = false;
   }
+  componentDidLoad() {
+    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector('.dropdown-placeholder .dropdown-filter-name');
+  }
   parseOptions() {
     let options = Array.from(this.hostElement.querySelectorAll('span'));
     if (options) {
@@ -39,6 +42,9 @@ const PtcFilterDropdown = class {
       }
     });
     //this.emitSelectedOptions();
+    if (this.dropdownPlaceholder) {
+      this.dropdownPlaceholder.textContent = this.placeholder;
+    }
   }
   emitSelectedOptions() {
     // debugger
@@ -57,12 +63,15 @@ const PtcFilterDropdown = class {
       selectedOptions: this.selectedOptions,
     });
     this.toggleDropdown();
+    if (this.dropdownPlaceholder) {
+      this.dropdownPlaceholder.textContent = this.selectedOptions[0].value;
+    }
   }
   componentWillRender() {
     this.parseOptions();
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "dropdown" }, index.h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, index.h("span", { class: "dropdown-placeholder" }, index.h("strong", null, "Filter: "), this.placeholder), index.h("span", { class: "caret" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, index.h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (index.h("div", { class: "dropdown-menu" }, index.h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (index.h("li", { key: option.tabId }, index.h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, index.h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), index.h("div", { class: "filter-btns" }, index.h("span", { class: "clear-btn", onClick: () => this.clearFilter() }, "Clear"), index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions(), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), index.h("div", { class: "hidden" }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("div", { class: "dropdown" }, index.h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, index.h("span", { class: "dropdown-placeholder" }, index.h("strong", null, "Filter: "), index.h("span", { class: "dropdown-filter-name" }, this.placeholder)), index.h("span", { class: "caret" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, index.h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (index.h("div", { class: "dropdown-menu" }, index.h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (index.h("li", { key: option.tabId }, index.h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, index.h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), index.h("div", { class: "filter-btns" }, index.h("span", { class: "clear-btn", onClick: () => this.clearFilter() }, "Clear"), index.h("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions(), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), index.h("div", { class: "hidden" }, index.h("slot", null))));
   }
   get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ptc-filter-level-theater.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.js');
 
-const ptcFilterLevelTheaterCss = ".ptc-container.sc-ptc-filter-level-theater{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container.sc-ptc-filter-level-theater{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container.sc-ptc-filter-level-theater{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg.sc-ptc-filter-level-theater{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid.sc-ptc-filter-level-theater{width:100%}a.sc-ptc-filter-level-theater{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-blue-07);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a.sc-ptc-filter-level-theater:visited{color:var(--color-blue-10)}a.sc-ptc-filter-level-theater:active,a.sc-ptc-filter-level-theater:visited:active{color:var(--color-blue-09)}a.sc-ptc-filter-level-theater:hover,a.sc-ptc-filter-level-theater:visited:hover{color:var(--color-blue-08)}a.disabled.sc-ptc-filter-level-theater{color:var(--color-gray-04) !important;cursor:not-allowed}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater{color:var(--color-blue-04)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited{color:var(--color-blue-06)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:active,.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:active,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:active,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:active,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:active,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:active,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:active,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:active,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:active,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:active,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:active,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:active{color:var(--color-blue-07)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:hover,.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:hover,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:hover,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:hover,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:hover,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:hover,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:hover,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:hover,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:hover,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:hover,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:hover,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:hover{color:var(--color-blue-05)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).disabled.sc-ptc-filter-level-theater,.light-links.sc-ptc-filter-level-theater a.light-link.disabled.sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).disabled.sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.light-link.disabled.sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).disabled.sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.disabled.sc-ptc-filter-level-theater{color:var(--color-gray-04) !important;cursor:not-allowed}.ptc-link.sc-ptc-filter-level-theater{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link.sc-ptc-filter-level-theater:hover{color:var(--color-green-06)}.ptc-link.sc-ptc-filter-level-theater:visited{color:var(--color-gray-10)}.ptc-link.sc-ptc-filter-level-theater:active,.ptc-link.sc-ptc-filter-level-theater:visited:active{color:var(--color-green-06)}.ptc-link.sc-ptc-filter-level-theater:hover,.ptc-link.sc-ptc-filter-level-theater:visited:hover{color:var(--color-green-06)}.ptc-link-dark.sc-ptc-filter-level-theater{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark.sc-ptc-filter-level-theater:hover{color:var(--color-green-06)}.ptc-link-dark.sc-ptc-filter-level-theater:visited{color:var(--color-white)}.ptc-link-dark.sc-ptc-filter-level-theater:active,.ptc-link-dark.sc-ptc-filter-level-theater:visited:active{color:var(--color-green-06)}.ptc-link-dark.sc-ptc-filter-level-theater:hover,.ptc-link-dark.sc-ptc-filter-level-theater:visited:hover{color:var(--color-green-06)}.sc-ptc-filter-level-theater-h{display:block;position:relative;background-color:var(--color-gray-12);color:var(--color-white);box-sizing:border-box}.sc-ptc-filter-level-theater-h .filter-section.sc-ptc-filter-level-theater{max-width:400px}.sc-ptc-filter-level-theater-h .filter-section.sc-ptc-filter-level-theater ptc-product-dropdown.sc-ptc-filter-level-theater{color:var(--color-gray-10)}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:0;overflow-x:hidden}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater .flt-bg-img.sc-ptc-filter-level-theater{width:100%;height:100%;display:none;position:absolute;right:-100%;animation:slide 0.5s forwards;animation-delay:2s}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater .flt-bg-img.active-tab.sc-ptc-filter-level-theater{display:block;animation:slide 0.5s forwards;animation-delay:0.1s}@-webkit-keyframes slide{100%{right:0}}@keyframes slide{100%{right:0}}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater .bg-img-overlay.sc-ptc-filter-level-theater{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(40, 47, 53, 0.7)}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater{padding-top:44px;padding-bottom:44px;position:relative}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .filter-section.sc-ptc-filter-level-theater{padding-bottom:36px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater{width:100%}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater{display:flex;justify-content:space-between}}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater{order:1;max-width:700px;padding-right:24px}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.sc-ptc-filter-level-theater{display:none}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.sc-ptc-filter-level-theater p.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.sc-ptc-filter-level-theater ul.sc-ptc-filter-level-theater li.sc-ptc-filter-level-theater{font-size:18px;line-height:1.5;color:var(--color-white)}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.active-tab.sc-ptc-filter-level-theater{display:block}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater{margin-bottom:32px}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater{order:2;max-width:304px;margin-bottom:0}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater{min-width:223px;display:flex;overflow-x:auto;align-items:center;padding-bottom:24px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater::-webkit-scrollbar{height:3px;border-radius:4px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater::-webkit-scrollbar-track{background-color:#3E4A52;border-radius:4px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater::-webkit-scrollbar-thumb{background-color:#819099;border-radius:4px}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater{display:block;overflow-x:hidden;padding-bottom:0}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater ptc-button.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater{max-width:304px;min-width:223px;margin-right:24px;margin-bottom:0}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater ptc-button.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater{min-width:auto;margin-bottom:24px;margin-right:0}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater{border-radius:4px;box-sizing:border-box;border:2px solid #33A13C;padding:16px 24px;background-color:#323B42;cursor:pointer}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.active-box.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater:hover{border-color:#C37729;background-color:#20262A}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater ptc-button.sc-ptc-filter-level-theater{width:100%;display:block}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater{border-radius:4px;padding:12px;text-align:center;background:#BEC6CA;box-sizing:border-box}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater ptc-social-share.sc-ptc-filter-level-theater{margin-right:24px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater ptc-social-share.sc-ptc-filter-level-theater:last-child{margin-right:0}.sc-ptc-filter-level-theater-h ptc-theater-video-playlist.sc-ptc-filter-level-theater{padding-top:26px;clear:both}.sc-ptc-filter-level-theater-h ptc-theater-video-playlist.sc-ptc-filter-level-theater ptc-theater-video.sc-ptc-filter-level-theater{margin-right:32px;display:inline-block;margin-bottom:28px}@media only screen and (min-width: 1200px){.sc-ptc-filter-level-theater-h ptc-theater-video-playlist.sc-ptc-filter-level-theater ptc-theater-video.sc-ptc-filter-level-theater{margin-right:40px}}.sc-ptc-filter-level-theater-h p.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h ul.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h li.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h ptc-title.sc-ptc-filter-level-theater .sc-ptc-title.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h span.sc-ptc-filter-level-theater{word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}a.sc-ptc-filter-level-theater{font-family:\"Raleway\", sans-serif;font-style:normal;text-decoration-line:underline;color:#197BC0;transition:color 250ms cubic-bezier(0, 0, 0.58, 1);font-weight:700}a.sc-ptc-filter-level-theater:visited{color:#0D3E62}a.sc-ptc-filter-level-theater:active,a.sc-ptc-filter-level-theater:visited:active{color:#104E7B}a.sc-ptc-filter-level-theater:hover,a.sc-ptc-filter-level-theater:visited:hover{color:#14629A}a.disabled.sc-ptc-filter-level-theater{color:#AEB8BD !important;cursor:not-allowed}";
+const ptcFilterLevelTheaterCss = ".ptc-container.sc-ptc-filter-level-theater{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){.ptc-container.sc-ptc-filter-level-theater{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){.ptc-container.sc-ptc-filter-level-theater{padding-left:0;padding-right:0;max-width:1200px}}.ptc-container-lg.sc-ptc-filter-level-theater{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){.ptc-container-lg.sc-ptc-filter-level-theater{padding-left:0;padding-right:0;max-width:1900px}}.ptc-container-fluid.sc-ptc-filter-level-theater{width:100%}a.sc-ptc-filter-level-theater{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-blue-07);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a.sc-ptc-filter-level-theater:visited{color:var(--color-blue-10)}a.sc-ptc-filter-level-theater:active,a.sc-ptc-filter-level-theater:visited:active{color:var(--color-blue-09)}a.sc-ptc-filter-level-theater:hover,a.sc-ptc-filter-level-theater:visited:hover{color:var(--color-blue-08)}a.disabled.sc-ptc-filter-level-theater{color:var(--color-gray-04) !important;cursor:not-allowed}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater{color:var(--color-blue-04)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited{color:var(--color-blue-06)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:active,.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:active,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:active,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:active,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:active,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:active,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:active,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:active,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:active,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:active,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:active,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:active{color:var(--color-blue-07)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:hover,.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:hover,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:hover,.light-links.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:hover,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:hover,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:hover,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:hover,.background-grey-10.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:hover,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:hover,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).sc-ptc-filter-level-theater:visited:hover,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:hover,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.sc-ptc-filter-level-theater:visited:hover{color:var(--color-blue-05)}.light-links.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).disabled.sc-ptc-filter-level-theater,.light-links.sc-ptc-filter-level-theater a.light-link.disabled.sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).disabled.sc-ptc-filter-level-theater,.background-grey-10.sc-ptc-filter-level-theater a.light-link.disabled.sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.sc-ptc-filter-level-theater:not(.hero-footer-form-wrapper a).disabled.sc-ptc-filter-level-theater,.background-plm-grey.sc-ptc-filter-level-theater a.light-link.disabled.sc-ptc-filter-level-theater{color:var(--color-gray-04) !important;cursor:not-allowed}.ptc-link.sc-ptc-filter-level-theater{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link.sc-ptc-filter-level-theater:hover{color:var(--color-green-06)}.ptc-link.sc-ptc-filter-level-theater:visited{color:var(--color-gray-10)}.ptc-link.sc-ptc-filter-level-theater:active,.ptc-link.sc-ptc-filter-level-theater:visited:active{color:var(--color-green-06)}.ptc-link.sc-ptc-filter-level-theater:hover,.ptc-link.sc-ptc-filter-level-theater:visited:hover{color:var(--color-green-06)}.ptc-link-dark.sc-ptc-filter-level-theater{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark.sc-ptc-filter-level-theater:hover{color:var(--color-green-06)}.ptc-link-dark.sc-ptc-filter-level-theater:visited{color:var(--color-white)}.ptc-link-dark.sc-ptc-filter-level-theater:active,.ptc-link-dark.sc-ptc-filter-level-theater:visited:active{color:var(--color-green-06)}.ptc-link-dark.sc-ptc-filter-level-theater:hover,.ptc-link-dark.sc-ptc-filter-level-theater:visited:hover{color:var(--color-green-06)}.sc-ptc-filter-level-theater-h{display:block;position:relative;background-color:var(--color-gray-12);color:var(--color-white);box-sizing:border-box}.sc-ptc-filter-level-theater-h .filter-section.sc-ptc-filter-level-theater{max-width:400px}@media only screen and (min-width: 992px){.sc-ptc-filter-level-theater-h .filter-section.sc-ptc-filter-level-theater{max-width:600px}}.sc-ptc-filter-level-theater-h .filter-section.sc-ptc-filter-level-theater ptc-product-dropdown.sc-ptc-filter-level-theater{color:var(--color-gray-10)}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:0;overflow-x:hidden}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater .flt-bg-img.sc-ptc-filter-level-theater{width:100%;height:100%;display:none;position:absolute;right:-100%;animation:slide 0.5s forwards;animation-delay:2s}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater .flt-bg-img.active-tab.sc-ptc-filter-level-theater{display:block;animation:slide 0.5s forwards;animation-delay:0.1s}@-webkit-keyframes slide{100%{right:0}}@keyframes slide{100%{right:0}}.sc-ptc-filter-level-theater-h .flt-bg-image-wrapper.sc-ptc-filter-level-theater .bg-img-overlay.sc-ptc-filter-level-theater{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(40, 47, 53, 0.7)}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater{padding-top:44px;padding-bottom:44px;position:relative}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .filter-section.sc-ptc-filter-level-theater{padding-bottom:36px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater{width:100%}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater{display:flex;justify-content:space-between}}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater{order:1;max-width:700px;padding-right:24px}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.sc-ptc-filter-level-theater{display:none}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.sc-ptc-filter-level-theater p.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.sc-ptc-filter-level-theater ul.sc-ptc-filter-level-theater li.sc-ptc-filter-level-theater{font-size:18px;line-height:1.5;color:var(--color-white)}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-content-wrap.sc-ptc-filter-level-theater .flt-content.active-tab.sc-ptc-filter-level-theater{display:block}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater{margin-bottom:32px}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater{order:2;max-width:304px;margin-bottom:0}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater{min-width:223px;display:flex;overflow-x:auto;align-items:center;padding-bottom:24px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater::-webkit-scrollbar{height:3px;border-radius:4px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater::-webkit-scrollbar-track{background-color:#3E4A52;border-radius:4px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater::-webkit-scrollbar-thumb{background-color:#819099;border-radius:4px}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater{display:block;overflow-x:hidden;padding-bottom:0}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater ptc-button.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater{max-width:304px;min-width:223px;margin-right:24px;margin-bottom:0}@media only screen and (min-width: 768px){.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater ptc-button.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater{min-width:auto;margin-bottom:24px;margin-right:0}}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater{border-radius:4px;box-sizing:border-box;border:2px solid #33A13C;padding:16px 24px;background-color:#323B42;cursor:pointer}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.active-box.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .tab-box.sc-ptc-filter-level-theater:hover{border-color:#C37729;background-color:#20262A}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater ptc-button.sc-ptc-filter-level-theater{width:100%;display:block}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater{border-radius:4px;padding:12px;text-align:center;background:#BEC6CA;box-sizing:border-box}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater ptc-social-share.sc-ptc-filter-level-theater{margin-right:24px}.sc-ptc-filter-level-theater-h .flt-wrapper.sc-ptc-filter-level-theater .content-tab-wrapper.sc-ptc-filter-level-theater .flt-tab-wrapper.sc-ptc-filter-level-theater .tab-list.sc-ptc-filter-level-theater .flt-social-icon-list.sc-ptc-filter-level-theater ptc-social-share.sc-ptc-filter-level-theater:last-child{margin-right:0}.sc-ptc-filter-level-theater-h ptc-theater-video-playlist.sc-ptc-filter-level-theater{padding-top:26px;clear:both}.sc-ptc-filter-level-theater-h ptc-theater-video-playlist.sc-ptc-filter-level-theater ptc-theater-video.sc-ptc-filter-level-theater{margin-right:32px;display:inline-block;margin-bottom:28px}@media only screen and (min-width: 1200px){.sc-ptc-filter-level-theater-h ptc-theater-video-playlist.sc-ptc-filter-level-theater ptc-theater-video.sc-ptc-filter-level-theater{margin-right:40px}}.sc-ptc-filter-level-theater-h p.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h ul.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h li.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h ptc-title.sc-ptc-filter-level-theater .sc-ptc-title.sc-ptc-filter-level-theater,.sc-ptc-filter-level-theater-h span.sc-ptc-filter-level-theater{word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}a.sc-ptc-filter-level-theater{font-family:\"Raleway\", sans-serif;font-style:normal;text-decoration-line:underline;color:#197BC0;transition:color 250ms cubic-bezier(0, 0, 0.58, 1);font-weight:700}a.sc-ptc-filter-level-theater:visited{color:#0D3E62}a.sc-ptc-filter-level-theater:active,a.sc-ptc-filter-level-theater:visited:active{color:#104E7B}a.sc-ptc-filter-level-theater:hover,a.sc-ptc-filter-level-theater:visited:hover{color:#14629A}a.disabled.sc-ptc-filter-level-theater{color:#AEB8BD !important;cursor:not-allowed}";
 
 const PtcFilterLevelTheater = class {
   constructor(hostRef) {

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.css

@@ -22,6 +22,13 @@
   min-height: 34px;
   border-radius: 4px;
 }
+:host .dropdown .dropdown-toggle .dropdown-placeholder {
+  display: flex;
+}
+:host .dropdown .dropdown-toggle .dropdown-placeholder .dropdown-filter-name {
+  padding-left: 10px;
+  padding-right: 5px;
+}
 :host .dropdown .caret {
   display: inline-block;
   vertical-align: middle;

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.js

@@ -7,6 +7,9 @@ export class PtcFilterDropdown {
     this.selectedTag = undefined;
     this.isOpen = false;
   }
+  componentDidLoad() {
+    this.dropdownPlaceholder = this.hostElement.shadowRoot.querySelector('.dropdown-placeholder .dropdown-filter-name');
+  }
   parseOptions() {
     let options = Array.from(this.hostElement.querySelectorAll('span'));
     if (options) {
@@ -30,6 +33,9 @@ export class PtcFilterDropdown {
       }
     });
     //this.emitSelectedOptions();
+    if (this.dropdownPlaceholder) {
+      this.dropdownPlaceholder.textContent = this.placeholder;
+    }
   }
   emitSelectedOptions() {
     // debugger
@@ -48,12 +54,15 @@ export class PtcFilterDropdown {
       selectedOptions: this.selectedOptions,
     });
     this.toggleDropdown();
+    if (this.dropdownPlaceholder) {
+      this.dropdownPlaceholder.textContent = this.selectedOptions[0].value;
+    }
   }
   componentWillRender() {
     this.parseOptions();
   }
   render() {
-    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), this.placeholder), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn", onClick: () => this.clearFilter() }, "Clear"), h("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions(), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));
+    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn", onClick: () => this.clearFilter() }, "Clear"), h("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions(), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));
   }
   static get is() { return "ptc-filter-dropdown"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -146,6 +146,11 @@ a.disabled {
 :host .filter-section {
   max-width: 400px;
 }
+@media only screen and (min-width: 992px) {
+  :host .filter-section {
+    max-width: 600px;
+  }
+}
 :host .filter-section ptc-product-dropdown {
   color: var(--color-gray-10);
 }

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

@@ -94,6 +94,8 @@ export class PtcTextfield {
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
+        this.inputValue = this.iti.getNumber();
+        // console.log('sending phone number: ' + this.inputValue);
       }
       else if (!this.iti.isValidNumber()) {
         if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {

package/dist/collection/stories/Link.stories.js

@@ -3,6 +3,12 @@ import { html } from 'lit';
 export default {
   title: 'Atoms/ptc-link',
   tags: ['autodocs'],
+  parameters: {
+    design: {
+        type: "figma",
+        url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1802%3A62&mode=design&t=e6dLB5mUTCuEu23J-1",
+    },
+  },
   argTypes: {
     disabled: {
       control: 'boolean',

package/dist/collection/stories/design-tokens/color/Color.stories.js

@@ -0,0 +1,96 @@
+import "./style.css";
+import colors from "./colors.json";
+
+const meta = {
+    title: 'Design Tokens/Color',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1718%3A247&mode=design&t=3CAodvJ7V1gNzCOU-1",
+        },
+    },
+};
+
+export default meta;
+
+export const About = {
+    render: () => {
+        const colorPicker = document.createElement('div');
+
+        const colorBaseSelect = document.createElement('section');
+        const select = document.createElement('select');
+        select.id = "color-base";
+        const colorBases = Object.keys(colors);
+        for (let color of colorBases) {
+            select.insertAdjacentHTML(
+                'beforeend', 
+                `<option value="${color}">${color}</option>`
+            )
+        };
+        colorBaseSelect.insertAdjacentHTML('beforeend', '<label>Color</label>');
+        colorBaseSelect.insertAdjacentElement('beforeend', select);
+
+        const colorVariantInput = document.createElement('section');
+        const input = document.createElement('input');
+        input.id = "color-variant";
+        input.type = "number";
+        input.value = 7;
+        input.min = 1;
+        input.max = 12;
+        colorVariantInput.insertAdjacentHTML('beforeend', '<label>Variant</label>');
+        colorVariantInput.insertAdjacentElement('beforeend', input);
+
+        const colorBlock = document.createElement('section');
+        colorBlock.id = "color-block";
+        colorBlock.style.background = "#00890B";
+        colorBlock.style.marginBottom = "50px";
+        colorBlock.value = "--color-green-07";
+
+        const colorVariable = document.createElement('section');
+        colorVariable.insertAdjacentHTML('beforeend', "<label>Variable</label>");
+        colorVariable.insertAdjacentHTML('beforeend', "<code id='color-variable'>--color-green-07</code>");
+
+        const colorHexCode = document.createElement('section');
+        colorHexCode.insertAdjacentHTML('beforeend', "<label>Hex code</label>");
+        colorHexCode.insertAdjacentHTML('beforeend', "<code id='color-hex-code'>#00890B</code>");
+
+        select.addEventListener('change', e => {
+            let colorBase = e.target.value;
+            let colorVariant = document.getElementById('color-variant');
+            let colorBlock = document.getElementById('color-block');
+            let colorVariable = document.getElementById('color-variable');
+            let colorHex = document.getElementById('color-hex-code');
+
+            colorVariant.max = colors[colorBase].length;
+            colorVariant.value = 1;
+            let colorHexCode = colors[colorBase][0]["code"];
+            colorBlock.style.background = colorHexCode;
+            colorVariable.innerText = colors[colorBase][0]["variable"];
+            colorHex.innerText = colorHexCode;
+        });
+
+        input.addEventListener('change', e => {
+            let colorBase = document.getElementById('color-base').value;
+            let colorVariant = e.target;
+            let colorBlock = document.getElementById('color-block');
+            let colorVariable = document.getElementById('color-variable');
+            let colorHex = document.getElementById('color-hex-code');
+
+            let colorVariantValue = colorVariant.value;
+            colorVariant.max = colors[colorBase].length;
+            let colorHexCode = colors[colorBase][colorVariantValue-1]["code"];
+            colorBlock.style.background = colorHexCode;
+            colorVariable.innerText = colors[colorBase][colorVariantValue-1]["variable"];
+            colorHex.innerText = colorHexCode;
+        });
+
+        colorPicker.insertAdjacentHTML('beforeend', "<h2>Color Palette 2.0</h2>");
+        colorPicker.insertAdjacentElement('beforeend', colorBaseSelect);
+        colorPicker.insertAdjacentElement('beforeend', colorVariantInput);
+        colorPicker.insertAdjacentElement('beforeend', colorBlock);
+        colorPicker.insertAdjacentElement('beforeend', colorVariable);
+        colorPicker.insertAdjacentElement('beforeend', colorHexCode);
+
+        return colorPicker;
+    }
+}

package/dist/collection/stories/design-tokens/color/Temp.stories.js

@@ -0,0 +1,98 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Temp',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1718%3A247&mode=design&t=3CAodvJ7V1gNzCOU-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <style>
+            input {
+                padding: 5px 8px 5px 8px;
+                width: 200px;
+                border-radius: 8px;
+                border: 1px solid var(--color-gray-04);
+            }
+
+            select {
+                padding: 5px 8px 5px 8px;
+                width: 200px;
+                border-radius: 8px;
+                border: 1px solid var(--color-gray-04);
+            }
+
+            #color-block {
+                height: 100px;
+                width: 100px;
+                border-radius: 5px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 16px;
+            }
+        </style>
+
+        <h2>Color</h2>
+
+        <div style="margin-bottom: 50px">
+            <div>
+                <label>Color</label><br/>
+                <select>
+                    <option selected="selected" value="green">Green</option>
+                    <option value="blue">Blue</option>
+                    <option value="orange">Orange</option>
+                    <option value="red">Red</option>
+                    <option value="gray">Gray</option>
+                </select>
+            </div>
+            <br/>
+            <div>
+                <label>Variant</label><br/>
+                <input id="number" type="number" value="7" min="1" max="12"/>
+            </div>
+        </div>
+        <div id="color-block" style="background:#00890B" value="--color-green-07"></div>
+        <br />
+        <div>
+            <label>Variable</label><br/> 
+            <code id="color-variable">--color-green-07</code>
+        </div>
+        <br/>
+        <div>
+            <label>Hex code</label><br/> 
+            <code id="color-hex-code">#00890B</code>
+        </div>
+
+        <script>
+            const colors = {
+                "green": ["#E1F1E2","#BDE1BF","#97CF9B","#7DC382","#5CB463","#33A13C","#00890B","#006E09","#005807","#004606","#003805","#002D04"],
+                "blue": ["#E1EDF6","#C3DDEE","#A1C9E5","#89BBDF","#6CAAD7","#4795CD","#197BC0","#14629A","#104E7B","#0D3E62","#0A324E","#08283E"],
+                "orange": ["#F8EDE3","#F0DBC7","#E7C7A7","#E1B991","#D9A876","#CF9254","#C37729","#9C5F21","#7D4C1A","#643D15","#503111","#40270E"],
+                "red": ["#FAE6E6","#F4CDCD","#EDB1B1","#E99D9D","#E38484","#DC6565","#D33E3E","#A7232E","#861C25","#6B161E","#561218","#450E13"],
+                "gray": ["#F6F6F6","#E4E7E9","#BEC6CA","#AEB8BD","#9AA6AD","#819099","#617480","#4E5D66","#3E4A52","#323B42","#282F35","#20262A"]
+            }
+            document.querySelector('select').addEventListener('change', e => {
+                let colorBase = e.target.value;
+                let colorVariant = document.querySelector('#number').value;
+                let colorHexCode = colors[colorBase][colorVariant-1];
+                document.getElementById('color-block').style.background = colorHexCode;
+                document.getElementById('color-variable').innerText = "--color-"+colorBase+"-"+colorVariant.padStart(2,'0');
+                document.getElementById('color-hex-code').innerText = colorHexCode;
+            });
+            document.querySelector('#number').addEventListener('change', e => {
+                let colorBase = document.querySelector('select').value;
+                let colorVariant = e.target.value;
+                let colorHexCode = colors[colorBase][colorVariant-1];
+                document.getElementById('color-block').style.background = colorHexCode;
+                document.getElementById('color-variable').innerText = "--color-"+colorBase+"-"+colorVariant.padStart(2,'0');
+                document.getElementById('color-hex-code').innerText = colorHexCode;
+            });
+        </script>
+    `
+}

package/dist/collection/stories/design-tokens/containers/About.stories.js

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Containers',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1771%3A59&mode=design&t=mXFihiX08xo9n6HS-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Containers</h2>
+    `
+}
+
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/elevations/About.stories.js

@@ -0,0 +1,68 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Elevations',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1%3A261&mode=design&t=6gVgJ9yDrxuMo3pg-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <style>
+            table {
+                border-collapse: collapse;
+                width: 100%; 
+                border: 1px solid whitesmoke;
+                border-radius: 7px;
+                box-shadow: var(--ptc-shadow-x-small);
+                margin: 10px 0 30px 0;
+            }
+            
+            th, td {
+                text-align: left;
+                padding: 25px;
+                border: 1px solid whitesmoke;
+            }
+            tr:nth-child(even) {background-color: #f2f2f2;}
+        </style>
+        <h2>Elevation</h2>
+        <p>Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the <strong>box-shadow</strong> property. These are especially useful for menus, popovers, and dialogs.</p>
+    
+        <table>
+            <thead>
+                <tr>
+                    <th>Token</th>
+                    <th>Example</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>--ptc-shadow-x-small</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-x-small);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-small</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-small);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-medium</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-medium);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-large</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-large);"></div></td>
+                </tr>
+                <tr>
+                    <td>--ptc-shadow-x-large</td>
+                    <td><div class="elevation-demo" style="box-shadow: var(--ptc-shadow-x-large);"></div></td>
+                </tr>
+            </tbody>
+        </table>
+        `
+}
+
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/grid/About.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { Source } from '@storybook/blocks';
+
+export default {
+    title: 'Design Tokens/Grid',
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/file/vN5aEOCLun1QmatmlVBeX0/PTC.com-UX-Library?type=design&node-id=1637%3A58&mode=design&t=wElsipYyzT8825HE-1",
+        },
+    },
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Grid</h2>
+        <p>PTC Design System is using Griddle. Credits to Dave Berning. <br>
+        Please check the <a href="https://github.com/daveberning/griddle#spacing-modifiers" target="_blank">github documentation</a>
+        <p>
+    `
+}
+export const About = AboutTemplate.bind({});

package/dist/collection/stories/design-tokens/motion/About.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Design Tokens/Motion',
+};
+
+const AboutTemplate = args => {
+    return html `
+        <h2>Motion</h2>
+    `
+}
+
+export const About = AboutTemplate.bind({});