@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "3.59.0-beta.1",
+  "version": "3.60.0",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "bin": {
     "uds": "./cli/uds-cli.js"
   },
@@ -13,8 +10,6 @@
     "cli/**",
     "!cli/**/*.test.*",
     "!cli/README.md",
-    "src/**",
-    "!src/**/*.test.*",
     "dist/**",
     "fonts/**"
   ],
@@ -42,52 +37,52 @@
     },
     "./client": {
       "import": {
-        "types": "./dist/components/client/index.d.ts",
-        "default": "./dist/components/client/index.js"
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/client/index.js"
       },
       "require": {
-        "types": "./dist/components/client/index.d.cts",
-        "default": "./dist/components/client/index.cjs"
+        "types": "./dist/client/index.d.cts",
+        "default": "./dist/client/index.cjs"
       }
     },
-    "./experimental": {
+    "./client/Menu": {
       "import": {
-        "types": "./dist/components/experimental/index.d.ts",
-        "default": "./dist/components/experimental/index.js"
+        "types": "./dist/client/Menu.d.ts",
+        "default": "./dist/client/Menu.js"
       },
       "require": {
-        "types": "./dist/components/experimental/index.d.cts",
-        "default": "./dist/components/experimental/index.cjs"
+        "types": "./dist/client/Menu.d.cts",
+        "default": "./dist/client/Menu.cjs"
       }
     },
-    "./experimental/client": {
+    "./experimental": {
       "import": {
-        "types": "./dist/components/experimental/client/index.d.ts",
-        "default": "./dist/components/experimental/client/index.js"
+        "types": "./dist/experimental/index.d.ts",
+        "default": "./dist/experimental/index.js"
       },
       "require": {
-        "types": "./dist/components/experimental/client/index.d.cts",
-        "default": "./dist/components/experimental/client/index.cjs"
+        "types": "./dist/experimental/index.d.cts",
+        "default": "./dist/experimental/index.cjs"
       }
     },
-    "./__private/motionFeatures/domMax": {
+    "./experimental/client": {
       "import": {
-        "types": "./dist/components/client/motionFeatures/domMax.d.ts",
-        "default": "./dist/components/client/motionFeatures/domMax.js"
+        "types": "./dist/experimental/client/index.d.ts",
+        "default": "./dist/experimental/client/index.js"
       },
       "require": {
-        "types": "./dist/components/client/motionFeatures/domMax.d.cts",
-        "default": "./dist/components/client/motionFeatures/domMax.cjs"
+        "types": "./dist/experimental/client/index.d.cts",
+        "default": "./dist/experimental/client/index.cjs"
       }
     },
-    "./__private/motionFeatures/domAnimation": {
+    "./experimental/client/SwitchV2": {
       "import": {
-        "types": "./dist/components/client/motionFeatures/domAnimation.d.ts",
-        "default": "./dist/components/client/motionFeatures/domAnimation.js"
+        "types": "./dist/experimental/client/SwitchV2.d.ts",
+        "default": "./dist/experimental/client/SwitchV2.js"
       },
       "require": {
-        "types": "./dist/components/client/motionFeatures/domAnimation.d.cts",
-        "default": "./dist/components/client/motionFeatures/domAnimation.cjs"
+        "types": "./dist/experimental/client/SwitchV2.d.cts",
+        "default": "./dist/experimental/client/SwitchV2.cjs"
       }
     },
     "./fixtures": {
@@ -111,32 +106,32 @@
     "./styles/*": "./dist/styles/*",
     "./tailwind/plugin": {
       "import": {
-        "types": "./dist/tailwind/tailwindPlugin.d.ts",
-        "default": "./dist/tailwind/tailwindPlugin.js"
+        "types": "./dist/tailwind/plugin.d.ts",
+        "default": "./dist/tailwind/plugin.js"
       },
       "require": {
-        "types": "./dist/tailwind/tailwindPlugin.d.cts",
-        "default": "./dist/tailwind/tailwindPlugin.cjs"
+        "types": "./dist/tailwind/plugin.d.cts",
+        "default": "./dist/tailwind/plugin.cjs"
       }
     },
-    "./tailwind/purger": {
+    "./tailwind/utils": {
       "import": {
-        "types": "./dist/tailwind/purger/index.d.ts",
-        "default": "./dist/tailwind/purger/index.js"
+        "types": "./dist/tailwind/utils.d.ts",
+        "default": "./dist/tailwind/utils.js"
       },
       "require": {
-        "types": "./dist/tailwind/purger/index.d.cts",
-        "default": "./dist/tailwind/purger/index.cjs"
+        "types": "./dist/tailwind/utils.d.cts",
+        "default": "./dist/tailwind/utils.cjs"
       }
     },
-    "./tailwind/utils": {
+    "./tailwind/purger": {
       "import": {
-        "types": "./dist/tailwind/utils/index.d.ts",
-        "default": "./dist/tailwind/utils/index.js"
+        "types": "./dist/tailwind/purger.d.ts",
+        "default": "./dist/tailwind/purger.js"
       },
       "require": {
-        "types": "./dist/tailwind/utils/index.d.cts",
-        "default": "./dist/tailwind/utils/index.cjs"
+        "types": "./dist/tailwind/purger.d.cts",
+        "default": "./dist/tailwind/purger.cjs"
       }
     },
     "./tailwind/tsMorph": {
@@ -171,12 +166,12 @@
     },
     "./tokens/automation/configs": {
       "import": {
-        "types": "./dist/tokens/automation/configs/index.d.ts",
-        "default": "./dist/tokens/automation/configs/index.js"
+        "types": "./dist/tokens/automation/configs.d.ts",
+        "default": "./dist/tokens/automation/configs.js"
       },
       "require": {
-        "types": "./dist/tokens/automation/configs/index.d.cts",
-        "default": "./dist/tokens/automation/configs/index.cjs"
+        "types": "./dist/tokens/automation/configs.d.cts",
+        "default": "./dist/tokens/automation/configs.cjs"
       }
     },
     "./tokens/automation/properties": {
@@ -209,7 +204,7 @@
     "dev": "concurrently bun:dev:*",
     "dev:fixtures": "bun run ./scripts/buildFixtures.ts --watch",
     "dev:purgeCSSData": "bun run ./scripts/generatePurgeCSSData.ts --watch",
-    "dev:ts": "tsdown --watch",
+    "dev:ts": "tsup --watch",
     "format:pkg": "bun --cwd ../../ syncpack format",
     "lint": "eslint -c eslint.config.mjs .",
     "lint:fix": "bun run lint --fix",
@@ -236,7 +231,6 @@
     "bluebun": "^0.0.34",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
     "motion": "^12.23.12",
     "prompts": "^2.4.2",
     "react-toastify": "^11.0.5",
@@ -250,7 +244,6 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^7.0.0",
     "@next/env": "^14.2.15",
-    "@optimize-lodash/transform": "^3.0.6",
     "@types/bun": "1.2.17",
     "@types/lodash": "^4.17.20",
     "@types/prompts": "^2.4.9",
@@ -266,7 +259,7 @@
     "tailwindcss": "^3.4.13",
     "terser": "^5.43.1",
     "tsconfig": "workspace:*",
-    "tsdown": "^0.16.0"
+    "tsup": "^8.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",

package/cli/FlattenButtonVariant.mock.tsx

@@ -1,17 +0,0 @@
-import { Button, HStack, IconButton } from '@yahoo/uds';
-import { Cross } from '@yahoo/uds-icons';
-
-export const PageA = () => {
-  return (
-    <HStack>
-     <Button variant="brand-secondary">Click me</Button><IconButton name={Cross} />
-<Button variant="primary">Click me</Button><IconButton name={Cross} variant="primary" />
-<Button variant="secondary">Click me</Button><IconButton name={Cross} variant="brand" />
-<Button variant="warning-tertiary">Click me</Button><IconButton name={Cross} variant="brand-tertiary" />
-<Button>Click me</Button><IconButton name={Cross} />
-<Button variant="tertiary">Click me</Button><IconButton name={Cross} variant="brand-tertiary" />
-<Button variant="secondary">Click me</Button><IconButton name={Cross} variant="secondary" />
-<Button variant="tertiary">Click me</Button><IconButton name={Cross} variant="tertiary" />
-    </HStack>
-  );
-}

package/dist/_virtual/rolldown_runtime.cjs

@@ -1,35 +0,0 @@
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (all) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	return target;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-
-exports.__export = __export;
-exports.__toESM = __toESM;

package/dist/_virtual/rolldown_runtime.js

@@ -1,22 +0,0 @@
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-//#region rolldown:runtime
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (all) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	return target;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
-});
-
-//#endregion
-export { __commonJS, __export, __require };

package/dist/components/Box.cjs

@@ -1,101 +0,0 @@
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-const require_rolldown_runtime = 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$1({ asChild, as: As = "div", className, 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,...props }, ref) {
-	const styles = require_styles_styler.getStyles({
-		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,
-		overflow,
-		overflowX,
-		overflowY,
-		position,
-		spacing,
-		spacingHorizontal,
-		spacingVertical,
-		spacingBottom,
-		spacingEnd,
-		spacingStart,
-		spacingTop,
-		offset,
-		offsetVertical,
-		offsetHorizontal,
-		offsetBottom,
-		offsetEnd,
-		offsetStart,
-		offsetTop,
-		columnGap,
-		rowGap,
-		width,
-		height,
-		dropShadow,
-		insetShadow,
-		className
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : As, {
-		className: styles,
-		ref,
-		...props
-	});
-});
-Box.displayName = "Box";
-
-//#endregion
-exports.Box = Box;

package/dist/components/Box.d.cts

@@ -1,36 +0,0 @@
-import { UniversalBoxProps } from "../tokens/types.cjs";
-import "../tokens/index.cjs";
-import * as react0 from "react";
-
-//#region src/components/Box.d.ts
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {}
-/**
- * **📦 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)
- */
-declare const Box: react0.ForwardRefExoticComponent<BoxProps & react0.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { Box, type BoxProps, type DivProps };
-//# sourceMappingURL=Box.d.cts.map

package/dist/components/Box.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":[],"mappings":";;;;;KAQK,QAAA,CAAA,CAAA,CAAW,KAAA,CAAM,eAAe;UAE3B,QAAA,CAAA,OAAA,CAAiB,mBAAmB;;AAVa,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAAA,CAAA,UAAA,CAAA;AAQvB,CAAA;AAEkB,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;cA2BhD,KAAG,MAAA,CAAA,0BAAA,WAAA,MAAA,CAAA,cAAA"}

package/dist/components/Box.d.ts

@@ -1,36 +0,0 @@
-import { UniversalBoxProps } from "../tokens/types.js";
-import "../tokens/index.js";
-import * as react37 from "react";
-
-//#region src/components/Box.d.ts
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {}
-/**
- * **📦 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)
- */
-declare const Box: react37.ForwardRefExoticComponent<BoxProps & react37.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { Box, type BoxProps, type DivProps };
-//# sourceMappingURL=Box.d.ts.map

package/dist/components/Box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.ts","names":[],"sources":["../../src/components/Box.tsx"],"sourcesContent":[],"mappings":";;;;;KAQK,QAAA,CAAA,CAAA,CAAW,KAAA,CAAM,eAAe;UAE3B,QAAA,CAAA,OAAA,CAAiB,mBAAmB;;AAVa,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAAA,CAAA,UAAA,CAAA;AAQvB,CAAA;AAEkB,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;cA2BhD,KAAG,OAAA,CAAA,0BAAA,WAAA,OAAA,CAAA,cAAA"}

package/dist/components/Box.js

@@ -1,101 +0,0 @@
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-import { getStyles } from "../styles/styler.js";
-import { createSlot } from "../utils/createSlot.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/Box.tsx
-const Slot = 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 = forwardRef(function Box$1({ asChild, as: As = "div", className, 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,...props }, ref) {
-	const styles = getStyles({
-		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,
-		overflow,
-		overflowX,
-		overflowY,
-		position,
-		spacing,
-		spacingHorizontal,
-		spacingVertical,
-		spacingBottom,
-		spacingEnd,
-		spacingStart,
-		spacingTop,
-		offset,
-		offsetVertical,
-		offsetHorizontal,
-		offsetBottom,
-		offsetEnd,
-		offsetStart,
-		offsetTop,
-		columnGap,
-		rowGap,
-		width,
-		height,
-		dropShadow,
-		insetShadow,
-		className
-	});
-	return /* @__PURE__ */ jsx(asChild ? Slot : As, {
-		className: styles,
-		ref,
-		...props
-	});
-});
-Box.displayName = "Box";
-
-//#endregion
-export { Box };
-//# sourceMappingURL=Box.js.map

package/dist/components/Box.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.js","names":["Box"],"sources":["../../src/components/Box.tsx"],"sourcesContent":["import type { UniversalBoxProps } from '@yahoo/uds/tokens';\nimport { forwardRef } from 'react';\n\nimport { getStyles } from '../styles/styler';\nimport { createSlot } from '../utils/createSlot';\n\nconst Slot = createSlot<React.ComponentType<DivProps>>();\n\ntype DivProps = React.HTMLAttributes<HTMLDivElement>;\n\ninterface BoxProps extends UniversalBoxProps, DivProps {}\n\n/**\n * **📦 A layout component that can be used to compose other components**\n *\n * @description\n * The most simple component we ship - a div. But with all the power of the UDS design system.\n * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,\n * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.\n *\n * @example\n * ```tsx\n * import { Box } from '@yahoo/uds';\n *\n * <Box backgroundColor=\"primary\" spacing=\"6\">\n *   Any kind of content can go here!\n * </Box>\n * ```\n *\n * @usage\n * - If you need to div-like container to apply padding, shapes, or other styling.\n * - If you're creating card components.\n *\n * @see The {@link https://uds.build/docs/components/box Box Docs} for more info\n *\n * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)\n */\nconst Box = forwardRef<HTMLDivElement, BoxProps>(function Box(\n  {\n    asChild,\n    as: As = 'div',\n    className,\n    // background\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    flexBasis,\n    // layout\n    display = 'flex',\n    overflow,\n    overflowX,\n    overflowY,\n    position,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n    // size\n    width,\n    height,\n    // shadow\n    dropShadow,\n    insetShadow,\n    // rest\n    ...props\n  }: BoxProps,\n  ref,\n) {\n  const styles = getStyles({\n    // background\n    backgroundColor,\n    // border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // flex\n    alignContent,\n    alignItems,\n    alignSelf,\n    flex,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    flexWrap,\n    justifyContent,\n    flexBasis,\n    // layout\n    display,\n    overflow,\n    overflowX,\n    overflowY,\n    position,\n    // spacing\n    spacing,\n    spacingHorizontal,\n    spacingVertical,\n    spacingBottom,\n    spacingEnd,\n    spacingStart,\n    spacingTop,\n    offset,\n    offsetVertical,\n    offsetHorizontal,\n    offsetBottom,\n    offsetEnd,\n    offsetStart,\n    offsetTop,\n    columnGap,\n    rowGap,\n    // size\n    width,\n    height,\n    // shadow\n    dropShadow,\n    insetShadow,\n    // rest\n    className,\n  });\n\n  const Comp = asChild ? Slot : As;\n\n  return <Comp className={styles} ref={ref} {...props} />;\n});\n\n// Need to re-set this because of the forwardRef wrapper\nBox.displayName = 'Box';\n\nexport { Box, type BoxProps, type DivProps };\n"],"mappings":";;;;;;;AAMA,MAAM,OAAO,YAA2C;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BxD,MAAM,MAAM,WAAqC,SAASA,MACxD,EACE,SACA,IAAI,KAAK,OACT,WAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBACA,WAEA,UAAU,QACV,UACA,WACA,WACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QAEA,OACA,QAEA,YACA,YAEA,GAAG,SAEL,KACA;CACA,MAAM,SAAS,UAAU;EAEvB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACD,CAAC;AAIF,QAAO,oBAFM,UAAU,OAAO;EAEjB,WAAW;EAAa;EAAK,GAAI;GAAS;EACvD;AAGF,IAAI,cAAc"}

package/dist/components/Divider/Divider.cjs

@@ -1,47 +0,0 @@
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_components_Divider_DividerInternal = require('./DividerInternal.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/Divider/Divider.tsx
-/**
-* **📦 A divider component that can be used to visually separate components**
-*
-* @description
-* The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
-*
-* @example
-* ```tsx
-* import { Divider } from '@yahoo/uds';
-*
-* // Default primary horizontal divider. Similar to <hr />
-* <Divider />
-*
-* // A vertical divider.
-* <Divider vertical />
-*
-* // A horizontal divider with the secondary styling.
-* <Divider variant="secondary" />
-*
-* // A vertical divider with the tertiary styling.
-* <Divider vertical variant="tertiary" />
-* ```
-*
-* @usage
-* - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
-*
-* @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
-*
-* @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
-*/
-const Divider = (0, react.forwardRef)(function Divider$1(props, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerInternal.DividerInternal, {
-		ref,
-		...props
-	});
-});
-Divider.displayName = "Divider";
-
-//#endregion
-exports.Divider = Divider;

package/dist/components/Divider/Divider.d.cts

@@ -1,39 +0,0 @@
-import { DividerInternalProps } from "./DividerInternal.cjs";
-import * as react53 from "react";
-
-//#region src/components/Divider/Divider.d.ts
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
-/**
- * **📦 A divider component that can be used to visually separate components**
- *
- * @description
- * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
- *
- * @example
- * ```tsx
- * import { Divider } from '@yahoo/uds';
- *
- * // Default primary horizontal divider. Similar to <hr />
- * <Divider />
- *
- * // A vertical divider.
- * <Divider vertical />
- *
- * // A horizontal divider with the secondary styling.
- * <Divider variant="secondary" />
- *
- * // A vertical divider with the tertiary styling.
- * <Divider vertical variant="tertiary" />
- * ```
- *
- * @usage
- * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
- *
- * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
- *
- * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
- */
-declare const Divider: react53.ForwardRefExoticComponent<DividerProps & react53.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { Divider, type DividerProps };
-//# sourceMappingURL=Divider.d.cts.map

package/dist/components/Divider/Divider.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.d.cts","names":[],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":[],"mappings":";;;;KAKK,YAAA,CAAA,CAAA,CAAe,KAAK;;;AAHqC,CAAA;AAGtC,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgClB,SAAO,OAAA,CAAA,0BAAA,eAAA,OAAA,CAAA,cAAA"}