@salla.sa/twilight-components 1.0.157 → 1.0.158

package/example/assets/tailwind.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.1.7 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1094,11 +1094,6 @@ video {
   transition-duration: 150ms !important;
 }
 
-.me-6 {
-  -webkit-margin-end: 1.5rem !important;
-          margin-inline-end: 1.5rem !important;
-}
-
 .s-hidden {
   display: none;
 }
@@ -1190,14 +1185,20 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   color: var(--color-primary);
-  -webkit-margin-end: 0.75rem;
-          margin-inline-end: 0.75rem;
 }
 
 .s-branches-input:focus {
   --tw-ring-color: var(--color-primary);
 }
 
+[dir="ltr"] .s-branches-input {
+  margin-right: 0.75rem;
+}
+
+[dir="rtl"] .s-branches-input {
+  margin-left: 0.75rem;
+}
+
 .s-branches-label {
   display: flex;
   flex-grow: 1;
@@ -1422,7 +1423,6 @@ video {
 
 .s-button-outline:hover {
   border-color: transparent;
-  color: var(--color-primary-reverse);
 }
 
 .s-button-outline .s-button-loader:before {
@@ -1723,68 +1723,94 @@ video {
   flex-direction: row;
 }
 
-.s-button-loader-start.s-button-element {
-  -webkit-padding-end: 2rem;
-          padding-inline-end: 2rem;
-  -webkit-padding-start: 2.5rem;
-          padding-inline-start: 2.5rem;
+[dir="ltr"] .s-button-loader-start.s-button-element {
+  padding-right: 2rem;
+  padding-left: 2.5rem;
 }
 
-.s-button-loader-start .s-button-loader {
-  position: absolute;
+[dir="rtl"] .s-button-loader-start.s-button-element {
+  padding-left: 2rem;
+  padding-right: 2.5rem;
 }
 
-[dir="rtl"] .s-button-loader-start .s-button-loader {
-  right: 0.5rem;
+[dir="ltr"] .s-button-loader-start.s-button-element {
+  padding-right: 2rem;
+  padding-left: 2.5rem;
 }
 
-[dir="ltr"] .s-button-loader-start .s-button-loader {
-  left: 0.5rem;
+[dir="rtl"] .s-button-loader-start.s-button-element {
+  padding-left: 2rem;
+  padding-right: 2.5rem;
 }
 
 .s-button-loader-start .s-button-loader {
   position: absolute;
 }
 
+[dir="ltr"] .s-button-loader-start .s-button-loader {
+  left: 0.5rem;
+}
+
 [dir="rtl"] .s-button-loader-start .s-button-loader {
   right: 0.5rem;
 }
 
+.s-button-loader-start .s-button-loader {
+  position: absolute;
+}
+
 [dir="ltr"] .s-button-loader-start .s-button-loader {
   left: 0.5rem;
 }
 
-.s-button-loader-end.s-button-element {
-  -webkit-padding-start: 2rem;
-          padding-inline-start: 2rem;
-  -webkit-padding-end: 2.5rem;
-          padding-inline-end: 2.5rem;
+[dir="rtl"] .s-button-loader-start .s-button-loader {
+  right: 0.5rem;
 }
 
-.s-button-loader-end .s-button-loader {
-  position: absolute;
+[dir="ltr"] .s-button-loader-end.s-button-element {
+  padding-left: 2rem;
+  padding-right: 2.5rem;
 }
 
-[dir="rtl"] .s-button-loader-end .s-button-loader {
-  left: 0.5rem;
+[dir="rtl"] .s-button-loader-end.s-button-element {
+  padding-right: 2rem;
+  padding-left: 2.5rem;
 }
 
-[dir="ltr"] .s-button-loader-end .s-button-loader {
-  right: 0.5rem;
+[dir="ltr"] .s-button-loader-end.s-button-element {
+  padding-left: 2rem;
+  padding-right: 2.5rem;
+}
+
+[dir="rtl"] .s-button-loader-end.s-button-element {
+  padding-right: 2rem;
+  padding-left: 2.5rem;
 }
 
 .s-button-loader-end .s-button-loader {
   position: absolute;
 }
 
+[dir="ltr"] .s-button-loader-end .s-button-loader {
+  right: 0.5rem;
+}
+
 [dir="rtl"] .s-button-loader-end .s-button-loader {
   left: 0.5rem;
 }
 
+.s-button-loader-end .s-button-loader {
+  position: absolute;
+}
+
 [dir="ltr"] .s-button-loader-end .s-button-loader {
   right: 0.5rem;
 }
 
+[dir="rtl"] .s-button-loader-end .s-button-loader {
+  left: 0.5rem;
+}
+
 .s-button-loader-center .s-button-loader {
   position: absolute;
   top: 50%;
@@ -1864,8 +1890,14 @@ video {
   font-weight: 500;
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
-  -webkit-margin-start: 0.75rem;
-          margin-inline-start: 0.75rem;
+}
+
+[dir="ltr"] .s-localization-modal-label {
+  margin-left: 0.75rem;
+}
+
+[dir="rtl"] .s-localization-modal-label {
+  margin-right: 0.75rem;
 }
 
 .s-localization-modal-flag {
@@ -1920,6 +1952,15 @@ video {
   flex: 1 1 0%;
   align-items: center;
   justify-content: space-between;
+}
+
+.s-login-modal-main-btn > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.s-login-modal-main-btn {
   border-radius: 0.375rem;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1931,18 +1972,6 @@ video {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
-  -webkit-padding-end: 1rem;
-          padding-inline-end: 1rem;
-  -webkit-padding-start: 1.25rem;
-          padding-inline-start: 1.25rem;
-}
-
-.s-login-modal-main-btn > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-s-reverse: 0;
-  -webkit-margin-end: calc(0.75rem * var(--tw-space-s-reverse));
-          margin-inline-end: calc(0.75rem * var(--tw-space-s-reverse));
-  -webkit-margin-start: calc(0.75rem * calc(1 - var(--tw-space-s-reverse)));
-          margin-inline-start: calc(0.75rem * calc(1 - var(--tw-space-s-reverse)));
 }
 
 .s-login-modal-main-btn:hover {
@@ -1950,6 +1979,20 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+[dir="ltr"] .s-login-modal-main-btn {
+  padding-right: 1rem;
+  padding-left: 1.25rem;
+}
+
+[dir="rtl"] .s-login-modal-main-btn > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
+}
+
+[dir="rtl"] .s-login-modal-main-btn {
+  padding-left: 1rem;
+  padding-right: 1.25rem;
+}
+
 .s-login-modal-main-btn-icon {
   flex-shrink: 0;
   background-color: var(--color-primary);
@@ -2168,17 +2211,17 @@ video {
   transition-duration: 150ms;
 }
 
-[dir="rtl"] .s-modal-close {
-  left: 1rem;
+.s-modal-close:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
 [dir="ltr"] .s-modal-close {
   right: 1rem;
 }
 
-.s-modal-close:hover {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+[dir="rtl"] .s-modal-close {
+  left: 1rem;
 }
 
 @media (min-width: 640px) {
@@ -2186,13 +2229,13 @@ video {
     top: 1.25rem;
   }
 
-  [dir="rtl"] .s-modal-close {
-    left: 1.25rem;
-  }
-
   [dir="ltr"] .s-modal-close {
     right: 1.25rem;
   }
+
+  [dir="rtl"] .s-modal-close {
+    left: 1rem;
+  }
 }
 
 .s-modal-header {
@@ -2206,7 +2249,7 @@ video {
 }
 
 .s-modal-header-inner {
-  margin-bottom: 2.5rem;
+  margin-bottom: 1.25rem;
   display: flex;
   align-items: center;
 }
@@ -2220,14 +2263,23 @@ video {
 .s-modal-header-content {
   display: flex;
   flex-direction: column;
-  -webkit-padding-end: 2.5rem;
-          padding-inline-end: 2.5rem;
+}
+
+[dir="ltr"] .s-modal-header-content {
+  padding-right: 2.5rem;
+}
+
+[dir="rtl"] .s-modal-header-content {
+  padding-left: 2.5rem;
 }
 
 @media (min-width: 640px) {
-  .s-modal-header-content {
-    -webkit-padding-end: 0px;
-            padding-inline-end: 0px;
+  [dir="ltr"] .s-modal-header-content {
+    padding-right: 0px;
+  }
+
+  [dir="rtl"] .s-modal-header-content {
+    padding-left: 0px;
   }
 }
 
@@ -2259,8 +2311,14 @@ video {
   line-height: 2.25rem;
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+}
+
+[dir="ltr"] .s-modal-icon {
+  margin-right: 0.5rem;
+}
+
+[dir="rtl"] .s-modal-icon {
+  margin-left: 0.5rem;
 }
 
 @media (min-width: 640px) {
@@ -2270,8 +2328,14 @@ video {
     margin-bottom: 1rem;
     height: 5rem;
     width: 5rem;
-    -webkit-margin-end: 0px;
-            margin-inline-end: 0px;
+  }
+
+  [dir="ltr"] .s-modal-icon {
+    margin-right: 0px;
+  }
+
+  [dir="rtl"] .s-modal-icon {
+    margin-left: 0px;
   }
 }
 
@@ -2351,7 +2415,6 @@ video {
   border-bottom-left-radius: 0px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  text-align: start;
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -2361,14 +2424,14 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
-[dir="rtl"] .s-modal-body {
-  text-align: right;
-}
-
 [dir="ltr"] .s-modal-body {
   text-align: left;
 }
 
+[dir="rtl"] .s-modal-body {
+  text-align: right;
+}
+
 @media (min-width: 640px) {
   .s-modal-body {
     margin-top: 2rem;
@@ -2525,6 +2588,7 @@ video {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 1.5rem;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   padding-top: 0.625rem;
@@ -2535,14 +2599,26 @@ video {
   line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
-  -webkit-margin-end: 0.625rem;
-          margin-inline-end: 0.625rem;
+}
+
+[dir="ltr"] .s-offer-modal-badge {
+  margin-left: 0.625rem;
+}
+
+[dir="rtl"] .s-offer-modal-badge {
+  margin-left: 0.625rem;
 }
 
 .s-offer-modal-badge-icon {
   font-weight: 500;
-  -webkit-margin-end: 0.375rem;
-          margin-inline-end: 0.375rem;
+}
+
+[dir="ltr"] .s-offer-modal-badge-icon {
+  margin-left: 0.375rem;
+}
+
+[dir="rtl"] .s-offer-modal-badge-icon {
+  margin-left: 0.375rem;
 }
 
 .s-offer-modal-badge-text {
@@ -2628,12 +2704,14 @@ video {
   font-weight: 700;
 }
 
-.s-offer-modal-product-price > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-s-reverse: 0;
-  -webkit-margin-end: calc(0.25rem * var(--tw-space-s-reverse));
-          margin-inline-end: calc(0.25rem * var(--tw-space-s-reverse));
-  -webkit-margin-start: calc(0.25rem * calc(1 - var(--tw-space-s-reverse)));
-          margin-inline-start: calc(0.25rem * calc(1 - var(--tw-space-s-reverse)));
+@media (min-width: 640px) {
+  [dir="ltr"] .s-offer-modal-product-price {
+    margin-left: 0.5rem;
+  }
+
+  [dir="rtl"] .s-offer-modal-product-price {
+    margin-right: 0.5rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -2703,9 +2781,12 @@ video {
 }
 
 @media (min-width: 640px) {
-  .s-offer-modal-remember-label {
-    -webkit-margin-start: 0.5rem;
-            margin-inline-start: 0.5rem;
+  [dir="ltr"] .s-offer-modal-remember-label {
+    margin-left: 0.5rem;
+  }
+
+  [dir="rtl"] .s-offer-modal-remember-label {
+    margin-right: 0.5rem;
   }
 }
 
@@ -2795,14 +2876,14 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-[dir="rtl"] .s-offer-modal-next-btn {
-  left: 0px;
-}
-
 [dir="ltr"] .s-offer-modal-next-btn {
   right: 0px;
 }
 
+[dir="rtl"] .s-offer-modal-next-btn {
+  left: 0px;
+}
+
 [dir='rtl'] .s-offer-modal-next-btn {
   transform: scale(-1) translateX(100%) !important;
 }
@@ -2816,14 +2897,14 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-[dir="rtl"] .s-offer-modal-prev-btn {
-  right: 0px;
-}
-
 [dir="ltr"] .s-offer-modal-prev-btn {
   left: 0px;
 }
 
+[dir="rtl"] .s-offer-modal-prev-btn {
+  right: 0px;
+}
+
 [dir='rtl'] .s-offer-modal-prev-btn {
   transform: scale(-1) translateX(-100%) !important;
 }
@@ -2876,7 +2957,6 @@ video {
 .s-product-availability-label {
   margin-bottom: 0.625rem;
   display: block;
-  text-align: start;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
@@ -2884,14 +2964,14 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-[dir="rtl"] .s-product-availability-label {
-  text-align: right;
-}
-
 [dir="ltr"] .s-product-availability-label {
   text-align: left;
 }
 
+[dir="rtl"] .s-product-availability-label {
+  text-align: right;
+}
+
 .s-product-availability-input {
   height: 2.5rem;
   width: 100%;
@@ -2927,11 +3007,13 @@ video {
 }
 
 .s-product-availability-footer > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-s-reverse: 0;
-  -webkit-margin-end: calc(1rem * var(--tw-space-s-reverse));
-          margin-inline-end: calc(1rem * var(--tw-space-s-reverse));
-  -webkit-margin-start: calc(1rem * calc(1 - var(--tw-space-s-reverse)));
-          margin-inline-start: calc(1rem * calc(1 - var(--tw-space-s-reverse)));
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+[dir="rtl"] .s-product-availability-footer > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
 }
 
 .s-product-availability-footer-btn {
@@ -3046,15 +3128,20 @@ video {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   justify-content: center;
-  text-align: center;
 }
 
 .s-rating-modal-dots > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-s-reverse: 0;
-  -webkit-margin-end: calc(0.375rem * var(--tw-space-s-reverse));
-          margin-inline-end: calc(0.375rem * var(--tw-space-s-reverse));
-  -webkit-margin-start: calc(0.375rem * calc(1 - var(--tw-space-s-reverse)));
-          margin-inline-start: calc(0.375rem * calc(1 - var(--tw-space-s-reverse)));
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.s-rating-modal-dots {
+  text-align: center;
+}
+
+[dir="rtl"] .s-rating-modal-dots > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
 }
 
 .s-rating-modal-step-dot {
@@ -3195,17 +3282,19 @@ video {
 }
 
 .s-rating-modal-product > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-s-reverse: 0;
-  -webkit-margin-end: calc(1.25rem * var(--tw-space-s-reverse));
-          margin-inline-end: calc(1.25rem * var(--tw-space-s-reverse));
-  -webkit-margin-start: calc(1.25rem * calc(1 - var(--tw-space-s-reverse)));
-          margin-inline-start: calc(1.25rem * calc(1 - var(--tw-space-s-reverse)));
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .s-rating-modal-product:last-child {
   margin-bottom: 0px;
 }
 
+[dir="rtl"] .s-rating-modal-product > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
+}
+
 .s-rating-modal-product-img-wrap {
   height: 3.5rem;
   width: 5rem;
@@ -3383,6 +3472,11 @@ unicode {
   line-height: 1.75rem;
 }
 
+.s-rating-stars-mini {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .s-rating-stars-hovered {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity));
@@ -3414,7 +3508,7 @@ unicode {
 }
 
 .s-search-container-open {
-  max-height: 7rem;
+  max-height: 24rem;
   border-radius: 0px !important;
 }
 
@@ -3451,8 +3545,6 @@ unicode {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
-  -webkit-padding-start: 2.5rem;
-          padding-inline-start: 2.5rem;
 }
 
 .s-search-input:focus {
@@ -3461,6 +3553,14 @@ unicode {
   --tw-ring-color: transparent;
 }
 
+[dir="ltr"] .s-search-input {
+  padding-left: 2.5rem;
+}
+
+[dir="rtl"] .s-search-input {
+  padding-right: 2.5rem;
+}
+
 @media (min-width: 640px) {
   .s-search-input {
     font-size: 0.875rem;
@@ -3478,14 +3578,14 @@ unicode {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-[dir="rtl"] .s-search-icon-wrap {
-  right: 1rem;
-}
-
 [dir="ltr"] .s-search-icon-wrap {
   left: 1rem;
 }
 
+[dir="rtl"] .s-search-icon-wrap {
+  right: 1rem;
+}
+
 .s-search-spinner-loader {
   display: block;
   height: 1rem;
@@ -3612,14 +3712,23 @@ unicode {
 .s-search-product-details {
   flex: 1 1 0%;
   padding-top: 0.25rem;
-  -webkit-padding-start: 1rem;
-          padding-inline-start: 1rem;
+}
+
+[dir="ltr"] .s-search-product-details {
+  padding-left: 1rem;
+}
+
+[dir="rtl"] .s-search-product-details {
+  padding-right: 1rem;
 }
 
 @media (min-width: 480px) {
-  .s-search-product-details {
-    -webkit-padding-start: 1.25rem;
-            padding-inline-start: 1.25rem;
+  [dir="ltr"] .s-search-product-details {
+    padding-left: 1.25rem;
+  }
+
+  [dir="rtl"] .s-search-product-details {
+    padding-right: 1.25rem;
   }
 }
 
@@ -3826,7 +3935,7 @@ unicode {
 
 .s-verify-back {
   position: absolute;
-  top: -12rem;
+  top: -11rem;
   display: flex;
   height: 2.5rem;
   width: 2.5rem;
@@ -3851,6 +3960,14 @@ unicode {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+[dir="ltr"] .s-verify-back {
+  left: 0.625rem;
+}
+
+[dir="rtl"] .s-verify-back {
+  right: -0.625rem;
+}
+
 [dir='ltr'] .s-verify-back {
   transform: scale(-1) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.157",
+  "version": "1.0.158",
   "license": "MIT",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {