css-drawer 0.3.1 → 0.4.0

package/dist/{observer-CtfG4nrq.css → style.css}

@@ -1,94 +1,73 @@
-/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */
-
 :root {
-  /* Visual */
   --drawer-bg: #fff;
   --drawer-radius: 24px;
-  --drawer-backdrop: hsl(0 0% 0% / 0.4);
+  --drawer-backdrop: #0006;
   --drawer-backdrop-blur: 4px;
-
-  /* Sizing */
   --drawer-max-height: 96dvh;
   --drawer-modal-width: fit-content;
   --drawer-modal-height: fit-content;
-
-  /* Handle */
-  --drawer-handle-bg: hsl(0 0% 80%);
-  --drawer-handle-bg-hover: hsl(0 0% 60%);
+  --drawer-handle-bg: #ccc;
+  --drawer-handle-bg-hover: #999;
   --drawer-handle-width: 48px;
   --drawer-handle-width-hover: 56px;
   --drawer-handle-height: 5px;
-  --drawer-handle-padding-block: 1rem 0.5rem;
+  --drawer-handle-padding-block: 1rem .5rem;
   --drawer-handle-padding-inline: 0;
-
-  /* Shadows */
-  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);
-  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);
-  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);
-  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);
-  --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
-
-  /* Animation */
-  --drawer-duration: 0.5s;
-  --drawer-duration-close: 0.35s;
-  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
-
-  /* Nesting effects */
-  --drawer-nested-scale: 0.94;
+  --drawer-shadow-bottom: 0 -10px 60px #0000001f, 0 -4px 20px #00000014;
+  --drawer-shadow-top: 0 10px 60px #0000001f, 0 4px 20px #00000014;
+  --drawer-shadow-right: -10px 0 60px #0000001f, -4px 0 20px #00000014;
+  --drawer-shadow-left: 10px 0 60px #0000001f, 4px 0 20px #00000014;
+  --drawer-shadow-modal: 0 25px 50px -12px #00000040;
+  --drawer-duration: .5s;
+  --drawer-duration-close: .35s;
+  --drawer-ease: cubic-bezier(.32, .72, 0, 1);
+  --drawer-nested-scale: .94;
   --drawer-nested-offset: 20px;
-  --drawer-nested-brightness: 0.92;
-  --drawer-nested-backdrop: hsl(0 0% 0% / 0.15);
+  --drawer-nested-brightness: .92;
+  --drawer-nested-backdrop: #00000026;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --drawer-bg: hsl(0 0% 12%);
-    --drawer-handle-bg: hsl(0 0% 35%);
-    --drawer-handle-bg-hover: hsl(0 0% 50%);
-    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);
-    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);
-    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);
-    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);
-    --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
+    --drawer-bg: #1f1f1f;
+    --drawer-handle-bg: #595959;
+    --drawer-handle-bg-hover: gray;
+    --drawer-shadow-bottom: 0 -10px 60px #0006, 0 -4px 20px #0000004d;
+    --drawer-shadow-top: 0 10px 60px #0006, 0 4px 20px #0000004d;
+    --drawer-shadow-right: -10px 0 60px #0006, -4px 0 20px #0000004d;
+    --drawer-shadow-left: 10px 0 60px #0006, 4px 0 20px #0000004d;
+    --drawer-shadow-modal: 0 25px 50px -12px #00000080;
   }
 }
 
-/* Background scale effect */
 body {
   transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);
-  transform-origin: center top;
+  transform-origin: top;
 }
 
 body:has(.drawer[open]) {
-  overflow: hidden;
   scale: var(--drawer-nested-scale);
   border-radius: var(--drawer-radius);
 }
 
-/* Base drawer */
+body:has(.drawer[open]:not([data-scroll-lock="false"])) {
+  overflow: hidden;
+}
+
 .drawer {
-  border: none;
-  padding: 0;
-  margin: 0;
-  max-width: 100%;
-  max-height: 100%;
-  position: fixed;
   background: var(--drawer-bg);
-  overflow: hidden;
   opacity: 0;
-  transition:
-    display var(--drawer-duration-close) allow-discrete,
+  max-width: 100%;
+  max-height: 100%;
+  transition: display var(--drawer-duration-close) allow-discrete,
     overlay var(--drawer-duration-close) allow-discrete,
     translate var(--drawer-duration-close) var(--drawer-ease),
     scale var(--drawer-duration-close) var(--drawer-ease),
     filter var(--drawer-duration-close) ease,
     opacity var(--drawer-duration-close) ease;
-
-  /* Default: bottom */
   --_translate-closed: 0 100%;
   --_border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
-  inset: auto 0 0 0;
-  margin-inline: auto;
+  margin: 0;
   width: var(--drawer-width, 100%);
   max-width: var(--drawer-max-width, none);
   height: var(--drawer-height, auto);
@@ -96,94 +75,97 @@ body:has(.drawer[open]) {
   border-radius: var(--drawer-border-radius, var(--_border-radius));
   box-shadow: var(--drawer-shadow-bottom);
   translate: var(--_translate-closed);
+  border: none;
+  margin-inline: auto;
+  padding: 0;
+  position: fixed;
+  inset: auto 0 0;
+  overflow: hidden;
 }
 
 .drawer::backdrop {
   background: var(--drawer-backdrop);
   opacity: 0;
-  backdrop-filter: blur(var(--drawer-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur));
-  transition:
-    display var(--drawer-duration-close) allow-discrete,
+  transition: display var(--drawer-duration-close) allow-discrete,
     overlay var(--drawer-duration-close) allow-discrete,
     opacity var(--drawer-duration-close) ease;
 }
 
 .drawer[open] {
   opacity: 1;
-  translate: 0 0;
-  transition:
-    display var(--drawer-duration) allow-discrete,
+  transition: display var(--drawer-duration) allow-discrete,
     overlay var(--drawer-duration) allow-discrete,
     translate var(--drawer-duration) var(--drawer-ease),
     scale var(--drawer-duration) var(--drawer-ease),
     filter var(--drawer-duration) ease,
-    opacity 0.15s ease;
+    opacity .15s ease;
+  translate: 0;
 }
 
 .drawer[open]::backdrop {
   opacity: 1;
-  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;
+  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity .2s ease;
 }
 
 @starting-style {
-  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }
-  .drawer[open]::backdrop { opacity: 0; }
-}
+  .drawer[open] {
+    opacity: 0;
+    translate: var(--_translate-closed);
+  }
 
-/* ===== DIRECTIONS ===== */
+  .drawer[open]::backdrop {
+    opacity: 0;
+  }
+}
 
-/* Right */
 .drawer[data-direction="right"] {
   --_translate-closed: 100% 0;
   --_border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
-  inset: 0 0 0 auto;
-  margin: 0;
   width: var(--drawer-width, 500px);
   max-width: var(--drawer-max-width, 90%);
   height: var(--drawer-height, 100dvh);
   max-height: 100dvh;
   box-shadow: var(--drawer-shadow-right);
+  margin: 0;
+  inset: 0 0 0 auto;
 }
 
-/* Left */
 .drawer[data-direction="left"] {
   --_translate-closed: -100% 0;
   --_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
-  inset: 0 auto 0 0;
-  margin: 0;
   width: var(--drawer-width, 500px);
   max-width: var(--drawer-max-width, 90%);
   height: var(--drawer-height, 100dvh);
   max-height: 100dvh;
   box-shadow: var(--drawer-shadow-left);
+  margin: 0;
+  inset: 0 auto 0 0;
 }
 
-/* Top */
 .drawer[data-direction="top"] {
   --_translate-closed: 0 -100%;
   --_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);
-  inset: 0 0 auto 0;
-  margin-inline: auto;
   width: var(--drawer-width, 100%);
   max-width: var(--drawer-max-width, none);
   height: var(--drawer-height, auto);
   max-height: var(--drawer-max-height, 96dvh);
   box-shadow: var(--drawer-shadow-top);
+  margin-inline: auto;
+  inset: 0 0 auto;
 }
 
-/* Modal (centered) */
 .drawer[data-direction="modal"] {
   --_translate-closed: 0 0;
   --_border-radius: var(--drawer-radius);
-  inset: 0;
-  margin: auto;
   width: var(--drawer-modal-width, fit-content);
   max-width: var(--drawer-max-width, 90%);
   height: var(--drawer-modal-height, fit-content);
   max-height: var(--drawer-max-height, 96dvh);
   box-shadow: var(--drawer-shadow-modal);
   scale: var(--drawer-nested-scale);
+  margin: auto;
+  inset: 0;
 }
 
 .drawer[data-direction="modal"][open] {
@@ -196,11 +178,7 @@ body:has(.drawer[open]) {
   }
 }
 
-/* ===== AUTO-NESTING (up to 5 levels) ===== */
-/* Uses sibling combinators to count open drawers */
-
-/* 1+ open drawers after */
-.drawer[open]:has(~ .drawer[open]) {
+.drawer[open]:has( ~ .drawer[open]) {
   scale: var(--drawer-nested-scale);
   translate: 0 calc(-1 * var(--drawer-nested-offset));
   border-radius: var(--drawer-radius);
@@ -208,125 +186,110 @@ body:has(.drawer[open]) {
   pointer-events: none;
 }
 
-/* 2+ open drawers after */
-.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {
+.drawer[open]:has( ~ .drawer[open] ~ .drawer[open]) {
   scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));
   translate: 0 calc(-2 * var(--drawer-nested-offset));
   filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
 }
 
-/* 3+ open drawers after */
-.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+.drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
   scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
   translate: 0 calc(-3 * var(--drawer-nested-offset));
   filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
 }
 
-/* 4+ open drawers after */
-.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+.drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
   scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
   translate: 0 calc(-4 * var(--drawer-nested-offset));
   filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
 }
 
-/* 5+ open drawers after */
-.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+.drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
   scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
   translate: 0 calc(-5 * var(--drawer-nested-offset));
   filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
 }
 
-/* Lighter backdrop for stacked drawers */
 .drawer[open] ~ .drawer[open]::backdrop {
   background: var(--drawer-nested-backdrop);
   backdrop-filter: none;
 }
 
-/* Handle */
 .drawer-handle {
-  display: flex;
-  justify-content: center;
   padding-block: var(--drawer-handle-padding-block);
   padding-inline: var(--drawer-handle-padding-inline);
   cursor: grab;
+  justify-content: center;
+  display: flex;
 }
 
-.drawer-handle::before {
-  content: '';
+.drawer-handle:before {
+  content: "";
   width: var(--drawer-handle-width);
   height: var(--drawer-handle-height);
   background: var(--drawer-handle-bg);
+  transition: width .2s var(--drawer-ease), height .2s var(--drawer-ease), background .2s ease;
   border-radius: 100px;
-  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;
 }
 
-.drawer-handle:hover::before {
+.drawer-handle:hover:before {
   width: var(--drawer-handle-width-hover);
   background: var(--drawer-handle-bg-hover);
 }
 
-/* Vertical handle for left/right drawers */
-.drawer[data-direction="left"] .drawer-handle,
-.drawer[data-direction="right"] .drawer-handle {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.drawer[data-direction="left"] .drawer-handle, .drawer[data-direction="right"] .drawer-handle {
   padding-block: var(--drawer-handle-padding-inline);
   padding-inline: var(--drawer-handle-padding-block);
+  writing-mode: vertical-lr;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   height: 100%;
   position: absolute;
   top: 0;
-  writing-mode: vertical-lr;
 }
 
-.drawer[data-direction="left"] .drawer-handle { right: 0; }
-.drawer[data-direction="right"] .drawer-handle { left: 0; }
+.drawer[data-direction="left"] .drawer-handle {
+  right: 0;
+}
+
+.drawer[data-direction="right"] .drawer-handle {
+  left: 0;
+}
 
-.drawer[data-direction="left"] .drawer-handle::before,
-.drawer[data-direction="right"] .drawer-handle::before {
+.drawer[data-direction="left"] .drawer-handle:before, .drawer[data-direction="right"] .drawer-handle:before {
   width: var(--drawer-handle-height);
   height: var(--drawer-handle-width);
 }
 
-.drawer[data-direction="left"] .drawer-handle:hover::before,
-.drawer[data-direction="right"] .drawer-handle:hover::before {
+.drawer[data-direction="left"] .drawer-handle:hover:before, .drawer[data-direction="right"] .drawer-handle:hover:before {
   width: var(--drawer-handle-height);
   height: var(--drawer-handle-width-hover);
 }
 
-/* Content - structural only, no opinionated padding */
 .drawer-content {
-  overflow-x: hidden;
-  overflow-y: auto;
   overscroll-behavior: contain;
   flex: 1;
   min-height: 0;
+  overflow: hidden auto;
 }
 
-/* Content sizing for directions */
-.drawer[data-direction="left"] .drawer-content,
-.drawer[data-direction="right"] .drawer-content {
+.drawer[data-direction="left"] .drawer-content, .drawer[data-direction="right"] .drawer-content {
   height: 100%;
 }
 
-/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    transition-duration: 0.01ms !important;
+  *, :before, :after {
+    transition-duration: .01ms !important;
   }
 
   body:has(.drawer[open]) {
     scale: 1;
   }
 
-  .drawer[open]:has(~ .drawer[open]),
-  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),
-  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
-  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
-  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
-    scale: 1;
-    translate: 0 0;
+  .drawer[open]:has( ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
     filter: none;
+    translate: 0;
+    scale: 1;
   }
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-drawer",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Vaul-quality drawer component using native <dialog> and pure CSS animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -47,12 +47,14 @@
     }
   },
   "devDependencies": {
-    "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
-    "@types/react": "^19.2.9",
+    "@tsdown/css": "^0.21.10",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.3",
-    "tsdown": "^0.18.4",
-    "typescript": "^5.9.3"
+    "happy-dom": "^20.9.0",
+    "react": "^19.2.5",
+    "tsdown": "^0.21.10",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7"
   },
   "keywords": [
     "drawer",
@@ -86,6 +88,8 @@
   ],
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch"
+    "dev": "tsdown --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/drawer.css

@@ -60,11 +60,16 @@ body {
 }
 
 body:has(.drawer[open]) {
-  overflow: hidden;
   scale: var(--drawer-nested-scale);
   border-radius: var(--drawer-radius);
 }
 
+/* Defense-in-depth for browsers without JS scroll lock; respects opt-out.
+   The JS scroll lock in scroll-lock.ts is the load-bearing fix on iOS Safari. */
+body:has(.drawer[open]:not([data-scroll-lock="false"])) {
+  overflow: hidden;
+}
+
 /* Base drawer */
 .drawer {
   border: none;

package/dist/observer-B-WjvsFU.cjs

@@ -1 +0,0 @@
-const e=`drawer:statechange`;let t=!1;function n(){if(typeof window>`u`||t)return;t=!0;let n=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let r of t)if(r.type===`attributes`&&r.attributeName===`open`&&r.target.classList.contains(`drawer`)){n(),window.dispatchEvent(new CustomEvent(e,{detail:{target:r.target}}));break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}n(),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});

package/dist/observer-DIOx0VCj.mjs

@@ -1,2 +0,0 @@
-const e=`drawer:statechange`;let t=!1;function n(){if(typeof window>`u`||t)return;t=!0;let n=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let r of t)if(r.type===`attributes`&&r.attributeName===`open`&&r.target.classList.contains(`drawer`)){n(),window.dispatchEvent(new CustomEvent(e,{detail:{target:r.target}}));break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}n();export{e as t};
-//# sourceMappingURL=observer-DIOx0VCj.mjs.map

package/dist/observer-DIOx0VCj.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"observer-DIOx0VCj.mjs","names":[],"sources":["../src/observer.ts"],"sourcesContent":["/**\n * Shared drawer state observer\n * Single MutationObserver that dispatches events for all drawer state changes\n */\n\nexport const DRAWER_STATE_CHANGE = 'drawer:statechange'\n\nlet initialized = false\n\nexport function initDrawerObserver(): void {\n  if (typeof window === 'undefined' || initialized) return\n  initialized = true\n\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      if (index === openDrawers.length - 1) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        window.dispatchEvent(new CustomEvent(DRAWER_STATE_CHANGE, {\n          detail: { target: mutation.target }\n        }))\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\n// Auto-initialize on import\ninitDrawerObserver()\n"],"mappings":"AAKA,MAAa,EAAsB,qBAEnC,IAAI,EAAc,GAElB,SAAgB,GAA2B,CACzC,GAAI,OAAO,OAAW,KAAe,EAAa,OAClD,EAAc,GAEd,IAAM,MAAyB,CAC7B,IAAM,EAAc,MAAM,KACxB,SAAS,iBAAoC,sBAAsB,CACpE,CACD,EAAY,SAAS,EAAQ,IAAU,CACjC,IAAU,EAAY,OAAS,EACjC,EAAO,gBAAgB,QAAQ,CAE/B,EAAO,aAAa,QAAS,GAAG,EAElC,EAGa,IAAI,iBAAkB,GAAc,CACnD,IAAK,IAAM,KAAY,EACrB,GACE,EAAS,OAAS,cAClB,EAAS,gBAAkB,QAC1B,EAAS,OAAuB,UAAU,SAAS,SAAS,CAC7D,CACA,GAAkB,CAClB,OAAO,cAAc,IAAI,YAAY,EAAqB,CACxD,OAAQ,CAAE,OAAQ,EAAS,OAAQ,CACpC,CAAC,CAAC,CACH,QAGJ,CAEO,QAAQ,SAAS,KAAM,CAC9B,QAAS,GACT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC1B,CAAC,CAIJ,GAAoB"}