@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/button/Button.js

@@ -1,101 +1,102 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef, useEffect } from 'react';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import '../utils/conditions.js';
-import { decorateChildren } from '../utils/decorateChildren.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import '../utils/isHoverSupported.js';
-import { ButtonAddon } from './ButtonAddon.js';
-import { useButtonContext } from './ButtonContext.js';
-import { ButtonIcon } from './ButtonIcon.js';
-import { ButtonLabel } from './ButtonLabel.js';
-import { ButtonLoadable } from './ButtonLoadable.js';
-import { ButtonRoot } from './ButtonRoot.js';
-
-const Slot$b = createSlot("@optiaxiom/react/Button");
-const Button = forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    asChild,
-    children,
-    icon,
-    iconPosition = "start",
-    onClick,
-    size: sizeProp,
-    square,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot$b : "button";
-    const context = useButtonContext("@optiaxiom/react/Button");
-    const surface = useSurface("action");
-    const size = sizeProp || context.size || "md";
-    let isIconOnly = false;
-    children = decorateChildren({ asChild, children }, (children2) => {
-      isIconOnly = Boolean(!children2 && icon);
-      if (isIconOnly) {
-        square = true;
-      }
-      if (icon && !isIconOnly) {
-        if (iconPosition === "start") {
-          addonBefore = /* @__PURE__ */ jsx(
-            ButtonIcon,
-            {
-              addon: true,
-              inverse: props.appearance === "primary",
-              size,
-              children: icon
-            }
-          );
-        } else if (iconPosition === "end") {
-          addonAfter = /* @__PURE__ */ jsx(
-            ButtonIcon,
-            {
-              addon: true,
-              inverse: props.appearance === "primary",
-              size,
-              children: icon
-            }
-          );
-        }
-      }
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        addonBefore && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
-        square ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: children2 ? fallbackSpan(children2) : /* @__PURE__ */ jsx(ButtonIcon, { size, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { size, children: children2 }),
-        addonAfter && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonAfter) })
-      ] });
-    });
-    const isIconMissingAriaLabel = isIconOnly && !props["aria-label"];
-    useEffect(() => {
-      if (isIconMissingAriaLabel) {
-        console.error(
-          `Icon only \`Button\` requires an \`aria-label\` for the component to be accessible for screen reader users.`
-        );
-      }
-    }, [isIconMissingAriaLabel]);
-    return /* @__PURE__ */ jsx(
-      ButtonRoot,
-      {
-        asChild: true,
-        justifyContent: square ? "center" : iconPosition === "end" ? "space-between" : "flex-start",
-        onClick: (event) => {
-          onClick?.(event);
-          if (surface) {
-            surface.track({ name: "invoked" });
-          }
-        },
-        ref,
-        size,
-        square,
-        ...props,
-        children: /* @__PURE__ */ jsx(Comp, { children })
-      }
-    );
-  }
-);
+import { useSurface } from "../surface/useSurface.js";
+import { decorateChildren } from "../utils/decorateChildren.js";
+import { fallbackSpan } from "../utils/fallbackSpan.js";
+import { ButtonLoadable } from "./ButtonLoadable.js";
+import { ButtonAddon } from "./ButtonAddon.js";
+import { useButtonContext } from "./ButtonContext.js";
+import { ButtonIcon } from "./ButtonIcon.js";
+import { ButtonLabel } from "./ButtonLabel.js";
+import { ButtonRoot } from "./ButtonRoot.js";
+import { forwardRef, useEffect } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/button/Button.tsx
+const Slot = createSlot("@optiaxiom/react/Button");
+/**
+* Button component for triggering actions, with support for icons, addons, and
+* loading states.
+*
+* Use this for standard action buttons. The component supports icon-only
+* buttons, buttons with leading/trailing icons, and custom addon content before
+* or after the main label.
+*
+* When not to use:
+* - For menu and select buttons with a chevron use AngleMenuButton instead.
+* - For ellipsis menus use EllipsisMenuButton instead.
+* - For buttons that include label use LabelMenuButton instead.
+* - For expand/collapse triggers use Disclosure instead of Button with chevron
+*   icon and manual state.
+* - Don't use Button to build tab navigation - use Tabs instead.
+*
+* @category actions
+* @since 0.1.0
+*/
+const Button = forwardRef(({ addonAfter, addonBefore, asChild, children, icon, iconPosition = "start", onClick, size: sizeProp, square, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const context = useButtonContext("@optiaxiom/react/Button");
+	const surface = useSurface("action");
+	const size = sizeProp || context.size || "md";
+	let isIconOnly = false;
+	children = decorateChildren({
+		asChild,
+		children
+	}, (children) => {
+		isIconOnly = Boolean(!children && icon);
+		if (isIconOnly) square = true;
+		if (icon && !isIconOnly) {
+			if (iconPosition === "start") addonBefore = /* @__PURE__ */ jsx(ButtonIcon, {
+				addon: true,
+				inverse: props.appearance === "primary",
+				size,
+				children: icon
+			});
+			else if (iconPosition === "end") addonAfter = /* @__PURE__ */ jsx(ButtonIcon, {
+				addon: true,
+				inverse: props.appearance === "primary",
+				size,
+				children: icon
+			});
+		}
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			addonBefore && /* @__PURE__ */ jsx(ButtonAddon, {
+				asChild: true,
+				children: fallbackSpan(addonBefore)
+			}),
+			square ? /* @__PURE__ */ jsx(ButtonLoadable, {
+				asChild: true,
+				children: children ? fallbackSpan(children) : /* @__PURE__ */ jsx(ButtonIcon, {
+					size,
+					children: icon
+				})
+			}) : /* @__PURE__ */ jsx(ButtonLabel, {
+				size,
+				children
+			}),
+			addonAfter && /* @__PURE__ */ jsx(ButtonAddon, {
+				asChild: true,
+				children: fallbackSpan(addonAfter)
+			})
+		] });
+	});
+	const isIconMissingAriaLabel = isIconOnly && !props["aria-label"];
+	useEffect(() => {
+		if (isIconMissingAriaLabel) console.error(`Icon only \`Button\` requires an \`aria-label\` for the component to be accessible for screen reader users.`);
+	}, [isIconMissingAriaLabel]);
+	return /* @__PURE__ */ jsx(ButtonRoot, {
+		asChild: true,
+		justifyContent: square ? "center" : iconPosition === "end" ? "space-between" : "flex-start",
+		onClick: (event) => {
+			onClick?.(event);
+			if (surface) surface.track({ name: "invoked" });
+		},
+		ref,
+		size,
+		square,
+		...props,
+		children: /* @__PURE__ */ jsx(Comp, { children })
+	});
+});
 Button.displayName = "@optiaxiom/react/Button";
-
+//#endregion
 export { Button };

package/dist/esm/packages/react/src/button/ButtonAddon.js

@@ -1,16 +1,21 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { ButtonLoadable } from './ButtonLoadable.js';
-
-const ButtonAddon = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Box, { display: "flex", flex: "none", ref, ...props, children }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { ButtonLoadable } from "./ButtonLoadable.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/button/ButtonAddon.tsx
+const ButtonAddon = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(ButtonLoadable, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Box, {
+			display: "flex",
+			flex: "none",
+			ref,
+			...props,
+			children
+		})
+	});
+});
 ButtonAddon.displayName = "@optiaxiom/react/ButtonAddon";
-
+//#endregion
 export { ButtonAddon };

package/dist/esm/packages/react/src/button/ButtonContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/button/ButtonContext.ts
 const [ButtonProvider, useButtonContext] = createContext("@optiaxiom/react/Button", { size: void 0 });
-
+//#endregion
 export { ButtonProvider, useButtonContext };

package/dist/esm/packages/react/src/button/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var buttonGroup = recipeRuntime({base:'zat0s3'});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/button/ButtonGroup.css.ts.vanilla-0zUyMVwg.css";
+//#region src/button/ButtonGroup.css.ts
+var buttonGroup = recipeRuntime({ base: "ckdc52" });
+//#endregion
 export { buttonGroup };

package/dist/esm/packages/react/src/button/ButtonGroup.js

@@ -1,25 +1,23 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Group } from '../group/Group.js';
-import { buttonGroup } from './ButtonGroup-css.js';
-
-const ButtonGroup = forwardRef(
-  ({ children, className, gap = "0", orientation = "horizontal", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        "data-orientation": gap === "0" ? orientation : void 0,
-        flexDirection: orientation === "vertical" ? "column" : "row",
-        gap,
-        ref,
-        ...buttonGroup({}, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
+import { Group } from "../group/Group.js";
+import { buttonGroup } from "./ButtonGroup-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/button/ButtonGroup.tsx
+/**
+* @group Button
+*/
+const ButtonGroup = forwardRef(({ children, className, gap = "0", orientation = "horizontal", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Group, {
+		"data-orientation": gap === "0" ? orientation : void 0,
+		flexDirection: orientation === "vertical" ? "column" : "row",
+		gap,
+		ref,
+		...buttonGroup({}, className),
+		...props,
+		children
+	});
+});
 ButtonGroup.displayName = "@optiaxiom/react/ButtonGroup";
-
+//#endregion
 export { ButtonGroup };

package/dist/esm/packages/react/src/button/ButtonIcon-css.js

@@ -1,9 +1,55 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B02H1riu.css';
-import './../../../../assets/src/button/ButtonIcon.css.ts.vanilla-DMkJWIBR.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var icon$4 = recipeRuntime({variants:{addon:{false:'_1ix1d0p',true:{}},inverse:{false:{},true:{}},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:'_1tlan00',variants:{addon:true,size:'sm'}},{style:'_1pz4hdc',variants:{addon:true,size:'md'}},{style:'_1gs6xq8',variants:{addon:true,size:'lg'}},{style:[{rounded:'sm'},'_3r04be'],variants:{inverse:true,size:'lg'}}]});
-
-export { icon$4 as icon };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/button/ButtonGroup.css.ts.vanilla-0zUyMVwg.css";
+import "./../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DmFP5Ibu.css";
+import "./../../../../assets/src/button/ButtonIcon.css.ts.vanilla-6zr0csFp.css";
+//#region src/button/ButtonIcon.css.ts
+var icon = recipeRuntime({
+	variants: {
+		addon: {
+			false: "_1o18ybq",
+			true: {}
+		},
+		inverse: {
+			false: {},
+			true: {}
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		}
+	},
+	variantsCompounded: [
+		{
+			style: "tsuyxg",
+			variants: {
+				addon: true,
+				size: "sm"
+			}
+		},
+		{
+			style: "_13cyy38",
+			variants: {
+				addon: true,
+				size: "md"
+			}
+		},
+		{
+			style: "_1sc9w8m",
+			variants: {
+				addon: true,
+				size: "lg"
+			}
+		},
+		{
+			style: [{ rounded: "sm" }, "gbsx9u"],
+			variants: {
+				inverse: true,
+				size: "lg"
+			}
+		}
+	]
+});
+//#endregion
+export { icon };

package/dist/esm/packages/react/src/button/ButtonIcon.js

@@ -1,23 +1,22 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Icon } from '../icon/Icon.js';
-import { icon } from './ButtonIcon-css.js';
-
-const ButtonIcon = forwardRef(
-  ({ addon, children, className, inverse = false, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        asChild: true,
-        ref,
-        ...icon({ addon, inverse, size }, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
+import { Icon } from "../icon/Icon.js";
+import { icon } from "./ButtonIcon-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/button/ButtonIcon.tsx
+const ButtonIcon = forwardRef(({ addon, children, className, inverse = false, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Icon, {
+		asChild: true,
+		ref,
+		...icon({
+			addon,
+			inverse,
+			size
+		}, className),
+		...props,
+		children
+	});
+});
 ButtonIcon.displayName = "@optiaxiom/react/ButtonIcon";
-
+//#endregion
 export { ButtonIcon };

package/dist/esm/packages/react/src/button/ButtonLabel.js

@@ -1,19 +1,29 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Text } from '../text/Text.js';
-import { ButtonLoadable } from './ButtonLoadable.js';
-
+import { ButtonLoadable } from "./ButtonLoadable.js";
+import { Text } from "../text/Text.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/button/ButtonLabel.tsx
 const mapSizeToMargin = {
-  sm: "4",
-  md: "6",
-  lg: "6"
+	sm: "4",
+	md: "6",
+	lg: "6"
 };
-const ButtonLabel = forwardRef(
-  ({ children, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Text, { asChild: true, mx: mapSizeToMargin[size], truncate: true, children: /* @__PURE__ */ jsx("div", { ref, ...props, children }) }) });
-  }
-);
+const ButtonLabel = forwardRef(({ children, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(ButtonLoadable, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Text, {
+			asChild: true,
+			mx: mapSizeToMargin[size],
+			truncate: true,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				...props,
+				children
+			})
+		})
+	});
+});
 ButtonLabel.displayName = "@optiaxiom/react/ButtonLabel";
-
+//#endregion
 export { ButtonLabel };

package/dist/esm/packages/react/src/button/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B02H1riu.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-DEBYAYOn.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1kn9bf3']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/button/ButtonGroup.css.ts.vanilla-0zUyMVwg.css";
+import "./../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DmFP5Ibu.css";
+import "./../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-loU3iS1f.css";
+//#region src/button/ButtonLoadable.css.ts
+var loadable = recipeRuntime({ base: [{ transition: "opacity" }, "dw0e17"] });
+//#endregion
 export { loadable };

package/dist/esm/packages/react/src/button/ButtonLoadable.js

@@ -1,16 +1,17 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { loadable } from './ButtonLoadable-css.js';
-
-const ButtonLoadable = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...loadable({}, className), ...props, children });
-  }
-);
+import { Box } from "../box/Box.js";
+import { loadable } from "./ButtonLoadable-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/button/ButtonLoadable.tsx
+const ButtonLoadable = forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...loadable({}, className),
+		...props,
+		children
+	});
+});
 ButtonLoadable.displayName = "@optiaxiom/react/ButtonLoadable";
-
+//#endregion
 export { ButtonLoadable };

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -1,9 +1,119 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cw2ao1B0.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B02H1riu.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var buttonBase = recipeRuntime({base:['_11tstaf',{alignItems:'center',display:'inline-flex',flexDirection:'row',fontWeight:'500',justifyContent:'flex-start',transition:'colors'},'_3jhy6e'],variants:{intent:{danger:'vti6ig',neutral:'_16jdju8',primary:'jl1y77'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',h:'md'},lg:{fontSize:'lg',h:'lg'}},square:{false:{},true:{}},variant:{outline:'td5ytm','outline-opal':'q1hpw2',strong:'_1s5hfhk','strong-opal':'jki374',subtle:'_1bcz5t5'}},variantsCompounded:[{style:[{pl:'6'},'pvwdkq'],variants:{intent:'primary',size:'lg',variant:'strong'}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'ji048p',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'azxjnp',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'i00sjg',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'xm80g1',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'rmxqz1']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/button/ButtonGroup.css.ts.vanilla-0zUyMVwg.css";
+import "./../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DmFP5Ibu.css";
+//#region src/button/ButtonRoot.css.ts
+var buttonBase = recipeRuntime({
+	base: [
+		"p88vx6",
+		{
+			alignItems: "center",
+			display: "inline-flex",
+			flexDirection: "row",
+			fontWeight: "500",
+			justifyContent: "flex-start",
+			transition: "colors"
+		},
+		"_1qfp7nh"
+	],
+	variants: {
+		intent: {
+			danger: "_1nwcjch",
+			neutral: "_1ofoeu1",
+			primary: "f7gaip"
+		},
+		size: {
+			sm: {
+				fontSize: "sm",
+				h: "sm"
+			},
+			md: {
+				fontSize: "md",
+				h: "md"
+			},
+			lg: {
+				fontSize: "lg",
+				h: "lg"
+			}
+		},
+		square: {
+			false: {},
+			true: {}
+		},
+		variant: {
+			outline: "_1c73mzf",
+			"outline-opal": "_1il8ils",
+			strong: "_14v0i3h",
+			"strong-opal": "xdz50",
+			subtle: "iedn30"
+		}
+	},
+	variantsCompounded: [
+		{
+			style: [{ pl: "6" }, "rdxbsg"],
+			variants: {
+				intent: "primary",
+				size: "lg",
+				variant: "strong"
+			}
+		},
+		{
+			style: { w: "sm" },
+			variants: {
+				size: "sm",
+				square: true
+			}
+		},
+		{
+			style: "_1f68zhf",
+			variants: {
+				size: "sm",
+				square: false,
+				variant: [
+					"outline",
+					"strong",
+					"subtle"
+				]
+			}
+		},
+		{
+			style: "_1oftn2a",
+			variants: {
+				size: "sm",
+				square: false,
+				variant: ["outline-opal", "strong-opal"]
+			}
+		},
+		{
+			style: { w: "md" },
+			variants: {
+				size: "md",
+				square: true
+			}
+		},
+		{
+			style: "_11ytywg",
+			variants: {
+				size: "md",
+				square: false
+			}
+		},
+		{
+			style: { w: "lg" },
+			variants: {
+				size: "lg",
+				square: true
+			}
+		},
+		{
+			style: "_1gaw46u",
+			variants: {
+				size: "lg",
+				square: false
+			}
+		}
+	]
+});
+var spinner = recipeRuntime({ base: [{ size: "2xs" }, "maod7b"] });
+//#endregion
 export { buttonBase, spinner };