@sc-360-v2/storefront-cms-library 0.1.98 → 0.2.0

package/dist/stack.scss

@@ -6,19 +6,55 @@
     // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
     min-width: 100px;
     min-height: 100px;
-    margin: var(--_ctm-sta-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-    background: var(--_ctm-sta-dn-bd-cr);
+    margin: var(
+      --_ctm-mob-sta-lt-mn,
+      var(--_ctm-tab-sta-lt-mn, var(--_ctm-sta-lt-mn, var(--_ctm-lt-mn)))
+    );
+    background: var(
+      --_ctm-mob-sta-dn-bd-cr,
+      var(--_ctm-tab-sta-dn-bd-cr, var(--_ctm-sta-dn-bd-cr))
+    );
     display: var(--_d-grid);
 
-    border-color: var(--_hide-grid-border, var(--_ctm-sta-dn-br-cr, var(--_tst-dn-dt-se-br-cr)));
-    border-style: var(--_hide-grid-border, var(--_ctm-sta-dn-br-se, var(--_tst-dn-dt-se-br-se)));
-    border-width: var(--_hide-grid-border, var(--_ctm-sta-dn-br-wh, var(--_tst-dn-dt-se-br-wh)));
-    border-radius: var(--_ctm-sta-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
+    border-color: var(
+      --_hide-grid-border,
+      var(--_ctm-mob-sta-dn-br-cr, var(--_ctm-tab-sta-dn-br-cr, var(--_ctm-sta-dn-br-cr)))
+    );
+    border-style: var(
+      --_hide-grid-border,
+      var(--_ctm-mob-sta-dn-br-se, var(--_ctm-tab-sta-dn-br-se, var(--_ctm-sta-dn-br-se)))
+    );
+    border-width: var(
+      --_hide-grid-border,
+      var(--_ctm-mob-sta-dn-br-wh, var(--_ctm-tab-sta-dn-br-wh, var(--_ctm-sta-dn-br-wh)))
+    );
+    border-radius: var(--_ctm-mob-sta-dn-br-rs, var(--_ctm-tab-sta-dn-br-rs, --_ctm-sta-dn-br-rs));
     grid-template-columns: 100%;
 
     &.vtl {
       // width: var(--_sf-sta-nw-wh, auto);
-      width: calc(1% * var(--_ctm-sta-ele-nw-wh-vl, auto));
+      // width: calc(
+      //   1% *
+      //     var(
+      //       --_ctm-mob-sta-ele-nw-wh-vl,
+      //       var(--_ctm-tab-sta-ele-nw-wh-vl var(--_ctm-sta-ele-nw-wh-vl, auto))
+      //     )
+      // );
+      // width: calc(
+      //   1% *
+      //     var(
+      //       --_ctm-mob-sta-ele-nw-wh-vl,
+      //       var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl, auto))
+      //     )
+      // );
+
+      width: calc(
+        1% *
+          var(
+            --_ctm-mob-sta-ele-nw-wh-vl,
+            var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
+          )
+      );
       min-width: 100px;
       & > .wrapper {
         flex-direction: column;
@@ -26,7 +62,10 @@
         height: 100%;
         // justify-content: var(--_ctm-sta-lt-jy-ct);
         // align-items: var(--_ctm-sta-lt-an-is);
-        align-items: var(--_ctm-sta-lt-jy-ct);
+        align-items: var(
+          --_ctm-mob-sta-lt-jy-ct,
+          var(--_ctm-tab-sta-lt-jy-ct, var(--_ctm-sta-lt-jy-ct))
+        );
       }
     }
     &.hrz {
@@ -48,16 +87,19 @@
         height: 100%;
         flex-direction: row;
         // justify-content: var(--_ctm-sta-lt-an-is);
-        align-items: var(--_ctm-sta-lt-an-is);
+        align-items: var(
+          --_ctm-mob-sta-lt-an-is,
+          var(--_ctm-tab-sta-lt-an-is, var(--_ctm-sta-lt-an-is))
+        );
       }
     }
 
     & > div {
       &.wrapper {
         // width: 100%;
-        padding: var(--_ctm-sta-lt-pg);
+        padding: var(--_ctm-mob-sta-lt-pg, var(--_ctm-tab-sta-lt-pg, var(--_ctm-sta-lt-pg)));
         display: var(--_d-flex);
-        gap: var(--_ctm-sta-lt-im-gp);
+        gap: var(--_ctm-mob-sta-lt-im-gp, var(--_ctm-tab-sta-lt-im-gp, var(--_ctm-sta-lt-im-gp)));
 
         // border-color: var(
         //   --_hide-grid-border,

package/dist/sub-category.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="subCategory"] {
+    // width: var(--_sf-con-nw-wh);
+    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-subc-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: calc(1% * var(--_ctm-subc-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-subc-lt-ht) !important;
+    height: auto;
+    margin: var(--_ctm-subc-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+
+    background-color: var(--_ctm-subc-dn-bd-cr, var(--_tst-dn-bd-cr));
+    padding: var(--_ctm-subc-lt-pg, var(--_tst-lt-pg));
+
+    // height: 100%;
+    border-color: var(--_ctm-subc-dn-br-cr, var(--_tst-dn-br-cr));
+    border-style: var(--_ctm-subc-dn-br-se, var(--_tst-dn-br-se));
+    border-width: var(--_ctm-subc-dn-br-wh, var(--_tst-dn-br-wh));
+    border-radius: var(--_ctm-subc-dn-br-rs, var(--_tst-dn-br-rs));
+    box-shadow: var(
+      --_show-shadow,
+      var(--_ctm-subc-dn-sw-ae, var(--_tst-dn-sw-ae))
+        var(--_ctm-subc-dn-sw-br, var(--_tst-dn-sw-br))
+        var(--_ctm-subc-dn-sw-sd, var(--_tst-dn-sw-sd))
+        var(--_ctm-subc-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
+    );
+
+    // &:not(:has(#{$resizerId}#{$resizeActive})) {
+    //   min-height: 100px !important;
+    // }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        // grid-template-rows: max(var(--_ctm-subc-lt-ht), auto) !important;
+      }
+    }
+  }
+}

package/dist/tabs.scss

@@ -0,0 +1,135 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="tabs"] {
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-tabs-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // width: calc(1% * var(--_ctm-tab-lt-wh, auto));
+    // width: 100%;
+    // height: var(--_ctm-pro-lt-ht) !important;
+    // width: 100%;
+    height: auto;
+    margin: var(--_ctm-tabs-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+    background: var(--_ctm-tabs-dn-bd-cr);
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
+
+    & > .wrapper {
+      width: 100%;
+    }
+    .tabs__main {
+      background-color: var(--_ctm-tabs-dn-tb-cr-bd-cr);
+      border-color: var(--_ctm-tabs-dn-tb-cr-br-cr);
+      border-style: var(--_ctm-tabs-dn-tb-cr-br-se);
+      border-width: var(--_ctm-tabs-dn-tb-cr-br-wh);
+      border-radius: var(--_ctm-tabs-dn-tb-cr-br-rs);
+      box-shadow: var(--_ctm-tabs-dn-tb-cr-sw-ae) var(--_ctm-tabs-dn-tb-cr-sw-br)
+        var(--_ctm-tabs-dn-tb-cr-sw-sd) var(--_ctm-tabs-dn-tb-cr-sw-cr);
+      padding: var(--_ctm-tabs-lt-pg);
+      &.tabs__vertical {
+        .tabs {
+          .tabs__container {
+            flex-direction: column;
+            width: 120px;
+          }
+        }
+      }
+      &.tabs__hr {
+        .tabs {
+          flex-direction: column;
+          .tabs__container {
+            width: 100%;
+          }
+        }
+      }
+      .tabs {
+        display: flex;
+        gap: var(--_ctm-tabs-lt-tb-cr);
+
+        .tabs__container {
+          display: flex;
+          justify-content: var(--_ctm-tabs-lt-tb-at);
+          align-items: center;
+          background-color: var(--_gray-100);
+          // gap: var(--_ctm-tabs-lt-tb-sg);
+          .tab {
+            cursor: pointer;
+            text-align: left;
+            padding: var(--_ctm-tabs-lt-hl-pg) var(--_ctm-tabs-lt-vl-pg);
+            background-color: var(--_ctm-tabs-dn-ts-dt-se-bd-cr);
+            border-color: var(--_ctm-tabs-dn-ts-dt-se-br-cr);
+            border-style: var(--_ctm-tabs-dn-ts-dt-se-br-se);
+            border-width: var(--_ctm-tabs-dn-ts-dt-se-br-wh);
+            border-radius: var(--_ctm-tabs-dn-ts-dt-se-br-rs);
+            box-shadow: var(--_ctm-tabs-dn-ts-dt-se-sw-ae) var(--_ctm-tabs-dn-ts-dt-se-sw-br)
+              var(--_ctm-tabs-dn-ts-dt-se-sw-sd) var(--_ctm-tabs-dn-ts-dt-se-sw-cr);
+            color: var(--_ctm-tabs-dn-ts-dt-se-cr);
+            font-family: var(--_ctm-tabs-dn-ts-dt-se-ft-fy), sans-serif;
+            font-size: var(--_ctm-tabs-dn-ts-dt-se-ft-se);
+            font-weight: var(--_ctm-tabs-dn-ts-dt-se-ft-wt);
+            font-style: var(--_ctm-tabs-dn-ts-dt-se-ft-se-ic);
+            text-align: var(--_ctm-tabs-dn-ts-dt-se-tt-an);
+            letter-spacing: var(--_ctm-tabs-dn-ts-dt-se-lr-sg);
+            line-height: var(--_ctm-tabs-dn-ts-dt-se-le-ht);
+            text-decoration: var(--_ctm-tabs-dn-ts-dt-se-ue);
+            // span {
+            //   padding: 8px;
+            //   &.active {
+            //     border-bottom: 2px solid var(--_primary-400);
+            //   }
+            // }
+            &:hover {
+              background-color: var(--_ctm-tabs-dn-ts-hr-se-bd-cr);
+              border-color: var(--_ctm-tabs-dn-ts-hr-se-br-cr);
+              border-style: var(--_ctm-tabs-dn-ts-hr-se-br-se);
+              border-width: var(--_ctm-tabs-dn-ts-hr-se-br-wh);
+              border-radius: var(--_ctm-tabs-dn-ts-hr-se-br-rs);
+              box-shadow: var(--_ctm-tabs-dn-ts-hr-se-sw-ae) var(--_ctm-tabs-dn-ts-hr-se-sw-br)
+                var(--_ctm-tabs-dn-ts-hr-se-sw-sd) var(--_ctm-tabs-dn-ts-hr-se-sw-cr);
+              color: var(--_ctm-tabs-dn-ts-hr-se-cr);
+              font-family: var(--_ctm-tabs-dn-ts-hr-se-ft-fy), sans-serif;
+              font-size: var(--_ctm-tabs-dn-ts-hr-se-ft-se);
+              font-weight: var(--_ctm-tabs-dn-ts-hr-se-ft-wt);
+              font-style: var(--_ctm-tabs-dn-ts-hr-se-ft-se-ic);
+              text-align: var(--_ctm-tabs-dn-ts-hr-se-tt-an);
+              letter-spacing: var(--_ctm-tabs-dn-ts-hr-se-lr-sg);
+              line-height: var(--_ctm-tabs-dn-ts-hr-se-le-ht);
+              text-decoration: var(--_ctm-tabs-dn-ts-hr-se-ue);
+            }
+            &.active {
+              background-color: var(--_ctm-tabs-dn-ts-sd-se-bd-cr);
+              border-color: var(--_ctm-tabs-dn-ts-sd-se-br-cr);
+              border-style: var(--_ctm-tabs-dn-ts-sd-se-br-se);
+              border-width: var(--_ctm-tabs-dn-ts-sd-se-br-wh);
+              border-radius: var(--_ctm-tabs-dn-ts-sd-se-br-rs);
+              box-shadow: var(--_ctm-tabs-dn-ts-sd-se-sw-ae) var(--_ctm-tabs-dn-ts-sd-se-sw-br)
+                var(--_ctm-tabs-dn-ts-sd-se-sw-sd) var(--_ctm-tabs-dn-ts-sd-se-sw-cr);
+              color: var(--_ctm-tabs-dn-ts-sd-se-cr);
+              font-family: var(--_ctm-tabs-dn-ts-sd-se-ft-fy), sans-serif;
+              font-size: var(--_ctm-tabs-dn-ts-sd-se-ft-se);
+              font-weight: var(--_ctm-tabs-dn-ts-sd-se-ft-wt);
+              font-style: var(--_ctm-tabs-dn-ts-sd-se-ft-se-ic);
+              text-align: var(--_ctm-tabs-dn-ts-sd-se-tt-an);
+              letter-spacing: var(--_ctm-tabs-dn-ts-sd-se-lr-sg);
+              line-height: var(--_ctm-tabs-dn-ts-sd-se-le-ht);
+              text-decoration: var(--_ctm-tabs-dn-ts-sd-se-ue);
+            }
+          }
+          .tab__content {
+            background-color: var(--_ctm-tabs-dn-tb-ct-cr-bd-cr);
+            border-color: var(--_ctm-tabs-dn-tb-ct-cr-br-cr);
+            border-style: var(--_ctm-tabs-dn-tb-ct-cr-br-se);
+            border-width: var(--_ctm-tabs-dn-tb-ct-cr-br-wh);
+            border-radius: var(--_ctm-tabs-dn-tb-ct-cr-br-rs);
+            box-shadow: var(--_ctm-tabs-dn-tb-ct-cr-sw-ae) var(--_ctm-tabs-dn-tb-ct-cr-sw-br)
+              var(--_ctm-tabs-dn-tb-ct-cr-sw-sd) var(--_ctm-tabs-dn-tb-ct-cr-sw-cr);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/text-temp.scss

@@ -27,7 +27,7 @@
     }
 
     .text-element {
-      background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
       padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
       display: flex;
       flex-direction: column;

package/dist/types/builder/elements/brand/index.d.ts

@@ -0,0 +1,30 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface BrandStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => BrandStyleProperties;
+export interface CMSBrandInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: BrandStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/elements/brand-image/index.d.ts

@@ -0,0 +1,30 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface brandImageStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => brandImageStyleProperties;
+export interface CMSbrandImageInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: brandImageStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/elements/bundle/index.d.ts

@@ -0,0 +1,30 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface BundleStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => BundleStyleProperties;
+export interface CMSBundleInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: BundleStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/elements/tab/index.d.ts

@@ -1,7 +1,7 @@
 import { CommonStyleProperties } from "../../../global/style-properties";
 import { CMSHTMLAttributes } from "../../../global/attributes";
-import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
-import { BuilderAttributes, CMSElementInterface } from "../common";
+import { AlignSelfValue, BoxSizingValue, GridAreaValue, HeightValue, ResponsiveBehaviourTypes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes } from "../common";
 export interface TabStyleProperties extends CommonStyleProperties {
     minHeight?: MinHeightValue;
     height?: HeightValue;
@@ -19,12 +19,29 @@ export interface TabStyleProperties extends CommonStyleProperties {
     alignSelf?: AlignSelfValue;
 }
 export declare const getDefaultStyles: () => TabStyleProperties;
-export interface CMSTabInterface extends Omit<CMSElementInterface, "attributes"> {
-    attributes: {
-        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
-        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
-        CUSTOM: any;
+export interface TabElementAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+    dataMeta?: string;
+}
+export interface CMSTabInterface {
+    id?: string | number;
+    uniqueKey?: string | number;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType" | "dataDropElement">;
+        HTML?: TabElementAttributes;
+        CUSTOM?: any;
     };
-    styles: TabStyleProperties;
+    styles?: TabStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
     childrenStyles?: CommonStyleProperties;
+    children: any;
+    childIds: any[];
+    previewImage?: string;
+    isMaximized?: boolean;
 }

package/dist/types/builder/enums/index.d.ts

@@ -12,6 +12,7 @@ export declare enum CMSToolIdTypes {
     gridLayersOverlay = "grid__layers__overlay",
     iframeRoot = "cms-iframe-root",
     addElementTools = "cms-add-element-tools",
+    contextMenu = "cms-context-menu",
     elementPopertiesPopup = "cms-element-properties",
     addElementComponent = "cms-add-element-component",
     addElementCanvas = "cms-custom-canvas",
@@ -25,6 +26,7 @@ export declare enum CMSToolIdTypes {
     customCodeModal = "cms-custom-code-modal",
     playgroundMain = "cms-playground-main",
     themeSettings = "cms-theme-settings-component",
+    pageLayers = "cms-page-layers-component",
     playgroundProperties = "cms-playground-properties",
     dragDropPercentage = "cms-drag-drop-percentage",
     elementReizer = "cms-element-resizer",
@@ -45,7 +47,12 @@ export declare enum CMSToolIdTypes {
     repeaterItemWrapper = "cms-repeater-item-wrapper",
     cmsElementFullView = "cms-element-full-view",
     productWrapper = "cms-product-wrapper",
-    productDetailsWrapper = "cms-product-details-wrapper"
+    productDetailsWrapper = "cms-product-details-wrapper",
+    brandWrapper = "cms-brand-wrapper",
+    categoryWrapper = "cms-category-wrapper",
+    subCategoryWrapper = "cms-sub-category-wrapper",
+    categoryWidgetWrapper = "cms-category-widget-wrapper",
+    tabsWrapper = "cms-tabs-wrapper"
 }
 export declare enum CMSElementSelectors {
     iframeSelector = "iframe[data-title='iframe__playground']",
@@ -74,6 +81,7 @@ export declare enum CMSElementSelectors {
     customCodeModalSelectr = "div[data-cms-tool='cms-custom-code-modal']",
     playgroundMain = "main[data-cms-tool='cms-playground-main']",
     themeSettings = "div[data-cms-tool='cms-theme-settings-component']",
+    pageLayers = "div[data-cms-tool='cms-page-layers-component']",
     playgroundProperties = "div[data-cms-tool='cms-playground-properties']",
     elementDNDPercentage = "div[data-cms-tool='cms-drag-drop-percentage']",
     elementReizer = "div[data-cms-tool='cms-element-resizer']",
@@ -91,7 +99,13 @@ export declare enum CMSElementSelectors {
     repeaterItemElement = "div[data-element-type='repeater-item']",
     cmsElementFullView = "div[data-cms-tool='cms-element-full-view']",
     productElement = "div[data-element-type='product']",
-    productDetailsElement = "div[data-element-type='productDetails']"
+    productDetailsElement = "div[data-element-type='productDetails']",
+    categoryElement = "div[data-element-type='category']",
+    brandElement = "div[data-element-type='brand']",
+    subCategoryElement = "div[data-element-type='subCategory']",
+    categoryWidgetElement = "div[data-element-type='categoryWidget']",
+    tabsElement = "div[data-element-type='tabs']",
+    imageHotspot = "div[data-element-type='imageHotspot']"
 }
 export declare enum CMSToolAttributes {
     id = "data-cms-tool",
@@ -123,6 +137,7 @@ export declare enum CMSToolAttributes {
 export declare enum CMSElementEditTypes {
     CSS = "css",
     TOOL = "tool",
+    CONTROLLED_CSS = "controlledCss",
     CONTROLS = "controls",
     CONTENT = "content"
 }
@@ -150,7 +165,7 @@ export declare const CMSElementsListEnum: {
     CODE: string;
     IMAGE: string;
     GRID: string;
-    TAB: string;
+    TABS: string;
     VIDEO: string;
     SLIDE_SHOW_LAYOUTER: string;
     CODEEDITOR: string;
@@ -189,6 +204,13 @@ export declare const CMSElementsListEnum: {
     PRODUCT_CODE: string;
     PRODUCT_REVIEW: string;
     PRODUCT_RATING: string;
+    BRAND_NAME: string;
+    BRAND_DESCRIPTION: string;
+    BRAND_CODE: string;
+    BRAND_IMAGE: string;
+    BUNDLE_NAME: string;
+    BUNDLE_CODE: string;
+    BUNDLE_IMAGE: string;
     LIGHTBOX: string;
     CART: string;
     PROFILE: string;
@@ -198,4 +220,35 @@ export declare const CMSElementsListEnum: {
     REPEATER: string;
     REPEATER_ITEM: string;
     PRODUCT_DETAILS: string;
+    CATEGORY: string;
+    CATEGORY_WIDGET: string;
+    CATEGORY_NAME: string;
+    CATEGORY_IMAGE: string;
+    CATEGORY_CODE: string;
+    CATEGORY_DESCRIPTION: string;
+    BRAND: string;
+    BUNDLE: string;
+    SUB_CATEGORY: string;
+    FILTERS: string;
 };
+export declare enum CMSResponsiveModeEnums {
+    DESKTOP = "desktop",
+    TABLET = "tablet",
+    MOBILE = "mobile"
+}
+export declare enum LinkTypes {
+    NONE = "none",
+    PAGE_ON_THE_SITE = "pageOnTheSite",
+    WEB_ADDRESS = "webAddress",
+    SCROLL_TO = "scrollTo",
+    DOWNLOAD_DOCUMENT = "downloadDocument",
+    EMAIL_ADDRESS = "emailAddress",
+    PHONE_NUMBER = "phoneNumber",
+    LIGHTBOX = "lightbox"
+}
+export declare enum CMSRepeaterSliderControlTypes {
+    ARROWSANDDOTS = "Arrows & Dots",
+    ARROWS = "Arrows",
+    DOTS = "Dots",
+    NONE = "None"
+}

package/dist/types/builder/index.d.ts

@@ -42,5 +42,8 @@ import * as lightboxSchema from "./elements/lightbox/index";
 import * as cartSchema from "./elements/cart/index";
 import * as profileSchema from "./elements/profile/index";
 import * as repeaterSchema from "./elements/repeater/index";
+import * as brandSchema from "./elements/brand/index";
+import * as brandImageSchema from "./elements/brand-image/index";
+import * as bundleSchema from "./elements/bundle/index";
 import commonFunctions from "./utilities/global";
-export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, };
+export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, };

package/dist/types/builder/interfaces/global.d.ts

@@ -82,3 +82,14 @@ export interface CMSSubElementLayerInterface {
     dataElementType?: string;
     dataElementSubChild?: string;
 }
+export interface CMSResponsiveTypeValueInterface {
+    min?: string;
+    preferred?: string;
+    max?: string;
+}
+export type ResponsiveMode = "desktop" | "tablet" | "mobile";
+export interface CMSResponsiveTypeInterface {
+    desktop?: CMSResponsiveTypeValueInterface;
+    tablet?: CMSResponsiveTypeValueInterface;
+    mobile?: CMSResponsiveTypeValueInterface;
+}

package/dist/types/builder/tools/element-edit/brand.d.ts

@@ -0,0 +1,17 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    CONTENT = "content",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/types/builder/tools/element-edit/brandImage.d.ts

@@ -0,0 +1,27 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface controlInterface {
+    value: string | boolean;
+    propertyType: string;
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+    onClick: controlInterface;
+    onHover: controlInterface;
+    cropRatio: CMSIBCommonInterface;
+    fitOptions: CMSIBCommonInterface;
+    horizontalAlignment: CMSIBCommonInterface;
+    verticalAlignment: CMSIBCommonInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/types/builder/tools/element-edit/bundle.d.ts

@@ -0,0 +1,17 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    CONTENT = "content",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/types/builder/tools/element-edit/category.d.ts

@@ -0,0 +1,17 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    CONTENT = "content",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};