@sc-360-v2/storefront-cms-library 0.4.78 → 0.4.79

package/dist/form-preview.scss

@@ -100,6 +100,28 @@
     }
   }
 
+  .date_picker_container {
+    position: relative;
+
+    .svg_icon {
+      position: absolute;
+      left: 8px;
+      top: 9px;
+      z-index: 1;
+      display: flex;
+    }
+
+    .react-datepicker-wrapper {
+      display: block;
+
+      .react-datepicker__input-container {
+        input {
+          padding-left: 32px !important;
+        }
+      }
+    }
+  }
+
   .react-datepicker-wrapper {
     display: block;
   }
@@ -240,9 +262,170 @@
     height: 20px !important;
   }
 
-  .react-international-phone-country-selector-button {
-    height: 38px;
-    padding-inline: 4px;
+  .sc-phone-container {
+    position: relative;
+    width: 100%;
+
+    .sc-phone-input-wrapper {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--_primary-300);
+      border-radius: 6px;
+      height: 38px;
+      background-color: var(--_base-white);
+      overflow: hidden;
+
+      &:focus-within {
+        outline: 2px solid var(--_primary-100);
+      }
+    }
+
+    .sc-phone-country-btn {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 0 8px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      height: 100%;
+      border-right: 1px solid var(--_primary-300);
+      flex-shrink: 0;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+
+    .sc-phone-flag {
+      width: 24px;
+      height: 24px;
+      min-width: 24px;
+      min-height: 24px;
+      object-fit: cover;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .sc-phone-chevron {
+      font-size: 10px;
+      color: var(--_gray-500, #667085);
+      line-height: 1;
+    }
+
+    .sc-phone-dial-code {
+      padding: 0 4px 0 8px;
+      font-size: 14px;
+      color: var(--_gray-700, #344054);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    input[type="tel"].sc-phone-input {
+      flex: 1;
+      border: none !important;
+      outline: none !important;
+      box-shadow: none !important;
+      border-radius: 0 !important;
+      height: 100%;
+      font-size: 14px;
+      padding: 0 12px 0 0 !important;
+      background: transparent !important;
+      min-width: 0;
+
+      &:focus {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+    }
+
+    .sc-phone-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      width: 240px;
+      background: var(--_base-white, #fff);
+      border: 1px solid var(--_primary-300);
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      z-index: 9999;
+      overflow: hidden;
+    }
+
+    .sc-phone-search-wrapper {
+      position: relative;
+      padding: 8px;
+      border-bottom: 1px solid var(--_gray-200, #e4e7ec);
+    }
+
+    input[type="text"].sc-phone-search {
+      width: 100%;
+      padding: 6px 30px 6px 10px !important;
+      border: 1px solid var(--_gray-300, #d0d5dd) !important;
+      border-radius: 6px !important;
+      font-size: 14px;
+      outline: none !important;
+      box-sizing: border-box;
+      height: auto !important;
+
+      &:focus {
+        border-color: var(--_primary-300) !important;
+        outline: none !important;
+      }
+    }
+
+    .sc-phone-search-icon {
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      display: flex;
+    }
+
+    .sc-phone-dropdown-list {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .sc-phone-dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--_gray-700, #344054);
+
+      &:hover {
+        background-color: var(--_gray-50, #f9fafb);
+      }
+
+      &.selected {
+        background-color: var(--_primary-50, #f0f4ff);
+      }
+    }
+
+    .sc-phone-country-name {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .sc-phone-check {
+      color: var(--_primary-400);
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+
+    .sc-phone-no-results {
+      padding: 12px;
+      text-align: center;
+      color: var(--_gray-500, #667085);
+      font-size: 14px;
+    }
   }
 }
 .fb_file_upload {
@@ -271,6 +454,14 @@
   }
 }
 
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}
+
+.react-grid-item:has(.react-datepicker-popper) {
+  z-index: 2 !important;
+}
+
 .react-datepicker__month {
   background-color: var(--_base-white);
   margin: 0px;

package/package.json

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