@tapcart/mobile-components 0.14.6 → 0.15.1

package/dist/index.js

@@ -10,6 +10,7 @@ export * from "./components/hooks/use-infinite-scroll";
 export * from "./components/hooks/swr-retry";
 export * from "./components/hooks/use-infinite-wishlist";
 export * from "./components/hooks/use-recommendations";
+export * from "./components/hooks/use-search-analytics-open-product";
 export * from "./components/hooks/use-products";
 export * from "./components/hooks/use-personalized-cluster-feed";
 export * from "./components/hooks/use-order-details";

package/dist/styles.css

@@ -1829,6 +1829,9 @@ video {
 .gap-0 {
   gap: 0px;
 }
+.gap-0\.5 {
+  gap: 0.125rem;
+}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -2447,10 +2450,18 @@ video {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+.py-\[10px\] {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2642,6 +2653,9 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-5 {
+  line-height: 1.25rem;
+}
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -2675,6 +2689,9 @@ video {
 .leading-\[28px\] {
   line-height: 28px;
 }
+.leading-\[31px\] {
+  line-height: 31px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -3253,301 +3270,320 @@ body::-webkit-scrollbar {
   );
 }
 
+/**
+ * Frame-relative inset model — canonical --tc-* web API.
+ *
+ * The RN shell injects the frame-relative primitives (--tc-safe-*, --tc-bar-*,
+ * --tc-cutout-*) onto document.documentElement; this block derives the
+ * --tc-content-* clearance the app/blocks consume. Mirrors the reference
+ * implementation in tapcart-react-native's inset-harness/harness-page.ts.
+ *
+ * Backward compatibility: the existing --rn-* variables are NOT removed. Each
+ * source falls back to the legacy env()/--rn-* chain and is overridden only
+ * when the shell actually injects the matching --tc-* value (an explicit 0px in
+ * the inset regime counts as present and wins). Older app versions in the field
+ * keep working unchanged.
+ *
+ * Composition rule: every inset is an absolute distance from one edge, so we
+ * combine with max() (never +/-) and overlapping insets (a bar covering the
+ * home indicator) dedupe instead of double-counting.
+ */
+
+/* SLIM SCOPE — bottom-overlay iOS adapter only. Top-edge, cutout, generalized
+   --tc-content-* / drawer vars and their Tailwind utilities are deferred to
+   Insets V2 (they had zero consumers). Everything here is inert unless the
+   shell reports an overlay bottom bar (.tc-glass; see the gated block below). */
+
+/* --tc-bar-bottom is @property-registered so the hide-on-scroll bar collapse
+   animates smoothly (300ms native bar). */
+@property --tc-bar-bottom {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+:root {
+  /* Prefers the shell's new --tc-safe-bottom (incl. explicit 0 in the inset
+     regime) and falls back to the legacy env()/--rn-* chain when absent. */
+  --tc-safe-bottom-eff: var(
+    --tc-safe-bottom,
+    max(env(safe-area-inset-bottom), var(--rn-safe-area-inset-bottom, 0px))
+  );
+
+  /* Bar footprint. --tc-bar-bottom is @property-registered (for the
+     hide-on-scroll transition), so it always carries a value (initial 0px) and
+     a var() fallback would never fire; we fold the legacy
+     --rn-tabbar-bottom-inset in with max(). They do NOT share a datum: the new
+     --tc-bar-bottom is a frame-relative footprint (spans the region over the
+     safe area), while the legacy --rn-tabbar-bottom-inset is the bar
+     obstruction ABOVE the safe area. max() picks the larger; on older shells
+     (no --tc-bar-bottom) the legacy value wins. */
+  --tc-bar-bottom-eff: max(
+    var(--tc-bar-bottom, 0px),
+    var(--rn-tabbar-bottom-inset, 0px)
+  );
+
+  /* Inert by default: only the gated iOS-glass block below turns these on. */
+  --tc-frame-bottom: 0px;
+  --tc-frame-bottom-gated: 0px;
+}
+
+/* The bootstrap adds this class two frames AFTER the shell's first explicit bar
+   geometry has painted. So the initial value lands settled (no slide-in on load)
+   and only later hide-on-scroll show/hide updates animate the 300ms collapse. */
+:root.tc-inset-transitions-ready {
+  transition: --tc-bar-bottom 300ms ease-out;
+}
+
+/* iOS Liquid Glass / hide-on-scroll is the overlay regime this rollout
+   supports. The root-layout bootstrap sets tc-platform-ios before #tc-vgsl is
+   parsed, and adds .tc-glass ONLY when the shell reports glass geometry
+   (--tc-bar-bottom-glass). Gating the derivation on .tc-glass keeps every
+   non-glass shell — legacy pre-v21.3 AND 21.3+ with glass disabled — on the
+   pre-PR path: --tc-frame-bottom stays 0, so the FixedBlock lift collapses,
+   #tc-vgsl's gated leg stays 0, and the legacy bridge owns layout unchanged.
+   The raw, fallback-less --tc-safe-bottom additionally keeps the gated property
+   IACVT-invalid on pre-v21.3 iOS shells. */
+:root.tc-platform-ios.tc-glass {
+  --tc-frame-bottom: max(var(--tc-bar-bottom-eff), var(--tc-safe-bottom-eff));
+  --tc-frame-bottom-gated: max(
+    var(--tc-safe-bottom),
+    var(--tc-bar-bottom, 0px)
+  );
+}
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
-
 .file\:bg-transparent::file-selector-button {
   background-color: transparent;
 }
-
 .file\:text-sm::file-selector-button {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-
 .file\:font-medium::file-selector-button {
   font-weight: 500;
 }
-
 .placeholder\:text-stateColors-error::-moz-placeholder {
   color: var(--stateColors-error);
 }
-
 .placeholder\:text-stateColors-error::placeholder {
   color: var(--stateColors-error);
 }
-
 .placeholder\:text-textColors-secondaryColor::-moz-placeholder {
   color: var(--textColors-secondaryColor, #727272ff);
 }
-
 .placeholder\:text-textColors-secondaryColor::placeholder {
   color: var(--textColors-secondaryColor, #727272ff);
 }
-
 .first\:rounded-l-md:first-child {
   border-top-left-radius: calc(var(--radius) - 2px);
   border-bottom-left-radius: calc(var(--radius) - 2px);
 }
-
 .first\:border-l:first-child {
   border-left-width: 1px;
 }
-
 .last\:rounded-r-md:last-child {
   border-top-right-radius: calc(var(--radius) - 2px);
   border-bottom-right-radius: calc(var(--radius) - 2px);
 }
-
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
-
 .placeholder-shown\:\!truncate:-moz-placeholder {
   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 {
   padding: 1rem;
 }
-
 .placeholder-shown\:p-4:placeholder-shown {
   padding: 1rem;
 }
-
 .placeholder-shown\:text-textColors-secondaryColor:-moz-placeholder {
   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);
 }
-
 .focus\:border-coreColors-brandColorPrimary:focus {
   border-color: var(--coreColors-brandColorPrimary);
 }
-
 .focus\:border-stateColors-error:focus {
   border-color: var(--stateColors-error);
 }
-
 .focus\:bg-stateColors-skeleton:focus {
   background-color: var(--stateColors-skeleton);
 }
-
 .focus\:opacity-100:focus {
   opacity: 1;
 }
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-
 .focus\:ring-2:focus {
   --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
+.focus\:ring-current:focus {
+  --tw-ring-color: currentColor;
+}
 .focus\:ring-ring:focus {
   --tw-ring-color: hsl(var(--ring));
 }
-
 .focus\:ring-white:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
 }
-
+.focus\:ring-offset-1:focus {
+  --tw-ring-offset-width: 1px;
+}
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
-
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-
 .focus-visible\:ring-0:focus-visible {
   --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);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 .focus-visible\:ring-2:focus-visible {
   --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--ring));
 }
-
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
-
 .focus-visible\:ring-offset-background:focus-visible {
   --tw-ring-offset-color: hsl(var(--background));
 }
-
 .active\:bg-black\/10:active {
   background-color: rgb(0 0 0 / 0.1);
 }
-
 .active\:text-coreColors-brandColorPrimary:active {
   color: var(--coreColors-brandColorPrimary);
 }
-
 .active\:outline-coreColors-brandColorPrimary:active {
   outline-color: var(--coreColors-brandColorPrimary);
 }
-
 .active\:outline-transparent:active {
   outline-color: transparent;
 }
-
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
-
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-
 .disabled\:border-stateColors-disabled:disabled {
   border-color: var(--stateColors-disabled);
 }
-
 .disabled\:bg-buttonColors-secondaryFill:disabled {
   background-color: var(--buttonColors-secondaryFill);
 }
-
 .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);
 }
-
 .disabled\:opacity-40:disabled {
   opacity: 0.4;
 }
-
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
-
 .disabled\:opacity-60:disabled {
   opacity: 0.6;
 }
-
 .disabled\:opacity-70:disabled {
   opacity: 0.7;
 }
-
 .group:active .group-active\:text-coreColors-brandColorPrimary {
   color: var(--coreColors-brandColorPrimary);
 }
-
 .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);
 }
-
 .group.destructive .group-\[\.destructive\]\:text-red-300 {
   --tw-text-opacity: 1;
   color: rgb(252 165 165 / var(--tw-text-opacity, 1));
 }
-
 .group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
   --tw-ring-color: hsl(var(--destructive));
 }
-
 .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
 }
-
 .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
   --tw-ring-offset-color: #dc2626;
 }
-
 .peer:-moz-placeholder ~ .peer-placeholder-shown\:opacity-0 {
   opacity: 0;
 }
-
 .peer:placeholder-shown ~ .peer-placeholder-shown\:opacity-0 {
   opacity: 0;
 }
-
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
-
 .peer:disabled ~ .peer-disabled\:opacity-70 {
   opacity: 0.7;
 }
-
 .has-\[\:disabled\]\:opacity-50:has(:disabled) {
   opacity: 0.5;
 }
-
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
-
 .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"] {
   --tw-translate-x: 0px;
   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-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
   --tw-translate-x: 0px;
   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-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
   --tw-translate-x: var(--radix-toast-swipe-end-x);
   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-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   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));
 }
-
 @keyframes accordion-up {
 
   from {
@@ -3558,11 +3594,9 @@ body::-webkit-scrollbar {
     height: 0;
   }
 }
-
 .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
   animation: accordion-up 0.2s ease-out;
 }
-
 @keyframes accordion-down {
 
   from {
@@ -3573,43 +3607,33 @@ body::-webkit-scrollbar {
     height: var(--radix-accordion-content-height);
   }
 }
-
 .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
   animation: accordion-down 0.2s ease-out;
 }
-
 .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-stateColors-disabled[data-state="unchecked"] {
   background-color: var(--stateColors-disabled);
 }
-
 .data-\[icon\=true\]\:pr-10[data-icon="true"] {
   padding-right: 2.5rem;
 }
-
 .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
   color: hsl(var(--accent-foreground));
 }
-
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
-
 .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;
@@ -3619,7 +3643,6 @@ body::-webkit-scrollbar {
   --tw-enter-translate-x: initial;
   --tw-enter-translate-y: initial;
 }
-
 .data-\[state\=closed\]\:animate-out[data-state="closed"] {
   animation-name: exit;
   animation-duration: 150ms;
@@ -3629,7 +3652,6 @@ body::-webkit-scrollbar {
   --tw-exit-translate-x: initial;
   --tw-exit-translate-y: initial;
 }
-
 .data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
   animation-name: exit;
   animation-duration: 150ms;
@@ -3639,67 +3661,51 @@ body::-webkit-scrollbar {
   --tw-exit-translate-x: initial;
   --tw-exit-translate-y: initial;
 }
-
 .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
   --tw-exit-opacity: 0;
 }
-
 .data-\[state\=open\]\:fade-in-0[data-state="open"] {
   --tw-enter-opacity: 0;
 }
-
 .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
   --tw-exit-scale: .95;
 }
-
 .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
   --tw-enter-scale: .95;
 }
-
 .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
   --tw-enter-translate-y: -0.5rem;
 }
-
 .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
   --tw-enter-translate-x: 0.5rem;
 }
-
 .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
   --tw-enter-translate-x: -0.5rem;
 }
-
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
   --tw-enter-translate-y: 0.5rem;
 }
-
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
   --tw-exit-translate-x: -50%;
 }
-
 .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%;
 }
-
 .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
   --tw-enter-translate-y: -48%;
 }
-
 .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\:mt-0 {
@@ -3728,128 +3734,100 @@ body::-webkit-scrollbar {
     text-align: left;
   }
 }
-
 .\[\&\+label\]\:text-stateColors-error+label {
   color: var(--stateColors-error);
 }
-
 .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
   display: none;
 }
-
 .\[\&\>b\]\:py-2>b {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-
 .\[\&\>div\>button\]\:border-coreColors-brandColorPrimary>div>button {
   border-color: var(--coreColors-brandColorPrimary);
 }
-
 .\[\&\>div\]\:w-full>div {
   width: 100%;
 }
-
 .\[\&\>ol\]\:list-decimal>ol {
   list-style-type: decimal;
 }
-
 .\[\&\>p\]\:py-2>p {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-
 .\[\&\>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;
 }
-
 .\[\&\>span\]\:line-clamp-1>span {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
-
 .\[\&\>ul\>li\]\:py-1>ul>li {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-
 .\[\&\>ul\]\:list-disc>ul {
   list-style-type: disc;
 }
-
 .\[\&\>ul\]\:pl-5>ul {
   padding-left: 1.25rem;
 }
-
 .\[\&\[data-state\=open\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
   outline-color: var(--coreColors-brandColorPrimary);
 }
-
 .\[\&\[data-state\=open\]_\.chevron-icon\]\:rotate-180[data-state=open] .chevron-icon {
   --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));
 }
-
 .\[\&\[data-state\=open\]_\.label\]\:text-coreColors-brandColorPrimary[data-state=open] .label {
   color: var(--coreColors-brandColorPrimary);
 }
-
 .\[\&\[data-state\=open\]_\.label\]\:text-textColors-secondaryColor[data-state=open] .label {
   color: var(--textColors-secondaryColor, #727272ff);
 }
-
 .\[\&\[data-state\=open\]_\.rightIcon\]\:rotate-90[data-state=open] .rightIcon {
   --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));
 }
-
 .\[\&\[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-stateColors-error * {
   color: var(--stateColors-error);
 }
-
 .\[\&_\*\]\:text-textColors-primaryColor * {
   color: var(--textColors-primaryColor, #121212ff);
 }
-
 .\[\&_\*\]\:placeholder\:text-stateColors-error *::-moz-placeholder {
   color: var(--stateColors-error);
 }
-
 .\[\&_\*\]\:placeholder\:text-stateColors-error *::placeholder {
   color: var(--stateColors-error);
 }
-
 .\[\&_label\]\:focus-within\:\!text-stateColors-error:focus-within label {
   color: var(--stateColors-error) !important;
 }
-
 .\[\&_label\]\:focus-within\:text-coreColors-brandColorPrimary:focus-within label {
   color: var(--coreColors-brandColorPrimary);
 }
-
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }
+