qstd 0.3.10 → 0.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1312,5 +1312,33 @@ export declare const getIcons: (extract: ReturnType<typeof extractElType>, anyPr
1312
1312
  rightIcon: string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
1313
1313
  };
1314
1314
  export declare const omit: <T extends object>(obj: T, keys: readonly string[]) => Partial<T>;
1315
+ /**
1316
+ * Merges default style props with consumer props, ensuring consumer values override defaults.
1317
+ *
1318
+ * This solves the PandaCSS atomic class collision problem where both default and consumer
1319
+ * conditional styles (like _hover, _labelLifted) would generate separate classes with
1320
+ * identical specificity, causing unpredictable cascade behavior.
1321
+ *
1322
+ * @param defaults - Default style props for the component
1323
+ * @param props - All props passed to the component
1324
+ * @param nonStyleKeys - Keys that are NOT style props (children, event handlers, etc.)
1325
+ * @returns Merged props with defaults applied, consumer overrides winning
1326
+ *
1327
+ * @example
1328
+ * const defaults = {
1329
+ * bg: "white",
1330
+ * _hover: { bg: "gray.100" },
1331
+ * _labelLifted: { top: "-10px", bg: "input-label-bg" }
1332
+ * };
1333
+ *
1334
+ * const { children, onClick, ...merged } = mergeStyleDefaults(
1335
+ * defaults,
1336
+ * props,
1337
+ * ["children", "onClick", "value"]
1338
+ * );
1339
+ *
1340
+ * return <Base {...merged}>{children}</Base>;
1341
+ */
1342
+ export declare function mergeStyleDefaults<T extends Record<string, unknown>, K extends keyof T>(defaults: Record<string, unknown>, props: T, nonStyleKeys: readonly K[]): T;
1315
1343
  export {};
1316
1344
  //# sourceMappingURL=fns.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"fns.d.ts","sourceRoot":"","sources":["../../src/block/fns.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"fns.d.ts","sourceRoot":"","sources":["../../src/block/fns.tsx"],"names":[],"mappings":"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"}
@@ -15,6 +15,21 @@ export declare function RightSide(props: _t.BaseBlockProps & {
15
15
  export declare namespace RightSide {
16
16
  var displayName: string;
17
17
  }
18
+ /**
19
+ * Floating label for Input component.
20
+ *
21
+ * Style defaults can be overridden by passing the same props:
22
+ * - Base styles: gridAutoFlow, position, top, transform, transition, ml, mr, px, py, br, color, lineHeight
23
+ * - Conditional styles: _labelLifted (bg, top, color, transform, etc.)
24
+ *
25
+ * @example
26
+ * <Block.Input.Label
27
+ * bg={{ base: "white", _dark: "gray.900" }}
28
+ * _labelLifted={{ top: "-12px", bg: { base: "white", _dark: "gray.900" } }}
29
+ * >
30
+ * Email
31
+ * </Block.Input.Label>
32
+ */
18
33
  export declare function Label(props: Omit<_t.InputBlockProps, "is"> & LabelProps): import("react/jsx-runtime").JSX.Element;
19
34
  export declare namespace Label {
20
35
  var displayName: string;
@@ -1 +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,wBAAgB,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,UAAU,2CA+CvE;yBA/Ce,KAAK"}
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"}
@@ -1219,6 +1219,40 @@ var omit = (obj, keys) => {
1219
1219
  }
1220
1220
  return result;
1221
1221
  };
1222
+ function deepMerge(...sources) {
1223
+ const result = {};
1224
+ for (const source of sources) {
1225
+ if (!source) continue;
1226
+ for (const [key, value] of Object.entries(source)) {
1227
+ const existing = result[key];
1228
+ if (typeof existing === "object" && existing !== null && !Array.isArray(existing) && typeof value === "object" && value !== null && !Array.isArray(value)) {
1229
+ result[key] = deepMerge(
1230
+ existing,
1231
+ value
1232
+ );
1233
+ } else {
1234
+ result[key] = value;
1235
+ }
1236
+ }
1237
+ }
1238
+ return result;
1239
+ }
1240
+ function mergeStyleDefaults(defaults2, props, nonStyleKeys) {
1241
+ const styleProps = {};
1242
+ const otherProps = {};
1243
+ const nonStyleSet = new Set(
1244
+ nonStyleKeys
1245
+ );
1246
+ for (const [key, value] of Object.entries(props)) {
1247
+ if (nonStyleSet.has(key)) {
1248
+ otherProps[key] = value;
1249
+ } else if (value !== void 0) {
1250
+ styleProps[key] = value;
1251
+ }
1252
+ }
1253
+ const mergedStyles = deepMerge(defaults2, styleProps);
1254
+ return { ...otherProps, ...mergedStyles };
1255
+ }
1222
1256
  var TrackNameKey = "Track";
1223
1257
  var ThumbNameKey = "Thumb";
1224
1258
  var Button = motionTags.button;
@@ -2234,41 +2268,38 @@ function Label2(props) {
2234
2268
  hasLeftIcon,
2235
2269
  onAnimationStart: _onAnimationStart,
2236
2270
  onAnimationComplete: _onAnimationComplete,
2237
- ...rest
2271
+ ...consumerProps
2238
2272
  } = props;
2239
2273
  const ml = hasLeftIcon ? 6 : 1;
2240
- return /* @__PURE__ */ jsxRuntime.jsxs(
2241
- Base4,
2242
- {
2243
- gridAutoFlow: "column",
2244
- position: "absolute",
2245
- pointerEvents: "none",
2246
- top: "50%",
2274
+ const styleDefaults = {
2275
+ gridAutoFlow: "column",
2276
+ position: "absolute",
2277
+ pointerEvents: "none",
2278
+ top: "50%",
2279
+ transformOrigin: "top left",
2280
+ transform: "translate(0, -50%) scale(1)",
2281
+ transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
2282
+ ml,
2283
+ mr: 1,
2284
+ px: 2,
2285
+ py: 0.5,
2286
+ br: 8,
2287
+ color: error ? "text-alert" : "input-label-color",
2288
+ lineHeight: 1.1,
2289
+ _labelLifted: {
2247
2290
  transformOrigin: "top left",
2248
- transform: "translate(0, -50%) scale(1)",
2249
- transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
2291
+ transform: "scale(0.8)",
2292
+ top: "-10px",
2250
2293
  ml,
2251
- mr: 1,
2252
- px: 2,
2253
- py: 0.5,
2254
- br: 8,
2255
- color: error ? "text-alert" : "input-label-color",
2256
- lineHeight: 1.1,
2257
- _labelLifted: {
2258
- transformOrigin: "top left",
2259
- transform: "scale(0.8)",
2260
- top: "-10px",
2261
- ml,
2262
- color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
2263
- bg: "input-label-bg"
2264
- },
2265
- ...rest,
2266
- children: [
2267
- children,
2268
- required && "*"
2269
- ]
2294
+ color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
2295
+ bg: "input-label-bg"
2270
2296
  }
2271
- );
2297
+ };
2298
+ const mergedStyles = mergeStyleDefaults(styleDefaults, consumerProps, []);
2299
+ return /* @__PURE__ */ jsxRuntime.jsxs(Base4, { ...mergedStyles, children: [
2300
+ children,
2301
+ required && "*"
2302
+ ] });
2272
2303
  }
2273
2304
  Label2.displayName = LabelNameKey2;
2274
2305
  function useResizeObserver(opts = {}) {
@@ -889,14 +889,11 @@
889
889
  .rounded_50\% {
890
890
  border-radius: 50%;
891
891
  }
892
- .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
893
- transition:
894
- 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
895
- .2s color ease-in-out,
896
- .2s background ease-in-out;
892
+ .bd-c_input-border-color-error {
893
+ border-color: var(--colors-input-border-color-error);
897
894
  }
898
- .px_2 {
899
- padding-inline: var(--spacing-2);
895
+ .bd-c_input-border-color {
896
+ border-color: var(--colors-input-border-color);
900
897
  }
901
898
  .py_0\.5 {
902
899
  padding-block: var(--spacing-0\.5);
@@ -904,12 +901,6 @@
904
901
  .rounded_8 {
905
902
  border-radius: 8px;
906
903
  }
907
- .bd-c_input-border-color-error {
908
- border-color: var(--colors-input-border-color-error);
909
- }
910
- .bd-c_input-border-color {
911
- border-color: var(--colors-input-border-color);
912
- }
913
904
  .ring_1px_solid_rgba\(208\,_58\,_58\,_0\.05\) {
914
905
  outline: 1px solid rgba(208, 58, 58, 0.05);
915
906
  }
@@ -943,6 +934,15 @@
943
934
  .trs_background-color_0\.2s_ease-in-out {
944
935
  transition: background-color 0.2s ease-in-out;
945
936
  }
937
+ .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
938
+ transition:
939
+ 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
940
+ .2s color ease-in-out,
941
+ .2s background ease-in-out;
942
+ }
943
+ .px_2 {
944
+ padding-inline: var(--spacing-2);
945
+ }
946
946
  .px_10px {
947
947
  padding-inline: 10px;
948
948
  }
@@ -1098,24 +1098,6 @@
1098
1098
  .trf_translateY\(-50\%\) {
1099
1099
  transform: translateY(-50%);
1100
1100
  }
1101
- .c_input-label-color {
1102
- color: var(--colors-input-label-color);
1103
- }
1104
- .grid-af_column {
1105
- grid-auto-flow: column;
1106
- }
1107
- .pointer-events_none {
1108
- pointer-events: none;
1109
- }
1110
- .trf-o_top_left {
1111
- transform-origin: top left;
1112
- }
1113
- .trf_translate\(0\,_-50\%\)_scale\(1\) {
1114
- transform: translate(0, -50%) scale(1);
1115
- }
1116
- .lh_1\.1 {
1117
- line-height: 1.1;
1118
- }
1119
1101
  .ring-c_input-outline-color-error {
1120
1102
  outline-color: var(--colors-input-outline-color-error);
1121
1103
  }
@@ -1146,6 +1128,9 @@
1146
1128
  .absolute_true {
1147
1129
  position: absolute;
1148
1130
  }
1131
+ .pointer-events_none {
1132
+ pointer-events: none;
1133
+ }
1149
1134
  .bx-sh_0_0_0_6px_rgba\(0\,0\,0\,\.08\) {
1150
1135
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .08);
1151
1136
  }
@@ -1195,9 +1180,18 @@
1195
1180
  .bx-s_content-box {
1196
1181
  box-sizing: content-box;
1197
1182
  }
1183
+ .grid-af_column {
1184
+ grid-auto-flow: column;
1185
+ }
1186
+ .trf-o_top_left {
1187
+ transform-origin: top left;
1188
+ }
1198
1189
  .trf_translate\(0\,_0\)_scale\(1\) {
1199
1190
  transform: translate(0, 0) scale(1);
1200
1191
  }
1192
+ .c_input-label-color {
1193
+ color: var(--colors-input-label-color);
1194
+ }
1201
1195
  .resize_none {
1202
1196
  resize: none;
1203
1197
  }
@@ -1312,15 +1306,6 @@
1312
1306
  .right_11px {
1313
1307
  right: 11px;
1314
1308
  }
1315
- .ml_6 {
1316
- margin-left: var(--spacing-6);
1317
- }
1318
- .ml_1 {
1319
- margin-left: var(--spacing-1);
1320
- }
1321
- .mr_1 {
1322
- margin-right: var(--spacing-1);
1323
- }
1324
1309
  .pl_7 {
1325
1310
  padding-left: var(--spacing-7);
1326
1311
  }
@@ -1363,6 +1348,12 @@
1363
1348
  .top_1 {
1364
1349
  top: var(--spacing-1);
1365
1350
  }
1351
+ .ml_1 {
1352
+ margin-left: var(--spacing-1);
1353
+ }
1354
+ .mr_1 {
1355
+ margin-right: var(--spacing-1);
1356
+ }
1366
1357
  [data-theme=dark] .dark\:bg_neutral\.700 {
1367
1358
  background: var(--colors-neutral-700);
1368
1359
  }
@@ -1463,9 +1454,6 @@
1463
1454
  .active\:bg_neutral\.200:active:focus-visible:not(:disabled) {
1464
1455
  background: var(--colors-neutral-200);
1465
1456
  }
1466
- .labelLifted\:bg_input-label-bg:has(+ input:focus, + input:not(:placeholder-shown)) {
1467
- background: var(--colors-input-label-bg);
1468
- }
1469
1457
  .active\:bg_none:active:not(:disabled),
1470
1458
  .active\:bg_none:active:not(:focus-visible):not(:disabled),
1471
1459
  .active\:bg_none:active:focus-visible:not(:disabled) {
@@ -1487,21 +1475,6 @@
1487
1475
  .focus\:bx-sh_0_0_0_6px_hsl\(0_0\%_100\%_\/_0\.05\):is(:focus, [data-focus]) {
1488
1476
  box-shadow: 0 0 0 6px hsl(0 0% 100% / 0.05);
1489
1477
  }
1490
- .labelLifted\:c_input-label-color-lifted:has(+ input:focus, + input:not(:placeholder-shown)) {
1491
- color: var(--colors-input-label-color-lifted);
1492
- }
1493
- .labelLifted\:c_input-label-color:has(+ input:focus, + input:not(:placeholder-shown)) {
1494
- color: var(--colors-input-label-color);
1495
- }
1496
- .labelLifted\:c_text-alert:has(+ input:focus, + input:not(:placeholder-shown)) {
1497
- color: var(--colors-text-alert);
1498
- }
1499
- .labelLifted\:trf-o_top_left:has(+ input:focus, + input:not(:placeholder-shown)) {
1500
- transform-origin: top left;
1501
- }
1502
- .labelLifted\:trf_scale\(0\.8\):has(+ input:focus, + input:not(:placeholder-shown)) {
1503
- transform: scale(0.8);
1504
- }
1505
1478
  .active\:trf_none\!:active:not(:disabled),
1506
1479
  .active\:trf_none\!:active:not(:focus-visible):not(:disabled),
1507
1480
  .active\:trf_none\!:active:focus-visible:not(:disabled) {
@@ -1524,15 +1497,6 @@
1524
1497
  .\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:trf_scale\(0\.8\):has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
1525
1498
  transform: scale(0.8);
1526
1499
  }
1527
- .labelLifted\:ml_6:has(+ input:focus, + input:not(:placeholder-shown)) {
1528
- margin-left: var(--spacing-6);
1529
- }
1530
- .labelLifted\:ml_1:has(+ input:focus, + input:not(:placeholder-shown)) {
1531
- margin-left: var(--spacing-1);
1532
- }
1533
- .labelLifted\:top_-10px:has(+ input:focus, + input:not(:placeholder-shown)) {
1534
- top: -10px;
1535
- }
1536
1500
  .\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:top_-14px:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
1537
1501
  top: -14px;
1538
1502
  }
@@ -1196,6 +1196,40 @@ var omit = (obj, keys) => {
1196
1196
  }
1197
1197
  return result;
1198
1198
  };
1199
+ function deepMerge(...sources) {
1200
+ const result = {};
1201
+ for (const source of sources) {
1202
+ if (!source) continue;
1203
+ for (const [key, value] of Object.entries(source)) {
1204
+ const existing = result[key];
1205
+ if (typeof existing === "object" && existing !== null && !Array.isArray(existing) && typeof value === "object" && value !== null && !Array.isArray(value)) {
1206
+ result[key] = deepMerge(
1207
+ existing,
1208
+ value
1209
+ );
1210
+ } else {
1211
+ result[key] = value;
1212
+ }
1213
+ }
1214
+ }
1215
+ return result;
1216
+ }
1217
+ function mergeStyleDefaults(defaults2, props, nonStyleKeys) {
1218
+ const styleProps = {};
1219
+ const otherProps = {};
1220
+ const nonStyleSet = new Set(
1221
+ nonStyleKeys
1222
+ );
1223
+ for (const [key, value] of Object.entries(props)) {
1224
+ if (nonStyleSet.has(key)) {
1225
+ otherProps[key] = value;
1226
+ } else if (value !== void 0) {
1227
+ styleProps[key] = value;
1228
+ }
1229
+ }
1230
+ const mergedStyles = deepMerge(defaults2, styleProps);
1231
+ return { ...otherProps, ...mergedStyles };
1232
+ }
1199
1233
  var TrackNameKey = "Track";
1200
1234
  var ThumbNameKey = "Thumb";
1201
1235
  var Button = motionTags.button;
@@ -2211,41 +2245,38 @@ function Label2(props) {
2211
2245
  hasLeftIcon,
2212
2246
  onAnimationStart: _onAnimationStart,
2213
2247
  onAnimationComplete: _onAnimationComplete,
2214
- ...rest
2248
+ ...consumerProps
2215
2249
  } = props;
2216
2250
  const ml = hasLeftIcon ? 6 : 1;
2217
- return /* @__PURE__ */ jsxs(
2218
- Base4,
2219
- {
2220
- gridAutoFlow: "column",
2221
- position: "absolute",
2222
- pointerEvents: "none",
2223
- top: "50%",
2251
+ const styleDefaults = {
2252
+ gridAutoFlow: "column",
2253
+ position: "absolute",
2254
+ pointerEvents: "none",
2255
+ top: "50%",
2256
+ transformOrigin: "top left",
2257
+ transform: "translate(0, -50%) scale(1)",
2258
+ transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
2259
+ ml,
2260
+ mr: 1,
2261
+ px: 2,
2262
+ py: 0.5,
2263
+ br: 8,
2264
+ color: error ? "text-alert" : "input-label-color",
2265
+ lineHeight: 1.1,
2266
+ _labelLifted: {
2224
2267
  transformOrigin: "top left",
2225
- transform: "translate(0, -50%) scale(1)",
2226
- transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
2268
+ transform: "scale(0.8)",
2269
+ top: "-10px",
2227
2270
  ml,
2228
- mr: 1,
2229
- px: 2,
2230
- py: 0.5,
2231
- br: 8,
2232
- color: error ? "text-alert" : "input-label-color",
2233
- lineHeight: 1.1,
2234
- _labelLifted: {
2235
- transformOrigin: "top left",
2236
- transform: "scale(0.8)",
2237
- top: "-10px",
2238
- ml,
2239
- color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
2240
- bg: "input-label-bg"
2241
- },
2242
- ...rest,
2243
- children: [
2244
- children,
2245
- required && "*"
2246
- ]
2271
+ color: error ? "text-alert" : value ? "input-label-color-lifted" : "input-label-color",
2272
+ bg: "input-label-bg"
2247
2273
  }
2248
- );
2274
+ };
2275
+ const mergedStyles = mergeStyleDefaults(styleDefaults, consumerProps, []);
2276
+ return /* @__PURE__ */ jsxs(Base4, { ...mergedStyles, children: [
2277
+ children,
2278
+ required && "*"
2279
+ ] });
2249
2280
  }
2250
2281
  Label2.displayName = LabelNameKey2;
2251
2282
  function useResizeObserver(opts = {}) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qstd",
3
- "version": "0.3.10",
3
+ "version": "0.3.11",
4
4
  "description": "Standard Block component and utilities library with Panda CSS",
5
5
  "author": "malin1",
6
6
  "license": "MIT",
@@ -880,12 +880,12 @@
880
880
  border-radius: 50%;
881
881
  }
882
882
 
883
- .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
884
- transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out;
883
+ .bd-c_input-border-color-error {
884
+ border-color: var(--colors-input-border-color-error);
885
885
  }
886
886
 
887
- .px_2 {
888
- padding-inline: var(--spacing-2);
887
+ .bd-c_input-border-color {
888
+ border-color: var(--colors-input-border-color);
889
889
  }
890
890
 
891
891
  .py_0\.5 {
@@ -896,14 +896,6 @@
896
896
  border-radius: 8px;
897
897
  }
898
898
 
899
- .bd-c_input-border-color-error {
900
- border-color: var(--colors-input-border-color-error);
901
- }
902
-
903
- .bd-c_input-border-color {
904
- border-color: var(--colors-input-border-color);
905
- }
906
-
907
899
  .ring_1px_solid_rgba\(208\,_58\,_58\,_0\.05\) {
908
900
  outline: 1px solid rgba(208, 58, 58, 0.05);
909
901
  }
@@ -948,6 +940,14 @@
948
940
  transition: background-color 0.2s ease-in-out;
949
941
  }
950
942
 
943
+ .trs_200ms_cubic-bezier\(0\,_0\,_0\.2\,_1\)_0ms\,_\.2s_color_ease-in-out\,_\.2s_background_ease-in-out {
944
+ transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out;
945
+ }
946
+
947
+ .px_2 {
948
+ padding-inline: var(--spacing-2);
949
+ }
950
+
951
951
  .px_10px {
952
952
  padding-inline: 10px;
953
953
  }
@@ -1144,30 +1144,6 @@
1144
1144
  transform: translateY(-50%);
1145
1145
  }
1146
1146
 
1147
- .c_input-label-color {
1148
- color: var(--colors-input-label-color);
1149
- }
1150
-
1151
- .grid-af_column {
1152
- grid-auto-flow: column;
1153
- }
1154
-
1155
- .pointer-events_none {
1156
- pointer-events: none;
1157
- }
1158
-
1159
- .trf-o_top_left {
1160
- transform-origin: top left;
1161
- }
1162
-
1163
- .trf_translate\(0\,_-50\%\)_scale\(1\) {
1164
- transform: translate(0, -50%) scale(1);
1165
- }
1166
-
1167
- .lh_1\.1 {
1168
- line-height: 1.1;
1169
- }
1170
-
1171
1147
  .ring-c_input-outline-color-error {
1172
1148
  outline-color: var(--colors-input-outline-color-error);
1173
1149
  }
@@ -1207,6 +1183,10 @@
1207
1183
  position: absolute;
1208
1184
  }
1209
1185
 
1186
+ .pointer-events_none {
1187
+ pointer-events: none;
1188
+ }
1189
+
1210
1190
  .bx-sh_0_0_0_6px_rgba\(0\,0\,0\,\.08\) {
1211
1191
  box-shadow: 0 0 0 6px rgba(0,0,0,.08);
1212
1192
  }
@@ -1272,10 +1252,22 @@
1272
1252
  box-sizing: content-box;
1273
1253
  }
1274
1254
 
1255
+ .grid-af_column {
1256
+ grid-auto-flow: column;
1257
+ }
1258
+
1259
+ .trf-o_top_left {
1260
+ transform-origin: top left;
1261
+ }
1262
+
1275
1263
  .trf_translate\(0\,_0\)_scale\(1\) {
1276
1264
  transform: translate(0, 0) scale(1);
1277
1265
  }
1278
1266
 
1267
+ .c_input-label-color {
1268
+ color: var(--colors-input-label-color);
1269
+ }
1270
+
1279
1271
  .resize_none {
1280
1272
  resize: none;
1281
1273
  }
@@ -1428,18 +1420,6 @@
1428
1420
  right: 11px;
1429
1421
  }
1430
1422
 
1431
- .ml_6 {
1432
- margin-left: var(--spacing-6);
1433
- }
1434
-
1435
- .ml_1 {
1436
- margin-left: var(--spacing-1);
1437
- }
1438
-
1439
- .mr_1 {
1440
- margin-right: var(--spacing-1);
1441
- }
1442
-
1443
1423
  .pl_7 {
1444
1424
  padding-left: var(--spacing-7);
1445
1425
  }
@@ -1496,6 +1476,14 @@
1496
1476
  top: var(--spacing-1);
1497
1477
  }
1498
1478
 
1479
+ .ml_1 {
1480
+ margin-left: var(--spacing-1);
1481
+ }
1482
+
1483
+ .mr_1 {
1484
+ margin-right: var(--spacing-1);
1485
+ }
1486
+
1499
1487
  [data-theme=dark] .dark\:bg_neutral\.700 {
1500
1488
  background: var(--colors-neutral-700);
1501
1489
  }
@@ -1616,10 +1604,6 @@
1616
1604
  background: var(--colors-neutral-200);
1617
1605
  }
1618
1606
 
1619
- .labelLifted\:bg_input-label-bg:has(+ input:focus, + input:not(:placeholder-shown)) {
1620
- background: var(--colors-input-label-bg);
1621
- }
1622
-
1623
1607
  .active\:bg_none:active:not(:disabled),.active\:bg_none:active:not(:focus-visible):not(:disabled),.active\:bg_none:active:focus-visible:not(:disabled) {
1624
1608
  background: none;
1625
1609
  }
@@ -1640,26 +1624,6 @@
1640
1624
  box-shadow: 0 0 0 6px hsl(0 0% 100% / 0.05);
1641
1625
  }
1642
1626
 
1643
- .labelLifted\:c_input-label-color-lifted:has(+ input:focus, + input:not(:placeholder-shown)) {
1644
- color: var(--colors-input-label-color-lifted);
1645
- }
1646
-
1647
- .labelLifted\:c_input-label-color:has(+ input:focus, + input:not(:placeholder-shown)) {
1648
- color: var(--colors-input-label-color);
1649
- }
1650
-
1651
- .labelLifted\:c_text-alert:has(+ input:focus, + input:not(:placeholder-shown)) {
1652
- color: var(--colors-text-alert);
1653
- }
1654
-
1655
- .labelLifted\:trf-o_top_left:has(+ input:focus, + input:not(:placeholder-shown)) {
1656
- transform-origin: top left;
1657
- }
1658
-
1659
- .labelLifted\:trf_scale\(0\.8\):has(+ input:focus, + input:not(:placeholder-shown)) {
1660
- transform: scale(0.8);
1661
- }
1662
-
1663
1627
  .active\:trf_none\!:active:not(:disabled),.active\:trf_none\!:active:not(:focus-visible):not(:disabled),.active\:trf_none\!:active:focus-visible:not(:disabled) {
1664
1628
  transform: none !important;
1665
1629
  }
@@ -1684,18 +1648,6 @@
1684
1648
  transform: scale(0.8);
1685
1649
  }
1686
1650
 
1687
- .labelLifted\:ml_6:has(+ input:focus, + input:not(:placeholder-shown)) {
1688
- margin-left: var(--spacing-6);
1689
- }
1690
-
1691
- .labelLifted\:ml_1:has(+ input:focus, + input:not(:placeholder-shown)) {
1692
- margin-left: var(--spacing-1);
1693
- }
1694
-
1695
- .labelLifted\:top_-10px:has(+ input:focus, + input:not(:placeholder-shown)) {
1696
- top: -10px;
1697
- }
1698
-
1699
1651
  .\[\&\:has\(\+_textarea\:focus\,_\+_textarea\:not\(\:placeholder-shown\)\)\]\:top_-14px:has(+ textarea:focus, + textarea:not(:placeholder-shown)) {
1700
1652
  top: -14px;
1701
1653
  }