@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/alert-dialog/AlertDialogTrigger.js

@@ -1,13 +1,21 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixDialog from '@radix-ui/react-dialog';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-
+import { Button } from "../button/Button.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+//#region src/alert-dialog/AlertDialogTrigger.tsx
+/**
+* @group AlertDialog
+* @extends Button
+*/
 const AlertDialogTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+	return /* @__PURE__ */ jsx(RadixDialog.Trigger, {
+		asChild: true,
+		ref,
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsx(Button, { children })
+	});
 });
 AlertDialogTrigger.displayName = "@optiaxiom/react/AlertDialogTrigger";
-
+//#endregion
 export { AlertDialogTrigger };

package/dist/esm/packages/react/src/angle-menu-button/AngleMenuButton.js

@@ -1,13 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { IconAngleDown } from '@optiaxiom/icons';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-
+import { Button } from "../button/Button.js";
+import { IconAngleDown } from "@optiaxiom/icons";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/angle-menu-button/AngleMenuButton.tsx
+/**
+* Button with trailing chevron icon for opening dropdowns and popovers.
+*
+* For Menu dropdowns, MenuTrigger uses this component automatically. For other
+* dropdown patterns (like Popover), use AngleMenuButton as the trigger.
+*
+* @group Button
+*/
 const AngleMenuButton = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ref, ...props, children });
+	return /* @__PURE__ */ jsx(Button, {
+		icon: /* @__PURE__ */ jsx(IconAngleDown, {}),
+		iconPosition: "end",
+		ref,
+		...props,
+		children
+	});
 });
 AngleMenuButton.displayName = "@optiaxiom/react/AngleMenuButton";
-
+//#endregion
 export { AngleMenuButton };

package/dist/esm/packages/react/src/auth-provider/AuthProvider.js

@@ -1,27 +1,26 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { AxiomAuthContext } from '@optiaxiom/globals';
-import { useMemo } from 'react';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-
-function AuthProvider({
-  children,
-  instance,
-  refresh: refreshProp,
-  token
-}) {
-  const refresh = useEffectEvent(refreshProp);
-  return /* @__PURE__ */ jsx(
-    AxiomAuthContext.Provider,
-    {
-      value: useMemo(() => ({ instance, refresh, token }), [instance, token]),
-      children
-    }
-  );
+import { useEffectEvent } from "../hooks/useEffectEvent.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AxiomAuthContext } from "@optiaxiom/globals";
+//#region src/auth-provider/AuthProvider.tsx
+/**
+* `AuthProvider` is used to pass down the user credentials to all components. It should be rendered near the root of your application and should be used only once.
+*
+* @category provider
+* @since 1.6.2
+*/
+function AuthProvider({ children, instance, refresh: refreshProp, token }) {
+	const refresh = useEffectEvent(refreshProp);
+	return /* @__PURE__ */ jsx(AxiomAuthContext.Provider, {
+		value: useMemo(() => ({
+			instance,
+			refresh,
+			token
+		}), [instance, token]),
+		children
+	});
 }
 AuthProvider.displayName = "@optiaxiom/react/AuthProvider";
-
+//#endregion
 export { AuthProvider };

package/dist/esm/packages/react/src/auth-provider/useAuthContext.js

@@ -1,9 +1,10 @@
 "use client";
-import { AxiomAuthContext } from '@optiaxiom/globals';
-import { useContext } from 'react';
-
+"use client";
+import { useContext } from "react";
+import { AxiomAuthContext } from "@optiaxiom/globals";
+//#region src/auth-provider/useAuthContext.ts
 function useAuthContext() {
-  return useContext(AxiomAuthContext);
+	return useContext(AxiomAuthContext);
 }
-
+//#endregion
 export { useAuthContext };

package/dist/esm/packages/react/src/avatar/Avatar-css.js

@@ -1,10 +1,65 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DywJgUIK.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1900apg'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'m4k5hd'],xs:[{fontWeight:'400',size:'xs'},'law7zg'],sm:[{size:'sm'},'z5s90d'],md:[{size:'md'},'_1r9wes5'],lg:[{size:'lg'},'jrph7o'],xl:[{size:'xl'},'mqhln6'],'3xl':[{size:'3xl'},'_1xy64nm']}}});
-var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
-var icon$2 = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'12'},xs:[{h:'16'},'_1w4pscq'],sm:{h:'16'},md:{h:'xs'},lg:{h:'sm'},xl:{h:'sm'},'3xl':{h:'lg'}}}});
-
-export { avatar, fallback, icon$2 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/avatar/Avatar.css.ts.vanilla-Bk0cZCF0.css";
+//#region src/avatar/Avatar.css.ts
+var avatar = recipeRuntime({
+	base: [{
+		alignItems: "center",
+		display: "inline-flex",
+		flex: "none",
+		fontWeight: "500",
+		justifyContent: "center",
+		overflow: "hidden",
+		rounded: "full"
+	}, "erxtvs"],
+	variants: {
+		colorScheme: {
+			neutral: {
+				bg: "bg.avatar.neutral",
+				color: "fg.avatar.neutral"
+			},
+			purple: {
+				bg: "bg.avatar.purple",
+				color: "fg.avatar.purple"
+			}
+		},
+		size: {
+			"2xs": [{
+				fontWeight: "400",
+				size: "2xs"
+			}, "lspucr"],
+			xs: [{
+				fontWeight: "400",
+				size: "xs"
+			}, "j4cfrp"],
+			sm: [{ size: "sm" }, "fus9xu"],
+			md: [{ size: "md" }, "_1o96buf"],
+			lg: [{ size: "lg" }, "pr0gbn"],
+			xl: [{ size: "xl" }, "_1yuuvwc"],
+			"3xl": [{ size: "3xl" }, "_7yyzvn"]
+		}
+	}
+});
+var fallback = recipeRuntime({ base: {
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center",
+	rounded: "inherit",
+	size: "full",
+	textTransform: "uppercase"
+} });
+var icon = recipeRuntime({
+	base: [{ w: "auto" }],
+	variants: { size: {
+		"2xs": { h: "12" },
+		xs: [{ h: "16" }, "_11y8zqt"],
+		sm: { h: "16" },
+		md: { h: "xs" },
+		lg: { h: "sm" },
+		xl: { h: "sm" },
+		"3xl": { h: "lg" }
+	} }
+});
+//#endregion
+export { avatar, fallback, icon };

package/dist/esm/packages/react/src/avatar/Avatar.js

@@ -1,57 +1,74 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { IconUser, IconUserGroup } from '@optiaxiom/icons';
-import * as RadixAvatar from '@radix-ui/react-avatar';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { IconOpal } from '../icons/IconOpal.js';
-import { icon, fallback, avatar } from './Avatar-css.js';
-import { useAvatarContext } from './AvatarContext.js';
-
+import { Box } from "../box/Box.js";
+import { IconOpal } from "../icons/IconOpal.js";
+import { avatar, fallback, icon } from "./Avatar-css.js";
+import { useAvatarContext } from "./AvatarContext.js";
+import { IconUser, IconUserGroup } from "@optiaxiom/icons";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixAvatar from "@radix-ui/react-avatar";
+//#region src/avatar/Avatar.tsx
 function getInitialsFromName(name) {
-  const names = name.trim().split(" ");
-  const firstName = names[0] ?? "";
-  const lastName = names.length > 1 ? names[names.length - 1] : "";
-  return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
+	const names = name.trim().split(" ");
+	const firstName = names[0] ?? "";
+	const lastName = names.length > 1 ? names[names.length - 1] : "";
+	return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
 }
 const mapFallbackToIcon = {
-  opal: null,
-  team: /* @__PURE__ */ jsx(IconUserGroup, {}),
-  user: /* @__PURE__ */ jsx(IconUser, { filled: true })
+	opal: null,
+	team: /* @__PURE__ */ jsx(IconUserGroup, {}),
+	user: /* @__PURE__ */ jsx(IconUser, { filled: true })
 };
-const Avatar = forwardRef(
-  ({
-    children,
-    className,
-    colorScheme = "neutral",
-    fallback: fallback$1 = "user",
-    name,
-    size: sizeProp,
-    src,
-    ...props
-  }, ref) => {
-    const context = useAvatarContext("@optiaxiom/react/Avatar");
-    const size = sizeProp || context?.size || "md";
-    if (fallback$1 === "opal") {
-      fallback$1 = "user";
-      src = "opal";
-    }
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        ...avatar({ colorScheme, size }, className),
-        ...props,
-        children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
-          src && /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: src === "opal" ? /* @__PURE__ */ jsx(IconOpal, { asChild: true, children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name ?? "Opal" }) }) : /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name ?? "avatar", src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: (children ?? (name ? getInitialsFromName(name) : void 0)) || /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
-        ] })
-      }
-    );
-  }
-);
+/**
+* Displays a user profile picture or initials. For multiple avatars, use
+* AvatarGroup.
+*
+* @category data-display
+* @since 0.1.0
+*/
+const Avatar = forwardRef(({ children, className, colorScheme = "neutral", fallback: fallback$1 = "user", name, size: sizeProp, src, ...props }, ref) => {
+	const context = useAvatarContext("@optiaxiom/react/Avatar");
+	const size = sizeProp || context?.size || "md";
+	if (fallback$1 === "opal") {
+		fallback$1 = "user";
+		src = "opal";
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...avatar({
+			colorScheme,
+			size
+		}, className),
+		...props,
+		children: /* @__PURE__ */ jsxs(RadixAvatar.Root, {
+			ref,
+			children: [src && /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				objectFit: "cover",
+				rounded: "inherit",
+				size: "full",
+				children: src === "opal" ? /* @__PURE__ */ jsx(IconOpal, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name ?? "Opal" })
+				}) : /* @__PURE__ */ jsx(RadixAvatar.Image, {
+					alt: name ?? "avatar",
+					src
+				})
+			}), /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				...fallback({}),
+				children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, {
+					delayMs: src ? 600 : void 0,
+					children: (children ?? (name ? getInitialsFromName(name) : void 0)) || /* @__PURE__ */ jsx(Box, {
+						asChild: true,
+						...icon({ size }),
+						children: mapFallbackToIcon[fallback$1]
+					})
+				})
+			})]
+		})
+	});
+});
 Avatar.displayName = "@optiaxiom/react/Avatar";
-
+//#endregion
 export { Avatar };

package/dist/esm/packages/react/src/avatar/AvatarContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
-const [AvatarProvider, useAvatarContext] = createContext("@optiaxiom/react/Avatar", { size: void 0 });
-
+import "react";
+import { createContext as createContext$1 } from "@radix-ui/react-context";
+//#region src/avatar/AvatarContext.tsx
+const [AvatarProvider, useAvatarContext] = createContext$1("@optiaxiom/react/Avatar", { size: void 0 });
+//#endregion
 export { AvatarProvider, useAvatarContext };

package/dist/esm/packages/react/src/avatar/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var avatarGroup = recipeRuntime({base:['dmqaqa',{display:'flex'}]});
-
+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/avatar/AvatarGroup.css.ts
+var avatarGroup = recipeRuntime({ base: ["_186m8pf", { display: "flex" }] });
+//#endregion
 export { avatarGroup };

package/dist/esm/packages/react/src/avatar/AvatarGroup.js

@@ -1,17 +1,40 @@
 "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 { AvatarProvider } from './AvatarContext.js';
-import { avatarGroup } from './AvatarGroup-css.js';
-
-const AvatarGroup = forwardRef(
-  ({ children, className, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsx(AvatarProvider, { size, children }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { AvatarProvider } from "./AvatarContext.js";
+import { avatarGroup } from "./AvatarGroup-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/avatar/AvatarGroup.tsx
+/**
+* Displays a group of avatars representing multiple users with automatic layout
+* and overflow handling.
+*
+* Use this component whenever you have 2 or more Avatar components together,
+* even if they're not overlapping in the design. AvatarGroup handles consistent
+* sizing, spacing, overflow indicators (+N), and semantic grouping
+* automatically.
+*
+* Don't manually layout multiple Avatars in a Flex - use AvatarGroup instead.
+*
+* When to use:
+* - Multiple assignees on a task
+* - Team members or collaborators
+* - Participants in a conversation
+* - Any group of users
+*
+* @group Avatar
+*/
+const AvatarGroup = forwardRef(({ children, className, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...avatarGroup({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx(AvatarProvider, {
+			size,
+			children
+		})
+	});
+});
 AvatarGroup.displayName = "@optiaxiom/react/AvatarGroup";
-
+//#endregion
 export { AvatarGroup };

package/dist/esm/packages/react/src/axiom-provider/AxiomProvider.js

@@ -1,39 +1,31 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { AxiomVersionContext } from '@optiaxiom/globals';
-import { useContext } from 'react';
-import { version } from '../../package.json.js';
-import '../dialog-kit/DialogKitContext.js';
-import { DialogKitProvider } from '../dialog-kit/DialogKitProvider.js';
-import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
-import '../focus-bookmark/FocusBookmarkRestore.js';
-import { SuggestionProvider } from '../suggestion/SuggestionProvider.js';
-import { ThemeProvider } from '../theme-provider/ThemeProvider.js';
-import { ToastProvider } from '../toast/ToastProvider.js';
-import '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContent.js';
-import { TooltipProvider } from '../tooltip/TooltipProvider.js';
-import '../tooltip/TooltipRoot.js';
-import '../tooltip/TooltipTrigger.js';
-
-function AxiomProvider({
-  children,
-  dialog,
-  toast,
-  tooltip
-}) {
-  const axiom = useContext(AxiomVersionContext);
-  if (!axiom) {
-    children = /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(SuggestionProvider, { children: [
-      children,
-      /* @__PURE__ */ jsx(ToastProvider, { ...toast })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, { value: version, children: /* @__PURE__ */ jsx(TooltipProvider, { ...tooltip, children: /* @__PURE__ */ jsxs(FocusBookmarkProvider, { children: [
-    children,
-    /* @__PURE__ */ jsx(DialogKitProvider, { ...dialog })
-  ] }) }) });
+import { version } from "../../package.js";
+import { DialogKitProvider } from "../dialog-kit/DialogKitProvider.js";
+import { FocusBookmarkProvider } from "../focus-bookmark/FocusBookmarkProvider.js";
+import { SuggestionProvider } from "../suggestion/SuggestionProvider.js";
+import { ThemeProvider } from "../theme-provider/ThemeProvider.js";
+import { ToastProvider } from "../toast/ToastProvider.js";
+import { TooltipProvider } from "../tooltip/TooltipProvider.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AxiomVersionContext } from "@optiaxiom/globals";
+//#region src/axiom-provider/AxiomProvider.tsx
+/**
+* `AxiomProvider` provides all the context managers required for our components to work. It must be rendered at the root of your application and should be used only once.
+*
+* @category provider
+* @since 0.1.0
+*/
+function AxiomProvider({ children, dialog, toast, tooltip }) {
+	if (!useContext(AxiomVersionContext)) children = /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(SuggestionProvider, { children: [children, /* @__PURE__ */ jsx(ToastProvider, { ...toast })] }) });
+	return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, {
+		value: version,
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			...tooltip,
+			children: /* @__PURE__ */ jsxs(FocusBookmarkProvider, { children: [children, /* @__PURE__ */ jsx(DialogKitProvider, { ...dialog })] })
+		})
+	});
 }
 AxiomProvider.displayName = "@optiaxiom/react/AxiomProvider";
-
+//#endregion
 export { AxiomProvider };

package/dist/esm/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DY6Og76j.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var backdrop$2 = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_58p562']});
-
-export { backdrop$2 as backdrop };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-L74kFNIJ.css";
+//#region src/backdrop/Backdrop.css.ts
+var backdrop = recipeRuntime({ base: [{
+	bg: "bg.overlay",
+	z: "popover"
+}, "_19gvoni"] });
+//#endregion
+export { backdrop };

package/dist/esm/packages/react/src/backdrop/Backdrop.js

@@ -1,14 +1,14 @@
 "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 { backdrop } from './Backdrop-css.js';
-
-const Backdrop = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(Box, { ref, ...backdrop({}, className), ...props })
-);
+import { Box } from "../box/Box.js";
+import { backdrop } from "./Backdrop-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/backdrop/Backdrop.tsx
+const Backdrop = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Box, {
+	ref,
+	...backdrop({}, className),
+	...props
+}));
 Backdrop.displayName = "@optiaxiom/react/Backdrop";
-
+//#endregion
 export { Backdrop };

package/dist/esm/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,34 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-BLRYHfcB.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var badge$1 = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontFamily:'mono',fontSize:'sm',fontWeight:'400',justifyContent:'center',px:'6',py:'2',rounded:'full',textTransform:'uppercase'},'onapso'],variants:{intent:{danger:'_4tpjvb',information:'_9mdl22',neutral:'aognji',primary:'_1em8ra9',success:'r0zty8',warning:'j03edk'},variant:{strong:'_1v972p4',subtle:'_1ew2c40'}}});
-
-export { badge$1 as badge };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/badge/Badge.css.ts.vanilla-BUAVfXNg.css";
+//#region src/badge/Badge.css.ts
+var badge = recipeRuntime({
+	base: [{
+		display: "inline-flex",
+		flex: "none",
+		fontFamily: "mono",
+		fontSize: "sm",
+		fontWeight: "400",
+		justifyContent: "center",
+		px: "6",
+		py: "2",
+		rounded: "full",
+		textTransform: "uppercase"
+	}, "_1me86mf"],
+	variants: {
+		intent: {
+			danger: "_132em71",
+			information: "_1deqlt8",
+			neutral: "_1sfxejj",
+			primary: "_1s16nat",
+			success: "zpijwc",
+			warning: "_1wh9gyj"
+		},
+		variant: {
+			strong: "_1me7z7z",
+			subtle: "_111az0v"
+		}
+	}
+});
+//#endregion
+export { badge };