@baseline-ui/tokens 0.2.0 → 0.4.0

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.
Files changed (6) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.d.mts +82 -32
  3. package/dist/index.d.ts +82 -32
  4. package/dist/index.js +15 -15
  5. package/dist/index.mjs +15 -15
  6. package/package.json +1 -8
package/dist/index.d.mts CHANGED
@@ -1217,43 +1217,50 @@ declare const themeVars: {
1217
1217
  };
1218
1218
  };
1219
1219
 
1220
+ declare const Layers: {
1221
+ readonly RESET: string;
1222
+ readonly BASE: string;
1223
+ readonly VARIANTS: string;
1224
+ readonly COMPOUND_VARIANTS: string;
1225
+ readonly OVERRIDES: string;
1226
+ };
1220
1227
  declare const createLayerSprinkles: (layer: string) => ((props: {
1221
- paddingTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1228
+ paddingBlockStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1222
1229
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1223
1230
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1224
1231
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1225
1232
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1226
- paddingRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1233
+ paddingInlineEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1227
1234
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1228
1235
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1229
1236
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1230
1237
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1231
- paddingBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1238
+ paddingBlockEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1232
1239
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1233
1240
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1234
1241
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1235
1242
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1236
- paddingLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1243
+ paddingInlineStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1237
1244
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1238
1245
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1239
1246
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1240
1247
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1241
- marginTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1248
+ marginBlockStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1242
1249
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1243
1250
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1244
1251
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1245
1252
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1246
- marginRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1253
+ marginInlineEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1247
1254
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1248
1255
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1249
1256
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1250
1257
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1251
- marginBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1258
+ marginBlockEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1252
1259
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1253
1260
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1254
1261
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1255
1262
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1256
- marginLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1263
+ marginInlineStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1257
1264
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1258
1265
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1259
1266
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1263,6 +1270,26 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1263
1270
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1264
1271
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1265
1272
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1273
+ paddingLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1274
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1275
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1276
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1277
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1278
+ paddingRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1279
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1280
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1281
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1282
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1283
+ paddingTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1284
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1285
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1286
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1287
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1288
+ paddingBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1289
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1290
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1291
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1292
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1266
1293
  padding?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1267
1294
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1268
1295
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1278,6 +1305,26 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1278
1305
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1279
1306
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1280
1307
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1308
+ marginLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1309
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1310
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1311
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1312
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1313
+ marginRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1314
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1315
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1316
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1317
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1318
+ marginTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1319
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1320
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1321
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1322
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1323
+ marginBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1324
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1325
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1326
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1327
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1281
1328
  margin?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1282
1329
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1283
1330
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1294,11 +1341,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1294
1341
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1295
1342
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1296
1343
  } & {
1344
+ borderStartStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1345
+ borderStartEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1346
+ borderEndStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1347
+ borderEndEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1297
1348
  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1298
- borderTopLeftRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1299
- borderTopRightRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1300
- borderBottomLeftRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1301
- borderBottomRightRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1302
1349
  borderTopRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1303
1350
  borderBottomRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1304
1351
  borderLeftRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
@@ -1335,6 +1382,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1335
1382
  tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1336
1383
  desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1337
1384
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
1385
+ alignSelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
1386
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1387
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1388
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1389
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
1338
1390
  flex?: (number | {
1339
1391
  mobile?: number | undefined;
1340
1392
  tablet?: number | undefined;
@@ -1345,6 +1397,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1345
1397
  tablet?: "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1346
1398
  desktop?: "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1347
1399
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | null>;
1400
+ justifySelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
1401
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1402
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1403
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1404
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
1348
1405
  placeItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
1349
1406
  mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1350
1407
  tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
@@ -1355,10 +1412,10 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1355
1412
  transitionProperty?: "opacity" | "transform" | "background-color" | undefined;
1356
1413
  } & {
1357
1414
  readonly flexWrap?: "nowrap" | "wrap" | undefined;
1358
- readonly top?: 0 | undefined;
1359
- readonly bottom?: 0 | undefined;
1360
- readonly left?: 0 | undefined;
1361
- readonly right?: 0 | undefined;
1415
+ readonly insetBlockStart?: 0 | undefined;
1416
+ readonly insetBlockEnd?: 0 | undefined;
1417
+ readonly insetInlineStart?: 0 | undefined;
1418
+ readonly insetInlineEnd?: 0 | undefined;
1362
1419
  readonly flexShrink?: 0 | undefined;
1363
1420
  readonly flexGrow?: 0 | 1 | undefined;
1364
1421
  readonly width?: "full" | undefined;
@@ -1374,7 +1431,7 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1374
1431
  borderStyle?: "dashed" | "solid" | undefined;
1375
1432
  borderWidth?: number | undefined;
1376
1433
  }) => string) & {
1377
- properties: Set<"opacity" | "color" | "inset" | "border" | "typography" | "backgroundColor" | "borderColor" | "outlineColor" | "alignItems" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "transitionProperty" | "width" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
1434
+ properties: Set<"opacity" | "color" | "inset" | "border" | "typography" | "backgroundColor" | "borderColor" | "outlineColor" | "alignItems" | "alignSelf" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "transitionProperty" | "width" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
1378
1435
  };
1379
1436
  type Sprinkles = ReturnType<typeof createLayerSprinkles>;
1380
1437
  /**
@@ -1385,11 +1442,9 @@ type Sprinkles = ReturnType<typeof createLayerSprinkles>;
1385
1442
  declare const sprinkles: Sprinkles;
1386
1443
  declare const Unstable_Sprinkles: Unstable_SprinklesInterface;
1387
1444
  interface Unstable_SprinklesInterface {
1388
- components: {
1389
- base: Sprinkles;
1390
- variants: Sprinkles;
1391
- compoundVariants: Sprinkles;
1392
- };
1445
+ base: Sprinkles;
1446
+ variants: Sprinkles;
1447
+ compoundVariants: Sprinkles;
1393
1448
  overrides: Sprinkles;
1394
1449
  }
1395
1450
 
@@ -1400,6 +1455,10 @@ declare const breakpoints: {
1400
1455
  };
1401
1456
  type Breakpoint = keyof typeof breakpoints;
1402
1457
  type CSSProps = Omit<StyleRule, "@media" | "@supports">;
1458
+ declare const queries: {
1459
+ tablet: string;
1460
+ desktop: string;
1461
+ };
1403
1462
  interface ResponsiveStyle {
1404
1463
  mobile?: CSSProps;
1405
1464
  tablet?: CSSProps;
@@ -1548,13 +1607,4 @@ interface Elevation {
1548
1607
  medium: string;
1549
1608
  }
1550
1609
 
1551
- declare const Layers: {
1552
- readonly RESET: string;
1553
- readonly COMPONENTS: string;
1554
- readonly COMPONENTS_BASE: string;
1555
- readonly COMPONENTS_VARIANTS: string;
1556
- readonly COMPONENTS_COMPOUND_VARIANTS: string;
1557
- readonly OVERRIDES: string;
1558
- };
1559
-
1560
- export { type Breakpoint, Layers, type Sprinkles, type Theme, Unstable_Sprinkles, type Unstable_SprinklesInterface, breakpoints, dark as darkTheme, light as lightTheme, responsiveStyle, sprinkles, themeContract, themeVars };
1610
+ export { type Breakpoint, Layers, type Sprinkles, type Theme, Unstable_Sprinkles, type Unstable_SprinklesInterface, breakpoints, dark as darkTheme, light as lightTheme, queries, responsiveStyle, sprinkles, themeContract, themeVars };
package/dist/index.d.ts CHANGED
@@ -1217,43 +1217,50 @@ declare const themeVars: {
1217
1217
  };
1218
1218
  };
1219
1219
 
1220
+ declare const Layers: {
1221
+ readonly RESET: string;
1222
+ readonly BASE: string;
1223
+ readonly VARIANTS: string;
1224
+ readonly COMPOUND_VARIANTS: string;
1225
+ readonly OVERRIDES: string;
1226
+ };
1220
1227
  declare const createLayerSprinkles: (layer: string) => ((props: {
1221
- paddingTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1228
+ paddingBlockStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1222
1229
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1223
1230
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1224
1231
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1225
1232
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1226
- paddingRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1233
+ paddingInlineEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1227
1234
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1228
1235
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1229
1236
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1230
1237
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1231
- paddingBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1238
+ paddingBlockEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1232
1239
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1233
1240
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1234
1241
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1235
1242
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1236
- paddingLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1243
+ paddingInlineStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1237
1244
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1238
1245
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1239
1246
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1240
1247
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1241
- marginTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1248
+ marginBlockStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1242
1249
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1243
1250
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1244
1251
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1245
1252
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1246
- marginRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1253
+ marginInlineEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1247
1254
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1248
1255
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1249
1256
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1250
1257
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1251
- marginBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1258
+ marginBlockEnd?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1252
1259
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1253
1260
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1254
1261
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1255
1262
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1256
- marginLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1263
+ marginInlineStart?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1257
1264
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1258
1265
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1259
1266
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1263,6 +1270,26 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1263
1270
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1264
1271
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1265
1272
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1273
+ paddingLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1274
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1275
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1276
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1277
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1278
+ paddingRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1279
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1280
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1281
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1282
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1283
+ paddingTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1284
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1285
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1286
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1287
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1288
+ paddingBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1289
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1290
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1291
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1292
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1266
1293
  padding?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1267
1294
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1268
1295
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1278,6 +1305,26 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1278
1305
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1279
1306
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1280
1307
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1308
+ marginLeft?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1309
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1310
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1311
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1312
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1313
+ marginRight?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1314
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1315
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1316
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1317
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1318
+ marginTop?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1319
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1320
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1321
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1322
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1323
+ marginBottom?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1324
+ mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1325
+ tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1326
+ desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1327
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1281
1328
  margin?: ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | {
1282
1329
  mobile?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1283
1330
  tablet?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
@@ -1294,11 +1341,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1294
1341
  desktop?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
1295
1342
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null>;
1296
1343
  } & {
1344
+ borderStartStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1345
+ borderStartEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1346
+ borderEndStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1347
+ borderEndEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1297
1348
  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1298
- borderTopLeftRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1299
- borderTopRightRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1300
- borderBottomLeftRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1301
- borderBottomRightRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1302
1349
  borderTopRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1303
1350
  borderBottomRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
1304
1351
  borderLeftRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | undefined;
@@ -1335,6 +1382,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1335
1382
  tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1336
1383
  desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1337
1384
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
1385
+ alignSelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
1386
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1387
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1388
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1389
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
1338
1390
  flex?: (number | {
1339
1391
  mobile?: number | undefined;
1340
1392
  tablet?: number | undefined;
@@ -1345,6 +1397,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1345
1397
  tablet?: "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1346
1398
  desktop?: "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1347
1399
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | null>;
1400
+ justifySelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
1401
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1402
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1403
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1404
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
1348
1405
  placeItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
1349
1406
  mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
1350
1407
  tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
@@ -1355,10 +1412,10 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1355
1412
  transitionProperty?: "opacity" | "transform" | "background-color" | undefined;
1356
1413
  } & {
1357
1414
  readonly flexWrap?: "nowrap" | "wrap" | undefined;
1358
- readonly top?: 0 | undefined;
1359
- readonly bottom?: 0 | undefined;
1360
- readonly left?: 0 | undefined;
1361
- readonly right?: 0 | undefined;
1415
+ readonly insetBlockStart?: 0 | undefined;
1416
+ readonly insetBlockEnd?: 0 | undefined;
1417
+ readonly insetInlineStart?: 0 | undefined;
1418
+ readonly insetInlineEnd?: 0 | undefined;
1362
1419
  readonly flexShrink?: 0 | undefined;
1363
1420
  readonly flexGrow?: 0 | 1 | undefined;
1364
1421
  readonly width?: "full" | undefined;
@@ -1374,7 +1431,7 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
1374
1431
  borderStyle?: "dashed" | "solid" | undefined;
1375
1432
  borderWidth?: number | undefined;
1376
1433
  }) => string) & {
1377
- properties: Set<"opacity" | "color" | "inset" | "border" | "typography" | "backgroundColor" | "borderColor" | "outlineColor" | "alignItems" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "transitionProperty" | "width" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
1434
+ properties: Set<"opacity" | "color" | "inset" | "border" | "typography" | "backgroundColor" | "borderColor" | "outlineColor" | "alignItems" | "alignSelf" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "transitionProperty" | "width" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
1378
1435
  };
1379
1436
  type Sprinkles = ReturnType<typeof createLayerSprinkles>;
1380
1437
  /**
@@ -1385,11 +1442,9 @@ type Sprinkles = ReturnType<typeof createLayerSprinkles>;
1385
1442
  declare const sprinkles: Sprinkles;
1386
1443
  declare const Unstable_Sprinkles: Unstable_SprinklesInterface;
1387
1444
  interface Unstable_SprinklesInterface {
1388
- components: {
1389
- base: Sprinkles;
1390
- variants: Sprinkles;
1391
- compoundVariants: Sprinkles;
1392
- };
1445
+ base: Sprinkles;
1446
+ variants: Sprinkles;
1447
+ compoundVariants: Sprinkles;
1393
1448
  overrides: Sprinkles;
1394
1449
  }
1395
1450
 
@@ -1400,6 +1455,10 @@ declare const breakpoints: {
1400
1455
  };
1401
1456
  type Breakpoint = keyof typeof breakpoints;
1402
1457
  type CSSProps = Omit<StyleRule, "@media" | "@supports">;
1458
+ declare const queries: {
1459
+ tablet: string;
1460
+ desktop: string;
1461
+ };
1403
1462
  interface ResponsiveStyle {
1404
1463
  mobile?: CSSProps;
1405
1464
  tablet?: CSSProps;
@@ -1548,13 +1607,4 @@ interface Elevation {
1548
1607
  medium: string;
1549
1608
  }
1550
1609
 
1551
- declare const Layers: {
1552
- readonly RESET: string;
1553
- readonly COMPONENTS: string;
1554
- readonly COMPONENTS_BASE: string;
1555
- readonly COMPONENTS_VARIANTS: string;
1556
- readonly COMPONENTS_COMPOUND_VARIANTS: string;
1557
- readonly OVERRIDES: string;
1558
- };
1559
-
1560
- export { type Breakpoint, Layers, type Sprinkles, type Theme, Unstable_Sprinkles, type Unstable_SprinklesInterface, breakpoints, dark as darkTheme, light as lightTheme, responsiveStyle, sprinkles, themeContract, themeVars };
1610
+ export { type Breakpoint, Layers, type Sprinkles, type Theme, Unstable_Sprinkles, type Unstable_SprinklesInterface, breakpoints, dark as darkTheme, light as lightTheme, queries, responsiveStyle, sprinkles, themeContract, themeVars };