@tapcart/mobile-components 0.2.3 → 0.2.7

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -26,20 +26,17 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
 */
 
-html,
-:host {
+html {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*
@@ -106,10 +103,8 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -117,9 +112,7 @@ kbd,
 samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-feature-settings: normal; /* 2 */
-  font-variation-settings: normal; /* 3 */
-  font-size: 1em; /* 4 */
+  font-size: 1em; /* 2 */
 }
 
 /*
@@ -179,7 +172,6 @@ textarea {
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -200,9 +192,9 @@ select {
 */
 
 button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
@@ -433,6 +425,8 @@ video {
 
     --radius: 0.5rem;
 
+    --coreFonts-sfpro-roboto: "-apple-system", "Roboto", "sans-serif";
+
     --coreColors-pageColor: #ffffff;
     --coreColors-shadow: #000000;
     --coreColors-brandColorPrimary: #000000;
@@ -475,6 +469,9 @@ video {
     --stateColors-warning: #ffaf02ff;
     --stateColors-skeleton: #e3e3e3ff;
 
+    --productBadging-fill: #000000;
+    --productBadging-text: #fefefe;
+
     --productImage-aspectRatio: "2:3";
     --productImage-scaling: cover;
     --productImage-isCustom: "false";
@@ -558,10 +555,6 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -612,10 +605,6 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
 }
 .container {
   width: 100%;
@@ -647,12 +636,6 @@ video {
 .pointer-events-auto {
   pointer-events: auto;
 }
-.\!visible {
-  visibility: visible !important;
-}
-.visible {
-  visibility: visible;
-}
 .fixed {
   position: fixed;
 }
@@ -665,6 +648,10 @@ video {
 .inset-0 {
   inset: 0px;
 }
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
 .-bottom-12 {
   bottom: -3rem;
 }
@@ -677,12 +664,24 @@ video {
 .-top-12 {
   top: -3rem;
 }
+.bottom-0 {
+  bottom: 0px;
+}
+.end-4 {
+  inset-inline-end: 1rem;
+}
+.left-0 {
+  left: 0px;
+}
 .left-1\/2 {
   left: 50%;
 }
 .left-\[50\%\] {
   left: 50%;
 }
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -698,6 +697,9 @@ video {
 .top-2 {
   top: 0.5rem;
 }
+.top-\[18px\] {
+  top: 18px;
+}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -710,6 +712,27 @@ video {
 .z-\[100\] {
   z-index: 100;
 }
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+.col-start-1 {
+  grid-column-start: 1;
+}
+.row-start-1 {
+  grid-row-start: 1;
+}
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -720,8 +743,8 @@ video {
 .-mt-4 {
   margin-top: -1rem;
 }
-.mb-4 {
-  margin-bottom: 1rem;
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 .ml-2 {
   margin-left: 0.5rem;
@@ -732,9 +755,21 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-auto {
+  margin-top: auto;
+}
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .block {
   display: block;
 }
+.inline {
+  display: inline;
+}
 .flex {
   display: flex;
 }
@@ -744,6 +779,9 @@ video {
 .grid {
   display: grid;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -768,6 +806,9 @@ video {
 .h-6 {
   height: 1.5rem;
 }
+.h-64 {
+  height: 16rem;
+}
 .h-8 {
   height: 2rem;
 }
@@ -777,36 +818,66 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[2px\] {
+  height: 2px;
+}
+.h-\[42px\] {
+  height: 42px;
+}
+.h-\[4px\] {
+  height: 4px;
+}
+.h-auto {
+  height: auto;
+}
 .h-full {
   height: 100%;
 }
 .max-h-screen {
   max-height: 100vh;
 }
+.w-1\/2 {
+  width: 50%;
+}
 .w-10 {
   width: 2.5rem;
 }
 .w-11 {
   width: 2.75rem;
 }
+.w-14 {
+  width: 3.5rem;
+}
+.w-16 {
+  width: 4rem;
+}
 .w-2 {
   width: 0.5rem;
 }
 .w-2\.5 {
   width: 0.625rem;
 }
+.w-3\/4 {
+  width: 75%;
+}
 .w-4 {
   width: 1rem;
 }
 .w-5 {
   width: 1.25rem;
 }
+.w-6 {
+  width: 1.5rem;
+}
 .w-8 {
   width: 2rem;
 }
 .w-\[1px\] {
   width: 1px;
 }
+.w-\[40px\] {
+  width: 40px;
+}
 .w-auto {
   width: auto;
 }
@@ -826,6 +897,9 @@ video {
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -887,6 +961,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize {
+  resize: both;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -899,6 +976,9 @@ video {
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
+.grid-cols-\[auto\2c auto\2c 1fr\] {
+  grid-template-columns: auto auto 1fr;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -908,6 +988,12 @@ video {
 .flex-col-reverse {
   flex-direction: column-reverse;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -920,6 +1006,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -930,54 +1019,94 @@ video {
 .gap-y-\[7px\] {
   row-gap: 7px;
 }
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --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)));
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.self-start {
+  align-self: flex-start;
+}
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
+.overscroll-y-none {
+  overscroll-behavior-y: none;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
 .rounded-\[inherit\] {
   border-radius: inherit;
 }
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: var(--radius);
+}
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
 .rounded-none {
   border-radius: 0px;
 }
+.rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
 .rounded-b-lg {
   border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+.rounded-t-lg {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
+}
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
+}
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
+}
 .border {
   border-width: 1px;
 }
@@ -1000,9 +1129,6 @@ video {
 .border-coreColors-dividingLines {
   border-color: var(--coreColors-dividingLines);
 }
-.border-destructive {
-  border-color: hsl(var(--destructive));
-}
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -1037,26 +1163,35 @@ video {
 .bg-buttonColors-secondaryFill {
   background-color: var(--buttonColors-secondaryFill);
 }
+.bg-coreColors-brandColorPrimary {
+  background-color: var(--coreColors-brandColorPrimary);
+}
+.bg-coreColors-dividingLines {
+  background-color: var(--coreColors-dividingLines);
+}
 .bg-coreColors-inputBackground {
   background-color: var(--coreColors-inputBackground);
 }
+.bg-coreColors-modalBackground {
+  background-color: var(--coreColors-modalBackground);
+}
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
-.bg-destructive {
-  background-color: hsl(var(--destructive));
+.bg-productBadging-fill {
+  background-color: var(--productBadging-fill);
 }
-.bg-muted {
-  background-color: hsl(var(--muted));
+.bg-stateColors-error {
+  background-color: var(--stateColors-error);
 }
-.bg-primary {
-  background-color: hsl(var(--primary));
+.bg-stateColors-skeleton {
+  background-color: var(--stateColors-skeleton);
 }
-.bg-secondary {
-  background-color: hsl(var(--secondary));
+.bg-stateColors-success {
+  background-color: var(--stateColors-success);
 }
-.bg-stateColors-error {
-  background-color: var(--stateColors-error);
+.bg-stateColors-warning {
+  background-color: var(--stateColors-warning);
 }
 .bg-transparent {
   background-color: transparent;
@@ -1065,12 +1200,41 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.bg-\[linear-gradient\(270deg\2c \#ffffff00_0\%\2c \#FFF_100\%\)\] {
+  background-image: linear-gradient(270deg,#ffffff00 0%,#FFF 100%);
+}
+.bg-\[linear-gradient\(90deg\2c \#ffffff00_0\%\2c \#FFF_100\%\)\] {
+  background-image: linear-gradient(90deg,#ffffff00 0%,#FFF 100%);
+}
+.bg-fade-left {
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+}
+.bg-fade-right {
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+}
+.fill-current {
+  fill: currentColor;
+}
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.p-0 {
+  padding: 0px;
+}
 .p-1 {
   padding: 0.25rem;
 }
 .p-2 {
   padding: 0.5rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -1080,6 +1244,10 @@ video {
 .p-\[1px\] {
   padding: 1px;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1108,13 +1276,13 @@ video {
   padding-left: 16px;
   padding-right: 16px;
 }
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .py-3 {
   padding-top: 0.75rem;
@@ -1130,15 +1298,21 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pb-8 {
+  padding-bottom: 2rem;
+}
 .pl-4 {
   padding-left: 1rem;
 }
-.pr-8 {
-  padding-right: 2rem;
+.pr-4 {
+  padding-right: 1rem;
 }
 .pt-0 {
   padding-top: 0px;
 }
+.pt-12 {
+  padding-top: 3rem;
+}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1148,9 +1322,8 @@ video {
 .text-center {
   text-align: center;
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
+.font-sfpro-roboto {
+  font-family: var(--coreFonts-sfpro-roboto);
 }
 .text-\[10px\] {
   font-size: 10px;
@@ -1158,9 +1331,14 @@ video {
 .text-\[12px\] {
   font-size: 12px;
 }
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
+.text-\[15px\] {
+  font-size: 15px;
+}
+.text-\[18px\] {
+  font-size: 18px;
+}
+.text-\[23px\] {
+  font-size: 23px;
 }
 .text-lg {
   font-size: 1.125rem;
@@ -1170,10 +1348,6 @@ video {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1187,20 +1361,17 @@ video {
 .font-semibold {
   font-weight: 600;
 }
-.leading-none {
-  line-height: 1;
+.leading-\[130\%\] {
+  line-height: 130%;
 }
-.text-\[\#121212\] {
-  --tw-text-opacity: 1;
-  color: rgb(18 18 18 / var(--tw-text-opacity));
+.leading-\[160\%\] {
+  line-height: 160%;
 }
-.text-\[\#727272\] {
-  --tw-text-opacity: 1;
-  color: rgb(114 114 114 / var(--tw-text-opacity));
+.leading-\[24px\] {
+  line-height: 24px;
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+.leading-none {
+  line-height: 1;
 }
 .text-buttonColors-destructiveText {
   color: var(--buttonColors-destructiveText);
@@ -1232,12 +1403,18 @@ video {
 .text-buttonColors-secondaryFill {
   color: var(--buttonColors-secondaryFill);
 }
+.text-buttonColors-secondaryOutline {
+  color: var(--buttonColors-secondaryOutline);
+}
 .text-buttonColors-secondaryOutlineColor {
   color: var(--buttonColors-secondaryOutlineColor);
 }
 .text-buttonColors-secondaryOutlineEnabled {
   color: var(--buttonColors-secondaryOutlineEnabled);
 }
+.text-buttonColors-secondaryShadow {
+  color: var(--buttonColors-secondaryShadow);
+}
 .text-buttonColors-secondaryShadowEnabled {
   color: var(--buttonColors-secondaryShadowEnabled);
 }
@@ -1280,11 +1457,8 @@ video {
 .text-coreColors-tabBar {
   color: var(--coreColors-tabBar);
 }
-.text-destructive-foreground {
-  color: hsl(var(--destructive-foreground));
-}
-.text-foreground {
-  color: hsl(var(--foreground));
+.text-current {
+  color: currentColor;
 }
 .text-foreground\/50 {
   color: hsl(var(--foreground) / 0.5);
@@ -1292,14 +1466,8 @@ video {
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
-.text-primary {
-  color: hsl(var(--primary));
-}
-.text-primary-foreground {
-  color: hsl(var(--primary-foreground));
-}
-.text-secondary-foreground {
-  color: hsl(var(--secondary-foreground));
+.text-productBadging-text {
+  color: var(--productBadging-text);
 }
 .text-stateColors-disabled {
   color: var(--stateColors-disabled);
@@ -1335,7 +1503,7 @@ video {
   color: var(--textColors-priceText);
 }
 .text-textColors-primaryColor {
-  color: var(--textColors-primaryColor);
+  color: var(--textColors-primaryColor, #121212ff);
 }
 .text-textColors-productTitle {
   color: var(--textColors-productTitle);
@@ -1344,11 +1512,14 @@ video {
   color: var(--textColors-salePriceText);
 }
 .text-textColors-secondaryColor {
-  color: var(--textColors-secondaryColor);
+  color: var(--textColors-secondaryColor, #727272ff);
 }
 .text-textColors-strikethroughPriceText {
   color: var(--textColors-strikethroughPriceText);
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1358,17 +1529,45 @@ video {
 .opacity-100 {
   opacity: 1;
 }
-.opacity-90 {
-  opacity: 0.9;
+.shadow-\[0_0_6px_0_rgba\(17\2c 17\2c 17\2c 0\.16\)\] {
+  --tw-shadow: 0 0 6px 0 rgba(17,17,17,0.16);
+  --tw-shadow-colored: 0 0 6px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-buttonColors-primaryShadow {
+  --tw-shadow-color: var(--buttonColors-primaryShadow);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.shadow-buttonColors-secondaryShadow {
+  --tw-shadow-color: var(--buttonColors-secondaryShadow);
+  --tw-shadow: var(--tw-shadow-colored);
+}
 .outline {
   outline-style: solid;
 }
+.outline-1 {
+  outline-width: 1px;
+}
+.outline-buttonColors-primaryOutline {
+  outline-color: var(--buttonColors-primaryOutline);
+}
+.outline-buttonColors-secondaryOutline {
+  outline-color: var(--buttonColors-secondaryOutline);
+}
+.outline-coreColors-brandColorPrimary {
+  outline-color: var(--coreColors-brandColorPrimary);
+}
+.outline-coreColors-dividingLines {
+  outline-color: var(--coreColors-dividingLines);
+}
+.outline-input {
+  outline-color: hsl(var(--input));
+}
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1403,6 +1602,9 @@ video {
 .duration-200 {
   transition-duration: 200ms;
 }
+.duration-300 {
+  transition-duration: 300ms;
+}
 @keyframes enter {
 
   from {
@@ -1420,6 +1622,9 @@ video {
 .duration-200 {
   animation-duration: 200ms;
 }
+.duration-300 {
+  animation-duration: 300ms;
+}
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar *::-webkit-scrollbar {
     display: none;
@@ -1456,10 +1661,10 @@ video {
   color: var(--stateColors-error);
 }
 .placeholder\:text-textColors-secondaryColor::-moz-placeholder {
-  color: var(--textColors-secondaryColor);
+  color: var(--textColors-secondaryColor, #727272ff);
 }
 .placeholder\:text-textColors-secondaryColor::placeholder {
-  color: var(--textColors-secondaryColor);
+  color: var(--textColors-secondaryColor, #727272ff);
 }
 .placeholder-shown\:p-4:-moz-placeholder-shown {
   padding: 1rem;
@@ -1470,21 +1675,12 @@ video {
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
-.hover\:bg-destructive\/80:hover {
-  background-color: hsl(var(--destructive) / 0.8);
-}
 .hover\:bg-muted:hover {
   background-color: hsl(var(--muted));
 }
-.hover\:bg-primary\/80:hover {
-  background-color: hsl(var(--primary) / 0.8);
-}
 .hover\:bg-secondary:hover {
   background-color: hsl(var(--secondary));
 }
-.hover\:bg-secondary\/80:hover {
-  background-color: hsl(var(--secondary) / 0.8);
-}
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
@@ -1547,6 +1743,9 @@ video {
 .active\:opacity-70:active {
   opacity: 0.7;
 }
+.active\:outline-coreColors-brandColorPrimary:active {
+  outline-color: var(--coreColors-brandColorPrimary);
+}
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -1562,6 +1761,9 @@ video {
 .disabled\:bg-stateColors-disabled:disabled {
   background-color: var(--stateColors-disabled);
 }
+.disabled\:bg-transparent:disabled {
+  background-color: transparent;
+}
 .disabled\:text-stateColors-disabled:disabled {
   color: var(--stateColors-disabled);
 }
@@ -1571,6 +1773,9 @@ video {
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
+.group:disabled .group-disabled\:text-stateColors-disabled {
+  color: var(--stateColors-disabled);
+}
 .group.destructive .group-\[\.destructive\]\:border-muted\/40 {
   border-color: hsl(var(--muted) / 0.4);
 }
@@ -1671,12 +1876,18 @@ video {
 .data-\[icon\=true\]\:pr-10[data-icon=true] {
   padding-right: 2.5rem;
 }
+.data-\[error\=true\]\:text-stateColors-error[data-error=true] {
+  color: var(--stateColors-error);
+}
 .data-\[state\=on\]\:text-accent-foreground[data-state=on] {
   color: hsl(var(--accent-foreground));
 }
 .data-\[swipe\=move\]\:transition-none[data-swipe=move] {
   transition-property: none;
 }
+.data-\[state\=open\]\:duration-500[data-state=open] {
+  transition-duration: 500ms;
+}
 .data-\[state\=open\]\:animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;
@@ -1707,9 +1918,6 @@ video {
 .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
   --tw-exit-opacity: 0;
 }
-.data-\[state\=closed\]\:fade-out-80[data-state=closed] {
-  --tw-exit-opacity: 0.8;
-}
 .data-\[state\=open\]\:fade-in-0[data-state=open] {
   --tw-enter-opacity: 0;
 }
@@ -1722,12 +1930,12 @@ video {
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
   --tw-exit-translate-x: -50%;
 }
-.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
-  --tw-exit-translate-x: 100%;
-}
 .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
   --tw-exit-translate-y: -48%;
 }
+.data-\[state\=closed\]\:slide-out-to-top-full[data-state=closed] {
+  --tw-exit-translate-y: -100%;
+}
 .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
   --tw-enter-translate-x: -50%;
 }
@@ -1737,20 +1945,11 @@ video {
 .data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
   --tw-enter-translate-y: -100%;
 }
+.data-\[state\=open\]\:duration-500[data-state=open] {
+  animation-duration: 500ms;
+}
 @media (min-width: 640px) {
 
-  .sm\:bottom-0 {
-    bottom: 0px;
-  }
-
-  .sm\:right-0 {
-    right: 0px;
-  }
-
-  .sm\:top-auto {
-    top: auto;
-  }
-
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -1759,10 +1958,6 @@ video {
     flex-direction: row;
   }
 
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -1780,21 +1975,73 @@ video {
   .sm\:text-left {
     text-align: left;
   }
-
-  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
-    --tw-enter-translate-y: 100%;
-  }
-}
-@media (min-width: 768px) {
-
-  .md\:max-w-\[420px\] {
-    max-width: 420px;
-  }
 }
 .\[\&\+label\]\:text-stateColors-error+label {
   color: var(--stateColors-error);
 }
-.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
+.\[\&\>div\>button\]\:border-coreColors-brandColorPrimary>div>button {
+  border-color: var(--coreColors-brandColorPrimary);
+}
+.\[\&\>p\]\:text-black>p {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.\[\&\>p\]\:text-buttonColors-primaryText>p {
+  color: var(--buttonColors-primaryText);
+}
+.\[\&\>p\]\:text-buttonColors-secondaryText>p {
+  color: var(--buttonColors-secondaryText);
+}
+.\[\&\>p\]\:text-coreColors-pageColor>p {
+  color: var(--coreColors-pageColor);
+}
+.\[\&\>p\]\:text-stateColors-disabled>p {
+  color: var(--stateColors-disabled);
+}
+.\[\&\>p\]\:text-textColors-primaryColor>p {
+  color: var(--textColors-primaryColor, #121212ff);
+}
+.\[\&\>p\]\:text-textColors-secondaryColor>p {
+  color: var(--textColors-secondaryColor, #727272ff);
+}
+.\[\&\>p\]\:\!line-through>p {
+  text-decoration-line: line-through !important;
+}
+.hover\:\[\&\>p\]\:text-accent-foreground>p:hover {
+  color: hsl(var(--accent-foreground));
+}
+.\[\&\[data-state\=open\]_svg\]\:rotate-180[data-state=open] svg {
   --tw-rotate: 180deg;
   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));
 }
+.\[\&_\*\]\:text-coreColors-pageColor * {
+  color: var(--coreColors-pageColor);
+}
+.\[\&_\*\]\:text-textColors-primaryColor * {
+  color: var(--textColors-primaryColor, #121212ff);
+}
+.\[\&_p\]\:text-stateColors-disabled p {
+  color: var(--stateColors-disabled);
+}
+.\[\&_svg\]\:text-black svg {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.\[\&_svg\]\:text-buttonColors-primaryText svg {
+  color: var(--buttonColors-primaryText);
+}
+.\[\&_svg\]\:text-buttonColors-secondaryText svg {
+  color: var(--buttonColors-secondaryText);
+}
+.\[\&_svg\]\:text-coreColors-pageColor svg {
+  color: var(--coreColors-pageColor);
+}
+.\[\&_svg\]\:text-textColors-primaryColor svg {
+  color: var(--textColors-primaryColor, #121212ff);
+}
+.hover\:\[\&_svg\]\:text-accent-foreground svg:hover {
+  color: hsl(var(--accent-foreground));
+}
+.active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
+  color: var(--stateColors-favorites);
+}