@tapcart/mobile-components 0.2.12 → 0.3.1

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.4 | 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 */
@@ -393,10 +385,10 @@ video {
 [hidden] {
   display: none;
 }
-  *::-webkit-scrollbar {
+  .no-scrollbar *:not(.textarea-component)::-webkit-scrollbar {
     display: none;
   }
-  * {
+  .no-scrollbar *:not(.textarea-component) {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
@@ -433,9 +425,12 @@ video {
 
     --radius: 0.5rem;
 
-    --fontRegular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-    --fontMedium: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-    --fontBold: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+    --fontRegular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --fontMedium: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --fontBold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
     --coreColors-pageColor: #ffffff;
     --coreColors-shadow: #000000;
@@ -462,12 +457,12 @@ video {
     --buttonColors-primaryText: #ffffff;
     --buttonColors-primaryFill: #000000;
     --buttonColors-primaryOutline: #000000;
-    --buttonColors-primaryShadow: #ffffff;
+    --buttonColors-primaryShadow: #000000;
     --buttonColors-disabled: #707070;
     --buttonColors-secondaryText: #000000;
     --buttonColors-secondaryFill: #ffffff;
     --buttonColors-secondaryOutline: #000000;
-    --buttonColors-secondaryShadow: #ffffff;
+    --buttonColors-secondaryShadow: #000000;
 
     --stateColors-disabled: #707070;
     --stateColors-error: #d91e18ff;
@@ -485,6 +480,29 @@ video {
     --productImage-aspectRatio: "2:3";
     --productImage-scaling: cover;
     --productImage-isCustom: "false";
+
+    --standard-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.10);
+  }
+  .textarea-component::-webkit-scrollbar {
+    width: 4px;
+  }
+  .textarea-component::-webkit-scrollbar-thumb {
+    border-radius: 1.5rem;
+    background: var(--coreColors-secondaryIcon);
+  }
+  .textarea-component::-webkit-scrollbar-track {
+    border-radius: 1.5rem;
+    background: var(--coreColors-dividingLines);
+  }
+  .textarea-component::-moz-placeholder {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .textarea-component::placeholder {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   /*.dark {*/
@@ -565,10 +583,6 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -619,10 +633,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%;
@@ -688,6 +698,15 @@ video {
 .bottom-10 {
   bottom: 2.5rem;
 }
+.bottom-2 {
+  bottom: 0.5rem;
+}
+.bottom-\[18px\] {
+  bottom: 18px;
+}
+.bottom-\[58px\] {
+  bottom: 58px;
+}
 .end-4 {
   inset-inline-end: 1rem;
 }
@@ -748,6 +767,10 @@ video {
 .row-start-1 {
   grid-row-start: 1;
 }
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -764,6 +787,10 @@ video {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
 .-ml-4 {
   margin-left: -1rem;
 }
@@ -773,6 +800,9 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -785,6 +815,9 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -812,12 +845,24 @@ video {
 .aspect-\[2\/3\] {
   aspect-ratio: 2/3;
 }
-.aspect-\[4\/5\] {
-  aspect-ratio: 4/5;
+.aspect-productImages {
+  aspect-ratio: var(--productImage-aspectRatio);
 }
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+.h-0 {
+  height: 0px;
+}
+.h-0\.5 {
+  height: 0.125rem;
+}
+.h-1 {
+  height: 0.25rem;
+}
+.h-1\.5 {
+  height: 0.375rem;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -845,6 +890,9 @@ video {
 .h-64 {
   height: 16rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
 .h-8 {
   height: 2rem;
 }
@@ -875,14 +923,23 @@ video {
 .max-h-screen {
   max-height: 100vh;
 }
+.min-h-\[24px\] {
+  min-height: 24px;
+}
+.w-1 {
+  width: 0.25rem;
+}
+.w-1\.5 {
+  width: 0.375rem;
+}
 .w-1\/2 {
   width: 50%;
 }
 .w-10 {
   width: 2.5rem;
 }
-.w-11 {
-  width: 2.75rem;
+.w-12 {
+  width: 3rem;
 }
 .w-14 {
   width: 3.5rem;
@@ -905,6 +962,9 @@ video {
 .w-6 {
   width: 1.5rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-8 {
   width: 2rem;
 }
@@ -930,9 +990,15 @@ video {
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-lg {
   max-width: 32rem;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -942,6 +1008,9 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.grow {
+  flex-grow: 1;
+}
 .grow-0 {
   flex-grow: 0;
 }
@@ -1003,6 +1072,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-none {
+  resize: none;
+}
 .resize {
   resize: both;
 }
@@ -1083,6 +1155,9 @@ video {
 .self-start {
   align-self: flex-start;
 }
+.self-center {
+  align-self: center;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1095,8 +1170,8 @@ video {
 .overflow-y-auto {
   overflow-y: auto;
 }
-.overscroll-y-none {
-  overscroll-behavior-y: none;
+.overflow-y-hidden {
+  overflow-y: hidden;
 }
 .truncate {
   overflow: hidden;
@@ -1109,9 +1184,6 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
-.text-wrap {
-  text-wrap: wrap;
-}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1156,6 +1228,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -1168,10 +1243,22 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.\!border-stateColors-error {
+  border-color: var(--stateColors-error) !important;
+}
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.border-buttonColors-primaryOutlineColor {
+  border-color: var(--buttonColors-primaryOutlineColor);
+}
+.border-buttonColors-secondaryOutlineColor {
+  border-color: var(--buttonColors-secondaryOutlineColor);
+}
+.border-coreColors-brandColorPrimary {
+  border-color: var(--coreColors-brandColorPrimary);
+}
 .border-coreColors-dividingLines {
   border-color: var(--coreColors-dividingLines);
 }
@@ -1228,10 +1315,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
-.bg-neutral-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
-}
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
@@ -1264,22 +1347,14 @@ video {
   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));
+  background-image: linear-gradient(to right, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
 .bg-fade-right {
-  background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(to left, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
 .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;
 }
@@ -1358,12 +1433,24 @@ video {
 .pb-8 {
   padding-bottom: 2rem;
 }
+.pl-0 {
+  padding-left: 0px;
+}
+.pl-2 {
+  padding-left: 0.5rem;
+}
 .pl-4 {
   padding-left: 1rem;
 }
 .pl-8 {
   padding-left: 2rem;
 }
+.pr-1 {
+  padding-right: 0.25rem;
+}
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pr-4 {
   padding-right: 1rem;
 }
@@ -1379,6 +1466,9 @@ video {
 .pt-5 {
   padding-top: 1.25rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .text-left {
   text-align: left;
 }
@@ -1391,6 +1481,9 @@ video {
 .text-start {
   text-align: start;
 }
+.align-top {
+  vertical-align: top;
+}
 .font-fontMedium {
   font-family: var(--fontMedium);
 }
@@ -1439,6 +1532,9 @@ video {
 .leading-\[130\%\] {
   line-height: 130%;
 }
+.leading-\[13px\] {
+  line-height: 13px;
+}
 .leading-\[160\%\] {
   line-height: 160%;
 }
@@ -1448,6 +1544,10 @@ video {
 .leading-none {
   line-height: 1;
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .text-buttonColors-destructiveText {
   color: var(--buttonColors-destructiveText);
 }
@@ -1469,9 +1569,6 @@ video {
 .text-buttonColors-primaryShadow {
   color: var(--buttonColors-primaryShadow);
 }
-.text-buttonColors-primaryShadowEnabled {
-  color: var(--buttonColors-primaryShadowEnabled);
-}
 .text-buttonColors-primaryText {
   color: var(--buttonColors-primaryText);
 }
@@ -1490,9 +1587,6 @@ video {
 .text-buttonColors-secondaryShadow {
   color: var(--buttonColors-secondaryShadow);
 }
-.text-buttonColors-secondaryShadowEnabled {
-  color: var(--buttonColors-secondaryShadowEnabled);
-}
 .text-buttonColors-secondaryText {
   color: var(--buttonColors-secondaryText);
 }
@@ -1604,6 +1698,9 @@ video {
 .opacity-100 {
   opacity: 1;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
 .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);
@@ -1614,12 +1711,26 @@ video {
   --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-primary {
+  --tw-shadow: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  --tw-shadow-colored: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-secondary {
+  --tw-shadow: calc(var(--buttonColors-secondaryShadowEnabled) * 0px) calc(var(--buttonColors-secondaryShadowEnabled) * 5px) calc(var(--buttonColors-secondaryShadowEnabled) * 25px) calc(var(--buttonColors-secondaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  --tw-shadow-colored: calc(var(--buttonColors-secondaryShadowEnabled) * 0px) calc(var(--buttonColors-secondaryShadowEnabled) * 5px) calc(var(--buttonColors-secondaryShadowEnabled) * 25px) calc(var(--buttonColors-secondaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
+  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);
+.shadow-primary {
+  --tw-shadow-color: hsl(var(--primary));
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.shadow-secondary {
+  --tw-shadow-color: hsl(var(--secondary));
   --tw-shadow: var(--tw-shadow-colored);
 }
 .outline-none {
@@ -1635,24 +1746,18 @@ video {
 .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));
-}
 .outline-stateColors-error {
   outline-color: var(--stateColors-error);
 }
+.outline-stateColors-skeleton {
+  outline-color: var(--stateColors-skeleton);
+}
 .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);
@@ -1661,6 +1766,10 @@ video {
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
+.drop-shadow-\[0_3px_1px_0_rgba\(0\2c 0\2c 0\2c 1\)\] {
+  --tw-drop-shadow: drop-shadow(0 3px 1px 0 rgba(0,0,0,1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1690,6 +1799,12 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 @keyframes enter {
 
   from {
@@ -1710,15 +1825,12 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar *::-webkit-scrollbar {
-    display: none;
-  }
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar * {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+.duration-500 {
+  animation-duration: 500ms;
+}
+.ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 .container {
     padding-right: 16px;
     padding-left: 16px;
@@ -1751,12 +1863,40 @@ video {
 .placeholder\:text-textColors-secondaryColor::placeholder {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+.placeholder-shown\:\!truncate:-moz-placeholder-shown {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+.placeholder-shown\:\!truncate:placeholder-shown {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
 .placeholder-shown\:p-4:-moz-placeholder-shown {
   padding: 1rem;
 }
 .placeholder-shown\:p-4:placeholder-shown {
   padding: 1rem;
 }
+.placeholder-shown\:text-textColors-secondaryColor:-moz-placeholder-shown {
+  color: var(--textColors-secondaryColor, #727272ff);
+}
+.placeholder-shown\:text-textColors-secondaryColor:placeholder-shown {
+  color: var(--textColors-secondaryColor, #727272ff);
+}
+.focus-within\:\!border-stateColors-error:focus-within {
+  border-color: var(--stateColors-error) !important;
+}
+.focus-within\:border-coreColors-brandColorPrimary:focus-within {
+  border-color: var(--coreColors-brandColorPrimary);
+}
+.hover\:h-\[18px\]:hover {
+  height: 18px;
+}
+.hover\:w-\[18px\]:hover {
+  width: 18px;
+}
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
@@ -1778,6 +1918,9 @@ video {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+.hover\:\!line-through:hover {
+  text-decoration-line: line-through !important;
+}
 .focus\:border-coreColors-brandColorPrimary:focus {
   border-color: var(--coreColors-brandColorPrimary);
 }
@@ -1861,8 +2004,8 @@ video {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
-.disabled\:outline-stateColors-disabled:disabled {
-  outline-color: var(--stateColors-disabled);
+.disabled\:opacity-70:disabled {
+  opacity: 0.7;
 }
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
@@ -1918,8 +2061,8 @@ video {
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
-.data-\[state\=checked\]\:translate-x-5[data-state=checked] {
-  --tw-translate-x: 1.25rem;
+.data-\[state\=checked\]\:translate-x-6[data-state=checked] {
+  --tw-translate-x: 1.5rem;
   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));
 }
 .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
@@ -1964,14 +2107,14 @@ video {
 .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
   animation: accordion-down 0.2s ease-out;
 }
-.data-\[state\=checked\]\:bg-primary[data-state=checked] {
-  background-color: hsl(var(--primary));
+.data-\[state\=checked\]\:bg-stateColors-success[data-state=checked] {
+  background-color: var(--stateColors-success);
 }
 .data-\[state\=on\]\:bg-accent[data-state=on] {
   background-color: hsl(var(--accent));
 }
-.data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
-  background-color: hsl(var(--input));
+.data-\[state\=unchecked\]\:bg-stateColors-disabled[data-state=unchecked] {
+  background-color: var(--stateColors-disabled);
 }
 .data-\[icon\=true\]\:pr-10[data-icon=true] {
   padding-right: 2.5rem;
@@ -2063,7 +2206,7 @@ video {
 .data-\[state\=open\]\:duration-500[data-state=open] {
   animation-duration: 500ms;
 }
-.dark\:bg-neutral-900:is(.dark *) {
+:is(.dark .dark\:bg-neutral-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
@@ -2107,18 +2250,8 @@ video {
 .\[\&\>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);
+.\[\&\>div\]\:w-full>div {
+  width: 100%;
 }
 .\[\&\>p\]\:text-stateColors-disabled>p {
   color: var(--stateColors-disabled);
@@ -2132,9 +2265,6 @@ video {
 .\[\&\>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\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
   outline-color: var(--coreColors-brandColorPrimary);
 }
@@ -2155,30 +2285,26 @@ video {
 .\[\&_\*\]\:text-coreColors-pageColor * {
   color: var(--coreColors-pageColor);
 }
+.\[\&_\*\]\:text-stateColors-error * {
+  color: var(--stateColors-error);
+}
 .\[\&_\*\]\: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);
+.\[\&_\*\]\:placeholder\:text-stateColors-error *::-moz-placeholder {
+  color: var(--stateColors-error);
 }
-.\[\&_svg\]\:text-buttonColors-secondaryText svg {
-  color: var(--buttonColors-secondaryText);
+.\[\&_\*\]\:placeholder\:text-stateColors-error *::placeholder {
+  color: var(--stateColors-error);
 }
-.\[\&_svg\]\:text-coreColors-pageColor svg {
-  color: var(--coreColors-pageColor);
+.\[\&_label\]\:focus-within\:\!text-stateColors-error:focus-within label {
+  color: var(--stateColors-error) !important;
 }
-.\[\&_svg\]\:text-textColors-primaryColor svg {
-  color: var(--textColors-primaryColor, #121212ff);
+.\[\&_label\]\:focus-within\:text-coreColors-brandColorPrimary:focus-within label {
+  color: var(--coreColors-brandColorPrimary);
 }
-.hover\:\[\&_svg\]\:text-accent-foreground svg:hover {
-  color: hsl(var(--accent-foreground));
+.\[\&_p\]\:text-stateColors-disabled p {
+  color: var(--stateColors-disabled);
 }
 .active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
   color: var(--stateColors-favorites);