@yahoo/uds 3.131.0-beta.2 → 3.132.0

package/dist/automated-config/dist/properties.d.cts

@@ -1,5 +1,5 @@
 
-import { ShadowPreset } from "../../types/src/index.cjs";
+import { ShadowPreset } from "../../types/dist/index.cjs";
 import { ArbitraryFixtures, InferArbitraryType } from "../../fixtures/dist/index.cjs";
 import { AllPossibleProperties, PossibleStates } from "./types/ComponentConfig.cjs";
 import { SchemaStateValue } from "./types/ConfigSchema.cjs";

package/dist/automated-config/dist/properties.d.ts

@@ -1,5 +1,5 @@
 
-import { ShadowPreset } from "../../types/src/index.js";
+import { ShadowPreset } from "../../types/dist/index.js";
 import { ArbitraryFixtures, InferArbitraryType } from "../../fixtures/dist/index.js";
 import { AllPossibleProperties, PossibleStates } from "./types/ComponentConfig.js";
 import { SchemaStateValue } from "./types/ConfigSchema.js";

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

@@ -1,5 +1,5 @@
 
-import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/src/index.cjs";
+import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/dist/index.cjs";
 import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.cjs";
 import { AllPossibleProperties, ComponentConfig, LayerConfig, PossibleStates, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
 import { SchemaStateValue } from "../types/ConfigSchema.cjs";

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

@@ -1,5 +1,5 @@
 
-import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/src/index.js";
+import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/dist/index.js";
 import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.js";
 import { AllPossibleProperties, ComponentConfig, LayerConfig, PossibleStates, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
 import { SchemaStateValue } from "../types/ConfigSchema.js";

package/dist/components/Banner/Banner.cjs

@@ -75,7 +75,7 @@ function bindActionVariants(actions, bannerVariant) {
 *
 * @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
 **/
-const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, ...rest }, ref) {
+const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, slotProps, ...rest }, ref) {
 	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
 	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
 	const rootStyles = require_styles_styler.getStyles({
@@ -133,6 +133,7 @@ const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size
 		onClick: onDismiss,
 		className: dismissContainerStyles,
 		"data-testid": "banner-dismiss",
+		...slotProps?.dismiss,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: _yahoo_uds_icons.Cross,
 			iconProps: {
@@ -150,13 +151,15 @@ const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size
 				icon: startIcon,
 				iconProps: { color: "inherit" },
 				className: require_styles_styler.cx(iconStyles, "shrink-0"),
-				"data-testid": "banner-start-icon"
+				"data-testid": "banner-start-icon",
+				...slotProps?.startIcon
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: require_styles_styler.cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
 				children: [contentArea, hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
 					"data-testid": "banner-actions",
+					...slotProps?.actions,
 					children: actions
 				})]
 			}),

package/dist/components/Banner/Banner.d.cts

@@ -1,13 +1,22 @@
 
-import { UniversalBannerProps } from "../../types/src/index.cjs";
+import { UniversalBannerProps } from "../../types/dist/index.cjs";
 import "../../tokens/index.cjs";
 import * as react from "react";
 
 //#region src/components/Banner/Banner.d.ts
 type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface BannerProps extends HtmlDivProps, UniversalBannerProps {
   /** Accessible label for the dismiss button. @default "Dismiss" */
   dismissAriaLabel?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: DataAttributes;
+    actions?: DataAttributes;
+    dismiss?: DataAttributes;
+  };
 }
 /**
  * **An inline notification banner for contextual messages with optional actions.**

package/dist/components/Banner/Banner.d.ts

@@ -1,13 +1,22 @@
 
-import { UniversalBannerProps } from "../../types/src/index.js";
+import { UniversalBannerProps } from "../../types/dist/index.js";
 import "../../tokens/index.js";
 import * as react from "react";
 
 //#region src/components/Banner/Banner.d.ts
 type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface BannerProps extends HtmlDivProps, UniversalBannerProps {
   /** Accessible label for the dismiss button. @default "Dismiss" */
   dismissAriaLabel?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: DataAttributes;
+    actions?: DataAttributes;
+    dismiss?: DataAttributes;
+  };
 }
 /**
  * **An inline notification banner for contextual messages with optional actions.**

package/dist/components/Banner/Banner.js

@@ -73,7 +73,7 @@ function bindActionVariants(actions, bannerVariant) {
 *
 * @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
 **/
-const Banner = forwardRef(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, ...rest }, ref) {
+const Banner = forwardRef(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, slotProps, ...rest }, ref) {
 	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
 	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
 	const rootStyles = getStyles({
@@ -131,6 +131,7 @@ const Banner = forwardRef(function Banner({ variant = "primary", size = "default
 		onClick: onDismiss,
 		className: dismissContainerStyles,
 		"data-testid": "banner-dismiss",
+		...slotProps?.dismiss,
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: Cross,
 			iconProps: {
@@ -148,13 +149,15 @@ const Banner = forwardRef(function Banner({ variant = "primary", size = "default
 				icon: startIcon,
 				iconProps: { color: "inherit" },
 				className: cx(iconStyles, "shrink-0"),
-				"data-testid": "banner-start-icon"
+				"data-testid": "banner-start-icon",
+				...slotProps?.startIcon
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
 				children: [contentArea, hasActions && /* @__PURE__ */ jsx("div", {
 					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
 					"data-testid": "banner-actions",
+					...slotProps?.actions,
 					children: actions
 				})]
 			}),

package/dist/components/Banner/utils.d.cts

@@ -1,5 +1,5 @@
 
-import { BannerVariant } from "../../types/src/index.cjs";
+import { BannerVariant } from "../../types/dist/index.cjs";
 import { ReactNode } from "react";
 
 //#region src/components/Banner/utils.d.ts

package/dist/components/Banner/utils.d.ts

@@ -1,5 +1,5 @@
 
-import { BannerVariant } from "../../types/src/index.js";
+import { BannerVariant } from "../../types/dist/index.js";
 import { ReactNode } from "react";
 
 //#region src/components/Banner/utils.d.ts

package/dist/components/Box.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalBoxProps } from "../types/src/index.cjs";
+import { UniversalBoxProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 

package/dist/components/Box.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalBoxProps } from "../types/src/index.js";
+import { UniversalBoxProps } from "../types/dist/index.js";
 import "../tokens/index.js";
 import * as react from "react";
 

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

@@ -3,7 +3,7 @@ import { DividerInternalProps } from "./DividerInternal.cjs";
 import * as react from "react";
 
 //#region src/components/Divider/Divider.d.ts
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+type DividerProps = DividerInternalProps;
 /**
  * **📦 A divider component that can be used to visually separate components**
  *
@@ -34,6 +34,6 @@ type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
  *
  * @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<DividerProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

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

@@ -3,7 +3,7 @@ import { DividerInternalProps } from "./DividerInternal.js";
 import * as react from "react";
 
 //#region src/components/Divider/Divider.d.ts
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
+type DividerProps = DividerInternalProps;
 /**
  * **📦 A divider component that can be used to visually separate components**
  *
@@ -34,6 +34,6 @@ type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
  *
  * @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<DividerProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

package/dist/components/Divider/DividerCore.cjs

@@ -14,19 +14,22 @@ const ORIENTATION_WIDTH_MAP = {
 	horizontal: "w-full",
 	vertical: ""
 };
-const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, contentPosition = "center", className, layerClassNames, children, ...boxProps }, ref) {
+const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, contentPosition = "center", className, slotProps, children, ...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, ...labelSlotProps } = slotProps?.label ?? {};
+	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
 	const classNames = (0, react.useMemo)(() => ({
-		root: require_styles_styler.cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),
-		label: require_styles_styler.cx(layerClassNames?.text),
-		line: layerClassNames?.line
+		root: require_styles_styler.cx(ORIENTATION_WIDTH_MAP[direction], className, rootClassName),
+		label: labelClassName,
+		line: lineClassName
 	}), [
 		className,
 		direction,
-		layerClassNames?.root,
-		layerClassNames?.text,
-		layerClassNames?.line
+		rootClassName,
+		labelClassName,
+		lineClassName
 	]);
 	const lineStyle = (0, react.useMemo)(() => direction === "vertical" ? {
 		borderTopWidth: 0,
@@ -39,8 +42,9 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 	}, [direction]);
 	const Line = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		flex: "1",
-		className: classNames.line,
-		style: lineStyle
+		className: require_styles_styler.cx(classNames.line, lineClassName),
+		style: lineStyle,
+		...lineSlotProps
 	});
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InternalComponent, {
 		flex: "1",
@@ -48,6 +52,7 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: [
 			contentPosition !== "start" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -56,7 +61,8 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 					as: "span",
 					color: "inherit",
 					variant: "inherit",
-					className: classNames.label,
+					className: require_styles_styler.cx(classNames.label, labelClassName),
+					...labelSlotProps,
 					children
 				})
 			}),
@@ -69,6 +75,7 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {})
 	});
 });

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

@@ -1,15 +1,21 @@
 
-import { UniversalDividerProps, UniversalStackProps } from "../../types/src/index.cjs";
+import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.cjs";
 import "../../tokens/types.cjs";
 import { BoxProps } from "../Box.cjs";
+import { Text } from "../Text.cjs";
 import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/Divider/DividerCore.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
-  layerClassNames?: {
-    root?: string;
-    text?: string;
-    line?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    label?: Partial<ComponentProps<typeof Text> & DataAttributes>;
+    line?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
   };
 }
 declare const DividerCore: react.ForwardRefExoticComponent<DividerCoreProps & react.RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +1,21 @@
 
-import { UniversalDividerProps, UniversalStackProps } from "../../types/src/index.js";
+import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.js";
 import "../../tokens/types.js";
 import { BoxProps } from "../Box.js";
+import { Text } from "../Text.js";
 import * as react from "react";
+import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/Divider/DividerCore.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
-  layerClassNames?: {
-    root?: string;
-    text?: string;
-    line?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    label?: Partial<ComponentProps<typeof Text> & DataAttributes>;
+    line?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
   };
 }
 declare const DividerCore: react.ForwardRefExoticComponent<DividerCoreProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/Divider/DividerCore.js

@@ -12,19 +12,22 @@ const ORIENTATION_WIDTH_MAP = {
 	horizontal: "w-full",
 	vertical: ""
 };
-const DividerCore = forwardRef(function Divider({ vertical = false, contentPosition = "center", className, layerClassNames, children, ...boxProps }, ref) {
+const DividerCore = forwardRef(function Divider({ vertical = false, contentPosition = "center", className, slotProps, children, ...boxProps }, ref) {
 	const direction = vertical ? "vertical" : "horizontal";
 	const InternalComponent = vertical ? VStack : HStack;
+	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
+	const { className: labelClassName, ...labelSlotProps } = slotProps?.label ?? {};
+	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
 	const classNames = useMemo(() => ({
-		root: cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),
-		label: cx(layerClassNames?.text),
-		line: layerClassNames?.line
+		root: cx(ORIENTATION_WIDTH_MAP[direction], className, rootClassName),
+		label: labelClassName,
+		line: lineClassName
 	}), [
 		className,
 		direction,
-		layerClassNames?.root,
-		layerClassNames?.text,
-		layerClassNames?.line
+		rootClassName,
+		labelClassName,
+		lineClassName
 	]);
 	const lineStyle = useMemo(() => direction === "vertical" ? {
 		borderTopWidth: 0,
@@ -37,8 +40,9 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 	}, [direction]);
 	const Line = () => /* @__PURE__ */ jsx(Box, {
 		flex: "1",
-		className: classNames.line,
-		style: lineStyle
+		className: cx(classNames.line, lineClassName),
+		style: lineStyle,
+		...lineSlotProps
 	});
 	if (children) return /* @__PURE__ */ jsxs(InternalComponent, {
 		flex: "1",
@@ -46,6 +50,7 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: [
 			contentPosition !== "start" && /* @__PURE__ */ jsx(Line, {}),
 			/* @__PURE__ */ jsx(Box, {
@@ -54,7 +59,8 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 					as: "span",
 					color: "inherit",
 					variant: "inherit",
-					className: classNames.label,
+					className: cx(classNames.label, labelClassName),
+					...labelSlotProps,
 					children
 				})
 			}),
@@ -67,6 +73,7 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 		className: classNames.root,
 		ref,
 		...boxProps,
+		...rootSlotProps,
 		children: /* @__PURE__ */ jsx(Line, {})
 	});
 });

package/dist/components/Divider/DividerInternal.cjs

@@ -7,19 +7,23 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Divider/DividerInternal.tsx
-const DividerInternal = (0, react.forwardRef)(function Divider({ variant = "primary", layerClassNames, ...props }, ref) {
+const DividerInternal = (0, react.forwardRef)(function Divider({ variant = "primary", slotProps, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerCore.DividerCore, {
 		ref,
-		layerClassNames: (0, react.useMemo)(() => ({
-			root: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantRoot: variant }), layerClassNames?.root),
-			text: require_styles_styler.cx(variant !== "inherit" ? require_styles_styler.getStyles({ dividerVariantLabel: variant }) : void 0, layerClassNames?.text),
-			line: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantLine: variant }), layerClassNames?.line)
-		}), [
-			layerClassNames?.line,
-			layerClassNames?.root,
-			layerClassNames?.text,
-			variant
-		]),
+		slotProps: (0, react.useMemo)(() => ({
+			root: {
+				...slotProps?.root,
+				className: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantRoot: variant }), slotProps?.root?.className)
+			},
+			label: {
+				...slotProps?.label,
+				className: require_styles_styler.cx(variant !== "inherit" ? require_styles_styler.getStyles({ dividerVariantLabel: variant }) : void 0, slotProps?.label?.className)
+			},
+			line: {
+				...slotProps?.line,
+				className: require_styles_styler.cx(variant !== "inherit" && require_styles_styler.getStyles({ dividerVariantLine: variant }), slotProps?.line?.className)
+			}
+		}), [slotProps, variant]),
 		...props
 	});
 });

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

@@ -1,5 +1,5 @@
 
-import { UniversalDividerProps } from "../../types/src/index.cjs";
+import { UniversalDividerProps } from "../../types/dist/index.cjs";
 import "../../tokens/types.cjs";
 import { DividerCoreProps } from "./DividerCore.cjs";
 import * as react from "react";

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

@@ -1,5 +1,5 @@
 
-import { UniversalDividerProps } from "../../types/src/index.js";
+import { UniversalDividerProps } from "../../types/dist/index.js";
 import "../../tokens/types.js";
 import { DividerCoreProps } from "./DividerCore.js";
 import * as react from "react";

package/dist/components/Divider/DividerInternal.js

@@ -5,19 +5,23 @@ import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Divider/DividerInternal.tsx
-const DividerInternal = forwardRef(function Divider({ variant = "primary", layerClassNames, ...props }, ref) {
+const DividerInternal = forwardRef(function Divider({ variant = "primary", slotProps, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DividerCore, {
 		ref,
-		layerClassNames: useMemo(() => ({
-			root: cx(variant !== "inherit" && getStyles({ dividerVariantRoot: variant }), layerClassNames?.root),
-			text: cx(variant !== "inherit" ? getStyles({ dividerVariantLabel: variant }) : void 0, layerClassNames?.text),
-			line: cx(variant !== "inherit" && getStyles({ dividerVariantLine: variant }), layerClassNames?.line)
-		}), [
-			layerClassNames?.line,
-			layerClassNames?.root,
-			layerClassNames?.text,
-			variant
-		]),
+		slotProps: useMemo(() => ({
+			root: {
+				...slotProps?.root,
+				className: cx(variant !== "inherit" && getStyles({ dividerVariantRoot: variant }), slotProps?.root?.className)
+			},
+			label: {
+				...slotProps?.label,
+				className: cx(variant !== "inherit" ? getStyles({ dividerVariantLabel: variant }) : void 0, slotProps?.label?.className)
+			},
+			line: {
+				...slotProps?.line,
+				className: cx(variant !== "inherit" && getStyles({ dividerVariantLine: variant }), slotProps?.line?.className)
+			}
+		}), [slotProps, variant]),
 		...props
 	});
 });

package/dist/components/FormLabel.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalFormLabelProps } from "../types/src/index.cjs";
+import { UniversalFormLabelProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 import { PropsWithChildren } from "react";

package/dist/components/FormLabel.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalFormLabelProps } from "../types/src/index.js";
+import { UniversalFormLabelProps } from "../types/dist/index.js";
 import "../tokens/index.js";
 import * as react from "react";
 import { PropsWithChildren } from "react";

package/dist/components/HStack.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/src/index.cjs";
+import { UniversalStackProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
 import { DivProps } from "./Box.cjs";
 import * as react from "react";

package/dist/components/HStack.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/src/index.js";
+import { UniversalStackProps } from "../types/dist/index.js";
 import "../tokens/index.js";
 import { DivProps } from "./Box.js";
 import * as react from "react";

package/dist/components/Icon.cjs

@@ -5,7 +5,6 @@ const require_styles_styler = require('../styles/styler.cjs');
 const require_tokens_configs_sizes = require('../tokens/configs/sizes.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons_utils = require("@yahoo/uds-icons/utils");
 
 //#region src/components/Icon.tsx
 /**
@@ -37,10 +36,8 @@ let _yahoo_uds_icons_utils = require("@yahoo/uds-icons/utils");
 *
 * @related [IconButton](https://uds.build/docs/components/icon-button)
 */
-const Icon = (0, react.forwardRef)(function BaseIcon({ name: iconName, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
-	const iconDefinition = (0, _yahoo_uds_icons_utils.isIconDefinition)(iconName) ? iconName : void 0;
-	const iconComponent = typeof iconName === "function" ? iconName : void 0;
-	const availableVariants = iconDefinition ? (0, _yahoo_uds_icons_utils.getIconVariants)(iconDefinition) : [];
+const Icon = (0, react.forwardRef)(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
+	const availableVariants = SVGIcon.metadata?.variants ?? [];
 	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
 	const isMulticolor = effectiveVariant === "multicolor";
 	const styles = require_styles_styler.getStyles({
@@ -49,14 +46,6 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: iconName, size = "m
 		className: require_styles_styler.cx(className, !isMulticolor && "[&_path]:fill-current")
 	});
 	const sizePx = require_tokens_configs_sizes.normalIconSizes[size];
-	const renderedMarkup = iconDefinition ? (0, _yahoo_uds_icons_utils.getIconMarkup)(iconDefinition, size, effectiveVariant) : null;
-	const renderedIcon = renderedMarkup ? null : (0, react.isValidElement)(iconName) ? (0, react.cloneElement)(iconName, {
-		size,
-		variant: effectiveVariant
-	}) : iconComponent ? iconComponent({
-		size,
-		variant: effectiveVariant
-	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		ref,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -66,9 +55,11 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: iconName, size = "m
 		"aria-hidden": "true",
 		focusable: "false",
 		className: styles,
-		dangerouslySetInnerHTML: renderedMarkup ? { __html: renderedMarkup } : void 0,
 		...props,
-		children: renderedIcon
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
 	});
 });
 Icon.displayName = "Icon";

package/dist/components/Icon.d.cts

@@ -6,6 +6,7 @@ import * as react from "react";
 //#region src/components/Icon.d.ts
 /**
  * Props for the Icon component.
+ * @see IconPropsWithSVGProps
  */
 type IconProps = IconPropsWithSVGProps;
 /**

package/dist/components/Icon.d.ts

@@ -6,6 +6,7 @@ import * as react from "react";
 //#region src/components/Icon.d.ts
 /**
  * Props for the Icon component.
+ * @see IconPropsWithSVGProps
  */
 type IconProps = IconPropsWithSVGProps;
 /**