qstd 0.3.73 → 0.3.75

package/dist/block/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAia9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AA6a9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}

package/dist/react/index.cjs

@@ -2670,6 +2670,7 @@ var accordion_default = Accordion;
 var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
+var mobileOvershootCoverPx = 96;
 function requirePortalRootForDrawer() {
   if (typeof document === "undefined") {
     throw new Error(
@@ -2707,6 +2708,7 @@ function DrawerComponent(props) {
   const dragControls = framerMotion.useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
+  const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
   const [mounted, setMounted] = React3__namespace.default.useState(false);
   React3__namespace.default.useEffect(() => {
     setMounted(true);
@@ -2801,152 +2803,155 @@ function DrawerComponent(props) {
         initial: false,
         mode: "wait",
         onExitComplete,
-        children: open && /* @__PURE__ */ jsxRuntime.jsx(
+        children: open && /* @__PURE__ */ jsxRuntime.jsxs(
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              MotionDiv4,
-              {
-                grid: true,
-                onClick: (e) => e.stopPropagation(),
-                position: "fixed",
-                initial: "initial",
-                animate: "animate",
-                exit: "exit",
-                ...isDesktop ? {
-                  drag: false,
-                  style: void 0,
-                  dragControls: null,
-                  dragConstraints: void 0,
-                  // style: null,
-                  // dragConstraints: null,
-                  height: props.height ?? "max-content!",
-                  // "min(50%, 300px)",
-                  width: props.width ?? "clamp(50%, 700px, 90%)",
-                  pt: 6,
-                  // px: 4,
-                  margin: "auto",
-                  borderRadius: 12,
-                  zIndex: 1,
-                  variants: {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: {
-                      opacity: 1,
-                      scale: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 20,
-                        stiffness: 300
-                      }
-                    },
-                    exit: {
-                      opacity: 0,
-                      scale: 0.3,
-                      transition: { type: "spring", duration: 0.45 }
-                    }
-                  }
-                } : {
-                  w: "100vw",
+            children: [
+              !isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
+                MotionDiv4,
+                {
+                  fixed: true,
                   left: 0,
                   right: 0,
                   bottom: 0,
-                  borderTopLeftRadius: 12,
-                  borderTopRightRadius: 12,
-                  overflow: "hidden",
-                  // Extend background below viewport to cover spring overshoot bounce
-                  _after: {
-                    content: '""',
-                    position: "absolute",
+                  h: mobileOvershootCoverPx,
+                  pointerEvents: "none",
+                  bg: drawerBg
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MotionDiv4,
+                {
+                  grid: true,
+                  onClick: (e) => e.stopPropagation(),
+                  position: "fixed",
+                  initial: "initial",
+                  animate: "animate",
+                  exit: "exit",
+                  ...isDesktop ? {
+                    drag: false,
+                    style: void 0,
+                    dragControls: null,
+                    dragConstraints: void 0,
+                    // style: null,
+                    // dragConstraints: null,
+                    height: props.height ?? "max-content!",
+                    // "min(50%, 300px)",
+                    width: props.width ?? "clamp(50%, 700px, 90%)",
+                    pt: 6,
+                    // px: 4,
+                    margin: "auto",
+                    borderRadius: 12,
+                    zIndex: 1,
+                    variants: {
+                      initial: { opacity: 0, scale: 0.5 },
+                      animate: {
+                        opacity: 1,
+                        scale: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 20,
+                          stiffness: 300
+                        }
+                      },
+                      exit: {
+                        opacity: 0,
+                        scale: 0.3,
+                        transition: { type: "spring", duration: 0.45 }
+                      }
+                    }
+                  } : {
+                    w: "100vw",
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    height: 100,
-                    transform: "translateY(100%)",
-                    bg: "inherit"
-                  },
-                  // Note: Can't use framer-motion's `y` prop because it conflicts
-                  // with the drag motion value. Use CSS transform instead.
-                  variants: {
-                    initial: {
-                      transform: "translateY(100%)",
-                      opacity: 0.5
-                    },
-                    animate: {
-                      transform: "translateY(0%)",
-                      opacity: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 22,
-                        stiffness: 400,
-                        mass: 0.7
+                    borderTopLeftRadius: 12,
+                    borderTopRightRadius: 12,
+                    overflow: "hidden",
+                    // Note: Can't use framer-motion's `y` prop because it conflicts
+                    // with the drag motion value. Use CSS transform instead.
+                    variants: {
+                      initial: {
+                        transform: "translateY(100%)",
+                        opacity: 0.5
+                      },
+                      animate: {
+                        transform: "translateY(0%)",
+                        opacity: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 22,
+                          stiffness: 400,
+                          mass: 0.7
+                        }
+                      },
+                      exit: {
+                        transform: "translateY(100%)",
+                        opacity: 0,
+                        transition: {
+                          type: "tween",
+                          duration: 0.2,
+                          ease: [0.4, 0, 1, 1]
+                          // ease-in for quick exit
+                        }
                       }
                     },
-                    exit: {
-                      transform: "translateY(100%)",
-                      opacity: 0,
-                      transition: {
-                        type: "tween",
-                        duration: 0.2,
-                        ease: [0.4, 0, 1, 1]
-                        // ease-in for quick exit
+                    drag: "y",
+                    style: { y },
+                    dragControls,
+                    onPointerDown: (e) => onDragStart(e),
+                    //   drag={hasBackdrop ? "y" : false}
+                    dragElastic: 0,
+                    // prevent drawer from being dragged higher than what its opened to
+                    dragConstraints: { top: 0 },
+                    onDragEnd: (_, drag) => {
+                      if (props.drag === false) return;
+                      const pageHeight = document.documentElement.scrollHeight;
+                      const yCoord = drag.point.y;
+                      const velocity = drag.velocity.y;
+                      const releaseThreshold = 0.8;
+                      const releasePct = yCoord / pageHeight;
+                      if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                        props.onClose?.();
                       }
                     }
                   },
-                  drag: "y",
-                  style: { y },
-                  dragControls,
-                  onPointerDown: (e) => onDragStart(e),
-                  //   drag={hasBackdrop ? "y" : false}
-                  dragElastic: 0,
-                  // prevent drawer from being dragged higher than what its opened to
-                  dragConstraints: { top: 0 },
-                  onDragEnd: (_, drag) => {
-                    if (props.drag === false) return;
-                    const pageHeight = document.documentElement.scrollHeight;
-                    const yCoord = drag.point.y;
-                    const velocity = drag.velocity.y;
-                    const releaseThreshold = 0.8;
-                    const releasePct = yCoord / pageHeight;
-                    if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
-                      props.onClose?.();
+                  boxSizing: "border-box",
+                  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+                  bg: { base: "neutral.100", _dark: "neutral.900" },
+                  color: "text-primary",
+                  ref,
+                  ...rest,
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    MotionDiv4,
+                    {
+                      grid: true,
+                      ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
+                      children: [
+                        !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                          MotionDiv4,
+                          {
+                            grid: true,
+                            justifySelf: "center",
+                            h: 6,
+                            w: 34,
+                            mt: "16px",
+                            mb: 4,
+                            br: 20,
+                            bg: { base: "neutral.400", _dark: "neutral.600" },
+                            cursor: props.drag ? "row-resize" : "default",
+                            ref: dragHandleRef
+                          }
+                        ),
+                        props.children
+                      ]
                     }
-                  }
+                  )
                 },
-                boxSizing: "border-box",
-                boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
-                bg: { base: "neutral.100", _dark: "neutral.900" },
-                color: "text-primary",
-                ref,
-                ...rest,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  MotionDiv4,
-                  {
-                    grid: true,
-                    ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
-                    children: [
-                      !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsxRuntime.jsx(
-                        MotionDiv4,
-                        {
-                          grid: true,
-                          justifySelf: "center",
-                          h: 6,
-                          w: 34,
-                          mt: "16px",
-                          mb: 4,
-                          br: 20,
-                          bg: { base: "neutral.400", _dark: "neutral.600" },
-                          cursor: props.drag ? "row-resize" : "default",
-                          ref: dragHandleRef
-                        }
-                      ),
-                      props.children
-                    ]
-                  }
-                )
-              },
-              "drawer"
-            )
+                "drawer"
+              )
+            ]
           }
         )
       }

package/dist/react/index.css

@@ -996,6 +996,12 @@
   .stk-w_4 path {
     stroke-width: 4;
   }
+  .fixed_true {
+    position: fixed;
+  }
+  .pointer-events_none {
+    pointer-events: none;
+  }
   .pos_fixed {
     position: fixed;
   }
@@ -1109,9 +1115,6 @@
   .grid-af_column {
     grid-auto-flow: column;
   }
-  .pointer-events_none {
-    pointer-events: none;
-  }
   .trf-o_top_left {
     transform-origin: top left;
   }
@@ -1236,6 +1239,18 @@
   .w_100\% {
     width: 100%;
   }
+  .left_0 {
+    left: var(--spacing-0);
+  }
+  .right_0 {
+    right: var(--spacing-0);
+  }
+  .bottom_0 {
+    bottom: var(--spacing-0);
+  }
+  .h_96 {
+    height: 96px;
+  }
   .h_max-content\! {
     height: max-content !important;
   }
@@ -1248,15 +1263,6 @@
   .w_100vw {
     width: 100vw;
   }
-  .left_0 {
-    left: var(--spacing-0);
-  }
-  .right_0 {
-    right: var(--spacing-0);
-  }
-  .bottom_0 {
-    bottom: var(--spacing-0);
-  }
   .bdr-tl_12 {
     border-top-left-radius: 12px;
   }
@@ -1380,9 +1386,6 @@
   [data-theme=dark] .dark\:bg_neutral\.900 {
     background: var(--colors-neutral-900);
   }
-  .after\:bg_inherit::after {
-    background: inherit;
-  }
   [data-theme=dark] .dark\:bg_neutral\.600 {
     background: var(--colors-neutral-600);
   }
@@ -1422,9 +1425,6 @@
   .after\:pos_absolute::after {
     position: absolute;
   }
-  .after\:trf_translateY\(100\%\)::after {
-    transform: translateY(100%);
-  }
   .after\:scale_0::after {
     scale: 0;
   }
@@ -1466,18 +1466,6 @@
   .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-c_neutral\.300::-webkit-scrollbar-thumb {
     background-color: var(--colors-neutral-300);
   }
-  .after\:left_0::after {
-    left: var(--spacing-0);
-  }
-  .after\:right_0::after {
-    right: var(--spacing-0);
-  }
-  .after\:bottom_0::after {
-    bottom: var(--spacing-0);
-  }
-  .after\:h_100::after {
-    height: 100px;
-  }
   .\[\&\:\:-webkit-scrollbar\]\:h_6::-webkit-scrollbar {
     height: 6px;
   }

package/dist/react/index.js

@@ -2647,6 +2647,7 @@ var accordion_default = Accordion;
 var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
+var mobileOvershootCoverPx = 96;
 function requirePortalRootForDrawer() {
   if (typeof document === "undefined") {
     throw new Error(
@@ -2684,6 +2685,7 @@ function DrawerComponent(props) {
   const dragControls = useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
+  const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
   const [mounted, setMounted] = React3__default.useState(false);
   React3__default.useEffect(() => {
     setMounted(true);
@@ -2778,152 +2780,155 @@ function DrawerComponent(props) {
         initial: false,
         mode: "wait",
         onExitComplete,
-        children: open && /* @__PURE__ */ jsx(
+        children: open && /* @__PURE__ */ jsxs(
           Backdrop,
           {
             onClick: () => onBackdropClick(),
-            children: /* @__PURE__ */ jsx(
-              MotionDiv4,
-              {
-                grid: true,
-                onClick: (e) => e.stopPropagation(),
-                position: "fixed",
-                initial: "initial",
-                animate: "animate",
-                exit: "exit",
-                ...isDesktop ? {
-                  drag: false,
-                  style: void 0,
-                  dragControls: null,
-                  dragConstraints: void 0,
-                  // style: null,
-                  // dragConstraints: null,
-                  height: props.height ?? "max-content!",
-                  // "min(50%, 300px)",
-                  width: props.width ?? "clamp(50%, 700px, 90%)",
-                  pt: 6,
-                  // px: 4,
-                  margin: "auto",
-                  borderRadius: 12,
-                  zIndex: 1,
-                  variants: {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: {
-                      opacity: 1,
-                      scale: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 20,
-                        stiffness: 300
-                      }
-                    },
-                    exit: {
-                      opacity: 0,
-                      scale: 0.3,
-                      transition: { type: "spring", duration: 0.45 }
-                    }
-                  }
-                } : {
-                  w: "100vw",
+            children: [
+              !isDesktop && /* @__PURE__ */ jsx(
+                MotionDiv4,
+                {
+                  fixed: true,
                   left: 0,
                   right: 0,
                   bottom: 0,
-                  borderTopLeftRadius: 12,
-                  borderTopRightRadius: 12,
-                  overflow: "hidden",
-                  // Extend background below viewport to cover spring overshoot bounce
-                  _after: {
-                    content: '""',
-                    position: "absolute",
+                  h: mobileOvershootCoverPx,
+                  pointerEvents: "none",
+                  bg: drawerBg
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MotionDiv4,
+                {
+                  grid: true,
+                  onClick: (e) => e.stopPropagation(),
+                  position: "fixed",
+                  initial: "initial",
+                  animate: "animate",
+                  exit: "exit",
+                  ...isDesktop ? {
+                    drag: false,
+                    style: void 0,
+                    dragControls: null,
+                    dragConstraints: void 0,
+                    // style: null,
+                    // dragConstraints: null,
+                    height: props.height ?? "max-content!",
+                    // "min(50%, 300px)",
+                    width: props.width ?? "clamp(50%, 700px, 90%)",
+                    pt: 6,
+                    // px: 4,
+                    margin: "auto",
+                    borderRadius: 12,
+                    zIndex: 1,
+                    variants: {
+                      initial: { opacity: 0, scale: 0.5 },
+                      animate: {
+                        opacity: 1,
+                        scale: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 20,
+                          stiffness: 300
+                        }
+                      },
+                      exit: {
+                        opacity: 0,
+                        scale: 0.3,
+                        transition: { type: "spring", duration: 0.45 }
+                      }
+                    }
+                  } : {
+                    w: "100vw",
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    height: 100,
-                    transform: "translateY(100%)",
-                    bg: "inherit"
-                  },
-                  // Note: Can't use framer-motion's `y` prop because it conflicts
-                  // with the drag motion value. Use CSS transform instead.
-                  variants: {
-                    initial: {
-                      transform: "translateY(100%)",
-                      opacity: 0.5
-                    },
-                    animate: {
-                      transform: "translateY(0%)",
-                      opacity: 1,
-                      transition: {
-                        type: "spring",
-                        damping: 22,
-                        stiffness: 400,
-                        mass: 0.7
+                    borderTopLeftRadius: 12,
+                    borderTopRightRadius: 12,
+                    overflow: "hidden",
+                    // Note: Can't use framer-motion's `y` prop because it conflicts
+                    // with the drag motion value. Use CSS transform instead.
+                    variants: {
+                      initial: {
+                        transform: "translateY(100%)",
+                        opacity: 0.5
+                      },
+                      animate: {
+                        transform: "translateY(0%)",
+                        opacity: 1,
+                        transition: {
+                          type: "spring",
+                          damping: 22,
+                          stiffness: 400,
+                          mass: 0.7
+                        }
+                      },
+                      exit: {
+                        transform: "translateY(100%)",
+                        opacity: 0,
+                        transition: {
+                          type: "tween",
+                          duration: 0.2,
+                          ease: [0.4, 0, 1, 1]
+                          // ease-in for quick exit
+                        }
                       }
                     },
-                    exit: {
-                      transform: "translateY(100%)",
-                      opacity: 0,
-                      transition: {
-                        type: "tween",
-                        duration: 0.2,
-                        ease: [0.4, 0, 1, 1]
-                        // ease-in for quick exit
+                    drag: "y",
+                    style: { y },
+                    dragControls,
+                    onPointerDown: (e) => onDragStart(e),
+                    //   drag={hasBackdrop ? "y" : false}
+                    dragElastic: 0,
+                    // prevent drawer from being dragged higher than what its opened to
+                    dragConstraints: { top: 0 },
+                    onDragEnd: (_, drag) => {
+                      if (props.drag === false) return;
+                      const pageHeight = document.documentElement.scrollHeight;
+                      const yCoord = drag.point.y;
+                      const velocity = drag.velocity.y;
+                      const releaseThreshold = 0.8;
+                      const releasePct = yCoord / pageHeight;
+                      if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                        props.onClose?.();
                       }
                     }
                   },
-                  drag: "y",
-                  style: { y },
-                  dragControls,
-                  onPointerDown: (e) => onDragStart(e),
-                  //   drag={hasBackdrop ? "y" : false}
-                  dragElastic: 0,
-                  // prevent drawer from being dragged higher than what its opened to
-                  dragConstraints: { top: 0 },
-                  onDragEnd: (_, drag) => {
-                    if (props.drag === false) return;
-                    const pageHeight = document.documentElement.scrollHeight;
-                    const yCoord = drag.point.y;
-                    const velocity = drag.velocity.y;
-                    const releaseThreshold = 0.8;
-                    const releasePct = yCoord / pageHeight;
-                    if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
-                      props.onClose?.();
+                  boxSizing: "border-box",
+                  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+                  bg: { base: "neutral.100", _dark: "neutral.900" },
+                  color: "text-primary",
+                  ref,
+                  ...rest,
+                  children: /* @__PURE__ */ jsxs(
+                    MotionDiv4,
+                    {
+                      grid: true,
+                      ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
+                      children: [
+                        !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
+                          MotionDiv4,
+                          {
+                            grid: true,
+                            justifySelf: "center",
+                            h: 6,
+                            w: 34,
+                            mt: "16px",
+                            mb: 4,
+                            br: 20,
+                            bg: { base: "neutral.400", _dark: "neutral.600" },
+                            cursor: props.drag ? "row-resize" : "default",
+                            ref: dragHandleRef
+                          }
+                        ),
+                        props.children
+                      ]
                     }
-                  }
+                  )
                 },
-                boxSizing: "border-box",
-                boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
-                bg: { base: "neutral.100", _dark: "neutral.900" },
-                color: "text-primary",
-                ref,
-                ...rest,
-                children: /* @__PURE__ */ jsxs(
-                  MotionDiv4,
-                  {
-                    grid: true,
-                    ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
-                    children: [
-                      !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
-                        MotionDiv4,
-                        {
-                          grid: true,
-                          justifySelf: "center",
-                          h: 6,
-                          w: 34,
-                          mt: "16px",
-                          mb: 4,
-                          br: 20,
-                          bg: { base: "neutral.400", _dark: "neutral.600" },
-                          cursor: props.drag ? "row-resize" : "default",
-                          ref: dragHandleRef
-                        }
-                      ),
-                      props.children
-                    ]
-                  }
-                )
-              },
-              "drawer"
-            )
+                "drawer"
+              )
+            ]
           }
         )
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.3.73",
+  "version": "0.3.75",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",

package/styled-system/styles.css

@@ -1017,6 +1017,14 @@
     stroke-width: 4;
 }
 
+  .fixed_true {
+    position: fixed;
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
   .pos_fixed {
     position: fixed;
 }
@@ -1159,10 +1167,6 @@
     grid-auto-flow: column;
 }
 
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .trf-o_top_left {
     transform-origin: top left;
 }
@@ -1327,6 +1331,22 @@
     width: 100%;
 }
 
+  .left_0 {
+    left: var(--spacing-0);
+}
+
+  .right_0 {
+    right: var(--spacing-0);
+}
+
+  .bottom_0 {
+    bottom: var(--spacing-0);
+}
+
+  .h_96 {
+    height: 96px;
+}
+
   .h_max-content\! {
     height: max-content !important;
 }
@@ -1343,18 +1363,6 @@
     width: 100vw;
 }
 
-  .left_0 {
-    left: var(--spacing-0);
-}
-
-  .right_0 {
-    right: var(--spacing-0);
-}
-
-  .bottom_0 {
-    bottom: var(--spacing-0);
-}
-
   .bdr-tl_12 {
     border-top-left-radius: 12px;
 }
@@ -1519,10 +1527,6 @@
     background: var(--colors-neutral-900);
 }
 
-  .after\:bg_inherit::after {
-    background: inherit;
-}
-
   [data-theme=dark] .dark\:bg_neutral\.600 {
     background: var(--colors-neutral-600);
 }
@@ -1575,10 +1579,6 @@
     position: absolute;
 }
 
-  .after\:trf_translateY\(100\%\)::after {
-    transform: translateY(100%);
-}
-
   .after\:scale_0::after {
     scale: 0;
 }
@@ -1623,22 +1623,6 @@
     background-color: var(--colors-neutral-300);
 }
 
-  .after\:left_0::after {
-    left: var(--spacing-0);
-}
-
-  .after\:right_0::after {
-    right: var(--spacing-0);
-}
-
-  .after\:bottom_0::after {
-    bottom: var(--spacing-0);
-}
-
-  .after\:h_100::after {
-    height: 100px;
-}
-
   .\[\&\:\:-webkit-scrollbar\]\:h_6::-webkit-scrollbar {
     height: 6px;
 }