/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../styles/styler.cjs");
const require_utils_createSlot = require("../utils/createSlot.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/Box.tsx
const Slot = require_utils_createSlot.createSlot();
/**
* **📦 A layout component that can be used to compose other components**
*
* @description
* The most simple component we ship - a div. But with all the power of the UDS design system.
* By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
* consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
*
* @example
* ```tsx
* import { Box } from '@yahoo/uds';
*
* <Box backgroundColor="primary" spacing="6">
*   Any kind of content can go here!
* </Box>
* ```
*
* @usage
* - If you need to div-like container to apply padding, shapes, or other styling.
* - If you're creating card components.
*
* @see The {@link https://uds.build/docs/components/box Box Docs} for more info
*
* @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
*/
const Box = (0, react.forwardRef)(function Box({ asChild, as: As = "div", className, elevation, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display = "flex", overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, dropShadow, insetShadow, nestedBorderRadius, nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : void 0, nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : void 0, nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : void 0, ...props }, ref) {
	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
	const styles = require_styles_styler.getStyles({
		backgroundColor: backgroundColor ?? elevationAlias,
		borderRadius,
		borderTopStartRadius,
		borderTopEndRadius,
		borderBottomStartRadius,
		borderBottomEndRadius,
		nestedBorderRadius,
		nestedBorderRadiusSize,
		nestedBorderRadiusSpacing,
		nestedBorderRadiusWidth,
		borderColor: borderColor ?? elevationAlias,
		borderStartColor,
		borderEndColor,
		borderTopColor,
		borderBottomColor,
		borderWidth: borderWidth ?? elevationAlias,
		borderVerticalWidth,
		borderHorizontalWidth,
		borderStartWidth,
		borderEndWidth,
		borderTopWidth,
		borderBottomWidth,
		alignContent,
		alignItems,
		alignSelf,
		flex,
		flexDirection,
		flexGrow,
		flexShrink,
		flexWrap,
		justifyContent,
		flexBasis,
		display,
		overflow,
		overflowX,
		overflowY,
		position,
		spacing,
		spacingHorizontal,
		spacingVertical,
		spacingBottom,
		spacingEnd,
		spacingStart,
		spacingTop,
		offset,
		offsetVertical,
		offsetHorizontal,
		offsetBottom,
		offsetEnd,
		offsetStart,
		offsetTop,
		columnGap,
		rowGap,
		width,
		height,
		dropShadow: dropShadow ?? elevationAlias,
		insetShadow: insetShadow ?? elevationAlias,
		className
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : As, {
		className: styles,
		ref,
		...props
	});
});
Box.displayName = "Box";
//#endregion
exports.Box = Box;
