@sc-360-v2/storefront-cms-library 0.2.61 → 0.2.63

package/dist/form-preview.scss

@@ -0,0 +1,112 @@
+@use "sass:map";
+@use "sass:list";
+
+/**************************************************************
+ * Preview Form Styles
+ **************************************************************/
+
+$list: ("checkbox", "radio");
+
+.preview-form-main {
+  --color-primary: #4f46e5;
+  --color-primary-hover: #4338ca;
+  --color-danger: #dc3545;
+  --color-danger-hover: #b02a37;
+  --color-success: #10b981;
+  --color-success-hover: #0c8a67;
+  --color-text: #111827;
+  --color-muted: #6b7280;
+  --color-border: #e5e7eb;
+  --font-family-base: "Inter", system-ui, -apple-system, sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: #ffffff;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+
+  input {
+    --_sp-vl: var(--_width-15);
+    @each $value in $list {
+      &:is([type="#{$value}"]) {
+        width: var(--_sp-vl);
+        height: var(--_sp-vl);
+      }
+    }
+  }
+
+  .preview-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+  }
+
+  .preview-label {
+    font-weight: 500;
+  }
+
+  .input {
+    background: #fff;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease;
+    color: var(--color-text);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+  }
+
+  .option {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+  }
+  /* Select & Checkbox */
+  .select,
+  .radio,
+  .checkbox {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  /* Error Messages */
+  .error {
+    color: var(--color-danger);
+    font-size: 0.85rem;
+    margin-top: 0.2rem;
+  }
+
+  /* Buttons */
+  .test-button {
+    background-color: var(--_primary-500);
+    color: #fff;
+    border: 1px solid vvar(--_primary-500);
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+  }
+
+  /* Animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-2%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/dist/globals.scss

@@ -1,94 +1,94 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
-    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
-    "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
+    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
+    "Courier New", monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

package/dist/login.scss

@@ -3,17 +3,18 @@
 
 [data-div-type="element"] {
   &[data-element-type="login"],
-  &[data-element-type="resetPassword"] {
+  &[data-element-type="resetPassword"],
+  &[data-element-type="forgotPassword"] {
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    //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);
     position: relative;
 
     & > .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
       width: 100%;
       height: 100%;
     }

package/dist/product-highlights.scss

@@ -39,10 +39,13 @@
       }
     }
     .text-element {
-      background: #6d96e4;
-      padding: 10px;
+      color: var(--Gray-900, #101828);
+      font-family: "Hanken Grotesk";
+      font-size: 20px;
+      font-style: normal;
       font-weight: 600;
-      color: rgba(75, 69, 70, 1);
+      line-height: 150%; /* 30px */
+      letter-spacing: -0.4px;
     }
     .highlights__container {
       padding: var(--_ctm-lt-pg);

package/dist/types/builder/elements/category-details/index.d.ts

@@ -65,4 +65,6 @@ export interface CMSCategoryDetailInterface {
     sort?: number;
     dataContentType?: string;
     isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -56,4 +56,6 @@ export interface CMSCodeInterface {
         [key: string]: CodeVariationInterface;
     };
     styles?: CodeStyleProperties;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

package/dist/types/builder/elements/common.d.ts

@@ -27,4 +27,6 @@ export interface CMSElementInterface {
     controls?: any;
     sort?: number;
     deviceVisibility?: CMSDeviceVisibilityOptionInterface;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -40,4 +40,6 @@ export interface ContainerElementInterface {
     childIds: any[];
     previewImage?: string;
     isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -56,4 +56,6 @@ export interface CMSEmbedInterface {
         [key: string]: EmbedVariationInterface;
     };
     styles?: EmbedStyleProperties;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -56,6 +56,8 @@ export interface CMSGridInterface {
     gtrroworder?: number;
     type?: SizeTypeValue;
     uniqueKey?: string;
+    parentKey?: any;
+    childIdsV2?: any[];
     childIds: any[];
 }
 export interface CMSGridsContainer {

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

@@ -38,4 +38,6 @@ export interface LayouterInterface {
     uniqueKey?: any;
     previewImage?: string;
     isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

package/dist/types/builder/elements/layouter-item/index.d.ts

@@ -36,4 +36,6 @@ export interface LayouterItemInterface {
     responsiveBehaviour: ResponsiveBehaviourTypes;
     childIds: any[];
     uniqueKey?: any;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

package/dist/types/builder/elements/light-box-v2/index.d.ts

@@ -42,4 +42,6 @@ export interface LightBoxV2ElementInterface {
     previewImage?: string;
     displayName: string;
     deviceVisibility?: CMSDeviceVisibilityOptionInterface;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -40,4 +40,6 @@ export interface CMSLightboxInterface {
     childIds: any[];
     previewImage?: string;
     isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -65,4 +65,6 @@ export interface CMSProductDetailInterface {
     sort?: number;
     dataContentType?: string;
     isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -40,6 +40,8 @@ export interface RepeaterElementInterface {
     childIds: any[];
     previewImage?: string;
     isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
 }
 export interface RepeaterItemElementAttributes {
     id?: string | number;
@@ -55,6 +57,8 @@ export interface RepeaterItemElementAttributes {
     children: any;
     childIds: any[];
     previewImage?: string;
+    parentKey?: any;
+    childIdsV2?: any[];
 }
 export interface CMSRepeaterChildrenContainer {
     [key: string]: RepeaterItemElementAttributes;

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

@@ -54,6 +54,7 @@ export interface SectionVariationInterface {
     default?: boolean;
     uniqueKey?: any;
     selfKey?: any;
+    childIdsV2?: any[];
 }
 export interface CMSSectionInterface {
     id?: string | number;

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

@@ -34,4 +34,6 @@ export interface StackElementInterface {
     children: any;
     childIds: any[];
     previewImage?: string;
+    parentKey?: any;
+    childIdsV2?: any[];
 }

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

@@ -168,6 +168,20 @@ export declare enum CMSStackDisplayTypeEnum {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"
 }
+export declare enum FontWeightEnum {
+    THIN = 100,
+    EXTRA_LIGHT = 200,
+    LIGHT = 300,
+    REGULAR = 400,
+    MEDIUM = 500,
+    SEMI_BOLD = 600,
+    BOLD_NUMERIC = "bold",
+    EXTRA_BOLD = 800,
+    BLACK = 900,
+    NORMAL = "normal",
+    BOLDER = "bolder",
+    LIGHTER = "lighter"
+}
 export declare const CMSElementsListEnum: {
     BUTTON: string;
     BUTTON_THEME: string;
@@ -255,8 +269,10 @@ export declare const CMSElementsListEnum: {
     CONTACTUS: string;
     LOGIN: string;
     RESET_PASSWORD: string;
+    FORGOT_PASSWORD: string;
     BREADCRUMBS: string;
     ICON_LIBRARY: string;
+    FORM_PREVIEW: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",
@@ -312,3 +328,7 @@ export declare enum CMSCustomEventsListEnums {
     UOMSELECTOR = "uomSelectorV1",
     TEXTELEMENTCODEVIEW = "textElementCodeView"
 }
+export declare enum FlexAppVersionEnums {
+    NESTEDJSON = 1,
+    FLATJSON = 2
+}

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

@@ -3,6 +3,7 @@ export interface ContactUsEditPopupInterface extends CMSElementEditPopupInterfac
 }
 interface selfLayoutInterface {
     selectorKey: string;
+    formData: any;
 }
 export interface selfDesignInterface {
     selectorKey: string;

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

@@ -19,6 +19,7 @@ interface selfLayoutInterface {
     optionItemPadding: CMSIBCommonInterface;
     swatchMaxItemsToDisplay: CMSIBCommonInterface;
     swatchOverflowItems: CMSIBCommonInterface;
+    swatchImageType: CMSIBCommonInterface;
     singleSelectDisplayValues: CMSIBCommonInterface;
     singleSelectItemSpacing: CMSIBCommonInterface;
     singleSelectItemPadding: CMSIBCommonInterface;
@@ -31,6 +32,18 @@ interface selfLayoutInterface {
     swatchDropdownListItemSpacing: CMSIBCommonInterface;
     swatchDropdownListItemPadding: CMSIBCommonInterface;
     swatchDividerBetweenLIstItems: CMSIBCommonInterface;
+    dropdownDisplayStyle: {
+        selectorKey: string;
+        dropdownOptionsSpacing: CMSIBCommonInterface;
+        dropdownOptionsPadding: CMSIBCommonInterface;
+        dropdownStyle: CMSIBCommonInterface;
+        optionAndListSpacing: CMSIBCommonInterface;
+        dropdownListItemSpacing: CMSIBCommonInterface;
+        dropdownListItemPadding: CMSIBCommonInterface;
+        dividerBetweenListItems: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+    };
 }
 export interface selfDesignInterface {
     selectorKey: string;
@@ -63,7 +76,8 @@ export declare enum SelectorKeysEnum {
     DEFAULT_STATE = "default",
     SELECTED_STATE = "selected",
     SWATCH_OPTION_VALUE_STYLE = "swatchOptionValueStyle",
-    SINGLE_OPTION_VALUE_STYLE = "singleOptionValueStyle"
+    SINGLE_OPTION_VALUE_STYLE = "singleOptionValueStyle",
+    DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -46,6 +46,7 @@ interface selfLayoutInterface {
     autoplayDuration: CMSIBSizeInterface;
     stopOnMouseEnter: CMSIBCommonInterface;
     stopOnInteraction: CMSIBCommonInterface;
+    displayAds: CMSIBCommonInterface;
 }
 export interface selfDesignInterface {
     selectorKey: string;
@@ -53,7 +54,8 @@ export interface selfDesignInterface {
 export declare enum selfSelectorKeysEnum {
     LAYOUT = "layout",
     DESIGN = "design",
-    DATA_CONNECTOR = "dataConnector"
+    DATA_CONNECTOR = "dataConnector",
+    CONTENT = "content"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -50,7 +50,8 @@ export declare enum searchSelectorKeysEnum {
     SEARCHBAR = "searchBar",
     PLACEHOLDER_TEXT = "placeholderText",
     SEARCH_ICON = "searchIcon",
-    MINI_CART_TEXT = "miniSearchText"
+    MINI_CART_TEXT = "miniSearchText",
+    DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/uom-selector.scss

@@ -44,10 +44,13 @@
       }
     }
     .text-element {
-      background: #6d96e4;
-      padding: 10px;
+      color: var(--Gray-900, #101828);
+      font-family: "Hanken Grotesk";
+      font-size: 20px;
+      font-style: normal;
       font-weight: 600;
-      color: rgba(75, 69, 70, 1);
+      line-height: 150%; /* 30px */
+      letter-spacing: -0.4px;
     }
     .uom__container {
       padding: var(--_ctm-lt-pg);

package/dist/variant-picker.scss

@@ -29,10 +29,13 @@ $minWidth: 70px;
       --_show-shadow: none;
     }
     .text-element {
-      background: #6d96e4;
-      padding: 10px;
+      color: var(--Gray-900, #101828);
+      // font-family: "Hanken Grotesk";
+      font-size: 20px;
+      font-style: normal;
       font-weight: 600;
-      color: rgba(75, 69, 70, 1);
+      line-height: 150%; /* 30px */
+      letter-spacing: -0.4px;
     }
     .is__combination_avail {
       color: red;

package/dist/volume-pricing.scss

@@ -25,11 +25,13 @@
       --_show-shadow: none;
     }
     .text-element {
-      background: #6d96e4;
-      padding: 10px;
+      color: var(--Gray-900, #101828);
+      font-family: "Hanken Grotesk";
+      font-size: 20px;
+      font-style: normal;
       font-weight: 600;
-      color: rgba(75, 69, 70, 1);
-      // min-width: 250px;
+      line-height: 150%; /* 30px */
+      letter-spacing: -0.4px;
     }
     .volume__container {
       padding: var(--_ctm-lt-pg);

package/dist/widget.scss

@@ -70,3 +70,4 @@
 @use "./login.scss";
 @use "./breadcrumbs.scss";
 @use "./icon-library.scss";
+@use "./form-preview.scss";

package/package.json

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