@bamboocss/preset-base 1.31.0 → 1.33.0

package/dist/index.cjs

@@ -117,6 +117,18 @@ const conditions = {
 function definePattern(config) {
 	return config;
 }
+/**
+* The one flexbox pattern. `stack`, `vstack`, `hstack` and `wrap` were this with defaults frozen
+* — `stack` added `direction: 'column'` and an 8px gap, the two axis-named ones additionally
+* hard-coded `align: 'center'` and dropped `direction` from the props, and `wrap` set
+* `flexWrap: 'wrap'`. Five names, one transform, and four of them a superset of the fifth only in
+* what they assumed for you.
+*
+* `gap` is deliberately not listed here and does not need to be: anything absent from
+* `properties` still arrives as an ordinary style prop, so `flex({ gap: '6' })` types and folds
+* exactly as it did through `stack`. What goes with the old names is the implicit `gap: '8px'`,
+* which was a design opinion no call site asked for.
+*/
 const flex = definePattern({
 	properties: {
 		align: {
@@ -163,89 +175,6 @@ const flex = definePattern({
 		};
 	}
 });
-const stack = definePattern({
-	properties: {
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		direction: {
-			type: "property",
-			value: "flexDirection"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: {
-		direction: "column",
-		gap: "8px"
-	},
-	transform(props) {
-		const { align, justify, direction, gap, ...rest } = props;
-		return {
-			display: "flex",
-			flexDirection: direction,
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			...rest
-		};
-	}
-});
-const vstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "column",
-			...rest
-		};
-	}
-});
-const hstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "row",
-			...rest
-		};
-	}
-});
 const spacer = definePattern({
 	properties: { size: {
 		type: "token",
@@ -264,43 +193,6 @@ const spacer = definePattern({
 		};
 	}
 });
-const circle = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			borderRadius: "9999px",
-			...rest
-		};
-	}
-});
-const square = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			...rest
-		};
-	}
-});
 const grid = definePattern({
 	properties: {
 		gap: {
@@ -361,43 +253,6 @@ const gridItem = definePattern({
 		};
 	}
 });
-const wrap = definePattern({
-	properties: {
-		gap: {
-			type: "property",
-			value: "gap"
-		},
-		rowGap: {
-			type: "property",
-			value: "gap"
-		},
-		columnGap: {
-			type: "property",
-			value: "gap"
-		},
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		}
-	},
-	transform(props) {
-		const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
-		return {
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			columnGap,
-			rowGap,
-			...rest
-		};
-	}
-});
 const container$1 = definePattern({ transform(props) {
 	return {
 		position: "relative",
@@ -411,14 +266,34 @@ const container$1 = definePattern({ transform(props) {
 		...props
 	};
 } });
+/**
+* Absorbs what `square` and `circle` used to be. `square({ size })` is `center({ size })`, and
+* `circle({ size })` is `center({ size, borderRadius: 'full' })` — `borderRadius` is an ordinary
+* style prop, so the rounded case needs nothing here beyond the size the square case already
+* wanted. Three patterns whose transforms differed by one declaration is three names to learn
+* and three places for `alignItems: center` to drift.
+*
+* `flex: '0 0 auto'` rides with `size` rather than being unconditional: it is what stops a sized
+* box from being shrunk by a flex parent, so it is meaningless without one, and applying it to
+* an unsized `center` would change how every existing call lays out inside a flex row.
+*/
 const center = definePattern({
-	properties: { inline: { type: "boolean" } },
+	properties: {
+		inline: { type: "boolean" },
+		size: {
+			type: "property",
+			value: "width"
+		}
+	},
 	transform(props) {
-		const { inline, ...rest } = props;
+		const { inline, size, ...rest } = props;
 		return {
 			display: inline ? "inline-flex" : "flex",
 			alignItems: "center",
 			justifyContent: "center",
+			flex: size == null ? void 0 : "0 0 auto",
+			width: size,
+			height: size,
 			...rest
 		};
 	}
@@ -487,12 +362,7 @@ const divider = definePattern({
 });
 const patterns = {
 	flex,
-	stack,
-	vstack,
-	hstack,
 	spacer,
-	square,
-	circle,
 	center,
 	linkOverlay: definePattern({ transform(props) {
 		return {
@@ -509,7 +379,6 @@ const patterns = {
 	aspectRatio,
 	grid,
 	gridItem,
-	wrap,
 	container: container$1,
 	divider,
 	float: definePattern({
@@ -634,28 +503,6 @@ const patterns = {
 				...rest
 			};
 		}
-	}),
-	cq: definePattern({
-		properties: {
-			name: {
-				type: "token",
-				value: "containerNames",
-				property: "containerName"
-			},
-			type: {
-				type: "property",
-				value: "containerType"
-			}
-		},
-		defaultValues: { type: "inline-size" },
-		transform(props) {
-			const { name, type, ...rest } = props;
-			return {
-				containerType: type,
-				containerName: name,
-				...rest
-			};
-		}
 	})
 };
 //#endregion
@@ -1095,28 +942,10 @@ const cursor = { cursor: {
 } };
 //#endregion
 //#region src/utilities/display.ts
-const display = {
-	display: {
-		className: "d",
-		group: "Display"
-	},
-	hideFrom: {
-		className: "hide",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}` : `@media (width >= ${value})`]: { display: "none" } };
-		}
-	},
-	hideBelow: {
-		className: "show",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}Down` : `@media (width < ${value})`]: { display: "none" } };
-		}
-	}
-};
+const display = { display: {
+	className: "d",
+	group: "Display"
+} };
 //#endregion
 //#region src/utilities/divide.ts
 const divideColor = createColorMixTransform("borderColor");

package/dist/index.d.cts

@@ -158,93 +158,6 @@ declare const preset: {
         flexShrink: any;
       };
     };
-    stack: {
-      properties: {
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        direction: {
-          type: "property";
-          value: "flexDirection";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        direction: string;
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexDirection: any;
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-      };
-    };
-    vstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "column";
-      };
-    };
-    hstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "row";
-      };
-    };
     spacer: {
       properties: {
         size: {
@@ -267,28 +180,11 @@ declare const preset: {
         flex: any;
       };
     };
-    square: {
+    center: {
       properties: {
-        size: {
-          type: "property";
-          value: "width";
+        inline: {
+          type: "boolean";
         };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        flex: "0 0 auto";
-        width: any;
-        height: any;
-      };
-    };
-    circle: {
-      properties: {
         size: {
           type: "property";
           value: "width";
@@ -299,29 +195,12 @@ declare const preset: {
         [x: number]: any;
         [x: string & Record<never, never>]: any;
       }): {
-        display: "flex";
+        display: "flex" | "inline-flex";
         alignItems: "center";
         justifyContent: "center";
-        flex: "0 0 auto";
+        flex: "0 0 auto" | undefined;
         width: any;
         height: any;
-        borderRadius: "9999px";
-      };
-    };
-    center: {
-      properties: {
-        inline: {
-          type: "boolean";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex" | "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
       };
     };
     linkOverlay: {
@@ -453,43 +332,6 @@ declare const preset: {
         gridRowEnd: any;
       };
     };
-    wrap: {
-      properties: {
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-        rowGap: {
-          type: "property";
-          value: "gap";
-        };
-        columnGap: {
-          type: "property";
-          value: "gap";
-        };
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexWrap: "wrap";
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-        columnGap: any;
-        rowGap: any;
-      };
-    };
     container: {
       transform(props: {
         [x: string]: any;
@@ -623,30 +465,6 @@ declare const preset: {
         marginBlock: "calc(var(--bleed-y, 0) * -1)";
       };
     };
-    cq: {
-      properties: {
-        name: {
-          type: "token";
-          value: "containerNames";
-          property: "containerName";
-        };
-        type: {
-          type: "property";
-          value: "containerType";
-        };
-      };
-      defaultValues: {
-        type: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        containerType: any;
-        containerName: any;
-      };
-    };
   };
 };
 //#endregion

package/dist/index.d.mts

@@ -158,93 +158,6 @@ declare const preset: {
         flexShrink: any;
       };
     };
-    stack: {
-      properties: {
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        direction: {
-          type: "property";
-          value: "flexDirection";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        direction: string;
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexDirection: any;
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-      };
-    };
-    vstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "column";
-      };
-    };
-    hstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "row";
-      };
-    };
     spacer: {
       properties: {
         size: {
@@ -267,28 +180,11 @@ declare const preset: {
         flex: any;
       };
     };
-    square: {
+    center: {
       properties: {
-        size: {
-          type: "property";
-          value: "width";
+        inline: {
+          type: "boolean";
         };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        flex: "0 0 auto";
-        width: any;
-        height: any;
-      };
-    };
-    circle: {
-      properties: {
         size: {
           type: "property";
           value: "width";
@@ -299,29 +195,12 @@ declare const preset: {
         [x: number]: any;
         [x: string & Record<never, never>]: any;
       }): {
-        display: "flex";
+        display: "flex" | "inline-flex";
         alignItems: "center";
         justifyContent: "center";
-        flex: "0 0 auto";
+        flex: "0 0 auto" | undefined;
         width: any;
         height: any;
-        borderRadius: "9999px";
-      };
-    };
-    center: {
-      properties: {
-        inline: {
-          type: "boolean";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex" | "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
       };
     };
     linkOverlay: {
@@ -453,43 +332,6 @@ declare const preset: {
         gridRowEnd: any;
       };
     };
-    wrap: {
-      properties: {
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-        rowGap: {
-          type: "property";
-          value: "gap";
-        };
-        columnGap: {
-          type: "property";
-          value: "gap";
-        };
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexWrap: "wrap";
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-        columnGap: any;
-        rowGap: any;
-      };
-    };
     container: {
       transform(props: {
         [x: string]: any;
@@ -623,30 +465,6 @@ declare const preset: {
         marginBlock: "calc(var(--bleed-y, 0) * -1)";
       };
     };
-    cq: {
-      properties: {
-        name: {
-          type: "token";
-          value: "containerNames";
-          property: "containerName";
-        };
-        type: {
-          type: "property";
-          value: "containerType";
-        };
-      };
-      defaultValues: {
-        type: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        containerType: any;
-        containerName: any;
-      };
-    };
   };
 };
 //#endregion

package/dist/index.mjs

@@ -113,6 +113,18 @@ const conditions = {
 function definePattern(config) {
 	return config;
 }
+/**
+* The one flexbox pattern. `stack`, `vstack`, `hstack` and `wrap` were this with defaults frozen
+* — `stack` added `direction: 'column'` and an 8px gap, the two axis-named ones additionally
+* hard-coded `align: 'center'` and dropped `direction` from the props, and `wrap` set
+* `flexWrap: 'wrap'`. Five names, one transform, and four of them a superset of the fifth only in
+* what they assumed for you.
+*
+* `gap` is deliberately not listed here and does not need to be: anything absent from
+* `properties` still arrives as an ordinary style prop, so `flex({ gap: '6' })` types and folds
+* exactly as it did through `stack`. What goes with the old names is the implicit `gap: '8px'`,
+* which was a design opinion no call site asked for.
+*/
 const flex = definePattern({
 	properties: {
 		align: {
@@ -159,89 +171,6 @@ const flex = definePattern({
 		};
 	}
 });
-const stack = definePattern({
-	properties: {
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		direction: {
-			type: "property",
-			value: "flexDirection"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: {
-		direction: "column",
-		gap: "8px"
-	},
-	transform(props) {
-		const { align, justify, direction, gap, ...rest } = props;
-		return {
-			display: "flex",
-			flexDirection: direction,
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			...rest
-		};
-	}
-});
-const vstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "column",
-			...rest
-		};
-	}
-});
-const hstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "row",
-			...rest
-		};
-	}
-});
 const spacer = definePattern({
 	properties: { size: {
 		type: "token",
@@ -260,43 +189,6 @@ const spacer = definePattern({
 		};
 	}
 });
-const circle = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			borderRadius: "9999px",
-			...rest
-		};
-	}
-});
-const square = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			...rest
-		};
-	}
-});
 const grid = definePattern({
 	properties: {
 		gap: {
@@ -357,43 +249,6 @@ const gridItem = definePattern({
 		};
 	}
 });
-const wrap = definePattern({
-	properties: {
-		gap: {
-			type: "property",
-			value: "gap"
-		},
-		rowGap: {
-			type: "property",
-			value: "gap"
-		},
-		columnGap: {
-			type: "property",
-			value: "gap"
-		},
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		}
-	},
-	transform(props) {
-		const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
-		return {
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			columnGap,
-			rowGap,
-			...rest
-		};
-	}
-});
 const container$1 = definePattern({ transform(props) {
 	return {
 		position: "relative",
@@ -407,14 +262,34 @@ const container$1 = definePattern({ transform(props) {
 		...props
 	};
 } });
+/**
+* Absorbs what `square` and `circle` used to be. `square({ size })` is `center({ size })`, and
+* `circle({ size })` is `center({ size, borderRadius: 'full' })` — `borderRadius` is an ordinary
+* style prop, so the rounded case needs nothing here beyond the size the square case already
+* wanted. Three patterns whose transforms differed by one declaration is three names to learn
+* and three places for `alignItems: center` to drift.
+*
+* `flex: '0 0 auto'` rides with `size` rather than being unconditional: it is what stops a sized
+* box from being shrunk by a flex parent, so it is meaningless without one, and applying it to
+* an unsized `center` would change how every existing call lays out inside a flex row.
+*/
 const center = definePattern({
-	properties: { inline: { type: "boolean" } },
+	properties: {
+		inline: { type: "boolean" },
+		size: {
+			type: "property",
+			value: "width"
+		}
+	},
 	transform(props) {
-		const { inline, ...rest } = props;
+		const { inline, size, ...rest } = props;
 		return {
 			display: inline ? "inline-flex" : "flex",
 			alignItems: "center",
 			justifyContent: "center",
+			flex: size == null ? void 0 : "0 0 auto",
+			width: size,
+			height: size,
 			...rest
 		};
 	}
@@ -483,12 +358,7 @@ const divider = definePattern({
 });
 const patterns = {
 	flex,
-	stack,
-	vstack,
-	hstack,
 	spacer,
-	square,
-	circle,
 	center,
 	linkOverlay: definePattern({ transform(props) {
 		return {
@@ -505,7 +375,6 @@ const patterns = {
 	aspectRatio,
 	grid,
 	gridItem,
-	wrap,
 	container: container$1,
 	divider,
 	float: definePattern({
@@ -630,28 +499,6 @@ const patterns = {
 				...rest
 			};
 		}
-	}),
-	cq: definePattern({
-		properties: {
-			name: {
-				type: "token",
-				value: "containerNames",
-				property: "containerName"
-			},
-			type: {
-				type: "property",
-				value: "containerType"
-			}
-		},
-		defaultValues: { type: "inline-size" },
-		transform(props) {
-			const { name, type, ...rest } = props;
-			return {
-				containerType: type,
-				containerName: name,
-				...rest
-			};
-		}
 	})
 };
 //#endregion
@@ -1091,28 +938,10 @@ const cursor = { cursor: {
 } };
 //#endregion
 //#region src/utilities/display.ts
-const display = {
-	display: {
-		className: "d",
-		group: "Display"
-	},
-	hideFrom: {
-		className: "hide",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}` : `@media (width >= ${value})`]: { display: "none" } };
-		}
-	},
-	hideBelow: {
-		className: "show",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}Down` : `@media (width < ${value})`]: { display: "none" } };
-		}
-	}
-};
+const display = { display: {
+	className: "d",
+	group: "Display"
+} };
 //#endregion
 //#region src/utilities/divide.ts
 const divideColor = createColorMixTransform("borderColor");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/preset-base",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "description": "The base preset for Bamboo CSS that contains the conditions and utilities",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@bamboocss/types": "1.31.0"
+    "@bamboocss/types": "1.33.0"
   },
   "scripts": {
     "build": "tsdown src/index.ts --format=esm,cjs --dts",