@sc-360-v2/storefront-cms-library 0.1.8 → 0.1.9

package/dist/store-locations.scss

@@ -8,173 +8,24 @@
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
     & > .wrapper {
-      // width: 100%;
-      // height: 100%;
-    }
-
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-    &[data-icon-position="left"] {
-      --_sf-fd-bn: row;
-    }
-    &[data-icon-position="right"] {
-      --_sf-fd-bn: row-reverse;
-    }
-    &[data-icon-position="center"] {
-      --_sf-fd-bn: row;
-    }
-
-    &:hover {
-      --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
-      --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
-      --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
-      --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
-      --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
-      --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
-        var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
-        var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
-        var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
-
-      --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
-      --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
-      --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
-      --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
-      --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
-      --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
-      --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
-      --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
-
-      --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
-      --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
-      --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
-      --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-
-      &[data-hover-show-shadow="false"] {
-        --_hover-show-shadow: none;
-      }
-      &[data-hover-show-icon="false"] {
-        --_hover-show-icon: none;
-      }
-    }
-    &[data-show-icon="false"] {
-      --_show-icon: none;
-    }
-    &[data-element-style="Icon"] {
-      &[data-icon-position="left"] {
-        --_sf-jc: start;
-      }
-      &[data-icon-position="right"] {
-        --_sf-jc: end;
-      }
-      &[data-icon-position="center"] {
-        --_sf-jc: center;
-      }
+      width: 100%;
     }
-
-    .btn__with__text {
-      background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
-      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
-      display: flex;
-      flex-direction: var(--_sf-fd-bn);
-      align-items: center;
-      // justify-content: var(--_sf-jc, center);
-      justify-content: var(--_ctm-lt-tt-an, center);
-      gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
-
+    table {
+      font-family: arial, sans-serif;
+      border-collapse: collapse;
       width: 100%;
       height: 100%;
+    }
 
-      border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
-      box-shadow: var(
-        --_hover-show-shadow,
-        var(
-          --_sf-hr-bx-sw,
-          var(
-            --_show-shadow,
-            var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
-              var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
-              var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
-              var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
-          )
-        )
-      );
-      &[data-show-border="true"] {
-        border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
-        border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
-        border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
-      }
-      // &.btn__with__text__icon {
-      //   justify-content: center;
-      //   // gap: 10px;
-      // }
-      // & > span {
-      //   align-items: center;
-      //   justify-content: center;
-      //   &.txt {
-      //     display: flex;
-      //     color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-      //     font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-      //       sans-serif;
-      //     font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-      //     font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-      //     font-style: var(
-      //       --_sf-hr-ft,
-      //       var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
-      //     );
-      //     text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-      //     letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-      //     line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-      //     text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
-      //     // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-      //   }
-
-      //   &.icon {
-      //     display: var(--_hover-show-icon, var(--_show-icon, flex));
-      //     svg {
-      //       width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-      //       height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-      //       path {
-      //         stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-      //       }
-      //     }
-      //   }
-      //   &[data-element-style="Text"] {
-      //     display: inline-block;
-      //     width: 100%;
-      //   }
-      // }
-
-      .txt {
-        display: flex;
-        color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-        font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-          sans-serif;
-        font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-        font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-        font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
-        text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-        letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-        line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-        text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
-        // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-      }
+    td,
+    th {
+      border: 1px solid #dddddd;
+      text-align: center;
+      padding: 8px;
+    }
 
-      .icon {
-        display: var(--_hover-show-icon, var(--_show-icon, flex));
-        svg {
-          width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-          height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-          path {
-            stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-          }
-        }
-      }
-      [data-element-style="Text"] {
-        display: inline-block;
-        width: 100%;
-      }
+    tr:nth-child(even) {
+      // background-color: #dddddd;
     }
   }
 }

package/dist/table.scss

@@ -3,7 +3,8 @@
 
 [data-div-type="element"] {
   &[data-element-type="table"] {
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // 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))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     // --_aspect-ratio: calc(

package/dist/text-temp.scss

@@ -8,7 +8,8 @@
     // margin: var(--_lt-mn);
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // 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))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;

package/dist/types/builder/elements/product-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 ProductImageStyleProperties 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: () => ProductImageStyleProperties;
+export interface CMSProductImageInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: ProductImageStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

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

@@ -37,4 +37,5 @@ import * as stackSchema from "./elements/stack/index";
 import * as uomSelectorSchema from "./elements/uom-selector/index";
 import * as variantPickerSchema from "./elements/variant-picker/index";
 import * as bulkVariantPickerSchema from "./elements/bulk-variant-picker/index";
-export { commonFunctions, interfaces, enums, sectionSchema, gridSchema, cmsTypes, textSchema, ElementEditSchema, imageSchema, videoSChema, socialIconsSchema, buttonSchema, gallerySliderSchema, tabSchema, tableSchema, faqSchema, codeSchema, embedSchema, scrollSchema, countdownSchema, imageHotspotSchema, mapSchema, containerSchema, priceSchema, productActionsSchema, volumePricingSchema, pickupLocationsSchema, storeLocationsSchema, productInventorySchema, paymentMethodsSchema, productHighlightsSchema, shippingEstimatorSchema, productPromotionsSchema, amountEstimatorSchema, quantitySelectorSchema, stackSchema, uomSelectorSchema, variantPickerSchema, bulkVariantPickerSchema, };
+import * as productImageSchema from "./elements/product-image/index";
+export { commonFunctions, interfaces, enums, sectionSchema, gridSchema, cmsTypes, textSchema, ElementEditSchema, imageSchema, videoSChema, socialIconsSchema, buttonSchema, gallerySliderSchema, tabSchema, tableSchema, faqSchema, codeSchema, embedSchema, scrollSchema, countdownSchema, imageHotspotSchema, mapSchema, containerSchema, priceSchema, productActionsSchema, volumePricingSchema, pickupLocationsSchema, storeLocationsSchema, productInventorySchema, paymentMethodsSchema, productHighlightsSchema, shippingEstimatorSchema, productPromotionsSchema, amountEstimatorSchema, quantitySelectorSchema, stackSchema, uomSelectorSchema, variantPickerSchema, bulkVariantPickerSchema, productImageSchema, };

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

@@ -35,4 +35,5 @@ import * as stack from "./stack";
 import * as uomSelector from "./uomSelector";
 import * as variantPicker from "./variantPicker";
 import * as bulkVariantPicker from "./bulkVariantPicker";
-export { section, grid, common, image, button, slideShowLayouter, tabs, video, table, gallerySlider, social, faq, code, text, embed, buttonV2, scroll, countdown, imageHotspot, map, container, price, productActions, volumePricing, pickupLocations, storeLocations, productInventory, paymentMethods, productHighlights, shippingEstimator, productPromotions, amountEstimator, quantitySelector, stack, uomSelector, variantPicker, bulkVariantPicker, };
+import * as productImage from "./product-image";
+export { section, grid, common, image, button, slideShowLayouter, tabs, video, table, gallerySlider, social, faq, code, text, embed, buttonV2, scroll, countdown, imageHotspot, map, container, price, productActions, volumePricing, pickupLocations, storeLocations, productInventory, paymentMethods, productHighlights, shippingEstimator, productPromotions, amountEstimator, quantitySelector, stack, uomSelector, variantPicker, bulkVariantPicker, productImage, };

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

@@ -0,0 +1,112 @@
+import { CMSIBCommonInterface, CMSIBSizeInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: CMSIBCommonInterface;
+    itemsPerSlide: CMSIBSizeInterface;
+    itemGap: CMSIBSizeInterface;
+    rowGap: CMSIBSizeInterface;
+    sliderControl: CMSIBCommonInterface;
+    controlPosition: CMSIBCommonInterface;
+    loopImages: CMSIBCommonInterface;
+    sliderDisplayScrollbar: CMSIBCommonInterface;
+    autoplay: CMSIBCommonInterface;
+    autoplayStyle: CMSIBCommonInterface;
+    autoplayDuration: CMSIBSizeInterface;
+    sliderSpeed: CMSIBSizeInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+    galleryWidgetStyle: {
+        selectorKey: string;
+        backgroundColor: CMSIBCommonInterface;
+        borderColor: CMSIBCommonInterface;
+        borderStyle: CMSIBCommonInterface;
+        borderPerSlide: CMSIBCommonInterface;
+        showBorder: CMSIBCommonInterface;
+        showShadow: CMSIBCommonInterface;
+        shadowColor: CMSIBCommonInterface;
+        blur: CMSIBCommonInterface;
+        spread: CMSIBCommonInterface;
+        angle: CMSIBCommonInterface;
+        borderRadius: CMSIBCommonInterface;
+        [key: string]: any;
+    };
+    galleryWidgetLayout: {
+        selectorKey: string;
+        galleryTextAndItemAlignment: CMSIBCommonInterface;
+        galleryTextAndItemSpacing: CMSIBCommonInterface;
+        galleryTitleAndDescriptionSpacing: CMSIBCommonInterface;
+        [key: string]: any;
+    };
+    galleryWidgetTextContainerDesign: {
+        [key: string]: any;
+    };
+    galleryWidgetTextContainerLayout: {
+        [key: string]: any;
+    };
+    itemStyle: {
+        selectorKey: string;
+        backgroundColor: CMSIBCommonInterface;
+        borderColor: CMSIBCommonInterface;
+        borderStyle: CMSIBCommonInterface;
+        borderPerSlide: CMSIBCommonInterface;
+        showBorder: CMSIBCommonInterface;
+        showShadow: CMSIBCommonInterface;
+        shadowColor: CMSIBCommonInterface;
+        blur: CMSIBCommonInterface;
+        spread: CMSIBCommonInterface;
+        angle: CMSIBCommonInterface;
+        borderRadius: CMSIBCommonInterface;
+        [key: string]: any;
+    };
+    itemLayout: {
+        selectorKey: string;
+        galleryTextAndItemAlignment: CMSIBCommonInterface;
+        textAndImageSpacing: CMSIBCommonInterface;
+        galleryTitleAndDescriptionSpacing: CMSIBCommonInterface;
+        [key: string]: any;
+    };
+    itemTextContainerDesign: {
+        [key: string]: any;
+    };
+    itemTextContainerLayout: {
+        [key: string]: any;
+    };
+    paginationArrows: {
+        selectorKey: string;
+        arrowIconStyle: CMSIBCommonInterface;
+        leftArrowIconStyle: CMSIBCommonInterface;
+        rightArrowIconStyle: CMSIBCommonInterface;
+        backgroundShape: CMSIBCommonInterface;
+        arrowSize: CMSIBCommonInterface;
+        arrowColor: CMSIBCommonInterface;
+    };
+    paginationDots: {
+        selectorKey: string;
+        dotSize: CMSIBCommonInterface;
+        currentDotColor: CMSIBCommonInterface;
+        otherDotColor: CMSIBCommonInterface;
+    };
+    paginationLine: {
+        selectorKey: string;
+        currentLineColor: CMSIBCommonInterface;
+        otherLineColor: CMSIBCommonInterface;
+        lineHeight: CMSIBCommonInterface;
+        lineWidth: CMSIBCommonInterface;
+    };
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    GALLERY_WIDGET_STYLE = "gallery-widget-style",
+    GALLERY_LAYOUT = "gallery-layout",
+    ITEM_STYLE = "item-style",
+    PAGINATION_ARROWS = "pagination-arrows",
+    PAGINATION_DOTS = "pagination-dots",
+    PAGINATION_LINE = "pagination-lines",
+    MAP_WIDGET_TEXT_CONTAINER_DESIGN = "galleryWidgetTextContainerDesign",
+    MAP_WIDGET_TEXT_CONTAINER_LAYOUT = "galleryWidgetTextContainerLayout"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/uom-selector.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="uomSelector"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    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%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/variable.scss

@@ -0,0 +1,128 @@
+@use "sass:list";
+@use "sass:map";
+
+body {
+  --_container-width: 1366px;
+  --_builder-breakpoint: 1024px;
+  --_sidebar-small-width: 428px;
+  --_sidebar-big-width: 600px;
+  --_dotted-input-width: 55px;
+  --_settings-tab-width: 370px;
+  --_settings-tab-top: 170px;
+  --_settings-tab-default-value: 10px;
+  --_themesettings-button-minwidth: 165px;
+
+  --_element-settngs-popup-mxheight: 500px;
+  --_element-settngs-popup-gap: 12px;
+
+  --_d-flex: flex;
+  --_flex-wrap: wrap;
+  --_d-inline-flex: inline-flex;
+  --_d-grid: grid;
+  --_d-block: block;
+  --_d-none: none;
+
+  --_p-absolute: absolute;
+  --_p-fixed: fixed;
+  --_p-sticky: sticky;
+  --_p-static: static;
+  --_p-relative: relative;
+
+  --_f-row: row;
+  --_f-column: column;
+  --_justify_start: flex-start;
+  --_justify-center: center;
+  --_justify-between: space-between;
+  --_justify-end: flex-end;
+
+  --_align-center: center;
+  --_align-start: start;
+  --_align-left: left;
+  --_align-items-flex-start: flex-start;
+
+  --_shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --_shadow-x1: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+  --_shadow-x3: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
+  --_shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
+
+  --_shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  --_higher-zIndex: 99999;
+
+  --_cms-map-at-zIndex: 9;
+  --_cms-zoom-at-zIndex: 10;
+  --_cs-canvas-img-zIndex: 9;
+  --_cs-pl-zIndex: 8;
+  --_cms-properties-zIndex: 7;
+  --_cms-sidebar-zIndex: 6;
+  --_cs-cms-root-zIndex: 5;
+  --_add-element-zIndex: 3;
+  --_cs-et-zIndex: 2;
+  --_it-gl-zIndex: 1;
+  --_cms-et-pe-zIndex: 1;
+
+  --_inline-toolbar-zIndex: 9999;
+  --_white: #fff;
+  --_body-bg: #f7f8fa;
+  --_gray-25: #fcfcfd;
+  --_gray-50: #f9fafb;
+  --_gray-100: #f2f4f7;
+  --_gray-200: #eaecf0;
+  --_gray-300: #d0d5dd;
+  --_gray-400: #98a2b3;
+  --_gray-500: #667085;
+  --_gray-600: #475467;
+  --_gray-700: #344054;
+  --_gray-900: #101828;
+  --_base-white: #fff;
+  --_base-black: #000;
+  --_border-light-color: #eaecf0;
+  --_gray-bg: #d9d9d9;
+  --_gray-bg-r: 217;
+  --_gray-bg-g: 217;
+  --_gray-bg-b: 217;
+  --_bg-overlay: rgba(52, 64, 84, 0.4);
+  --_gray-blue-300: #b3b8db;
+  --_red-500: #f04438;
+
+  --_accent-color-2-500: #583fff;
+  --_success-800: #05603a;
+
+  --_primary-25: #f5f6fd;
+  --_primary-50: #e2e5fa;
+  --_primary-100: #ced4f6;
+  --_primary-200: #a8b2ef;
+  --_primary-300: #8190e8;
+  --_primary-400: #243dc6;
+  --_primary-500: #162578;
+  --_primary-600: #132067;
+  --_primary-700: #111c5b;
+
+  --_success-50: #ecfdf3;
+  --_success-200: #a6f4c5;
+  --_success-600: #039855;
+  --_success-700: #027a48;
+
+  --_red-300: #fda29b;
+  --_red-100: #fee4e2;
+  --_warning-50: #fffaeb;
+  --_warning-200: #fedf89;
+  --_warning-300: #fec84b;
+  --_warning-500: #f79009;
+  --_warning-600: #dc6803;
+  --_warning-700: #fec84b;
+
+  --_error-700: #b42318;
+  --_error-500: #f04438;
+  --_error-200: #fecdca;
+  --_error-50: #fef3f2;
+
+  --_transition-duration: 0.45s;
+  --_transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  --_user-select-none: none;
+  --scroll-page: 0;
+}
+
+.pac-container {
+  z-index: calc(var(--_higher-zIndex) + var(--_cms-map-at-zIndex));
+}

package/dist/variant-picker.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="variantPicker"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    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%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/video.scss

@@ -1,6 +1,7 @@
 [data-div-type="element"] {
   &[data-element-type="video"] {
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // 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))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     --_aspect-ratio: calc(
@@ -167,8 +168,9 @@
       }
       .video__thumbnail {
         position: relative;
+        width: 100%;
         .placeholder__img {
-          max-width: 100%;
+          width: 100%;
           // position: absolute;
           // left: 0;
           // top: 0;

package/dist/volume-pricing.scss

@@ -24,5 +24,23 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
+    table {
+      font-family: arial, sans-serif;
+      border-collapse: collapse;
+      width: 100%;
+      height: 100%;
+    }
+
+    td,
+    th {
+      border: 1px solid #dddddd;
+      text-align: center;
+      padding: 8px;
+    }
+
+    tr:nth-child(even) {
+      // background-color: #dddddd;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {