lau-ecom-design-system 1.0.0 → 1.0.2

package/dist/style.css

@@ -171,7 +171,7 @@
 /* Headings CIBERTEC */
 
 .cbt-font-heading-01-44px {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 44px;
   line-height: 48px;
@@ -179,7 +179,7 @@
 }
 
 .cbt-font-heading-02-40px {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 40px;
   line-height: 44px;
@@ -187,7 +187,7 @@
 }
 
 .cbt-font-heading-03-36px {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 36px;
   line-height: 40px;
@@ -195,7 +195,7 @@
 }
 
 .cbt-font-heading-04-32px {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 32px;
   line-height: 36px;
@@ -203,7 +203,7 @@
 }
 
 .cbt-font-heading-05-28px {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 28px;
   line-height: 32px;
@@ -211,13 +211,21 @@
 }
 
 .cbt-font-heading-06-24px {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 24px;
   line-height: 28px;
   letter-spacing: 0px;
 }
 
+.cbt-font-heading-07-28px {
+  font-family: "cbt-font-family-rambla";
+  font-size: 20px;
+  font-weight: 450;
+  line-height: 28px;
+  text-transform: uppercase;
+}
+
 /* Headings UPN */
 
 .upn-font-heading-01-44px {
@@ -313,7 +321,7 @@
 /* Subtitles CIBERTEC */
 
 .cbt-font-subtitle-01-28px {
-  font-family: "cbt-font-family-brandongrotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 28px;
   line-height: 32px;
@@ -321,7 +329,7 @@
 }
 
 .cbt-font-subtitle-02-24px {
-  font-family: "cbt-font-family-brandongrotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 24px;
   line-height: 28px;
@@ -329,7 +337,7 @@
 }
 
 .cbt-font-subtitle-03-20px {
-  font-family: "cbt-font-family-brandongrotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 20px;
   line-height: 24px;
@@ -337,13 +345,21 @@
 }
 
 .cbt-font-subtitle-04-14px {
-  font-family: "cbt-font-family-brandongrotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
   letter-spacing: 0px;
 }
 
+.cbt-font-subtitle-04-16px {
+  font-family: "cbt-font-family-rambla";
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0.064px;
+}
+
 /* Subtitles UPN */
 
 .upn-font-subtitle-01-28px {
@@ -396,7 +412,7 @@
   letter-spacing: 0.4px;
 }
 
-.upc-font-button-bold-16px {
+.upc-font-button-16px {
   font-family: "upc-font-family-zizou-slab";
   font-weight: 700;
   font-size: 16px;
@@ -407,13 +423,28 @@
 /* Button CIBERTEC */
 
 .cbt-font-button-14px {
-  font-family: "cbt-font-family-brandongrotesque";
+  font-family: "cbt-font-family-rambla";
   font-weight: 700;
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0.056px;
+}
+
+.cbt-font-button-16px {
+  font-family: "cbt-font-family-rambla";
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
   letter-spacing: 0px;
 }
 
+.cbt-font-body-reg-02-16px {
+  font-family: "cbt-font-family-rambla";
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+}
+
 /* Button UPN */
 
 .upn-font-button-14px {
@@ -1115,7 +1146,7 @@ video {
   --color-cbt-astro-blue-30: #51bbff;
   --color-cbt-astro-blue-40: #00a5ed;
   --color-cbt-astro-blue-50: #018cca;
-  --color-cbt-astro-blue-60-base: #004769;
+  --color-cbt-astro-blue-60-base: #0074a8;
   --color-cbt-astro-blue-70: #015d87;
   --color-cbt-astro-blue-80: #004769;
   --color-cbt-astro-blue-90: #002c44;
@@ -1129,9 +1160,9 @@ video {
   /* Neutrals */
   --color-cbt-color-neutral-10: #ffffff;
   --color-cbt-color-neutral-20: #f8fafd;
-  --color-cbt-color-neutral-30: #f4f9ff;
+  --color-cbt-color-neutral-30: #edf2f7;
   --color-cbt-color-neutral-40: #f2f9fd;
-  --color-cbt-color-neutral-50: #eaf2f9;
+  --color-cbt-color-neutral-50: #d5dde8;
   --color-cbt-color-neutral-60: #ccd9ec;
   --color-cbt-color-neutral-70: #a3b4cc;
   --color-cbt-color-neutral-80: #67778f;
@@ -1191,10 +1222,12 @@ video {
   --color-core-color-blue-intense-30: #b9d6fe;
   --color-core-color-blue-intense-60-base: #1762ca;
   --color-core-color-blue-intense-80: #0e3b79;
+  --color-core-feedback-critical-30: #fee7c5;
   /* Social Color */
   --color-core-color-whatsapp-60-base: #00ba37;
   --color-core-color-whatsapp-70: #0d7d2d;
   --color-core-color-whatsapp-80: #054d19;
+  --color-core-icon-critical-60: #fd6d21;
 }
 
 .dsEcom-pointer-events-none {
@@ -1249,10 +1282,19 @@ video {
   z-index: 20;
 }
 
+.dsEcom-col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .dsEcom-float-left {
   float: left;
 }
 
+.dsEcom-mx-\[91px\] {
+  margin-left: 91px;
+  margin-right: 91px;
+}
+
 .dsEcom-mb-4 {
   margin-bottom: 1rem;
 }
@@ -1265,6 +1307,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.dsEcom-mt-4 {
+  margin-top: 1rem;
+}
+
 .dsEcom-mt-\[2px\] {
   margin-top: 2px;
 }
@@ -1277,6 +1323,10 @@ video {
   display: flex;
 }
 
+.dsEcom-grid {
+  display: grid;
+}
+
 .dsEcom-hidden {
   display: none;
 }
@@ -1301,6 +1351,14 @@ video {
   height: 2rem;
 }
 
+.dsEcom-h-\[292px\] {
+  height: 292px;
+}
+
+.dsEcom-h-\[2px\] {
+  height: 2px;
+}
+
 .dsEcom-h-\[42px\] {
   height: 42px;
 }
@@ -1317,6 +1375,10 @@ video {
   height: 48px;
 }
 
+.dsEcom-h-\[4px\] {
+  height: 4px;
+}
+
 .dsEcom-h-auto {
   height: auto;
 }
@@ -1345,6 +1407,10 @@ video {
   width: 284px;
 }
 
+.dsEcom-w-\[384px\] {
+  width: 384px;
+}
+
 .dsEcom-w-\[584px\] {
   width: 584px;
 }
@@ -1357,6 +1423,10 @@ video {
   width: auto;
 }
 
+.dsEcom-w-fit {
+  width: fit-content;
+}
+
 .dsEcom-w-full {
   width: 100%;
 }
@@ -1389,10 +1459,19 @@ video {
   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));
 }
 
+.dsEcom-rotate-90 {
+  --tw-rotate: 90deg;
+  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));
+}
+
 .dsEcom-transform {
   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));
 }
 
+.dsEcom-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .dsEcom-cursor-pointer {
   cursor: pointer;
 }
@@ -1401,6 +1480,10 @@ video {
   appearance: none;
 }
 
+.dsEcom-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .dsEcom-flex-col {
   flex-direction: column;
 }
@@ -1417,6 +1500,10 @@ video {
   justify-content: space-between;
 }
 
+.dsEcom-gap-1 {
+  gap: 0.25rem;
+}
+
 .dsEcom-gap-10 {
   gap: 2.5rem;
 }
@@ -1429,6 +1516,10 @@ video {
   gap: 5rem;
 }
 
+.dsEcom-gap-3 {
+  gap: 0.75rem;
+}
+
 .dsEcom-gap-4 {
   gap: 1rem;
 }
@@ -1441,10 +1532,18 @@ video {
   border-radius: 0.25rem;
 }
 
+.dsEcom-rounded-\[16px\] {
+  border-radius: 16px;
+}
+
 .dsEcom-rounded-\[2px\] {
   border-radius: 2px;
 }
 
+.dsEcom-rounded-\[4px\] {
+  border-radius: 4px;
+}
+
 .dsEcom-rounded-core-border-radius-32px {
   border-radius: 32px;
 }
@@ -1457,6 +1556,11 @@ video {
   border-radius: 0.125rem;
 }
 
+.dsEcom-rounded-b-\[2px\] {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
 .dsEcom-border {
   border-width: 1px;
 }
@@ -1465,6 +1569,14 @@ video {
   border-width: 1px;
 }
 
+.dsEcom-border-b-4 {
+  border-bottom-width: 4px;
+}
+
+.dsEcom-border-r-2 {
+  border-right-width: 2px;
+}
+
 .dsEcom-border-solid {
   border-style: solid;
 }
@@ -1489,6 +1601,14 @@ video {
   border-color: var(--color-upc-color-red-60-base) !important;
 }
 
+.dsEcom-border-cbt-astro-blue-80 {
+  border-color: var(--color-cbt-astro-blue-80);
+}
+
+.dsEcom-border-cbt-color-apple-green-60-base {
+  border-color: var(--color-cbt-color-apple-green-60-base);
+}
+
 .dsEcom-border-upc-color-neutral-60 {
   border-color: var(--color-upc-color-neutral-60);
 }
@@ -1513,14 +1633,50 @@ video {
   border-color: var(--color-upc-color-red-90);
 }
 
+.dsEcom-border-upc-epg-color-purple-60-base {
+  border-color: var(--color-upc-epg-color-purple-60-base);
+}
+
+.dsEcom-border-r-color-cbt-color-neutral-50 {
+  border-right-color: var(--color-cbt-color-neutral-50);
+}
+
+.dsEcom-border-r-upc-color-neutral-50 {
+  border-right-color: var(--color-upc-color-neutral-50);
+}
+
+.\!dsEcom-bg-cbt-color-apple-green-60-base {
+  background-color: var(--color-cbt-color-apple-green-60-base) !important;
+}
+
 .\!dsEcom-bg-upc-color-red-60-base {
   background-color: var(--color-upc-color-red-60-base) !important;
 }
 
+.dsEcom-bg-cbt-color-apple-green-60-base {
+  background-color: var(--color-cbt-color-apple-green-60-base);
+}
+
+.dsEcom-bg-color-cbt-color-neutral-20 {
+  background-color: var(--color-cbt-color-neutral-20);
+}
+
+.dsEcom-bg-color-cbt-color-neutral-50 {
+  background-color: var(--color-cbt-color-neutral-50);
+}
+
 .dsEcom-bg-upc-color-neutral-10 {
   background-color: var(--color-upc-color-neutral-10);
 }
 
+.dsEcom-bg-upc-color-neutral-20 {
+  background-color: var(--color-upc-color-neutral-20);
+}
+
+.dsEcom-bg-upc-color-neutral-50 {
+  background-color: var(--color-upc-color-neutral-50);
+}
+
 .dsEcom-bg-upc-color-neutral-70 {
   background-color: var(--color-upc-color-neutral-70);
 }
@@ -1538,11 +1694,20 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.dsEcom-p-4 {
+  padding: 1rem;
+}
+
 .dsEcom-px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
+.dsEcom-px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .dsEcom-px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1553,21 +1718,46 @@ video {
   padding-right: 16px;
 }
 
+.dsEcom-px-\[51px\] {
+  padding-left: 51px;
+  padding-right: 51px;
+}
+
 .dsEcom-px-\[64px\] {
   padding-left: 64px;
   padding-right: 64px;
 }
 
+.dsEcom-px-\[91px\] {
+  padding-left: 91px;
+  padding-right: 91px;
+}
+
 .dsEcom-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
+.dsEcom-py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
 .dsEcom-py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.dsEcom-py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.dsEcom-py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .dsEcom-py-\[11px\] {
   padding-top: 11px;
   padding-bottom: 11px;
@@ -1588,6 +1778,10 @@ video {
   padding-bottom: 9px;
 }
 
+.dsEcom-pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .dsEcom-pb-4 {
   padding-bottom: 1rem;
 }
@@ -1600,10 +1794,22 @@ video {
   padding-left: 0.75rem;
 }
 
+.dsEcom-pl-\[51px\] {
+  padding-left: 51px;
+}
+
 .dsEcom-pr-\[44px\] {
   padding-right: 44px;
 }
 
+.dsEcom-pr-\[51px\] {
+  padding-right: 51px;
+}
+
+.dsEcom-pt-2 {
+  padding-top: 0.5rem;
+}
+
 .dsEcom-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1628,6 +1834,10 @@ video {
   line-height: 18px;
 }
 
+.\!dsEcom-text-cbt-color-apple-green-60-base {
+  color: var(--color-cbt-color-apple-green-60-base) !important;
+}
+
 .\!dsEcom-text-upc-color-neutral-10 {
   color: var(--color-upc-color-neutral-10) !important;
 }
@@ -1640,6 +1850,26 @@ video {
   color: var(--color-upc-color-red-60-base) !important;
 }
 
+.dsEcom-text-cbt-astro-blue-20 {
+  color: var(--color-cbt-astro-blue-20);
+}
+
+.dsEcom-text-cbt-astro-blue-80 {
+  color: var(--color-cbt-astro-blue-80);
+}
+
+.dsEcom-text-cbt-color-apple-green-60-base {
+  color: var(--color-cbt-color-apple-green-60-base);
+}
+
+.dsEcom-text-color-cbt-color-neutral-80 {
+  color: var(--color-cbt-color-neutral-80);
+}
+
+.dsEcom-text-core-color-blue-60-base {
+  color: var(--color-core-color-blue-60-base);
+}
+
 .dsEcom-text-upc-color-neutral-10 {
   color: var(--color-upc-color-neutral-10);
 }
@@ -1660,6 +1890,14 @@ video {
   color: var(--color-upc-color-red-60-base);
 }
 
+.dsEcom-text-upc-epg-color-purple-30 {
+  color: var(--color-upc-epg-color-purple-30);
+}
+
+.dsEcom-text-upc-epg-color-purple-60-base {
+  color: var(--color-upc-epg-color-purple-60-base);
+}
+
 .dsEcom-shadow-upc-shadow-prominent {
   --tw-shadow: 0px 8px 48px -6px rgba(89, 89, 89, 0.24);
   --tw-shadow-colored: 0px 8px 48px -6px var(--tw-shadow-color);
@@ -1709,9 +1947,9 @@ video {
 }
 
 @font-face {
-  font-family: "cbt-font-family-brandon-grotesque";
+  font-family: "cbt-font-family-rambla";
 
-  src: url("../src/assets/Grotesque/Brandon_bld.otf") format("opentype");
+  src: url("../src/assets/Rambla/Rambla.otf") format("opentype");
 }
 
 @font-face {
@@ -1797,10 +2035,18 @@ video {
   border-color: var(--color-upc-color-red-60-base) !important;
 }
 
+.checked\:dsEcom-border-cbt-color-apple-green-60-base:checked {
+  border-color: var(--color-cbt-color-apple-green-60-base);
+}
+
 .checked\:dsEcom-border-upc-color-red-60-base:checked {
   border-color: var(--color-upc-color-red-60-base);
 }
 
+.checked\:dsEcom-bg-cbt-color-apple-green-60-base:checked {
+  background-color: var(--color-cbt-color-apple-green-60-base);
+}
+
 .checked\:dsEcom-bg-upc-color-red-60-base:checked {
   background-color: var(--color-upc-color-red-60-base);
 }
@@ -1844,6 +2090,11 @@ video {
   border-radius: 9999px;
 }
 
+.checked\:after\:dsEcom-bg-cbt-color-apple-green-60-base:checked::after {
+  content: var(--tw-content);
+  background-color: var(--color-cbt-color-apple-green-60-base);
+}
+
 .checked\:after\:dsEcom-bg-upc-color-neutral-50:checked::after {
   content: var(--tw-content);
   background-color: var(--color-upc-color-neutral-50);
@@ -1864,6 +2115,14 @@ video {
   transform: translate(-50%,-50%);
 }
 
+.hover\:dsEcom-border-cbt-color-apple-green-60-base:hover {
+  border-color: var(--color-cbt-color-apple-green-60-base);
+}
+
+.hover\:dsEcom-border-cbt-color-apple-green-70:hover {
+  border-color: var(--color-cbt-color-apple-green-70);
+}
+
 .hover\:dsEcom-border-upc-color-neutral-70:hover {
   border-color: var(--color-upc-color-neutral-70);
 }
@@ -1872,6 +2131,10 @@ video {
   border-color: var(--color-upc-color-red-60-base);
 }
 
+.hover\:dsEcom-border-upc-color-red-70:hover {
+  border-color: var(--color-upc-color-red-70);
+}
+
 .hover\:dsEcom-border-upc-color-red-80:hover {
   border-color: var(--color-upc-color-red-80);
 }
@@ -1880,6 +2143,10 @@ video {
   border-color: var(--color-upc-epg-color-purple-80);
 }
 
+.hover\:dsEcom-bg-cbt-color-apple-green-70:hover {
+  background-color: var(--color-cbt-color-apple-green-70);
+}
+
 .hover\:dsEcom-bg-upc-color-neutral-10:hover {
   background-color: var(--color-upc-color-neutral-10);
 }
@@ -1892,14 +2159,22 @@ video {
   background-color: var(--color-upc-color-neutral-70);
 }
 
-.hover\:dsEcom-bg-upc-color-red-80:hover {
-  background-color: var(--color-upc-color-red-80);
+.hover\:dsEcom-bg-upc-color-red-70:hover {
+  background-color: var(--color-upc-color-red-70);
+}
+
+.hover\:dsEcom-text-cbt-color-apple-green-70:hover {
+  color: var(--color-cbt-color-apple-green-70);
 }
 
 .hover\:dsEcom-text-upc-color-neutral-70:hover {
   color: var(--color-upc-color-neutral-70);
 }
 
+.hover\:dsEcom-text-upc-color-red-70:hover {
+  color: var(--color-upc-color-red-70);
+}
+
 .hover\:dsEcom-text-upc-color-red-80:hover {
   color: var(--color-upc-color-red-80);
 }
@@ -1912,21 +2187,21 @@ video {
   color: var(--color-upc-color-neutral-100) !important;
 }
 
-.checked\:focus\:dsEcom-border-upc-color-red-60-base:focus:checked {
-  border-color: var(--color-upc-color-red-60-base);
-}
-
 .focus-visible\:dsEcom-outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.active\:dsEcom-border-cbt-color-apple-green-80:active {
+  border-color: var(--color-cbt-color-apple-green-80);
+}
+
 .active\:dsEcom-border-upc-color-neutral-70:active {
   border-color: var(--color-upc-color-neutral-70);
 }
 
-.active\:dsEcom-border-upc-color-red-80:active {
-  border-color: var(--color-upc-color-red-80);
+.active\:dsEcom-bg-cbt-color-apple-green-80:active {
+  background-color: var(--color-cbt-color-apple-green-80);
 }
 
 .active\:dsEcom-bg-upc-color-neutral-40:active {
@@ -1941,6 +2216,10 @@ video {
   background-color: var(--color-upc-color-red-80);
 }
 
+.active\:dsEcom-text-cbt-color-apple-green-80:active {
+  color: var(--color-cbt-color-apple-green-80);
+}
+
 .active\:dsEcom-text-upc-color-red-80:active {
   color: var(--color-upc-color-red-80);
 }
@@ -1982,20 +2261,119 @@ video {
     order: 9999;
   }
 
+  .mobiles\:dsEcom-my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .mobiles\:dsEcom-mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .mobiles\:dsEcom-block {
+    display: block;
+  }
+
+  .mobiles\:dsEcom-flex {
+    display: flex;
+  }
+
+  .mobiles\:dsEcom-hidden {
+    display: none;
+  }
+
   .mobiles\:dsEcom-w-\[360px\] {
     width: 360px;
   }
 
+  .mobiles\:dsEcom-w-full {
+    width: 100%;
+  }
+
   .mobiles\:dsEcom-flex-col {
     flex-direction: column;
   }
 
+  .mobiles\:dsEcom-items-center {
+    align-items: center;
+  }
+
+  .mobiles\:dsEcom-justify-center {
+    justify-content: center;
+  }
+
+  .mobiles\:dsEcom-justify-between {
+    justify-content: space-between;
+  }
+
+  .mobiles\:dsEcom-gap-0 {
+    gap: 0px;
+  }
+
+  .mobiles\:dsEcom-gap-6 {
+    gap: 1.5rem;
+  }
+
   .mobiles\:dsEcom-gap-8 {
     gap: 2rem;
   }
 
+  .mobiles\:dsEcom-border-b-2 {
+    border-bottom-width: 2px;
+  }
+
+  .mobiles\:dsEcom-border-r-0 {
+    border-right-width: 0px;
+  }
+
+  .mobiles\:dsEcom-border-b-upc-color-neutral-40 {
+    border-bottom-color: var(--color-upc-color-neutral-40);
+  }
+
+  .mobiles\:dsEcom-px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .mobiles\:dsEcom-px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .mobiles\:dsEcom-px-\[24px\] {
     padding-left: 24px;
     padding-right: 24px;
   }
+
+  .mobiles\:dsEcom-py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .mobiles\:dsEcom-py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
+  .mobiles\:dsEcom-py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .mobiles\:dsEcom-py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .mobiles\:dsEcom-pl-0 {
+    padding-left: 0px;
+  }
+
+  .mobiles\:dsEcom-pr-0 {
+    padding-right: 0px;
+  }
+
+  .mobiles\:dsEcom-text-center {
+    text-align: center;
+  }
 }