qstd 0.3.11 → 0.3.13

package/dist/block/input.d.ts

@@ -18,15 +18,21 @@ export declare namespace RightSide {
 /**
  * Floating label for Input component.
  *
- * Style defaults can be overridden by passing the same props:
- * - Base styles: gridAutoFlow, position, top, transform, transition, ml, mr, px, py, br, color, lineHeight
- * - Conditional styles: _labelLifted (bg, top, color, transform, etc.)
+ * Style defaults can be overridden by passing the same props.
+ * For `_labelLifted`, partial overrides are merged with defaults.
+ *
+ * **`bg` cascades to lifted state:** If you set `bg`, it applies to both
+ * default and lifted states. Only specify `_labelLifted.bg` if you want
+ * a different background when lifted.
  *
  * @example
- * <Block.Input.Label
- *   bg={{ base: "white", _dark: "gray.900" }}
- *   _labelLifted={{ top: "-12px", bg: { base: "white", _dark: "gray.900" } }}
- * >
+ * // bg applies to both states
+ * <Block.Input.Label bg={{ base: "white", _dark: "gray.900" }}>
+ *   Email
+ * </Block.Input.Label>
+ *
+ * // Different lifted bg
+ * <Block.Input.Label bg="white" _labelLifted={{ bg: "blue.50" }}>
  *   Email
  * </Block.Input.Label>
  */

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/block/input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAU9B,KAAK,UAAU,GAAG;IAChB,KAAK,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,2CAgFtD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,2CAyBhD;yBAzBe,QAAQ;;;AA4BxB,wBAAgB,SAAS,CACvB,KAAK,EAAE,EAAE,CAAC,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,kDA4BnE;yBA7Be,SAAS;;;AAgCzB;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,UAAU,2CAsDvE;yBAtDe,KAAK"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/block/input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAU9B,KAAK,UAAU,GAAG;IAChB,KAAK,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,2CAgFtD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,2CAyBhD;yBAzBe,QAAQ;;;AA4BxB,wBAAgB,SAAS,CACvB,KAAK,EAAE,EAAE,CAAC,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,kDA4BnE;yBA7Be,SAAS;;;AAgCzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,UAAU,2CA0DvE;yBA1De,KAAK"}

package/dist/react/index.cjs

@@ -1219,40 +1219,6 @@ var omit = (obj, keys) => {
   }
   return result;
 };
-function deepMerge(...sources) {
-  const result = {};
-  for (const source of sources) {
-    if (!source) continue;
-    for (const [key, value] of Object.entries(source)) {
-      const existing = result[key];
-      if (typeof existing === "object" && existing !== null && !Array.isArray(existing) && typeof value === "object" && value !== null && !Array.isArray(value)) {
-        result[key] = deepMerge(
-          existing,
-          value
-        );
-      } else {
-        result[key] = value;
-      }
-    }
-  }
-  return result;
-}
-function mergeStyleDefaults(defaults2, props, nonStyleKeys) {
-  const styleProps = {};
-  const otherProps = {};
-  const nonStyleSet = new Set(
-    nonStyleKeys
-  );
-  for (const [key, value] of Object.entries(props)) {
-    if (nonStyleSet.has(key)) {
-      otherProps[key] = value;
-    } else if (value !== void 0) {
-      styleProps[key] = value;
-    }
-  }
-  const mergedStyles = deepMerge(defaults2, styleProps);
-  return { ...otherProps, ...mergedStyles };
-}
 var TrackNameKey = "Track";
 var ThumbNameKey = "Thumb";
 var Button = motionTags.button;
@@ -2266,40 +2232,50 @@ function Label2(props) {
     required,
     children,
     hasLeftIcon,
+    bg: consumerBg,
+    _labelLifted: consumerLabelLifted,
     onAnimationStart: _onAnimationStart,
     onAnimationComplete: _onAnimationComplete,
-    ...consumerProps
+    ...rest
   } = props;
   const ml = hasLeftIcon ? 6 : 1;
-  const styleDefaults = {
-    gridAutoFlow: "column",
-    position: "absolute",
-    pointerEvents: "none",
-    top: "50%",
+  const defaultLabelLifted = {
     transformOrigin: "top left",
-    transform: "translate(0, -50%) scale(1)",
-    transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
+    transform: "scale(0.8)",
+    top: "-10px",
     ml,
-    mr: 1,
-    px: 2,
-    py: 0.5,
-    br: 8,
-    color: error ? "text-alert" : "input-label-color",
-    lineHeight: 1.1,
-    _labelLifted: {
+    color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
+    bg: consumerBg ?? "input-label-bg"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Base4,
+    {
+      gridAutoFlow: "column",
+      position: "absolute",
+      pointerEvents: "none",
+      top: "50%",
       transformOrigin: "top left",
-      transform: "scale(0.8)",
-      top: "-10px",
+      transform: "translate(0, -50%) scale(1)",
+      transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
       ml,
-      color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
-      bg: "input-label-bg"
+      mr: 1,
+      px: 2,
+      py: 0.5,
+      br: 8,
+      color: error ? "text-alert" : "input-label-color",
+      lineHeight: 1.1,
+      bg: consumerBg,
+      ...rest,
+      _labelLifted: {
+        ...defaultLabelLifted,
+        ...consumerLabelLifted
+      },
+      children: [
+        children,
+        required && "*"
+      ]
     }
-  };
-  const mergedStyles = mergeStyleDefaults(styleDefaults, consumerProps, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Base4, { ...mergedStyles, children: [
-    children,
-    required && "*"
-  ] });
+  );
 }
 Label2.displayName = LabelNameKey2;
 function useResizeObserver(opts = {}) {

package/dist/react/index.css

@@ -889,11 +889,14 @@
   .rounded_50\% {
     border-radius: 50%;
   }
-  .bd-c_input-border-color-error {
-    border-color: var(--colors-input-border-color-error);
+  .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
+    transition:
+      200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      .2s color ease-in-out,
+      .2s background ease-in-out;
   }
-  .bd-c_input-border-color {
-    border-color: var(--colors-input-border-color);
+  .px_2 {
+    padding-inline: var(--spacing-2);
   }
   .py_0\.5 {
     padding-block: var(--spacing-0\.5);
@@ -901,6 +904,12 @@
   .rounded_8 {
     border-radius: 8px;
   }
+  .bd-c_input-border-color-error {
+    border-color: var(--colors-input-border-color-error);
+  }
+  .bd-c_input-border-color {
+    border-color: var(--colors-input-border-color);
+  }
   .ring_1px_solid_rgba\(208\,_58\,_58\,_0\.05\) {
     outline: 1px solid rgba(208, 58, 58, 0.05);
   }
@@ -934,15 +943,6 @@
   .trs_background-color_0\.2s_ease-in-out {
     transition: background-color 0.2s ease-in-out;
   }
-  .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
-    transition:
-      200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
-      .2s color ease-in-out,
-      .2s background ease-in-out;
-  }
-  .px_2 {
-    padding-inline: var(--spacing-2);
-  }
   .px_10px {
     padding-inline: 10px;
   }
@@ -1098,6 +1098,24 @@
   .trf_translateY\(-50\%\) {
     transform: translateY(-50%);
   }
+  .c_input-label-color {
+    color: var(--colors-input-label-color);
+  }
+  .grid-af_column {
+    grid-auto-flow: column;
+  }
+  .pointer-events_none {
+    pointer-events: none;
+  }
+  .trf-o_top_left {
+    transform-origin: top left;
+  }
+  .trf_translate\(0\,_-50\%\)_scale\(1\) {
+    transform: translate(0, -50%) scale(1);
+  }
+  .lh_1\.1 {
+    line-height: 1.1;
+  }
   .ring-c_input-outline-color-error {
     outline-color: var(--colors-input-outline-color-error);
   }
@@ -1128,9 +1146,6 @@
   .absolute_true {
     position: absolute;
   }
-  .pointer-events_none {
-    pointer-events: none;
-  }
   .bx-sh_0_0_0_6px_rgba\(0\,0\,0\,\.08\) {
     box-shadow: 0 0 0 6px rgba(0, 0, 0, .08);
   }
@@ -1180,18 +1195,9 @@
   .bx-s_content-box {
     box-sizing: content-box;
   }
-  .grid-af_column {
-    grid-auto-flow: column;
-  }
-  .trf-o_top_left {
-    transform-origin: top left;
-  }
   .trf_translate\(0\,_0\)_scale\(1\) {
     transform: translate(0, 0) scale(1);
   }
-  .c_input-label-color {
-    color: var(--colors-input-label-color);
-  }
   .resize_none {
     resize: none;
   }
@@ -1306,6 +1312,15 @@
   .right_11px {
     right: 11px;
   }
+  .ml_6 {
+    margin-left: var(--spacing-6);
+  }
+  .ml_1 {
+    margin-left: var(--spacing-1);
+  }
+  .mr_1 {
+    margin-right: var(--spacing-1);
+  }
   .pl_7 {
     padding-left: var(--spacing-7);
   }
@@ -1348,12 +1363,6 @@
   .top_1 {
     top: var(--spacing-1);
   }
-  .ml_1 {
-    margin-left: var(--spacing-1);
-  }
-  .mr_1 {
-    margin-right: var(--spacing-1);
-  }
   [data-theme=dark] .dark\:bg_neutral\.700 {
     background: var(--colors-neutral-700);
   }
@@ -1454,6 +1463,9 @@
   .active\:bg_neutral\.200:active:focus-visible:not(:disabled) {
     background: var(--colors-neutral-200);
   }
+  .labelLifted\:bg_input-label-bg:has(+ input:focus, + input:not(:placeholder-shown)) {
+    background: var(--colors-input-label-bg);
+  }
   .active\:bg_none:active:not(:disabled),
   .active\:bg_none:active:not(:focus-visible):not(:disabled),
   .active\:bg_none:active:focus-visible:not(:disabled) {
@@ -1475,6 +1487,21 @@
   .focus\:bx-sh_0_0_0_6px_hsl\(0_0\%_100\%_\/_0\.05\):is(:focus, [data-focus]) {
     box-shadow: 0 0 0 6px hsl(0 0% 100% / 0.05);
   }
+  .labelLifted\:c_input-label-color-lifted:has(+ input:focus, + input:not(:placeholder-shown)) {
+    color: var(--colors-input-label-color-lifted);
+  }
+  .labelLifted\:c_input-label-color:has(+ input:focus, + input:not(:placeholder-shown)) {
+    color: var(--colors-input-label-color);
+  }
+  .labelLifted\:c_text-alert:has(+ input:focus, + input:not(:placeholder-shown)) {
+    color: var(--colors-text-alert);
+  }
+  .labelLifted\:trf-o_top_left:has(+ input:focus, + input:not(:placeholder-shown)) {
+    transform-origin: top left;
+  }
+  .labelLifted\:trf_scale\(0\.8\):has(+ input:focus, + input:not(:placeholder-shown)) {
+    transform: scale(0.8);
+  }
   .active\:trf_none\!:active:not(:disabled),
   .active\:trf_none\!:active:not(:focus-visible):not(:disabled),
   .active\:trf_none\!:active:focus-visible:not(:disabled) {
@@ -1497,6 +1524,15 @@
   .\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:trf_scale\(0\.8\):has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
     transform: scale(0.8);
   }
+  .labelLifted\:ml_6:has(+ input:focus, + input:not(:placeholder-shown)) {
+    margin-left: var(--spacing-6);
+  }
+  .labelLifted\:ml_1:has(+ input:focus, + input:not(:placeholder-shown)) {
+    margin-left: var(--spacing-1);
+  }
+  .labelLifted\:top_-10px:has(+ input:focus, + input:not(:placeholder-shown)) {
+    top: -10px;
+  }
   .\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:top_-14px:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
     top: -14px;
   }

package/dist/react/index.js

@@ -1196,40 +1196,6 @@ var omit = (obj, keys) => {
   }
   return result;
 };
-function deepMerge(...sources) {
-  const result = {};
-  for (const source of sources) {
-    if (!source) continue;
-    for (const [key, value] of Object.entries(source)) {
-      const existing = result[key];
-      if (typeof existing === "object" && existing !== null && !Array.isArray(existing) && typeof value === "object" && value !== null && !Array.isArray(value)) {
-        result[key] = deepMerge(
-          existing,
-          value
-        );
-      } else {
-        result[key] = value;
-      }
-    }
-  }
-  return result;
-}
-function mergeStyleDefaults(defaults2, props, nonStyleKeys) {
-  const styleProps = {};
-  const otherProps = {};
-  const nonStyleSet = new Set(
-    nonStyleKeys
-  );
-  for (const [key, value] of Object.entries(props)) {
-    if (nonStyleSet.has(key)) {
-      otherProps[key] = value;
-    } else if (value !== void 0) {
-      styleProps[key] = value;
-    }
-  }
-  const mergedStyles = deepMerge(defaults2, styleProps);
-  return { ...otherProps, ...mergedStyles };
-}
 var TrackNameKey = "Track";
 var ThumbNameKey = "Thumb";
 var Button = motionTags.button;
@@ -2243,40 +2209,50 @@ function Label2(props) {
     required,
     children,
     hasLeftIcon,
+    bg: consumerBg,
+    _labelLifted: consumerLabelLifted,
     onAnimationStart: _onAnimationStart,
     onAnimationComplete: _onAnimationComplete,
-    ...consumerProps
+    ...rest
   } = props;
   const ml = hasLeftIcon ? 6 : 1;
-  const styleDefaults = {
-    gridAutoFlow: "column",
-    position: "absolute",
-    pointerEvents: "none",
-    top: "50%",
+  const defaultLabelLifted = {
     transformOrigin: "top left",
-    transform: "translate(0, -50%) scale(1)",
-    transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
+    transform: "scale(0.8)",
+    top: "-10px",
     ml,
-    mr: 1,
-    px: 2,
-    py: 0.5,
-    br: 8,
-    color: error ? "text-alert" : "input-label-color",
-    lineHeight: 1.1,
-    _labelLifted: {
+    color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
+    bg: consumerBg ?? "input-label-bg"
+  };
+  return /* @__PURE__ */ jsxs(
+    Base4,
+    {
+      gridAutoFlow: "column",
+      position: "absolute",
+      pointerEvents: "none",
+      top: "50%",
       transformOrigin: "top left",
-      transform: "scale(0.8)",
-      top: "-10px",
+      transform: "translate(0, -50%) scale(1)",
+      transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
       ml,
-      color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
-      bg: "input-label-bg"
+      mr: 1,
+      px: 2,
+      py: 0.5,
+      br: 8,
+      color: error ? "text-alert" : "input-label-color",
+      lineHeight: 1.1,
+      bg: consumerBg,
+      ...rest,
+      _labelLifted: {
+        ...defaultLabelLifted,
+        ...consumerLabelLifted
+      },
+      children: [
+        children,
+        required && "*"
+      ]
     }
-  };
-  const mergedStyles = mergeStyleDefaults(styleDefaults, consumerProps, []);
-  return /* @__PURE__ */ jsxs(Base4, { ...mergedStyles, children: [
-    children,
-    required && "*"
-  ] });
+  );
 }
 Label2.displayName = LabelNameKey2;
 function useResizeObserver(opts = {}) {

package/package.json

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

package/styled-system/styles.css

@@ -880,12 +880,12 @@
     border-radius: 50%;
 }
 
-  .bd-c_input-border-color-error {
-    border-color: var(--colors-input-border-color-error);
+  .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
+    transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out;
 }
 
-  .bd-c_input-border-color {
-    border-color: var(--colors-input-border-color);
+  .px_2 {
+    padding-inline: var(--spacing-2);
 }
 
   .py_0\.5 {
@@ -896,6 +896,14 @@
     border-radius: 8px;
 }
 
+  .bd-c_input-border-color-error {
+    border-color: var(--colors-input-border-color-error);
+}
+
+  .bd-c_input-border-color {
+    border-color: var(--colors-input-border-color);
+}
+
   .ring_1px_solid_rgba\(208\,_58\,_58\,_0\.05\) {
     outline: 1px solid rgba(208, 58, 58, 0.05);
 }
@@ -940,14 +948,6 @@
     transition: background-color 0.2s ease-in-out;
 }
 
-  .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
-    transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out;
-}
-
-  .px_2 {
-    padding-inline: var(--spacing-2);
-}
-
   .px_10px {
     padding-inline: 10px;
 }
@@ -1144,6 +1144,30 @@
     transform: translateY(-50%);
 }
 
+  .c_input-label-color {
+    color: var(--colors-input-label-color);
+}
+
+  .grid-af_column {
+    grid-auto-flow: column;
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
+  .trf-o_top_left {
+    transform-origin: top left;
+}
+
+  .trf_translate\(0\,_-50\%\)_scale\(1\) {
+    transform: translate(0, -50%) scale(1);
+}
+
+  .lh_1\.1 {
+    line-height: 1.1;
+}
+
   .ring-c_input-outline-color-error {
     outline-color: var(--colors-input-outline-color-error);
 }
@@ -1183,10 +1207,6 @@
     position: absolute;
 }
 
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .bx-sh_0_0_0_6px_rgba\(0\,0\,0\,\.08\) {
     box-shadow: 0 0 0 6px rgba(0,0,0,.08);
 }
@@ -1252,22 +1272,10 @@
     box-sizing: content-box;
 }
 
-  .grid-af_column {
-    grid-auto-flow: column;
-}
-
-  .trf-o_top_left {
-    transform-origin: top left;
-}
-
   .trf_translate\(0\,_0\)_scale\(1\) {
     transform: translate(0, 0) scale(1);
 }
 
-  .c_input-label-color {
-    color: var(--colors-input-label-color);
-}
-
   .resize_none {
     resize: none;
 }
@@ -1420,6 +1428,18 @@
     right: 11px;
 }
 
+  .ml_6 {
+    margin-left: var(--spacing-6);
+}
+
+  .ml_1 {
+    margin-left: var(--spacing-1);
+}
+
+  .mr_1 {
+    margin-right: var(--spacing-1);
+}
+
   .pl_7 {
     padding-left: var(--spacing-7);
 }
@@ -1476,14 +1496,6 @@
     top: var(--spacing-1);
 }
 
-  .ml_1 {
-    margin-left: var(--spacing-1);
-}
-
-  .mr_1 {
-    margin-right: var(--spacing-1);
-}
-
   [data-theme=dark] .dark\:bg_neutral\.700 {
     background: var(--colors-neutral-700);
 }
@@ -1604,6 +1616,10 @@
     background: var(--colors-neutral-200);
 }
 
+  .labelLifted\:bg_input-label-bg:has(+ input:focus, + input:not(:placeholder-shown)) {
+    background: var(--colors-input-label-bg);
+}
+
   .active\:bg_none:active:not(:disabled),.active\:bg_none:active:not(:focus-visible):not(:disabled),.active\:bg_none:active:focus-visible:not(:disabled) {
     background: none;
 }
@@ -1624,6 +1640,26 @@
     box-shadow: 0 0 0 6px hsl(0 0% 100% / 0.05);
 }
 
+  .labelLifted\:c_input-label-color-lifted:has(+ input:focus, + input:not(:placeholder-shown)) {
+    color: var(--colors-input-label-color-lifted);
+}
+
+  .labelLifted\:c_input-label-color:has(+ input:focus, + input:not(:placeholder-shown)) {
+    color: var(--colors-input-label-color);
+}
+
+  .labelLifted\:c_text-alert:has(+ input:focus, + input:not(:placeholder-shown)) {
+    color: var(--colors-text-alert);
+}
+
+  .labelLifted\:trf-o_top_left:has(+ input:focus, + input:not(:placeholder-shown)) {
+    transform-origin: top left;
+}
+
+  .labelLifted\:trf_scale\(0\.8\):has(+ input:focus, + input:not(:placeholder-shown)) {
+    transform: scale(0.8);
+}
+
   .active\:trf_none\!:active:not(:disabled),.active\:trf_none\!:active:not(:focus-visible):not(:disabled),.active\:trf_none\!:active:focus-visible:not(:disabled) {
     transform: none !important;
 }
@@ -1648,6 +1684,18 @@
     transform: scale(0.8);
 }
 
+  .labelLifted\:ml_6:has(+ input:focus, + input:not(:placeholder-shown)) {
+    margin-left: var(--spacing-6);
+}
+
+  .labelLifted\:ml_1:has(+ input:focus, + input:not(:placeholder-shown)) {
+    margin-left: var(--spacing-1);
+}
+
+  .labelLifted\:top_-10px:has(+ input:focus, + input:not(:placeholder-shown)) {
+    top: -10px;
+}
+
   .\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:top_-14px:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
     top: -14px;
 }