@sc-360-v2/storefront-cms-library 0.1.91 → 0.1.92

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

@@ -22,18 +22,131 @@ interface selfLayoutInterface {
     rowsPerPage: CMSIBCommonInterface;
     overflowControl: CMSIBCommonInterface;
     paginationType: CMSIBCommonInterface;
-    paginationAliginment: CMSIBCommonInterface;
+    paginationAlignment: CMSIBCommonInterface;
     displayResults: CMSIBCommonInterface;
     imageBehavior: CMSIBCommonInterface;
     itemsPerRow: CMSIBCommonInterface;
 }
 interface selfDesignInterface {
     selectorKey: string;
+    widgetStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    itemStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    viewOffersButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    promotionName: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    promotionDescription: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    couponCode: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    promotionSchedule: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    minimumPurchaseAmount: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    eligibleProductsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    priceAfterPromotion: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    maxRedemptionAmount: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    arrows: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationDots: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    showMoreItemsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationLine: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    table: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableHeader: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    headerText: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableRow: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    scroll: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    rowDividers: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    pagination: {
+        selectorKey: string;
+        [key: string]: any;
+    };
 }
 export declare enum ProductPromotionsSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
-    DESIGN = "design"
+    DESIGN = "design",
+    DESIGN_WIDGET_STYLE = "widgetStyle",
+    DESIGN_ITEM_STYLE = "itemStyle",
+    DESIGN_VIEW_OFFERS_BUTTON = "viewOffersButton",
+    DESIGN_PROMOTION_NAME = "promotionName",
+    DESIGN_PROMOTION_DESCRIPTION = "promotionDescription",
+    DESIGN_COUPON_CODE = "couponCode",
+    DESIGN_PROMOTION_SCHEDULE = "promotionSchedule",
+    DESIGN_MINIMUM_PURCHASE_AMOUNT = "minimumPurchaseAmount",
+    DESIGN_ELIGIBLE_PRODUCTS_BUTTON = "eligibleProductsButton",
+    DESIGN_PRICE_AFTER_PROMOTION = "priceAfterPromotion",
+    DESIGN_MAX_READEMPTION_AMOUNT = "maxRedemptionAmount",
+    DESIGN_ARROWS = "arrows",
+    DESIGN_PAGINATION_DOTS = "paginationDots",
+    DESIGN_SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButton",
+    DESIGN_PAGINATION_LINE = "paginationLine",
+    DESIGN_TABLE = "table",
+    DESIGN_TABLE_HEADER = "tableHeader",
+    DESIGN_HEADER_TEXT = "headerText",
+    DESIGN_TABLE_ROW = "tableRow",
+    DESIGN_SCROLL = "scroll",
+    DESIGN_ROW_DIVIDERS = "rowDividers",
+    DESIGN_PAGINATION = "pagination",
+    HOVER_STATE = "hover",
+    DEFAULT_STATE = "default",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -11,7 +11,8 @@ interface selfDesignInterface {
 export declare enum QuantitySelectorSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -0,0 +1,38 @@
+import { AlignItemsValue, JustifyContentValue, RepeaterDisplayStyleType } from "../../../../components/global/types";
+import { CMSCSSUnitTypesEnums } from "../../enums";
+import { CMSIBCommonInterface, PaddingProps } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: RepeaterDisplayStyleType;
+    };
+    itemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & PaddingProps;
+    justifyContent: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: JustifyContentValue;
+    };
+    alignItems: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: AlignItemsValue;
+    };
+    setItemsPerRow: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        isShow: boolean;
+        value: string | number | any;
+    };
+    minColumnWidth: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    minRowHeight: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum selfSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,9 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum selfSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;

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

@@ -8,7 +8,8 @@ interface selfDesignInterface {
 export declare enum ShippingEstimatorSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -19,7 +19,8 @@ export interface selfDesignInterface {
 }
 export declare enum selfSelectorKeysEnum {
     LAYOUT = "layout",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: (contentWidth: any) => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -14,11 +14,73 @@ interface selfLayoutInterface {
 }
 interface selfDesignInterface {
     selectorKey: string;
+    inputStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    storeLocationsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    inventoryTextStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    itemStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    locationName: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    locationAddress: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    locationTimings: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    locationInventory: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    arrows: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationDots: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationLine: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    showMoreItemsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
 }
 export declare enum StoreLocationSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
-    DESIGN = "design"
+    DESIGN = "design",
+    INPUT_STYLE = "inputStyle",
+    STORE_LOCATIONS_BUTTON = "storeLocationButton",
+    INVENTORY_TEXT_STYLE = "inventoryTextStyle",
+    ITEM_STYLE = "itemStyle",
+    LOCATION_NAME = "locationName",
+    LOCATION_ADDRESS = "locationAddress",
+    LOCATION_INVENTORY = "locationInventory",
+    LOCATION_TIMINGS = "locationTimings",
+    ARROWS = "arrows",
+    PAGINATION_DOTS = "paginationDots",
+    PAGINATION_LINE = "paginationLine",
+    SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButtons",
+    HOVER_STATE = "hover",
+    DEFAULT_STATE = "default"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -8,7 +8,8 @@ export interface selfDesignInterface {
 }
 export declare enum textSelectorKeysEnum {
     LAYOUT = "layout",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -3,7 +3,7 @@ import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSEl
 interface selfLayoutInterface {
     selectorKey: string;
     displayFormat: CMSIBCommonInterface;
-    showUOMPrice: CMSIBCommonInterface;
+    showUomPrice: CMSIBCommonInterface;
     itemSpacing: CMSIBCommonInterface;
     maxItemsToDisplay: CMSIBCommonInterface;
     overflowControl: CMSIBCommonInterface;
@@ -20,20 +20,139 @@ interface selfLayoutInterface {
     contentAlignment: CMSIBCommonInterface;
     rowsPerPage: CMSIBCommonInterface;
     paginationType: CMSIBCommonInterface;
-    paginationAliginment: CMSIBCommonInterface;
+    paginationAlignment: CMSIBCommonInterface;
     imageBehavior: CMSIBCommonInterface;
     itemsPerRow: CMSIBCommonInterface;
     itemPadding: CMSIBCommonInterface;
-    ItemContentAlignment: CMSIBCommonInterface;
+    itemContentAlignment: CMSIBCommonInterface;
     overflowItems: CMSIBCommonInterface;
 }
 interface selfDesignInterface {
     selectorKey: string;
+    itemStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    uomTitleStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    uomConversionStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    productPrice: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    uomStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    currencyCodeStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    actualPrice: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    discount: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    discountValue: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    savings: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    savingsValue: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    pricePerUnit: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    arrows: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationDots: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationLine: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    table: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableHeader: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    headerText: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableRow: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    scroll: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    rowDividers: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    pagination: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    showMoreItemsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
 }
 export declare enum UOMSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector",
+    ITEM_STYLE = "itemStyle",
+    UOM_TITLE_STYLE = "uomTitleStyle",
+    UOM_CONVERSION_STYLE = "uomConversionStyle",
+    PRODUCT_PRICE = "productPrice",
+    UOM_STYLE = "uomStyle",
+    CURRENCY_CODE_STYLE = "currencyCodeStyle",
+    ACTUAL_PRICE = "actualPrice",
+    DISCOUNT = "discount",
+    DISCOUNT_VALUE = "discountValue",
+    SAVINGS = "savings",
+    SAVINGS_VALUE = "savingsValue",
+    PRICE_PER_UNIT = "pricePerUnit",
+    ARROWS = "arrows",
+    PAGINATION_DOTS = "paginationDots",
+    PAGINATION_LINE = "paginationLine",
+    TABLE = "table",
+    TABLE_HEADER = "tableHeader",
+    HEADER_TEXT = "headerText",
+    TABLE_ROW = "tableRow",
+    SCROLL = "scroll",
+    ROW_DIVIDERS = "rowDividers",
+    PAGINATION = "pagination",
+    SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButton",
+    HOVER_STATE = "hover",
+    DEFAULT_STATE = "default",
+    SELECTED_STATE = "selectedState"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -12,6 +12,7 @@ interface selfLayoutInterface {
     remainingDisplayStyle: CMSIBCommonInterface;
     allowUserToSearch: CMSIBCommonInterface;
     allowUserToFilter: CMSIBCommonInterface;
+    itemSpacing: CMSIBCommonInterface;
     swatchTypeDisplayStyle: {
         selectorKey: string;
         displayValues: CMSIBCommonInterface;
@@ -91,7 +92,7 @@ interface selfLayoutInterface {
         overflowControl: CMSIBCommonInterface;
         showMoreRows: CMSIBCommonInterface;
         paginationType: CMSIBCommonInterface;
-        paginationAliginment: CMSIBCommonInterface;
+        paginationAlignment: CMSIBCommonInterface;
     };
     groupedTableDisplayStyle: {
         selectorKey: string;
@@ -103,17 +104,163 @@ interface selfLayoutInterface {
 }
 interface selfDesignInterface {
     selectorKey: string;
+    optionStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    swatchOptionValueStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    singleOptionValueStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tabItemStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    accordionItemStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    groupedUpfrontStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    dropdownStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    arrows: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationDots: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationLine: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    table: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableHeader: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    headerText: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableRow: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    scroll: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    rowDividers: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    pagination: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    showMoreItemsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    optionTitle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    noOfOptionValues: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    optionPrice: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    selectedVarientName: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    optionValueName: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    optionValueCode: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    noOfVariantsAvailable: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    optionValuePrice: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    availableInventory: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    addedItemsTotal: {
+        selectorKey: string;
+        [key: string]: any;
+    };
 }
 export declare enum VariantPickerSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
     DESIGN = "design",
+    HOVER_STATE = "hover",
+    DEFAULT_STATE = "default",
+    SELECTED_STATE = "selected",
+    COLLAPSED_STATE = "collapsed",
+    EXPANDED_STATE = "expanded",
     SWATFH_TYPE_DISPLAY_STYLE = "swatchTypeDisplayStyle",
     SINGLE_SELECT_DISPLAY_STYLE = "singleSelectDisplayStyle",
     DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle",
     GROUPED_OPTION_DISPLAY_STYLE = "groupedOptionsDisplayStyle",
     TABLE_DISPLAY_STYLE = "tableDisplayStyle",
-    GROUPED_TABLE_DISPLAY_STYLE = "groupedTableDisplayStyle"
+    GROUPED_TABLE_DISPLAY_STYLE = "groupedTableDisplayStyle",
+    DATA_CONNECTOR = "dataConnector",
+    OPTION_STYLE = "optionStyle",
+    SWATCH_OPTION_VALUE_STYLE = "swatchOptionValueStyle",
+    SINGLE_OPTION_VALUE_STYLE = "singleOptionValueStyle",
+    TAB_ITEM_STYLE = "tabItemStyle",
+    ACCORDION_ITEM_STYLE = "accordionItemStyle",
+    GROUPED_UPFRONT_STYLE = "groupedUpfrontStyle",
+    DROPDOWN_STYLE = "dropdownStyle",
+    ARROWS = "arrows",
+    PAGINATION_DOTS = "paginationDots",
+    PAGINATION_LINE = "paginationLine",
+    TABLE = "table",
+    TABLE_HEADER = "tableHeader",
+    HEADER_TEXT = "headerText",
+    TABLE_ROW = "tableRow",
+    SCROLL = "scroll",
+    ROW_DIVIDERS = "rowDividers",
+    PAGINATION = "pagination",
+    SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButton",
+    OPTION_TITLE = "optionTitle",
+    NO_OF_OPTION_VALUES = "noOfOptionValues",
+    OPTION_PRICE = "optionPrice",
+    SELECTED_VARIENT_NAME = "selectedVarientName",
+    OPTION_VALUE_NAME = "optionValueName",
+    OPTION_VALUE_CODE = "optionValueCode",
+    NO_OF_VARIENTS_AVAILABLE = "noOfVariantsAvailable",
+    OPTION_VALUE_PRICE = "optionValuePrice",
+    AVAILABLE_INVENTORY = "availableInventory",
+    ADDED_ITEMS_TOTAL = "addedItemsTotal"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -48,7 +48,8 @@ export interface selfDesignInterface {
 export declare enum textSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -35,3 +35,4 @@ export type GlobalTableAttributes = "cellPadding" | "cellSpacing" | "border" | "
 export type StackDirectionType = "horizontal" | "vertical";
 export type ObjectFitValue = "fill" | "contain" | "cover" | "none" | "scale-down" | string;
 export type ObjectPositionValue = string;
+export type RepeaterDisplayStyleType = "grid" | "list" | "slider" | "cards";

package/dist/variant-picker.scss

@@ -24,5 +24,29 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+    .options-container {
+      .option-group {
+        margin: 10px 0;
+        .option-values {
+          width: 100%;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          .option-figure {
+            width: 30px;
+            .option-image {
+              width: 100%;
+              border-radius: 1rem;
+            }
+          }
+          .option-button {
+            padding: 0.6rem 1rem;
+            border: 1px solid lightblue;
+            border-radius: 10px;
+          }
+        }
+      }
+    }
   }
 }

package/dist/volume-pricing.scss

@@ -39,8 +39,9 @@
       padding: 8px;
     }
 
-    tr:nth-child(even) {
-      // background-color: #dddddd;
+    .line-through {
+      text-decoration: line-through;
+      color: red;
     }
   }
 }