@nimbus-ds/components 5.57.7-rc.4 → 5.58.0-rc.2

package/dist/index.d.ts

@@ -41,21 +41,14 @@ export interface BadgeProperties {
 	 */
 	appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
 	/**
-	 * Total items to be displayed in the badge.
-	 * Not applicable when type is "dot".
+	 * Total items to be displayed without badge
 	 */
-	count?: number | string;
+	count: number | string;
 	/**
 	 * Change the color scheme of the badge.
 	 * @default surface
 	 */
 	theme?: "surface" | "light";
-	/**
-	 * Change the badge shape.
-	 * Use "dot" for a small indicator without text.
-	 * @default count
-	 */
-	type?: "count" | "dot";
 }
 export type BadgeProps = BadgeProperties & HTMLAttributes<HTMLElement>;
 export declare const Badge: React.FC<BadgeProps> & BadgeComponents;
@@ -118,9 +111,6 @@ declare const propertiesBox: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -145,9 +135,6 @@ declare const propertiesBox: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -193,7 +180,6 @@ declare const propertiesBox: {
 		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactiveLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -228,7 +214,6 @@ declare const propertiesBox: {
 		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactiveLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -246,15 +231,14 @@ declare const propertiesBox: {
 		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
 		 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
 		 */
-		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactiveLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -264,7 +248,6 @@ declare const propertiesBox: {
 	borderRadius: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -285,15 +268,14 @@ declare const propertiesBox: {
 	};
 	borderStyle: BorderStyle[];
 	boxSizing: BoxSizing[];
-	cursor: Cursor[];
+	cursor: Cursor[]; /**
+	 * The padding properties are used to generate space around an box's content area.
+	 */
 	spacing: {
 		none: string;
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -317,9 +299,6 @@ declare const propertiesBox: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -373,6 +352,8 @@ declare const propertiesBox: {
 		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
 	textAlign: TextAlign[];
 	fontWeight: {
@@ -384,9 +365,6 @@ declare const propertiesBox: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -416,9 +394,6 @@ declare const propertiesBox: {
 		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		/**
-		 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-		 */
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -443,9 +418,7 @@ declare const propertiesBox: {
 		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	}; /**
-	 * The paddingLeft property sets the width of the padding area to the right of an box.
-	 */
+	};
 	scrollbarWidth: ScrollbarWidth[];
 };
 export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
@@ -885,7 +858,6 @@ declare const fileUploader: {
 		borderRadius: {
 			"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -911,7 +883,7 @@ declare const fileUploader: {
 };
 declare const icon: {
 	sprinkle: ((props: {
-		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-interactivePressed" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | "ai-generativeTextHigh" | undefined;
+		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-interactivePressed" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | undefined;
 		cursor?: Cursor | undefined;
 	}) => string) & {
 		properties: Set<"color" | "cursor">;
@@ -943,7 +915,6 @@ declare const icon: {
 			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"ai-gradientPurpleHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"ai-generative": string;
 		};
 		cursor: Cursor[];
@@ -964,6 +935,7 @@ declare const propertiesIconButton: {
 		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		transparent: string;
 		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1023,7 +995,6 @@ declare const propertiesText: {
 		"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
 	textAlign: TextAlign[];
 	lineHeight: {
@@ -1217,10 +1188,6 @@ declare const text: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						"ai-generativeTextHigh": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
 					};
 					staticScale: {
 						"ai-generative": "transparent";
@@ -1248,21 +1215,20 @@ declare const text: {
 						"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					};
 					name: "color";
 				};
 				textAlign: {
 					values: {
-						left: {
+						center: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						right: {
+						left: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						center: {
+						right: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
@@ -1396,11 +1362,11 @@ declare const text: {
 				};
 				whiteSpace: {
 					values: {
-						normal: {
+						pre: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						pre: {
+						normal: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
@@ -1509,7 +1475,6 @@ declare const text: {
 			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"ai-generativeTextHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
 		textAlign: TextAlign[];
 		lineHeight: {
@@ -1686,11 +1651,11 @@ declare const list: {
 };
 declare const multiSelect: {
 	sprinkle: ((props: {
-		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | {
-			xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-			md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-			lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-			xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | {
+			xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
+			md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
+			lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
+			xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
 		} | undefined;
 	}) => string) & {
 		properties: Set<"zIndex">;
@@ -1706,6 +1671,8 @@ declare const multiSelect: {
 			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
 	};
 	classnames: {
@@ -1749,6 +1716,8 @@ declare const propertiesPopover: {
 		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
 	overflow: Overflow[];
 };
@@ -1797,7 +1766,7 @@ export interface PopoverSprinkle {
 }
 declare const spinner: {
 	sprinkle: ((props: {
-		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | undefined;
+		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | undefined;
 	}) => string) & {
 		properties: Set<"color">;
 	};
@@ -1817,7 +1786,6 @@ declare const spinner: {
 			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
 	};
 	classnames: {
@@ -1913,7 +1881,7 @@ declare const card: {
 	subComponents: {
 		header: {
 			sprinkle: ((props: {
-				padding?: "base" | "none" | "small" | undefined;
+				padding?: "base" | "small" | "none" | undefined;
 			}) => string) & {
 				properties: Set<"padding">;
 			};
@@ -1927,7 +1895,7 @@ declare const card: {
 		};
 		body: {
 			sprinkle: ((props: {
-				padding?: "base" | "none" | "small" | undefined;
+				padding?: "base" | "small" | "none" | undefined;
 			}) => string) & {
 				properties: Set<"padding">;
 			};
@@ -1941,7 +1909,7 @@ declare const card: {
 		};
 		footer: {
 			sprinkle: ((props: {
-				padding?: "base" | "none" | "small" | undefined;
+				padding?: "base" | "small" | "none" | undefined;
 			}) => string) & {
 				properties: Set<"padding">;
 			};
@@ -1956,7 +1924,7 @@ declare const card: {
 	};
 	sprinkle: ((props: {
 		backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
-		padding?: "base" | "none" | "small" | undefined;
+		padding?: "base" | "small" | "none" | undefined;
 	}) => string) & {
 		properties: Set<"backgroundColor" | "padding">;
 	};
@@ -2004,15 +1972,18 @@ export interface ModalSprinkle {
 declare const modal: {
 	classnames: {
 		overlay: string;
+		overlayZIndex: Record<"base" | "top", string>;
 		overlayScoped: string;
+		overlayScopedZIndex: Record<"base" | "top", string>;
 		container: string;
+		containerZIndex: Record<"base" | "top", string>;
 		container__close: string;
 		container__footer: string;
 	};
 	subComponents: {
 		header: {
 			sprinkle: ((props: {
-				padding?: "base" | "none" | "small" | undefined;
+				padding?: "base" | "small" | "none" | undefined;
 			}) => string) & {
 				properties: Set<"padding">;
 			};
@@ -2027,7 +1998,7 @@ declare const modal: {
 		};
 		body: {
 			sprinkle: ((props: {
-				padding?: "base" | "none" | "small" | undefined;
+				padding?: "base" | "small" | "none" | undefined;
 			}) => string) & {
 				properties: Set<"padding">;
 			};
@@ -2041,7 +2012,7 @@ declare const modal: {
 		};
 		footer: {
 			sprinkle: ((props: {
-				padding?: "base" | "none" | "small" | undefined;
+				padding?: "base" | "small" | "none" | undefined;
 			}) => string) & {
 				properties: Set<"padding">;
 			};
@@ -2144,6 +2115,14 @@ declare const sidebarSprinkle: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
+						1000: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						1100: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
 					};
 					staticScale: {
 						"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2155,6 +2134,8 @@ declare const sidebarSprinkle: {
 						"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					};
 					name: "zIndex";
 				};
@@ -2164,11 +2145,11 @@ declare const sidebarSprinkle: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						none: {
+						small: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						small: {
+						none: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
@@ -2215,6 +2196,8 @@ declare const sidebarSprinkle: {
 			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
 		padding: {
 			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2283,6 +2266,14 @@ declare const sidebar: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
+						1000: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						1100: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
 					};
 					staticScale: {
 						"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2294,6 +2285,8 @@ declare const sidebar: {
 						"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					};
 					name: "zIndex";
 				};
@@ -2303,11 +2296,11 @@ declare const sidebar: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						none: {
+						small: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						small: {
+						none: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
@@ -2354,6 +2347,8 @@ declare const sidebar: {
 			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
 		padding: {
 			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2459,7 +2454,7 @@ export interface ButtonProperties {
 	 * Change the visual style of the button.
 	 * @default neutral
 	 */
-	appearance?: "primary" | "danger" | "success" | "warning" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
+	appearance?: "primary" | "danger" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
 	/**
 	 * Disables the button, disallowing user interaction.
 	 * @default false
@@ -2756,12 +2751,10 @@ export interface IconButtonProperties extends IconButtonSprinkle {
 	 */
 	color?: IconProps["color"];
 	/**
-	 * Visual style of the icon button container.
-	 * - `transparent`: no background or border at rest; subtle hover/active states only.
-	 * - `ai-generative`: gradient background; overrides color/border sprinkles.
-	 * When omitted, the default bordered appearance is used.
+	 * AI gradient background appearance for the button container.
+	 * When provided, container color/border sprinkles are ignored in favor of gradient styles.
 	 */
-	appearance?: "transparent" | "ai-generative" | "ai-secondary";
+	appearance?: "ai-generative";
 }
 export type IconButtonProps = IconButtonProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
 export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
@@ -3975,6 +3968,20 @@ export interface ModalProperties extends ModalSprinkle {
 	 * @default base
 	 */
 	padding?: keyof typeof modal.properties.padding;
+	/**
+	 * Controls whether the built-in close (X) button renders.
+	 * Only takes effect when `onDismiss` is provided.
+	 * @default true
+	 */
+	renderDismissButton?: boolean;
+	/**
+	 * Stacking layer for the modal.
+	 * - "base": standard modal layer (above the page, below floating components like tooltip/toast/popover).
+	 * - "top": renders above all other floating components. Reserved exclusively for Modal.
+	 *   Only effective on the default portaled path; has no effect when `root` is provided.
+	 * @default "base"
+	 */
+	zIndex?: "base" | "top";
 }
 export type ModalProps = ModalProperties & {
 	/**