@sc-360-v2/storefront-cms-library 0.3.13 → 0.3.14

package/dist/cart-summary.scss

@@ -161,13 +161,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           gap: 8px;
           align-self: stretch;
           border-radius: 4px;
-          border: 1px solid #243dc6;
-          background: #243dc6;
-          box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-          color: #fff;
           font-size: 16px;
           font-weight: 600;
           line-height: 24px;
+          box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+          &.proceed {
+            border: 1px solid #243dc6;
+            background: #243dc6;
+            color: #fff;
+          }
+          &.submit_quotes {
+            border: 1px solid #c9c9c9;
+            background: #fff;
+            color: #313131;
+          }
         }
       }
     }

package/dist/contact-us.scss

@@ -4,7 +4,13 @@
 [data-div-type="element"] {
   &[data-element-type="contactUs"],
   &[data-element-type="createForm"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     aspect-ratio: 1 / var(--_sf-aspect-ratio);

package/dist/filters.scss

@@ -678,12 +678,46 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-bottom: 1px solid var(--_gray-300);
             }
             li {
+              // display: flex;
+              // align-items: center;
+              // justify-content: space-between;
+              // padding-block: 6px;
+              // font-size: 14px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding-block: 6px;
               font-size: 14px;
 
+              .filter-li-inner {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                gap: 8px;
+              }
+
+              .filter-indicator {
+                width: 16px;
+                height: 16px;
+                flex-shrink: 0;
+              }
+
+              .filter-indicator img {
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+                object-fit: cover;
+                border: 1px solid var(--_gray-300);
+              }
+
+              .color-circle {
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+                border: 1px solid var(--_gray-300);
+              }
+
               a {
                 // padding-block: 6px;
                 padding-left: 10px;
@@ -1231,6 +1265,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
+        .color-image {
+          width: 15px;
+          height: 15px;
+          border-radius: 50%;
+          border: 1px solid var(--_gray-200);
+          object-fit: "cover";
+          display: "block";
+        }
         .color {
           width: 15px;
           height: 15px;

package/dist/hotspot.scss

@@ -147,7 +147,13 @@ $data: (
 
 [data-div-type="element"] {
   &[data-element-type="imageHotspot"] {
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);

package/dist/product-image.scss

@@ -3,7 +3,13 @@
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
@@ -29,18 +35,18 @@
     //   cursor: auto;
     // }
 
-    &[data-view-state="full"] {
-      aspect-ratio: 1/0.01;
-      & > .wrapper {
-        & > div {
-          height: 100%;
-        }
-      }
-      img {
-        height: 100%;
-        object-fit: cover;
-      }
-    }
+    // &[data-view-state="full"] {
+    //   aspect-ratio: 1/0.01;
+    //   & > .wrapper {
+    //     & > div {
+    //       height: 100%;
+    //     }
+    //   }
+    //   img {
+    //     height: 100%;
+    //     object-fit: cover;
+    //   }
+    // }
 
     & > .wrapper {
       width: 100%;
@@ -529,6 +535,7 @@
           }
 
           .embla__slide {
+            flex: 0 0 auto;
             width: 100%;
             height: 100%;
           }
@@ -995,8 +1002,11 @@
         cursor: pointer;
       }
       width: 100%;
+      max-width: 100%;
       height: 100%;
       display: flex;
+      flex: 0 0 auto;
+
       // flex-direction: column;
 
       background-color: var(

package/dist/submit-quote.scss

@@ -0,0 +1,250 @@
+.submit-quote-main {
+  display: flex;
+  gap: 24px;
+  padding: 32px;
+  background-color: #f9f9f9;
+
+  .quote-items {
+    flex: 2;
+  }
+
+  .quote-item {
+    padding: 32px 0;
+    display: flex;
+    gap: 24px;
+    border-bottom: 1px dotted #d0d0d0;
+
+    .quote-item__image {
+      width: 120px;
+      height: 120px;
+      object-fit: cover;
+      border-radius: 6px;
+      background-color: #f0f0f0;
+    }
+
+    .quote-item__details {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .quote-item__header {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        margin-bottom: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px dotted #d0d0d0;
+
+        .quote-item__title {
+          font-size: 18px;
+          font-weight: 600;
+          color: #111;
+        }
+
+        .quote-item__meta {
+          display: flex;
+          gap: 10px;
+          font-size: 18px;
+          color: #363636;
+        }
+      }
+
+      .quote-item__row {
+        display: flex;
+        gap: 60px;
+        align-items: flex-start;
+
+        .field {
+          display: flex;
+          flex-direction: column;
+          font-size: 14px;
+
+          label {
+            margin-bottom: 6px;
+            font-weight: 500;
+            color: #333;
+          }
+
+          .value {
+            font-weight: 600;
+            font-size: 16px;
+            color: #111;
+          }
+
+          input {
+            height: 40px;
+            padding: 8px 12px;
+            font-size: 15px;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            outline: none;
+            width: 130px;
+
+            &:focus {
+              border-color: #2563eb;
+              box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+            }
+          }
+
+          .input-with-prefix {
+            display: flex;
+            align-items: center;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            overflow: hidden;
+            width: 130px;
+            height: 40px;
+
+            span {
+              background-color: #f9f9f9;
+              padding: 0 8px;
+              font-size: 15px;
+              color: #444;
+              border-right: 1px solid #ccc;
+            }
+
+            input {
+              border: none;
+              width: 100%;
+              height: 100%;
+              padding-left: 6px;
+            }
+          }
+        }
+
+        .quote-item__totals {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          text-align: right;
+          margin-left: auto;
+          min-width: 180px;
+
+          .quote-total {
+            display: flex;
+            flex-direction: column;
+
+            > div {
+              display: flex;
+              justify-content: flex-end;
+              align-items: baseline;
+              gap: 4px;
+
+              .label {
+                font-size: 14px;
+                color: #444;
+              }
+
+              .amount {
+                font-size: 18px;
+                font-weight: 700;
+                color: #111;
+              }
+            }
+
+            small {
+              font-size: 13px;
+              color: #888;
+              margin-top: 4px;
+            }
+
+            &.discounted {
+              .label {
+                color: #198754;
+              }
+
+              .amount {
+                color: #198754;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .quote-summary {
+    background: #f8f9fa;
+    border: 1px solid #e3e3e3;
+    border-radius: 8px;
+    padding: 24px;
+    width: 100%;
+    max-width: 400px;
+
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #333;
+    }
+
+    &__row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px dotted #ccc;
+      margin-bottom: 4px;
+
+      .label {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .value {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+
+        &.highlight {
+          font-size: 24px;
+          font-weight: 700;
+          color: #000;
+        }
+      }
+
+      &--quoted {
+        margin-bottom: 20px;
+      }
+    }
+
+    &__notes {
+      width: 100%;
+      height: 100px;
+      padding: 12px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      resize: none;
+      font-size: 14px;
+      font-family: inherit;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: #999;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: #1a40f2;
+      }
+    }
+
+    &__button {
+      width: 100%;
+      padding: 14px;
+      background-color: #1a40f2;
+      color: #fff;
+      font-size: 16px;
+      font-weight: 600;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: #1232c8;
+      }
+    }
+  }
+}

package/dist/table.scss

@@ -267,7 +267,10 @@
           );
 
           .thead__row__divider {
-            height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
+            height: var(
+              --_ctm-mob-lt-mx-dy-se-hr-ht,
+              var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht))
+            );
 
             .th__col__divider {
               padding: var(
@@ -330,7 +333,10 @@
               var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
             );
 
-            height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
+            height: var(
+              --_ctm-mob-lt-mx-dy-se-rw-ht,
+              var(--_ctm-tab-lt-mx-dy-se-rw-ht, var(--_ctm-lt-mx-dy-se-rw-ht))
+            );
 
             .td__col__divider {
               padding: var(

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

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

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

@@ -322,6 +322,7 @@ export declare const CMSElementsListEnum: {
     USER_ELEMENTS: string;
     FILTER_RESULTS: string;
     PRODUCT_SIZECHART: string;
+    BADGE: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",

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

@@ -80,4 +80,5 @@ import * as layouterProItemSchema from "./elements/layouter-pro-item/index";
 import * as userElementsSchema from "./elements/user-elements/index";
 import * as filterResultsSchema from "./elements/filter-results/index";
 import * as productSizeChartSchema from "./elements/product-sizechart/index";
-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, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, };
+import * as badgeSchema from "./elements/badge/index";
+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, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, };

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

@@ -0,0 +1,47 @@
+import { CMSIBCommonInterface, CMSIBSizeInterface, PaddingProps } from "../../interfaces/global";
+import { AlignItemsValue, JustifyContentValue, StackDirectionType } from "../../../global/types";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    badge: CMSIBCommonInterface;
+    badgeType: CMSIBCommonInterface;
+    direction: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: StackDirectionType;
+    };
+    itemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & PaddingProps;
+    justifyContent: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: JustifyContentValue;
+    };
+    alignItems: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: AlignItemsValue;
+    };
+    badgePosition: CMSIBCommonInterface;
+    spacingBetweenItems: CMSIBSizeInterface;
+    badgeItemStyle: CMSIBCommonInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+    badge: {
+        selectorKey: string;
+        defaultState: any;
+        newState: any;
+        bestsellerState: any;
+        limitedState: any;
+        exclusiveState: any;
+    };
+}
+export declare enum BadgeSelectorKeysEnum {
+    HOVER_STATE = "hover",
+    DEFAULT_STATE = "default",
+    NEW_STATE = "newState",
+    BESTSELLER_STATE = "bestsellerState",
+    LIMITED_STATE = "limitedState",
+    EXCLUSIVE_STATE = "exclusiveState",
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design",
+    BADGE = "badge",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,119 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    optionSelection: CMSIBCommonInterface;
+    displayStyle: CMSIBCommonInterface;
+    displayOutOfStockValues: CMSIBCommonInterface;
+    notifyMeButton: CMSIBCommonInterface;
+    quantitySelectorForVariantSelector: CMSIBCommonInterface;
+    dividerBetweenItems: CMSIBCommonInterface;
+    optionTitleValueSpacing: CMSIBCommonInterface;
+    remainingDisplayStyle: CMSIBCommonInterface;
+    allowUserToSearch: CMSIBCommonInterface;
+    allowUserToFilter: CMSIBCommonInterface;
+    swatchTypeDisplayStyle: {
+        selectorKey: string;
+        displayValues: CMSIBCommonInterface;
+        itemPadding: CMSIBCommonInterface;
+        itemSpacing: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        swatchImageType: CMSIBCommonInterface;
+    };
+    singleSelectDisplayStyle: {
+        selectorKey: string;
+        displayValues: CMSIBCommonInterface;
+        itemSpacing: CMSIBCommonInterface;
+        itemPadding: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        imageBehaviour: CMSIBCommonInterface;
+        itemsPerRow: CMSIBCommonInterface;
+        itemContentAlignment: CMSIBCommonInterface;
+        overflowDirection: CMSIBCommonInterface;
+    };
+    dropdownDisplayStyle: {
+        selectorKey: string;
+        dropdownOptionsSpacing: CMSIBCommonInterface;
+        dropdownOptionsPadding: CMSIBCommonInterface;
+        dropdownStyle: CMSIBCommonInterface;
+        optionAndListSpacing: CMSIBCommonInterface;
+        dropdownListItemSpacing: CMSIBCommonInterface;
+        dropdownListItemPadding: CMSIBCommonInterface;
+        dividerBetweenListItems: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+    };
+    groupedOptionsDisplayStyle: {
+        selectorKey: string;
+        groupsDisplayStyle: CMSIBCommonInterface;
+        groupSpacing: CMSIBCommonInterface;
+        groupPadding: CMSIBCommonInterface;
+        groupHeaderAndOptionSpacing: CMSIBCommonInterface;
+        tabDirection: CMSIBCommonInterface;
+        tabLayout: CMSIBCommonInterface;
+        tabAlignment: CMSIBCommonInterface;
+        tabSpacing: CMSIBCommonInterface;
+        tabAndContainerSpacing: CMSIBCommonInterface;
+        tabHorizontalPadding: CMSIBCommonInterface;
+        tabVerticalPadding: CMSIBCommonInterface;
+        containerPadding: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        tabRowSpacing: CMSIBCommonInterface;
+        expandIconPositon: CMSIBCommonInterface;
+        expandFirstItemByDefault: CMSIBCommonInterface;
+        allowMultipleOpenItems: CMSIBCommonInterface;
+        itemDividers: CMSIBCommonInterface;
+        accordionSpacing: CMSIBCommonInterface;
+        accordionAndContainerSpacing: CMSIBCommonInterface;
+        accordionHorizontalPadding: CMSIBCommonInterface;
+        accordionVerticalPadding: CMSIBCommonInterface;
+        groupAndContainerSpacing: CMSIBCommonInterface;
+        groupHorizontalPadding: CMSIBCommonInterface;
+        groupVerticalPadding: CMSIBCommonInterface;
+        canCollapseGroups: CMSIBCommonInterface;
+    };
+    matrixDisplayStyle: {
+        selectorKey: string;
+        header: CMSIBCommonInterface;
+        headerHeight: CMSIBCommonInterface;
+        rowHeight: CMSIBCommonInterface;
+        headerDivider: CMSIBCommonInterface;
+        rowDivider: CMSIBCommonInterface;
+        columnDivider: CMSIBCommonInterface;
+        alternativeRowColors: CMSIBCommonInterface;
+        headerCellPadding: CMSIBCommonInterface;
+        rowCellPadding: CMSIBCommonInterface;
+        contentAlignment: CMSIBCommonInterface;
+        rowsPerPage: CMSIBCommonInterface;
+        overflowControl: CMSIBCommonInterface;
+        paginationType: CMSIBCommonInterface;
+        paginationAliginment: CMSIBCommonInterface;
+        showMoreRows: CMSIBCommonInterface;
+    };
+    groupedMatrixDisplayStyle: {
+        selectorKey: string;
+        groupsDisplayStyle: CMSIBCommonInterface;
+        groupSpacing: CMSIBCommonInterface;
+        groupPadding: CMSIBCommonInterface;
+        groupHeaderAndOptionSpacing: CMSIBCommonInterface;
+    };
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum BulkVariantPickerSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design",
+    SWATFH_TYPE_DISPLAY_STYLE = "swatchTypeDisplayStyle",
+    SINGLE_SELECT_DISPLAY_STYLE = "singleSelectDisplayStyle",
+    DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle",
+    GROUPED_OPTION_DISPLAY_STYLE = "groupedOptionsDisplayStyle",
+    MATRIX_DISPLAY_STYLE = "matrixDisplayStyle",
+    GROUPED_MATRIX_DISPLAY_STYLE = "groupedMatrixDisplayStyle",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};