@salla.sa/twilight-components 1.0.44 → 1.0.46

package/example/dist/tailwind.css

@@ -830,6 +830,16 @@ video {
   display: none;
 }
 
+.s-has-error {
+  --tw-border-opacity: 1;
+  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
+}
+
+.s-has-error:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+}
+
 .s-has-error {
   --tw-border-opacity: 1 !important;
   border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
@@ -1005,7 +1015,7 @@ video {
   color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 
-.s-button-host-tag {
+.s-button-btn-wrap {
   pointer-events: none;
 }
 
@@ -1017,6 +1027,7 @@ video {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  flex-direction: row-reverse;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
@@ -1115,7 +1126,7 @@ video {
 }
 
 .s-button-loader-after {
-  flex-direction: row-reverse;
+  flex-direction: row;
 }
 
 .s-button-loader-start {
@@ -1271,6 +1282,37 @@ video {
   color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 
+.s-localization-select {
+  height: 2.5rem;
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 0.375rem;
+  --tw-border-opacity: 1;
+  border-color: rgba(228, 228, 231, var(--tw-border-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(113, 113, 122, var(--tw-text-opacity));
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 300ms;
+}
+
+.s-localization-select:focus {
+  border-color: var(--color-main);
+  --tw-ring-color: transparent;
+}
+
+@media (min-width: 640px) {
+  .s-localization-select {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
 .s-login-sub-title {
   margin-bottom: 0.625rem;
   font-size: 0.875rem;
@@ -1453,6 +1495,16 @@ video {
   padding-top: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
+  --tw-border-opacity: 1;
+  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
+}
+
+.s-login-error-message:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+}
+
+.s-login-error-message {
   --tw-border-opacity: 1 !important;
   border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
   --tw-text-opacity: 1 !important;
@@ -1498,9 +1550,10 @@ video {
 
 .s-modal-wrapper {
   display: flex;
-  min-height: 100vh;
+  height: 100vh;
   align-items: flex-end;
   justify-content: center;
+  overflow-y: auto;
   text-align: center;
 }
 
@@ -1615,7 +1668,6 @@ video {
 
 .s-modal-header {
   display: flex;
-  align-items: center;
 }
 
 @media (min-width: 640px) {
@@ -1639,6 +1691,15 @@ video {
 .s-modal-header-content {
   display: flex;
   flex-direction: column;
+  -webkit-padding-end: 2.5rem;
+          padding-inline-end: 2.5rem;
+}
+
+@media (min-width: 640px) {
+  .s-modal-header-content {
+    -webkit-padding-end: 0px;
+            padding-inline-end: 0px;
+  }
 }
 
 .s-modal-header-img {
@@ -1657,6 +1718,7 @@ video {
   display: inline-flex;
   height: 4rem;
   width: 4rem;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
@@ -1666,6 +1728,8 @@ video {
   border-color: rgba(238, 238, 238, var(--tw-border-opacity));
   font-size: 1.5rem;
   line-height: 2rem;
+  --tw-text-opacity: 1;
+  color: rgba(161, 161, 170, var(--tw-text-opacity));
   -webkit-margin-end: 0.5rem;
           margin-inline-end: 0.5rem;
 }
@@ -1768,8 +1832,7 @@ video {
   --tw-translate-y: 1rem;
   transform: var(--tw-transform);
   transform: var(--tw-transform);
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   border-radius: 0.5rem;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -1798,10 +1861,6 @@ video {
     margin-bottom: 2rem;
   }
 
-  .s-modal-body {
-    max-height: calc(100vh - 4rem);
-  }
-
   .s-modal-body {
     --tw-translate-y: 0px;
     transform: var(--tw-transform);
@@ -1813,6 +1872,10 @@ video {
     transform: var(--tw-transform);
   }
 
+  .s-modal-body {
+    overflow: visible;
+  }
+
   .s-modal-body {
     border-bottom-right-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
@@ -1821,6 +1884,7 @@ video {
 
 .s-modal-padding {
   padding: 1rem;
+  padding-top: 1.5rem;
 }
 
 @media (min-width: 640px) {
@@ -1834,7 +1898,7 @@ video {
   height: 100vh;
 }
 
-.s-modal-align-middel {
+.s-modal-align-middle {
   vertical-align: middle;
 }
 
@@ -1899,7 +1963,13 @@ video {
     --tw-scale-y: .95;
     transform: var(--tw-transform);
   }
+}
+
+.s-modal-is-center {
+  align-items: center;
+}
 
+@media (min-width: 640px) {
   .s-modal-is-center {
     text-align: center;
   }
@@ -1932,44 +2002,15 @@ video {
   width: 100%;
 }
 
-.s-offer-header {
+.s-offer-body {
   margin-left: -2rem;
   margin-right: -2rem;
-  margin-top: -2rem;
-  margin-bottom: 2rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 2rem;
-  padding-bottom: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .s-offer-header {
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-}
-
-.s-offer-title {
-  display: block;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  --tw-text-opacity: 1;
-  color: rgba(248, 113, 113, var(--tw-text-opacity));
-}
-
-.s-offer-subtitle {
-  margin-bottom: 2rem;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 700;
-  line-height: 1.5rem;
-}
-
-.s-offer-body {
-  margin-top: 2rem;
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 2rem;
 }
 
 .s-offer-badge {
@@ -2005,42 +2046,34 @@ video {
 
 .s-offer-product {
   display: flex;
-  height: 100%;
+  width: 70%;
+  flex-shrink: 0;
+  flex-grow: 1;
   flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  overflow: hidden;
-  border-radius: 0.375rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding: 1.25rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 640px) {
   .s-offer-product {
-    flex-direction: row;
+    width: 40%;
   }
 }
 
-.s-offer-product-image {
+@media (min-width: 1024px) {
+  .s-offer-product {
+    width: 28%;
+  }
+}
+
+.s-offer-product-image-wrap {
   position: relative;
-  height: 4rem;
-  width: 5rem;
+  margin-bottom: 1rem;
+  display: block;
+  height: 8rem;
   overflow: hidden;
   border-radius: 0.375rem;
 }
 
-@media (min-width: 768px) {
-  .s-offer-product-image {
-    height: 5rem;
-  }
-
-  .s-offer-product-image {
-    width: 6rem;
-  }
-}
-
-.s-offer-product-img {
+.s-offer-product-image {
   height: 100%;
   width: 100%;
   -o-object-fit: cover;
@@ -2048,9 +2081,7 @@ video {
 }
 
 .s-offer-product-info {
-  flex: 1 1 0%;
-  -webkit-padding-start: 1.25rem;
-          padding-inline-start: 1.25rem;
+  margin-bottom: 1rem;
 }
 
 .s-offer-product-name {
@@ -2059,12 +2090,16 @@ video {
   flex-direction: column;
   align-items: baseline;
   justify-content: flex-start;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   line-height: 1.5rem;
   color: var(--color-title);
 }
 
+.s-offer-product-name:hover {
+  color: var(--color-main);
+}
+
 .s-offer-product-price {
   margin-bottom: 1.25rem;
   display: flex;
@@ -2073,7 +2108,6 @@ video {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-main);
 }
 
 .s-offer-product-price > :not([hidden]) ~ :not([hidden]) {
@@ -2100,6 +2134,10 @@ video {
   text-decoration: line-through;
 }
 
+.s-offer-btn-wrap {
+  margin-top: auto;
+}
+
 .s-offer-footer {
   margin-top: 2rem;
   display: flex;
@@ -2148,6 +2186,102 @@ video {
   --tw-ring-color: transparent;
 }
 
+.s-offer-scrolled-slider-wrap {
+  position: relative;
+}
+
+.s-offer-slider-nav {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  display: none;
+  height: 100%;
+  width: calc(100% + 64px);
+  overflow: hidden;
+}
+
+@media (min-width: 640px) {
+  .s-offer-slider-nav {
+    display: block;
+  }
+}
+
+.s-offer-nav-btn {
+  position: absolute;
+  top: 0px;
+  display: flex;
+  height: 100%;
+  width: 5rem;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 300ms;
+}
+
+.s-offer-nav-btn-icon {
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  color: var(--color-main);
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.s-offer-nav-btn-icon:hover {
+  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.s-offer-next-btn {
+  --tw-translate-x: -100%;
+  transform: var(--tw-transform);
+}
+
+[dir="rtl"] .s-offer-next-btn {
+  left: 0px;
+}
+
+[dir="ltr"] .s-offer-next-btn {
+  right: 0px;
+}
+
+.s-offer-prev-btn {
+  --tw-translate-x: 100%;
+  transform: var(--tw-transform);
+}
+
+[dir="rtl"] .s-offer-prev-btn {
+  right: 0px;
+}
+
+[dir="ltr"] .s-offer-prev-btn {
+  left: 0px;
+}
+
+.s-offer-btn-is-active {
+  pointer-events: auto;
+  --tw-translate-x: 0px;
+  transform: var(--tw-transform);
+  opacity: 1;
+}
+
 .s-product-availability-subscribed {
   display: flex;
   width: 100%;
@@ -2254,6 +2388,16 @@ video {
   padding-top: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
+  --tw-border-opacity: 1;
+  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
+}
+
+.s-product-availability-error-msg:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+}
+
+.s-product-availability-error-msg {
   --tw-border-opacity: 1 !important;
   border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
   --tw-text-opacity: 1 !important;
@@ -2409,7 +2553,7 @@ video {
 
 .s-rating-comment {
   margin-bottom: 0.5rem;
-  height: 5rem;
+  height: 5rem !important;
   height: 2.5rem;
   width: 100%;
   border-radius: 0.375rem;
@@ -2576,33 +2720,14 @@ video {
 }
 
 .s-rating-btn-star {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  border-width: 0px;
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
   --tw-text-opacity: 1;
   color: rgba(161, 161, 170, var(--tw-text-opacity));
-  display: inline-flex;
-  flex: 1 1 0%;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-bottom: 0.625rem;
-  padding-top: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 700;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-  transition-duration: 300ms;
-}
-
-.s-rating-btn-star:hover {
-  opacity: 0.8;
 }
 
 .s-rating-btn-star-large {
@@ -2615,6 +2740,16 @@ video {
   line-height: 1.75rem;
 }
 
+.s-rating-hovered {
+  --tw-text-opacity: 1;
+  color: rgba(251, 191, 36, var(--tw-text-opacity));
+}
+
+.s-rating-selected {
+  --tw-text-opacity: 1;
+  color: rgba(251, 191, 36, var(--tw-text-opacity));
+}
+
 .s-rating-stars-company {
   margin-bottom: 1.25rem;
 }
@@ -2632,46 +2767,10 @@ video {
   background-color: var(--color-main);
 }
 
-.s-rating-has-error {
-  --tw-border-opacity: 1;
-  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
-}
-
-.s-rating-has-error:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
-}
-
-.s-search-button {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  height: 2.25rem;
-  width: 2.25rem;
-  border-radius: 9999px;
-  background-color: var(--bg-gray);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 700;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-duration: 300ms;
-}
-
-.s-search-button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(239, 240, 240, var(--tw-bg-opacity));
-}
-
-.dark .s-search-button:hover {
-  --tw-bg-opacity: 0.1;
-}
-
 .s-search-container {
   position: relative;
   max-height: 14rem;
+  border-radius: 0.375rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(238, 238, 238, var(--tw-border-opacity));
@@ -2681,13 +2780,10 @@ video {
 
 .s-search-container-open {
   max-height: 28rem;
-  border-bottom-right-radius: 0.125rem;
-  border-bottom-left-radius: 0.125rem;
 }
 
 .s-search-input {
   width: 100%;
-  border-radius: 3px;
   border-width: 0px;
   background-color: transparent;
   padding-top: 1.5rem;
@@ -2800,8 +2896,6 @@ video {
   margin: auto;
   max-height: 24rem;
   overflow-y: auto;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
@@ -2944,18 +3038,29 @@ video {
 }
 
 .s-tel-input-error-msg {
+  margin-bottom: 0.625rem;
   display: block;
-  height: 1.75rem;
+  height: 1rem;
   padding-top: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
+  --tw-border-opacity: 1;
+  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
+}
+
+.s-tel-input-error-msg:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+}
+
+.s-tel-input-error-msg {
   --tw-border-opacity: 1 !important;
   border-color: rgba(239, 68, 68, var(--tw-border-opacity)) !important;
   --tw-text-opacity: 1 !important;
   color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
 }
 
-.s-verify-message {
+.s-verify-modal-message {
   margin-bottom: 1.75rem;
   text-align: center;
   font-size: 0.75rem;
@@ -2964,7 +3069,7 @@ video {
   color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 
-.s-verify-label {
+.s-verify-modal-label {
   margin-bottom: 1rem;
   display: block;
   text-align: center;
@@ -2972,13 +3077,13 @@ video {
   line-height: 1.25rem;
 }
 
-.s-verify-codes {
+.s-verify-modal-codes {
   margin-bottom: 1.25rem;
   display: flex;
   justify-content: space-between;
 }
 
-.s-verify-codes > :not([hidden]) ~ :not([hidden]) {
+.s-verify-modal-codes > :not([hidden]) ~ :not([hidden]) {
   --tw-space-s-reverse: 0;
   -webkit-margin-end: calc(0.5rem * var(--tw-space-s-reverse));
           margin-inline-end: calc(0.5rem * var(--tw-space-s-reverse));
@@ -2986,7 +3091,7 @@ video {
           margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-s-reverse)));
 }
 
-.s-verify-input {
+.s-verify-modal-input {
   height: 2.5rem;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -3007,90 +3112,88 @@ video {
   transition-duration: 300ms;
 }
 
-.s-verify-input:focus {
+.s-verify-modal-input:focus {
   border-color: var(--color-main);
   --tw-ring-color: transparent;
 }
 
-.dark .s-verify-input {
+.dark .s-verify-modal-input {
   --tw-border-opacity: 1;
   border-color: rgba(82, 82, 91, var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
 }
 
-.dark .s-verify-input:focus {
+.dark .s-verify-modal-input:focus {
   border-color: var(--color-main);
 }
 
 @media (min-width: 640px) {
-  .s-verify-input {
+  .s-verify-modal-input {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
 
-.s-verify-footer {
+.s-verify-modal-footer {
   text-align: center;
 }
 
-.s-verify-submit {
+.s-verify-modal-submit {
   margin-bottom: 1.25rem;
   width: 100%;
 }
 
-.s-verify-resend-message {
+.s-verify-modal-resend-message {
   --tw-text-opacity: 1;
   color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 
-.s-verify-timer {
+.s-verify-modal-timer {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   --tw-text-opacity: 1;
   color: rgba(63, 63, 70, var(--tw-text-opacity));
 }
 
-.s-verify-resend {
+.s-verify-modal-resend {
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: var(--color-main);
 }
 
-.s-verify-back {
+.s-verify-modal-back {
   position: absolute;
   top: -12rem;
+  display: flex;
   height: 2.5rem;
   width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
   font-size: 1.125rem;
   line-height: 1.75rem;
   --tw-text-opacity: 1;
   color: rgba(82, 82, 91, var(--tw-text-opacity));
-  transition-property: background-color, border-color, color, fill, stroke;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-  display: flex;
-  height: 4rem;
-  width: 4rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  font-size: 1.875rem;
-  line-height: 2.25rem;
 }
 
-[dir="rtl"] .s-verify-back {
+[dir="rtl"] .s-verify-modal-back {
   right: -0.75rem;
 }
 
-[dir="ltr"] .s-verify-back {
+[dir="ltr"] .s-verify-modal-back {
   left: -0.75rem;
 }
 
-.s-verify-back:hover {
+.s-verify-modal-back:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
 }