@sc-360-v2/storefront-cms-library 0.5.32 → 0.5.33

package/dist/add-existing-form.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';

package/dist/button.scss

@@ -101,6 +101,14 @@
         --_ctm-mob-dn-hr-se-tt-tm,
         var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
       );
+      --_sf-hr-wd-wp: var(
+        --_ctm-mob-dn-hr-se-wd-wp,
+        var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
+      );
+      --_sf-hr-wd-bk: var(
+        --_ctm-mob-dn-hr-se-wd-bk,
+        var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
+      );
 
       --_sf-hr-in-se: var(
         --_ctm-mob-dn-hr-se-in-se,
@@ -187,6 +195,8 @@
         line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dt-se-le-ht));
 
         text-transform: var(--_sf-hr-txt-tr, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm, normal));
+        word-break: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-dt-se-wd-bk));
+        word-wrap: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
 
         text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-se-ue));
         // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));

package/dist/icon-list.scss

@@ -164,6 +164,8 @@ $pos2: (
           --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
           --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-le-ht)};
           --_txt-ht-tt-tm: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-tm)};
+          --_txt-ht-wd-wp: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-wd-wp)};
+          --_txt-ht-wd-bk: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-wd-bk)};
         }
 
         & > span {
@@ -253,6 +255,8 @@ $pos2: (
                   --_txt-ht-tt-tm,
                   prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-tm)
                 );
+                word-wrap: var(--_txt-ht-wd-wp, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
+                word-break: var(--_txt-ht-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-bk));
               }
             }
 
@@ -268,6 +272,9 @@ $pos2: (
                 text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
                 letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
                 line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
+                text-transform: #{prepareMediaVariable(--_ctm-dn-dn-tt-tm)};
+                word-wrap: #{prepareMediaVariable(--_ctm-dn-dn-wd-wp)};
+                word-break: #{prepareMediaVariable(--_ctm-dn-dn-wd-bk)};
               }
             }
             a {

package/dist/user-elements.scss

@@ -1052,7 +1052,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
             text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue);
           }
-
           .quota_single_profile_name {
             display: flex;
             align-items: center;

package/dist/variant-picker.scss

@@ -76,6 +76,71 @@ $minWidth: 70px;
       gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       white-space: nowrap;
+      background-color: var(
+        --_ctm-mob-dn-wt-se-bd-cr,
+        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-wt-se-br-cr,
+        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-wt-se-br-se,
+        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-wt-se-br-wh,
+        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-wt-se-br-rs,
+        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
+          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
+          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
+          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
+      );
+      &[data-show-divider="true"] {
+        .standard_wrapper {
+          &:not(:last-child)::after {
+            //    border-bottom-width: var(
+            //   --_ctm-mob-dn-wt-se-dr-wh,
+            //   var(--_ctm-tab-dn-wt-se-dr-wh, var(--_ctm-dn-wt-se-dr-wh, 1px))
+            // );
+
+            // border-bottom-color: var(
+            //   --_ctm-mob-dn-wt-se-dr-cr,
+            //   var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr, #e4e7ec))
+            // );
+            content: "";
+            position: relative;
+            background-color: var(
+              --_ctm-mob-dn-wt-se-dr-cr,
+              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr, #e4e7ec))
+            );
+            height: var(
+              --_ctm-mob-dn-wt-se-dr-wh,
+              var(--_ctm-tab-dn-wt-se-dr-wh, var(--_ctm-dn-wt-se-dr-wh, 1px))
+            );
+            width: 100%;
+            display: flex;
+            top: calc(
+              calc(
+                  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
+                ) /
+                2
+            );
+          }
+        }
+      }
       .variant__option {
         width: 100%;
         .variant__list {
@@ -2430,22 +2495,22 @@ $minWidth: 70px;
             }
           }
         }
-        &[data-show-divider="true"] {
-          &:not(:last-child)::after {
-            content: "";
-            position: relative;
-            background-color: #000;
-            height: 1px;
-            width: 100%;
-            display: flex;
-            top: calc(
-              calc(
-                  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
-                ) /
-                2
-            );
-          }
-        }
+        // &[data-show-divider="true"] {
+        //   &:not(:last-child)::after {
+        //     content: "";
+        //     position: relative;
+        //     background-color: #000;
+        //     height: 1px;
+        //     width: 100%;
+        //     display: flex;
+        //     top: calc(
+        //       calc(
+        //           var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
+        //         ) /
+        //         2
+        //     );
+        //   }
+        // }
 
         .title {
           color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));

package/package.json

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