@yahoo/uds 3.141.0 → 3.142.0

package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.cjs";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.js";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

package/dist/automated-config/dist/utils/index.cjs

@@ -2,6 +2,7 @@
 require("../../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../../css-tokens/dist/index.cjs");
 const require_properties = require("../properties.cjs");
+const require_generateDefaultClassName = require("./generateDefaultClassName.cjs");
 const require_generateSchemaKey = require("./generateSchemaKey.cjs");
 const require_variantConfigGuards = require("./variantConfigGuards.cjs");
 require("./buildConfigSchema.cjs");
@@ -9,7 +10,6 @@ require("./cartesianProduct.cjs");
 require("./subcomponents.cjs");
 require("./coalesceConfigVariant.cjs");
 require("./defaults.cjs");
-const require_generateDefaultClassName = require("./generateDefaultClassName.cjs");
 require("./generateKeyFromFlatConfigPath.cjs");
 require("./getConfigVariantComponentStatesMatrix.cjs");
 require("./getConfigVariantProperties.cjs");

package/dist/automated-config/dist/utils/index.js

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
 import { configurableProperties } from "../properties.js";
+import { generateDefaultClassName } from "./generateDefaultClassName.js";
 import { generateSchemaKey } from "./generateSchemaKey.js";
 import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
 import "./buildConfigSchema.js";
@@ -8,7 +9,6 @@ import "./cartesianProduct.js";
 import "./subcomponents.js";
 import "./coalesceConfigVariant.js";
 import "./defaults.js";
-import { generateDefaultClassName } from "./generateDefaultClassName.js";
 import "./generateKeyFromFlatConfigPath.js";
 import "./getConfigVariantComponentStatesMatrix.js";
 import "./getConfigVariantProperties.js";

package/dist/components/Divider/Divider.cjs

@@ -1,19 +1,32 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
-const require_components_Divider_DividerInternal = require("./DividerInternal.cjs");
+const require_styles_styler = require("../../styles/styler.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_HStack = require("../HStack.cjs");
+const require_components_VStack = require("../VStack.cjs");
+const require_components_Divider_DividerLabel = require("./DividerLabel.cjs");
+const require_components_Divider_DividerLine = require("./DividerLine.cjs");
+const require_components_Divider_utils = require("./utils.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Divider/Divider.tsx
+const ORIENTATION_WIDTH_MAP = {
+	horizontal: "w-full",
+	vertical: ""
+};
 /**
 * **📦 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.
 *
+* For custom composition, import `DividerLine` and `DividerLabel` from the same package entrypoint
+* and compose them inside `Divider`, `HStack`, or `VStack`.
+*
 * @example
 * ```tsx
-* import { Divider } from '@yahoo/uds';
+* import { Divider, DividerLabel, DividerLine } from '@yahoo/uds';
 *
 * // Default primary horizontal divider. Similar to <hr />
 * <Divider />
@@ -26,19 +39,87 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * // A vertical divider with the tertiary styling.
 * <Divider vertical variant="tertiary" />
+*
+* // Manual composition.
+* <Divider>
+*   <DividerLine />
+*   <DividerLabel>Section</DividerLabel>
+*   <DividerLine />
+* </Divider>
 * ```
 *
 * @usage
 * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+* - Use `DividerLine` and `DividerLabel` when a layout needs custom composition.
 *
 * @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(props, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerInternal.DividerInternal, {
+const Divider = (0, react.forwardRef)(function Divider({ variant = "primary", vertical = false, contentPosition = "center", className, slotProps, children, gap, ...boxProps }, ref) {
+	const direction = vertical ? "vertical" : "horizontal";
+	const InternalComponent = vertical ? require_components_VStack.VStack : require_components_HStack.HStack;
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: labelClassName, variant: labelTextVariant, ...labelSlotProps } = slotProps?.label ?? {};
+	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.cx(ORIENTATION_WIDTH_MAP[direction], variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantRoot: variant }), className, rootClassName),
+		label: labelClassName,
+		line: lineClassName
+	}), [
+		className,
+		direction,
+		labelClassName,
+		lineClassName,
+		rootClassName,
+		variant
+	]);
+	if (children !== void 0 && children !== null && children !== false) {
+		const content = require_components_Divider_utils.shouldWrapInLabel(children) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLabel.DividerLabel, {
+			className: classNames.label,
+			textVariant: labelTextVariant,
+			variant,
+			...labelSlotProps,
+			children
+		}) : require_components_Divider_utils.renderManualChildren(children, variant, vertical);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComponent, {
+			alignItems: "center",
+			className: classNames.root,
+			flex: "1",
+			gap,
+			ref,
+			...boxProps,
+			...rootSlotProps,
+			children: require_components_Divider_utils.hasManualLine(children) ? content : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				contentPosition !== "start" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLine.DividerLine, {
+					className: classNames.line,
+					variant,
+					vertical,
+					...lineSlotProps
+				}),
+				content,
+				contentPosition !== "end" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLine.DividerLine, {
+					className: classNames.line,
+					variant,
+					vertical,
+					...lineSlotProps
+				})
+			] })
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		className: classNames.root,
+		display: "flex",
+		flex: "none",
 		ref,
-		...props
+		...boxProps,
+		...rootSlotProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerLine.DividerLine, {
+			className: classNames.line,
+			variant,
+			vertical,
+			...lineSlotProps
+		})
 	});
 });
 Divider.displayName = "Divider";

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

@@ -1,18 +1,21 @@
 
-import { DividerInternalProps } from "./DividerInternal.cjs";
+import { DividerProps as DividerProps$1 } from "./types.cjs";
 import * as _$react from "react";
 
 //#region src/components/Divider/Divider.d.ts
-type DividerProps = DividerInternalProps;
+type DividerProps = DividerProps$1;
 /**
  * **📦 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.
  *
+ * For custom composition, import `DividerLine` and `DividerLabel` from the same package entrypoint
+ * and compose them inside `Divider`, `HStack`, or `VStack`.
+ *
  * @example
  * ```tsx
- * import { Divider } from '@yahoo/uds';
+ * import { Divider, DividerLabel, DividerLine } from '@yahoo/uds';
  *
  * // Default primary horizontal divider. Similar to <hr />
  * <Divider />
@@ -25,15 +28,23 @@ type DividerProps = DividerInternalProps;
  *
  * // A vertical divider with the tertiary styling.
  * <Divider vertical variant="tertiary" />
+ *
+ * // Manual composition.
+ * <Divider>
+ *   <DividerLine />
+ *   <DividerLabel>Section</DividerLabel>
+ *   <DividerLine />
+ * </Divider>
  * ```
  *
  * @usage
  * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ * - Use `DividerLine` and `DividerLabel` when a layout needs custom composition.
  *
  * @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: _$react.ForwardRefExoticComponent<DividerInternalProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const Divider: _$react.ForwardRefExoticComponent<DividerProps$1 & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

package/dist/components/Divider/Divider.d.ts

@@ -1,18 +1,21 @@
 
-import { DividerInternalProps } from "./DividerInternal.js";
+import { DividerProps as DividerProps$1 } from "./types.js";
 import * as _$react from "react";
 
 //#region src/components/Divider/Divider.d.ts
-type DividerProps = DividerInternalProps;
+type DividerProps = DividerProps$1;
 /**
  * **📦 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.
  *
+ * For custom composition, import `DividerLine` and `DividerLabel` from the same package entrypoint
+ * and compose them inside `Divider`, `HStack`, or `VStack`.
+ *
  * @example
  * ```tsx
- * import { Divider } from '@yahoo/uds';
+ * import { Divider, DividerLabel, DividerLine } from '@yahoo/uds';
  *
  * // Default primary horizontal divider. Similar to <hr />
  * <Divider />
@@ -25,15 +28,23 @@ type DividerProps = DividerInternalProps;
  *
  * // A vertical divider with the tertiary styling.
  * <Divider vertical variant="tertiary" />
+ *
+ * // Manual composition.
+ * <Divider>
+ *   <DividerLine />
+ *   <DividerLabel>Section</DividerLabel>
+ *   <DividerLine />
+ * </Divider>
  * ```
  *
  * @usage
  * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+ * - Use `DividerLine` and `DividerLabel` when a layout needs custom composition.
  *
  * @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: _$react.ForwardRefExoticComponent<DividerInternalProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const Divider: _$react.ForwardRefExoticComponent<DividerProps$1 & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

package/dist/components/Divider/Divider.js

@@ -1,17 +1,30 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { DividerInternal } from "./DividerInternal.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { cx, getStyles } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { HStack } from "../HStack.js";
+import { VStack } from "../VStack.js";
+import { DividerLabel } from "./DividerLabel.js";
+import { DividerLine } from "./DividerLine.js";
+import { hasManualLine, renderManualChildren, shouldWrapInLabel } from "./utils.js";
+import { forwardRef, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Divider/Divider.tsx
+const ORIENTATION_WIDTH_MAP = {
+	horizontal: "w-full",
+	vertical: ""
+};
 /**
 * **📦 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.
 *
+* For custom composition, import `DividerLine` and `DividerLabel` from the same package entrypoint
+* and compose them inside `Divider`, `HStack`, or `VStack`.
+*
 * @example
 * ```tsx
-* import { Divider } from '@yahoo/uds';
+* import { Divider, DividerLabel, DividerLine } from '@yahoo/uds';
 *
 * // Default primary horizontal divider. Similar to <hr />
 * <Divider />
@@ -24,19 +37,87 @@ import { jsx } from "react/jsx-runtime";
 *
 * // A vertical divider with the tertiary styling.
 * <Divider vertical variant="tertiary" />
+*
+* // Manual composition.
+* <Divider>
+*   <DividerLine />
+*   <DividerLabel>Section</DividerLabel>
+*   <DividerLine />
+* </Divider>
 * ```
 *
 * @usage
 * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
+* - Use `DividerLine` and `DividerLabel` when a layout needs custom composition.
 *
 * @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 = forwardRef(function Divider(props, ref) {
-	return /* @__PURE__ */ jsx(DividerInternal, {
+const Divider = forwardRef(function Divider({ variant = "primary", vertical = false, contentPosition = "center", className, slotProps, children, gap, ...boxProps }, ref) {
+	const direction = vertical ? "vertical" : "horizontal";
+	const InternalComponent = vertical ? VStack : HStack;
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: labelClassName, variant: labelTextVariant, ...labelSlotProps } = slotProps?.label ?? {};
+	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
+	const classNames = useMemo(() => ({
+		root: cx(ORIENTATION_WIDTH_MAP[direction], variant !== "inherit" && getStyles({ dividerVariantRoot: variant }), className, rootClassName),
+		label: labelClassName,
+		line: lineClassName
+	}), [
+		className,
+		direction,
+		labelClassName,
+		lineClassName,
+		rootClassName,
+		variant
+	]);
+	if (children !== void 0 && children !== null && children !== false) {
+		const content = shouldWrapInLabel(children) ? /* @__PURE__ */ jsx(DividerLabel, {
+			className: classNames.label,
+			textVariant: labelTextVariant,
+			variant,
+			...labelSlotProps,
+			children
+		}) : renderManualChildren(children, variant, vertical);
+		return /* @__PURE__ */ jsx(InternalComponent, {
+			alignItems: "center",
+			className: classNames.root,
+			flex: "1",
+			gap,
+			ref,
+			...boxProps,
+			...rootSlotProps,
+			children: hasManualLine(children) ? content : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				contentPosition !== "start" && /* @__PURE__ */ jsx(DividerLine, {
+					className: classNames.line,
+					variant,
+					vertical,
+					...lineSlotProps
+				}),
+				content,
+				contentPosition !== "end" && /* @__PURE__ */ jsx(DividerLine, {
+					className: classNames.line,
+					variant,
+					vertical,
+					...lineSlotProps
+				})
+			] })
+		});
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		className: classNames.root,
+		display: "flex",
+		flex: "none",
 		ref,
-		...props
+		...boxProps,
+		...rootSlotProps,
+		children: /* @__PURE__ */ jsx(DividerLine, {
+			className: classNames.line,
+			variant,
+			vertical,
+			...lineSlotProps
+		})
 	});
 });
 Divider.displayName = "Divider";

package/dist/components/Divider/DividerLabel.cjs

@@ -0,0 +1,30 @@
+/*! © 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_components_Text = require("../Text.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Divider/DividerLabel.tsx
+/**
+* **The configured label element used by Divider.**
+*
+* @description
+* DividerLabel applies the configured divider label typography and color.
+*
+* @category Layout
+* @platform web
+*/
+const DividerLabel = (0, react.forwardRef)(function DividerLabel({ variant = "primary", textVariant = "inherit", color = "inherit", as = "span", className, ...textProps }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		as,
+		className: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantLabel: variant }), className),
+		color,
+		ref,
+		variant: textVariant,
+		...textProps
+	});
+});
+DividerLabel.displayName = "DividerLabel";
+//#endregion
+exports.DividerLabel = DividerLabel;

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

@@ -0,0 +1,18 @@
+
+import { DividerLabelProps as DividerLabelProps$1 } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Divider/DividerLabel.d.ts
+type DividerLabelProps = DividerLabelProps$1;
+/**
+ * **The configured label element used by Divider.**
+ *
+ * @description
+ * DividerLabel applies the configured divider label typography and color.
+ *
+ * @category Layout
+ * @platform web
+ */
+declare const DividerLabel: _$react.ForwardRefExoticComponent<Omit<DividerLabelProps$1, "ref"> & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+export { DividerLabel, type DividerLabelProps };

package/dist/components/Divider/DividerLabel.d.ts

@@ -0,0 +1,18 @@
+
+import { DividerLabelProps as DividerLabelProps$1 } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Divider/DividerLabel.d.ts
+type DividerLabelProps = DividerLabelProps$1;
+/**
+ * **The configured label element used by Divider.**
+ *
+ * @description
+ * DividerLabel applies the configured divider label typography and color.
+ *
+ * @category Layout
+ * @platform web
+ */
+declare const DividerLabel: _$react.ForwardRefExoticComponent<Omit<DividerLabelProps$1, "ref"> & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+export { DividerLabel, type DividerLabelProps };

package/dist/components/Divider/DividerLabel.js

@@ -0,0 +1,28 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { Text } from "../Text.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Divider/DividerLabel.tsx
+/**
+* **The configured label element used by Divider.**
+*
+* @description
+* DividerLabel applies the configured divider label typography and color.
+*
+* @category Layout
+* @platform web
+*/
+const DividerLabel = forwardRef(function DividerLabel({ variant = "primary", textVariant = "inherit", color = "inherit", as = "span", className, ...textProps }, ref) {
+	return /* @__PURE__ */ jsx(Text, {
+		as,
+		className: cx(variant !== "inherit" && getStyles({ dividerVariantLabel: variant }), className),
+		color,
+		ref,
+		variant: textVariant,
+		...textProps
+	});
+});
+DividerLabel.displayName = "DividerLabel";
+//#endregion
+export { DividerLabel };

package/dist/components/Divider/DividerLine.cjs

@@ -0,0 +1,41 @@
+/*! © 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_components_Box = require("../Box.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Divider/DividerLine.tsx
+/**
+* **The configured line element used by Divider.**
+*
+* @description
+* DividerLine can be used inside Divider for custom composition, or directly
+* inside HStack/VStack when a fully manual layout is easier.
+*
+* @category Layout
+* @platform web
+*/
+const DividerLine = (0, react.forwardRef)(function DividerLine({ variant = "primary", vertical = false, className, style, "aria-hidden": ariaHidden = true, ...boxProps }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		"aria-hidden": ariaHidden,
+		className: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantLine: variant }), className),
+		flex: "1",
+		ref,
+		style: (0, react.useMemo)(() => vertical ? {
+			borderTopWidth: 0,
+			borderRightWidth: 0,
+			borderBottomWidth: 0,
+			...style
+		} : {
+			borderLeftWidth: 0,
+			borderRightWidth: 0,
+			borderBottomWidth: 0,
+			...style
+		}, [style, vertical]),
+		...boxProps
+	});
+});
+DividerLine.displayName = "DividerLine";
+//#endregion
+exports.DividerLine = DividerLine;

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

@@ -0,0 +1,19 @@
+
+import { DividerLineProps as DividerLineProps$1 } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Divider/DividerLine.d.ts
+type DividerLineProps = DividerLineProps$1;
+/**
+ * **The configured line element used by Divider.**
+ *
+ * @description
+ * DividerLine can be used inside Divider for custom composition, or directly
+ * inside HStack/VStack when a fully manual layout is easier.
+ *
+ * @category Layout
+ * @platform web
+ */
+declare const DividerLine: _$react.ForwardRefExoticComponent<DividerLineProps$1 & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DividerLine, type DividerLineProps };

package/dist/components/Divider/DividerLine.d.ts

@@ -0,0 +1,19 @@
+
+import { DividerLineProps as DividerLineProps$1 } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Divider/DividerLine.d.ts
+type DividerLineProps = DividerLineProps$1;
+/**
+ * **The configured line element used by Divider.**
+ *
+ * @description
+ * DividerLine can be used inside Divider for custom composition, or directly
+ * inside HStack/VStack when a fully manual layout is easier.
+ *
+ * @category Layout
+ * @platform web
+ */
+declare const DividerLine: _$react.ForwardRefExoticComponent<DividerLineProps$1 & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DividerLine, type DividerLineProps };