@nattstack/ui 0.1.0 → 0.1.1

package/dist/components/combobox/combobox-input.js

@@ -1,26 +1,27 @@
-import { cn, sx } from "../cn.js";
-import { comboboxInputStyles } from "./combobox-input.stylex.js";
+import { cn } from "../cn.js";
+import { comboboxInputStyles, comboboxInputStylesBy } from "./combobox-input.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-input.tsx
 function ComboboxInput(props) {
-	const { className: customClassName = "", disabled = false, rounded = false, size = 40, ...rest } = props;
+	const { className = "", disabled = false, rounded = false, size = 40, ...rest } = props;
+	const combinedClassName = cn(comboboxInputStyles.base, comboboxInputStylesBy.size[size], rounded && comboboxInputStylesBy.rounded.full, className);
 	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
-		className: cn(sx(comboboxInputStyles.base, comboboxInputStyles[size], rounded && comboboxInputStyles.roundedFull), customClassName),
-		"data-slot": "combobox-input-group",
+		className: combinedClassName,
+		"data-component": "combobox-input-group",
 		children: [/* @__PURE__ */ jsx(Combobox.Input, {
-			className: sx(comboboxInputStyles.input),
-			"data-slot": "combobox-input",
+			className: cn(comboboxInputStyles.input),
+			"data-component": "combobox-input",
 			disabled,
 			...rest
 		}), /* @__PURE__ */ jsx(Combobox.Trigger, {
-			className: sx(comboboxInputStyles.trigger),
-			"data-slot": "combobox-input-trigger",
+			className: cn(comboboxInputStyles.trigger),
+			"data-component": "combobox-input-trigger",
 			disabled,
 			tabIndex: -1,
 			children: /* @__PURE__ */ jsx(Combobox.Icon, {
-				className: sx(comboboxInputStyles.icon),
-				"data-slot": "combobox-input-icon",
+				className: cn(comboboxInputStyles.icon),
+				"data-component": "combobox-input-icon",
 				children: /* @__PURE__ */ jsx("svg", {
 					height: "14",
 					viewBox: "0 0 18 18",
@@ -40,4 +41,4 @@ function ComboboxInput(props) {
 	});
 }
 //#endregion
-export { ComboboxInput, comboboxInputStyles };
+export { ComboboxInput };

package/dist/components/combobox/combobox-input.stylex.js

@@ -1,30 +1,5 @@
 //#region src/components/combobox/combobox-input.stylex.ts
 const comboboxInputStyles = {
-	"32": {
-		kaIpWk: "xur7f20",
-		kZKoxP: "x10w6t97",
-		$$css: true
-	},
-	"36": {
-		kaIpWk: "xhpnuu7",
-		kZKoxP: "xc9qbxq",
-		$$css: true
-	},
-	"40": {
-		kaIpWk: "x1q4ynmn",
-		kZKoxP: "x1vqgdyp",
-		$$css: true
-	},
-	"44": {
-		kaIpWk: "x1ctf4ec",
-		kZKoxP: "xn3w4p2",
-		$$css: true
-	},
-	"48": {
-		kaIpWk: "x4pepcl",
-		kZKoxP: "xsdox4t",
-		$$css: true
-	},
 	base: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xoepl9e xm4hijy x1h73wb5 xpy517o",
@@ -76,10 +51,35 @@ const comboboxInputStyles = {
 		kmVPX3: "x1717udv",
 		$$css: true
 	},
-	roundedFull: {
+	rounded_full: {
 		kaIpWk: "x10hpsqq",
 		$$css: true
 	},
+	size_32: {
+		kaIpWk: "xur7f20",
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	size_36: {
+		kaIpWk: "xhpnuu7",
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	size_40: {
+		kaIpWk: "x1q4ynmn",
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	size_44: {
+		kaIpWk: "x1ctf4ec",
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	size_48: {
+		kaIpWk: "x4pepcl",
+		kZKoxP: "xsdox4t",
+		$$css: true
+	},
 	trigger: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xjbqb8w",
@@ -96,5 +96,15 @@ const comboboxInputStyles = {
 		$$css: true
 	}
 };
+const comboboxInputStylesBy = {
+	rounded: { full: comboboxInputStyles.rounded_full },
+	size: {
+		32: comboboxInputStyles.size_32,
+		36: comboboxInputStyles.size_36,
+		40: comboboxInputStyles.size_40,
+		44: comboboxInputStyles.size_44,
+		48: comboboxInputStyles.size_48
+	}
+};
 //#endregion
-export { comboboxInputStyles };
+export { comboboxInputStyles, comboboxInputStylesBy };

package/dist/components/combobox/combobox-item.js

@@ -1,21 +1,22 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { pickerItemStyles } from "../picker/picker-item.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-item.tsx
 function ComboboxItem(props) {
-	const { children, className: customClassName = "", ...rest } = props;
+	const { children, className = "", ...rest } = props;
+	const combinedClassName = cn(pickerItemStyles.base, className);
 	return /* @__PURE__ */ jsxs(Combobox.Item, {
-		className: cn(sx(pickerItemStyles.base), customClassName),
-		"data-slot": "combobox-item",
+		className: combinedClassName,
+		"data-component": "combobox-item",
 		...rest,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: sx(pickerItemStyles.label),
-			"data-slot": "combobox-item-text",
+			className: cn(pickerItemStyles.label),
+			"data-component": "combobox-item-text",
 			children
 		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-			className: sx(pickerItemStyles.indicator),
-			"data-slot": "combobox-item-indicator",
+			className: cn(pickerItemStyles.indicator),
+			"data-component": "combobox-item-indicator",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
 				viewBox: "0 0 18 18",

package/dist/components/combobox/combobox-list.js

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { pickerListStyles } from "../picker/picker-list.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-list.tsx
 function ComboboxList(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(pickerListStyles.base, className);
 	return /* @__PURE__ */ jsx(Combobox.List, {
-		className: cn(sx(pickerListStyles.base), customClassName),
-		"data-slot": "combobox-list",
+		className: combinedClassName,
+		"data-component": "combobox-list",
 		...rest
 	});
 }

package/dist/components/combobox/combobox-search.d.ts

@@ -1,4 +1,3 @@
-import { comboboxSearchStyles } from "./combobox-search.stylex.js";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-search.d.ts
@@ -7,4 +6,4 @@ interface ComboboxSearchProps extends Omit<Combobox.Input.Props, "className" | "
 }
 declare function ComboboxSearch(props: ComboboxSearchProps): JSX.Element;
 //#endregion
-export { ComboboxSearch, ComboboxSearchProps, comboboxSearchStyles };
+export { ComboboxSearch, ComboboxSearchProps };

package/dist/components/combobox/combobox-search.js

@@ -1,16 +1,17 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { comboboxSearchStyles } from "./combobox-search.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-search.tsx
 function ComboboxSearch(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(comboboxSearchStyles.base, className);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(sx(comboboxSearchStyles.base), customClassName),
-		"data-slot": "combobox-search",
+		className: combinedClassName,
+		"data-component": "combobox-search",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: sx(comboboxSearchStyles.icon),
-			"data-slot": "combobox-search-icon",
+			className: cn(comboboxSearchStyles.icon),
+			"data-component": "combobox-search-icon",
 			children: /* @__PURE__ */ jsxs("svg", {
 				height: "18",
 				viewBox: "0 0 18 18",
@@ -33,11 +34,11 @@ function ComboboxSearch(props) {
 				})]
 			})
 		}), /* @__PURE__ */ jsx(Combobox.Input, {
-			className: sx(comboboxSearchStyles.input),
-			"data-slot": "combobox-search-input",
+			className: cn(comboboxSearchStyles.input),
+			"data-component": "combobox-search-input",
 			...rest
 		})]
 	});
 }
 //#endregion
-export { ComboboxSearch, comboboxSearchStyles };
+export { ComboboxSearch };

package/dist/components/combobox/combobox-separator.js

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { pickerSeparatorStyles } from "../picker/picker-separator.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-separator.tsx
 function ComboboxSeparator(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(pickerSeparatorStyles.base, className);
 	return /* @__PURE__ */ jsx(Combobox.Separator, {
-		className: cn(sx(pickerSeparatorStyles.base), customClassName),
-		"data-slot": "combobox-separator",
+		className: combinedClassName,
+		"data-component": "combobox-separator",
 		...rest
 	});
 }

package/dist/components/combobox/combobox-trigger.js

@@ -1,17 +1,18 @@
-import { cn, sx } from "../cn.js";
-import { pickerTriggerStyles } from "../picker/picker-trigger.stylex.js";
+import { cn } from "../cn.js";
+import { pickerTriggerStyles, pickerTriggerStylesBy } from "../picker/picker-trigger.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-trigger.tsx
 function ComboboxTrigger(props) {
-	const { children = void 0, className: customClassName = "", rounded = false, size = 40, ...rest } = props;
+	const { children = void 0, className = "", rounded = false, size = 40, ...rest } = props;
+	const combinedClassName = cn(pickerTriggerStyles.base, pickerTriggerStylesBy.size[size], rounded && pickerTriggerStylesBy.rounded.full, className);
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
-		className: cn(sx(pickerTriggerStyles.base, pickerTriggerStyles[size], rounded && pickerTriggerStyles.roundedFull), customClassName),
-		"data-slot": "combobox-trigger",
+		className: combinedClassName,
+		"data-component": "combobox-trigger",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(Combobox.Icon, {
-			className: sx(pickerTriggerStyles.icon),
-			"data-slot": "combobox-icon",
+			className: cn(pickerTriggerStyles.icon),
+			"data-component": "combobox-icon",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14",
 				viewBox: "0 0 18 18",

package/dist/components/combobox/combobox-value.d.ts

@@ -1,4 +1,3 @@
-import { comboboxValueStyles } from "./combobox-value.stylex.js";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-value.d.ts
@@ -7,4 +6,4 @@ interface ComboboxValueProps extends Combobox.Value.Props {
 }
 declare function ComboboxValue(props: ComboboxValueProps): JSX.Element;
 //#endregion
-export { ComboboxValue, ComboboxValueProps, comboboxValueStyles };
+export { ComboboxValue, ComboboxValueProps };

package/dist/components/combobox/combobox-value.js

@@ -1,14 +1,15 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { comboboxValueStyles } from "./combobox-value.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-value.tsx
 function ComboboxValue(props) {
-	const { children = void 0, className: customClassName = "", placeholder = void 0, ...rest } = props;
+	const { children = void 0, className = "", placeholder = void 0, ...rest } = props;
 	const resolvedChildren = typeof children === "function" ? (selectedValue) => (selectedValue ?? void 0) === void 0 ? placeholder : children(selectedValue) : children;
+	const combinedClassName = cn(comboboxValueStyles.base, className);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(sx(comboboxValueStyles.base), customClassName),
-		"data-slot": "combobox-value",
+		className: combinedClassName,
+		"data-component": "combobox-value",
 		children: /* @__PURE__ */ jsx(Combobox.Value, {
 			placeholder,
 			...rest,
@@ -17,4 +18,4 @@ function ComboboxValue(props) {
 	});
 }
 //#endregion
-export { ComboboxValue, comboboxValueStyles };
+export { ComboboxValue };

package/dist/components/combobox/combobox.js

@@ -4,7 +4,7 @@ import { Combobox } from "@base-ui/react";
 function Combobox$1(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Combobox.Root, {
-		"data-slot": "combobox",
+		"data-component": "combobox",
 		...rest
 	});
 }

package/dist/components/dialog-responsive/dialog-responsive-backdrop.js

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { dialogResponsiveBackdropStyles } from "./dialog-responsive-backdrop.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-backdrop.tsx
 function DialogResponsiveBackdrop(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(dialogResponsiveBackdropStyles.base, className);
 	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
-		className: cn(sx(dialogResponsiveBackdropStyles.base), customClassName),
-		"data-slot": "dialog-responsive-backdrop",
+		className: combinedClassName,
+		"data-component": "dialog-responsive-backdrop",
 		...rest
 	});
 }

package/dist/components/dialog-responsive/dialog-responsive-bar.js

@@ -1,12 +1,13 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { dialogResponsiveBarStyles } from "./dialog-responsive-bar.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/dialog-responsive/dialog-responsive-bar.tsx
 function DialogResponsiveBar(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(dialogResponsiveBarStyles.base, className);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(sx(dialogResponsiveBarStyles.base), customClassName),
-		"data-slot": "dialog-responsive-bar",
+		className: combinedClassName,
+		"data-component": "dialog-responsive-bar",
 		...rest
 	});
 }

package/dist/components/dialog-responsive/dialog-responsive-popup.d.ts

@@ -1,8 +1,7 @@
-import { dialogResponsivePopupStyles } from "./dialog-responsive-popup.stylex.js";
 import { Drawer } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/dialog-responsive/dialog-responsive-popup.d.ts
 interface DialogResponsivePopupProps extends Drawer.Popup.Props {}
 declare function DialogResponsivePopup(props: DialogResponsivePopupProps): JSX.Element;
 //#endregion
-export { DialogResponsivePopup, DialogResponsivePopupProps, dialogResponsivePopupStyles };
+export { DialogResponsivePopup, DialogResponsivePopupProps };

package/dist/components/dialog-responsive/dialog-responsive-popup.js

@@ -1,4 +1,4 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { DialogResponsiveBackdrop } from "./dialog-responsive-backdrop.js";
 import { DialogResponsiveBar } from "./dialog-responsive-bar.js";
 import { dialogResponsivePopupStyles } from "./dialog-responsive-popup.stylex.js";
@@ -8,13 +8,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-popup.tsx
 function DialogResponsivePopup(props) {
-	const { children, className: customClassName = "", ...rest } = props;
+	const { children, className = "", ...rest } = props;
+	const combinedClassName = cn(dialogResponsivePopupStyles.base, className);
 	return /* @__PURE__ */ jsxs(DialogResponsivePortal, { children: [/* @__PURE__ */ jsx(DialogResponsiveBackdrop, {}), /* @__PURE__ */ jsx(DialogResponsiveViewport, { children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-		className: cn(sx(dialogResponsivePopupStyles.base), customClassName),
-		"data-slot": "dialog-responsive-popup",
+		className: combinedClassName,
+		"data-component": "dialog-responsive-popup",
 		...rest,
 		children: [/* @__PURE__ */ jsx(DialogResponsiveBar, {}), children]
 	}) })] });
 }
 //#endregion
-export { DialogResponsivePopup, dialogResponsivePopupStyles };
+export { DialogResponsivePopup };

package/dist/components/dialog-responsive/dialog-responsive-portal.js

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { dialogResponsivePortalStyles } from "./dialog-responsive-portal.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-portal.tsx
 function DialogResponsivePortal(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(dialogResponsivePortalStyles.base, className);
 	return /* @__PURE__ */ jsx(Drawer.Portal, {
-		className: cn(sx(dialogResponsivePortalStyles.base), customClassName),
-		"data-slot": "dialog-responsive-portal",
+		className: combinedClassName,
+		"data-component": "dialog-responsive-portal",
 		...rest
 	});
 }

package/dist/components/dialog-responsive/dialog-responsive-trigger.js

@@ -4,7 +4,7 @@ import { Drawer } from "@base-ui/react";
 function DialogResponsiveTrigger(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Drawer.Trigger, {
-		"data-slot": "dialog-responsive-trigger",
+		"data-component": "dialog-responsive-trigger",
 		...rest
 	});
 }

package/dist/components/dialog-responsive/dialog-responsive-viewport.js

@@ -1,13 +1,14 @@
-import { cn, sx } from "../cn.js";
+import { cn } from "../cn.js";
 import { dialogResponsiveViewportStyles } from "./dialog-responsive-viewport.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-viewport.tsx
 function DialogResponsiveViewport(props) {
-	const { className: customClassName = "", ...rest } = props;
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(dialogResponsiveViewportStyles.base, className);
 	return /* @__PURE__ */ jsx(Drawer.Viewport, {
-		className: cn(sx(dialogResponsiveViewportStyles.base), customClassName),
-		"data-slot": "dialog-responsive-viewport",
+		className: combinedClassName,
+		"data-component": "dialog-responsive-viewport",
 		...rest
 	});
 }

package/dist/components/dialog-responsive/dialog-responsive.js

@@ -2,10 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive.tsx
 function DialogResponsive(props) {
+	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Drawer.Root, {
-		"data-slot": "dialog-responsive",
+		"data-component": "dialog-responsive",
 		swipeDirection: "down",
-		...props
+		...rest
 	});
 }
 //#endregion

package/dist/components/icon-button/icon-button.d.ts

@@ -1,5 +1,4 @@
 import { ButtonProps } from "../button/button.js";
-import { iconButtonStyles } from "./icon-button.stylex.js";
 import { JSX, ReactNode } from "react";
 //#region src/components/icon-button/icon-button.d.ts
 interface IconButtonProps extends Omit<ButtonProps, "fullWidth" | "iconEnd" | "iconStart" | "label"> {
@@ -7,4 +6,4 @@ interface IconButtonProps extends Omit<ButtonProps, "fullWidth" | "iconEnd" | "i
 }
 declare function IconButton(props: IconButtonProps): JSX.Element;
 //#endregion
-export { IconButton, IconButtonProps, iconButtonStyles };
+export { IconButton, IconButtonProps };

package/dist/components/icon-button/icon-button.js

@@ -1,30 +1,19 @@
-import { sx } from "../cn.js";
+import { buttonStyles, buttonStylesBy } from "../button/button.stylex.js";
+import { cn } from "../cn.js";
 import { ButtonSpinner } from "../button/button-spinner.js";
-import { buttonStyles } from "../button/button.stylex.js";
-import { getButtonClassName } from "../button/button.js";
-import { iconButtonStyles } from "./icon-button.stylex.js";
+import { iconButtonStyles, iconButtonStylesBy } from "./icon-button.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icon-button/icon-button.tsx
 function IconButton(props) {
-	const { className = "", icon = "", disabled = false, loading = false, rounded = false, variant = "primary", size = 40, ...rest } = props;
+	const { className = "", disabled = false, icon = "", loading = false, rounded = false, size = 40, variant = "primary", ...rest } = props;
+	const combinedClassName = cn(buttonStyles.base, buttonStylesBy.rounded[rounded ? "full" : "base"][size], buttonStylesBy.size[size], buttonStylesBy.variant[variant], buttonStylesBy.width.base, (disabled || loading) && buttonStyles.disabled, iconButtonStyles.base, iconButtonStylesBy.size[size], className);
 	return /* @__PURE__ */ jsxs("button", {
-		className: getButtonClassName({
-			className,
-			disabled,
-			loading,
-			rounded,
-			size,
-			variant
-		}, iconButtonStyles[size]),
-		"data-slot": "icon-button",
+		className: combinedClassName,
+		"data-component": "icon-button",
 		disabled: disabled || loading,
-		type: "button",
 		...rest,
-		children: [loading && /* @__PURE__ */ jsx(ButtonSpinner, {}), loading ? /* @__PURE__ */ jsx("span", {
-			className: sx(buttonStyles.loadingContent),
-			children: icon
-		}) : icon]
+		children: [!loading && icon, loading && /* @__PURE__ */ jsx(ButtonSpinner, {})]
 	});
 }
 //#endregion
-export { IconButton, iconButtonStyles };
+export { IconButton };

package/dist/components/icon-button/icon-button.stylex.js

@@ -1,25 +1,36 @@
 //#region src/components/icon-button/icon-button.stylex.ts
 const iconButtonStyles = {
-	"32": {
+	base: {
+		kg3NbH: "xnjsko4",
+		$$css: true
+	},
+	size_32: {
 		kzqmXN: "x1td3qas",
 		$$css: true
 	},
-	"36": {
+	size_36: {
 		kzqmXN: "x14qfxbe",
 		$$css: true
 	},
-	"40": {
+	size_40: {
 		kzqmXN: "x100vrsf",
 		$$css: true
 	},
-	"44": {
+	size_44: {
 		kzqmXN: "x187nhsf",
 		$$css: true
 	},
-	"48": {
+	size_48: {
 		kzqmXN: "x1useyqa",
 		$$css: true
 	}
 };
+const iconButtonStylesBy = { size: {
+	32: iconButtonStyles.size_32,
+	36: iconButtonStyles.size_36,
+	40: iconButtonStyles.size_40,
+	44: iconButtonStyles.size_44,
+	48: iconButtonStyles.size_48
+} };
 //#endregion
-export { iconButtonStyles };
+export { iconButtonStyles, iconButtonStylesBy };