@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/dist/components/Divider/Divider.js

@@ -0,0 +1,47 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { DividerInternal } from "./DividerInternal.js";
+import { forwardRef } from "react";
+import { jsx } from "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 = forwardRef(function Divider$1(props, ref) {
+	return /* @__PURE__ */ jsx(DividerInternal, {
+		ref,
+		...props
+	});
+});
+Divider.displayName = "Divider";
+
+//#endregion
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["Divider"],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { DividerInternalProps } from './DividerInternal';\nimport { DividerInternal } from './DividerInternal';\n\ntype DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;\n\n/**\n * **📦 A divider component that can be used to visually separate components**\n *\n * @description\n * 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.\n *\n * @example\n * ```tsx\n * import { Divider } from '@yahoo/uds';\n *\n * // Default primary horizontal divider. Similar to <hr />\n * <Divider />\n *\n * // A vertical divider.\n * <Divider vertical />\n *\n * // A horizontal divider with the secondary styling.\n * <Divider variant=\"secondary\" />\n *\n * // A vertical divider with the tertiary styling.\n * <Divider vertical variant=\"tertiary\" />\n * ```\n *\n * @usage\n * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).\n *\n * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info\n *\n * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)\n */\nconst Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(props, ref) {\n  return <DividerInternal ref={ref} {...props} />;\n});\n\nDivider.displayName = 'Divider';\n\nexport { Divider, type DividerProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,UAAU,WAAyC,SAASA,UAAQ,OAAO,KAAK;AACpF,QAAO,oBAAC;EAAqB;EAAK,GAAI;GAAS;EAC/C;AAEF,QAAQ,cAAc"}

package/dist/components/Divider/DividerCore.cjs

@@ -0,0 +1,76 @@
+/*! © 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_components_Box = require('../Box.cjs');
+const require_components_HStack = require('../HStack.cjs');
+const require_components_Text = require('../Text.cjs');
+const require_components_VStack = require('../VStack.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Divider/DividerCore.tsx
+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 direction = vertical ? "vertical" : "horizontal";
+	const InternalComponent = vertical ? require_components_VStack.VStack : require_components_HStack.HStack;
+	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
+	}), [
+		className,
+		direction,
+		layerClassNames?.root,
+		layerClassNames?.text,
+		layerClassNames?.line
+	]);
+	const lineStyle = (0, react.useMemo)(() => direction === "vertical" ? {
+		borderTopWidth: 0,
+		borderRightWidth: 0,
+		borderBottomWidth: 0
+	} : {
+		borderLeftWidth: 0,
+		borderRightWidth: 0,
+		borderBottomWidth: 0
+	}, [direction]);
+	const Line = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		flex: "1",
+		className: classNames.line,
+		style: lineStyle
+	});
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InternalComponent, {
+		flex: "1",
+		alignItems: "center",
+		className: classNames.root,
+		ref,
+		...boxProps,
+		children: [
+			contentPosition !== "start" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+				flex: "none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+					color: "inherit",
+					variant: "inherit",
+					className: classNames.label,
+					children
+				})
+			}),
+			contentPosition !== "end" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		display: "flex",
+		flex: "none",
+		className: classNames.root,
+		ref,
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {})
+	});
+});
+DividerCore.displayName = "DividerCore";
+
+//#endregion
+exports.DividerCore = DividerCore;

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

@@ -0,0 +1,16 @@
+import { UniversalDividerProps, UniversalStackProps } from "../../tokens/types.cjs";
+import { BoxProps } from "../Box.cjs";
+import * as react55 from "react";
+
+//#region src/components/Divider/DividerCore.d.ts
+interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+  layerClassNames?: {
+    root?: string;
+    text?: string;
+    line?: string;
+  };
+}
+declare const DividerCore: react55.ForwardRefExoticComponent<DividerCoreProps & react55.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DividerCore, type DividerCoreProps };
+//# sourceMappingURL=DividerCore.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerCore.d.cts","names":[],"sources":["../../../src/components/Divider/DividerCore.tsx"],"sourcesContent":[],"mappings":";;;;;UAiBU,gBAAA,CAAA,OAAA,CACA,KAAK,oDACX,KAAK,+CACL,KAAK;;;IAHC,IAAA,CAAA,CAAA,CAAA,MAAA;IACK,IAAA,CAAA,CAAA,CAAA,MAAA;EACN,CAAA;;cASH,WAVI,CAAA,CAUO,OAAA,CAAA,yBAVP,CAUO,gBAVP,CAAA,CAAA,CAUO,OAAA,CAAA,aAVP,CAUO,cAVP,CAAA,CAAA"}

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

@@ -0,0 +1,16 @@
+import { UniversalDividerProps, UniversalStackProps } from "../../tokens/types.js";
+import { BoxProps } from "../Box.js";
+import * as react33 from "react";
+
+//#region src/components/Divider/DividerCore.d.ts
+interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>, Omit<UniversalStackProps, 'separator' | 'asChild'>, Omit<UniversalDividerProps, 'variant'> {
+  layerClassNames?: {
+    root?: string;
+    text?: string;
+    line?: string;
+  };
+}
+declare const DividerCore: react33.ForwardRefExoticComponent<DividerCoreProps & react33.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DividerCore, type DividerCoreProps };
+//# sourceMappingURL=DividerCore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerCore.d.ts","names":[],"sources":["../../../src/components/Divider/DividerCore.tsx"],"sourcesContent":[],"mappings":";;;;;UAiBU,gBAAA,CAAA,OAAA,CACA,KAAK,oDACX,KAAK,+CACL,KAAK;;;IAHC,IAAA,CAAA,CAAA,CAAA,MAAA;IACK,IAAA,CAAA,CAAA,CAAA,MAAA;EACN,CAAA;;cASH,WAVI,CAAA,CAUO,OAAA,CAAA,yBAVP,CAUO,gBAVP,CAAA,CAAA,CAUO,OAAA,CAAA,aAVP,CAUO,cAVP,CAAA,CAAA"}

package/dist/components/Divider/DividerCore.js

@@ -0,0 +1,76 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { HStack } from "../HStack.js";
+import { Text } from "../Text.js";
+import { VStack } from "../VStack.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Divider/DividerCore.tsx
+const ORIENTATION_WIDTH_MAP = {
+	horizontal: "w-full",
+	vertical: ""
+};
+const DividerCore = forwardRef(function Divider({ vertical = false, contentPosition = "center", className, layerClassNames, children,...boxProps }, ref) {
+	const direction = vertical ? "vertical" : "horizontal";
+	const InternalComponent = vertical ? VStack : HStack;
+	const classNames = useMemo(() => ({
+		root: cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),
+		label: cx(layerClassNames?.text),
+		line: layerClassNames?.line
+	}), [
+		className,
+		direction,
+		layerClassNames?.root,
+		layerClassNames?.text,
+		layerClassNames?.line
+	]);
+	const lineStyle = useMemo(() => direction === "vertical" ? {
+		borderTopWidth: 0,
+		borderRightWidth: 0,
+		borderBottomWidth: 0
+	} : {
+		borderLeftWidth: 0,
+		borderRightWidth: 0,
+		borderBottomWidth: 0
+	}, [direction]);
+	const Line = () => /* @__PURE__ */ jsx(Box, {
+		flex: "1",
+		className: classNames.line,
+		style: lineStyle
+	});
+	if (children) return /* @__PURE__ */ jsxs(InternalComponent, {
+		flex: "1",
+		alignItems: "center",
+		className: classNames.root,
+		ref,
+		...boxProps,
+		children: [
+			contentPosition !== "start" && /* @__PURE__ */ jsx(Line, {}),
+			/* @__PURE__ */ jsx(Box, {
+				flex: "none",
+				children: /* @__PURE__ */ jsx(Text, {
+					color: "inherit",
+					variant: "inherit",
+					className: classNames.label,
+					children
+				})
+			}),
+			contentPosition !== "end" && /* @__PURE__ */ jsx(Line, {})
+		]
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		display: "flex",
+		flex: "none",
+		className: classNames.root,
+		ref,
+		...boxProps,
+		children: /* @__PURE__ */ jsx(Line, {})
+	});
+});
+DividerCore.displayName = "DividerCore";
+
+//#endregion
+export { DividerCore };
+//# sourceMappingURL=DividerCore.js.map

package/dist/components/Divider/DividerCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerCore.js","names":[],"sources":["../../../src/components/Divider/DividerCore.tsx"],"sourcesContent":["/* eslint-disable react/no-multi-comp */\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useMemo } from 'react';\n\nimport { cx } from '../../styles/styler';\nimport type { UniversalDividerProps, UniversalStackProps } from '../../tokens/types';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { HStack } from '../HStack';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\n\nconst ORIENTATION_WIDTH_MAP = {\n  horizontal: 'w-full',\n  vertical: '',\n} as const;\n\ninterface DividerCoreProps\n  extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>,\n    Omit<UniversalStackProps, 'separator' | 'asChild'>,\n    Omit<UniversalDividerProps, 'variant'> {\n  layerClassNames?: {\n    root?: string;\n    text?: string;\n    line?: string;\n  };\n}\n\nconst DividerCore = forwardRef<HTMLDivElement, DividerCoreProps>(function Divider(\n  {\n    vertical = false,\n    contentPosition = 'center',\n    className,\n    layerClassNames,\n    children,\n    ...boxProps\n  }: DividerCoreProps,\n  ref,\n) {\n  const direction = vertical ? 'vertical' : 'horizontal';\n  const InternalComponent = vertical ? VStack : HStack;\n\n  const classNames = useMemo(\n    () => ({\n      root: cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),\n      label: cx(layerClassNames?.text),\n      line: layerClassNames?.line,\n    }),\n    [className, direction, layerClassNames?.root, layerClassNames?.text, layerClassNames?.line],\n  );\n\n  // This needs to be style rather than classes because the automated configuration classes\n  // have a higher specificity and tailwind !important isn't working.\n  const lineStyle = useMemo(\n    (): CSSProperties =>\n      // Configurator sets all borders to 1.\n      direction === 'vertical'\n        ? // For vertical, we keep only the left border.\n          { borderTopWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 }\n        : // For horizontal, we keep only the top border.\n          { borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 },\n\n    [direction],\n  );\n\n  // eslint-disable-next-line react/display-name\n  const Line = () => <Box flex=\"1\" className={classNames.line} style={lineStyle} />;\n\n  if (children) {\n    return (\n      <InternalComponent\n        flex=\"1\"\n        alignItems=\"center\"\n        className={classNames.root}\n        ref={ref}\n        {...boxProps}\n      >\n        {contentPosition !== 'start' && <Line />}\n\n        <Box flex=\"none\">\n          <Text color=\"inherit\" variant=\"inherit\" className={classNames.label}>\n            {children}\n          </Text>\n        </Box>\n\n        {contentPosition !== 'end' && <Line />}\n      </InternalComponent>\n    );\n  }\n\n  return (\n    <Box display=\"flex\" flex=\"none\" className={classNames.root} ref={ref} {...boxProps}>\n      <Line />\n    </Box>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nDividerCore.displayName = 'DividerCore';\n\nexport { DividerCore, type DividerCoreProps };\n"],"mappings":";;;;;;;;;;AAYA,MAAM,wBAAwB;CAC5B,YAAY;CACZ,UAAU;CACX;AAaD,MAAM,cAAc,WAA6C,SAAS,QACxE,EACE,WAAW,OACX,kBAAkB,UAClB,WACA,iBACA,SACA,GAAG,YAEL,KACA;CACA,MAAM,YAAY,WAAW,aAAa;CAC1C,MAAM,oBAAoB,WAAW,SAAS;CAE9C,MAAM,aAAa,eACV;EACL,MAAM,GAAG,sBAAsB,YAAY,WAAW,iBAAiB,KAAK;EAC5E,OAAO,GAAG,iBAAiB,KAAK;EAChC,MAAM,iBAAiB;EACxB,GACD;EAAC;EAAW;EAAW,iBAAiB;EAAM,iBAAiB;EAAM,iBAAiB;EAAK,CAC5F;CAID,MAAM,YAAY,cAGd,cAAc,aAEV;EAAE,gBAAgB;EAAG,kBAAkB;EAAG,mBAAmB;EAAG,GAEhE;EAAE,iBAAiB;EAAG,kBAAkB;EAAG,mBAAmB;EAAG,EAEvE,CAAC,UAAU,CACZ;CAGD,MAAM,aAAa,oBAAC;EAAI,MAAK;EAAI,WAAW,WAAW;EAAM,OAAO;GAAa;AAEjF,KAAI,SACF,QACE,qBAAC;EACC,MAAK;EACL,YAAW;EACX,WAAW,WAAW;EACjB;EACL,GAAI;;GAEH,oBAAoB,WAAW,oBAAC,SAAO;GAExC,oBAAC;IAAI,MAAK;cACR,oBAAC;KAAK,OAAM;KAAU,SAAQ;KAAU,WAAW,WAAW;KAC3D;MACI;KACH;GAEL,oBAAoB,SAAS,oBAAC,SAAO;;GACpB;AAIxB,QACE,oBAAC;EAAI,SAAQ;EAAO,MAAK;EAAO,WAAW,WAAW;EAAW;EAAK,GAAI;YACxE,oBAAC,SAAO;GACJ;EAER;AAGF,YAAY,cAAc"}

package/dist/components/Divider/DividerInternal.cjs

@@ -0,0 +1,28 @@
+/*! © 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_components_Divider_DividerCore = require('./DividerCore.cjs');
+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) {
+	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
+		]),
+		...props
+	});
+});
+DividerInternal.displayName = "DividerInternal";
+
+//#endregion
+exports.DividerInternal = DividerInternal;

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

@@ -0,0 +1,13 @@
+import { UniversalDividerProps } from "../../tokens/types.cjs";
+import { DividerCoreProps } from "./DividerCore.cjs";
+import * as react57 from "react";
+
+//#region src/components/Divider/DividerInternal.d.ts
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerInternalProps extends DividerCoreProps {
+  variant?: VariantWithInherit;
+}
+declare const DividerInternal: react57.ForwardRefExoticComponent<DividerInternalProps & react57.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DividerInternal, type DividerInternalProps };
+//# sourceMappingURL=DividerInternal.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerInternal.d.cts","names":[],"sources":["../../../src/components/Divider/DividerInternal.tsx"],"sourcesContent":[],"mappings":";;;;;KAOK,kBAAA,CAAA,CAAA,CAAqB,QAAQ;UAExB,oBAAA,CAAA,OAAA,CAA6B;YAE3B;AAP0C;AAGrB,OAAA,CAAA,KAAA,CAO3B,eALyB,CAAA,CAKV,OAAA,CAAA,yBALkB,CAKlB,oBALkC,CAAA,CAAA,CAKlC,OAAA,CAAA,aALkC,CAKlC,cALkC,CAAA,CAAA"}

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

@@ -0,0 +1,13 @@
+import { UniversalDividerProps } from "../../tokens/types.js";
+import { DividerCoreProps } from "./DividerCore.js";
+import * as react35 from "react";
+
+//#region src/components/Divider/DividerInternal.d.ts
+type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
+interface DividerInternalProps extends DividerCoreProps {
+  variant?: VariantWithInherit;
+}
+declare const DividerInternal: react35.ForwardRefExoticComponent<DividerInternalProps & react35.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DividerInternal, type DividerInternalProps };
+//# sourceMappingURL=DividerInternal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerInternal.d.ts","names":[],"sources":["../../../src/components/Divider/DividerInternal.tsx"],"sourcesContent":[],"mappings":";;;;;KAOK,kBAAA,CAAA,CAAA,CAAqB,QAAQ;UAExB,oBAAA,CAAA,OAAA,CAA6B;YAE3B;AAP0C;AAGrB,OAAA,CAAA,KAAA,CAO3B,eALyB,CAAA,CAKV,OAAA,CAAA,yBALkB,CAKlB,oBALkC,CAAA,CAAA,CAKlC,OAAA,CAAA,aALkC,CAKlC,cALkC,CAAA,CAAA"}

package/dist/components/Divider/DividerInternal.js

@@ -0,0 +1,28 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { DividerCore } from "./DividerCore.js";
+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) {
+	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
+		]),
+		...props
+	});
+});
+DividerInternal.displayName = "DividerInternal";
+
+//#endregion
+export { DividerInternal };
+//# sourceMappingURL=DividerInternal.js.map

package/dist/components/Divider/DividerInternal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerInternal.js","names":[],"sources":["../../../src/components/Divider/DividerInternal.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\n\nimport { cx, getStyles } from '../../styles/styler';\nimport type { UniversalDividerProps } from '../../tokens/types';\nimport type { DividerCoreProps } from './DividerCore';\nimport { DividerCore } from './DividerCore';\n\ntype VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';\n\ninterface DividerInternalProps extends DividerCoreProps {\n  // Add inherit option for configured component composition.\n  variant?: VariantWithInherit;\n}\n\nconst DividerInternal = forwardRef<HTMLDivElement, DividerInternalProps>(function Divider(\n  { variant = 'primary', layerClassNames, ...props }: DividerInternalProps,\n  ref,\n) {\n  const coreLayerClassNames = useMemo(\n    (): DividerInternalProps['layerClassNames'] => ({\n      root: cx(\n        variant !== 'inherit' &&\n          getStyles({\n            dividerVariantRoot: variant,\n          }),\n        layerClassNames?.root,\n      ),\n\n      text: cx(\n        variant !== 'inherit'\n          ? getStyles({\n              dividerVariantLabel: variant,\n            })\n          : undefined,\n        layerClassNames?.text,\n      ),\n\n      line: cx(\n        variant !== 'inherit' &&\n          getStyles({\n            dividerVariantLine: variant,\n          }),\n        layerClassNames?.line,\n      ),\n    }),\n\n    [layerClassNames?.line, layerClassNames?.root, layerClassNames?.text, variant],\n  );\n\n  return <DividerCore ref={ref} layerClassNames={coreLayerClassNames} {...props} />;\n});\n\n// Need to re-set this because of the forwardRef wrapper\nDividerInternal.displayName = 'DividerInternal';\n\nexport { DividerInternal, type DividerInternalProps };\n"],"mappings":";;;;;;;AAcA,MAAM,kBAAkB,WAAiD,SAAS,QAChF,EAAE,UAAU,WAAW,gBAAiB,GAAG,SAC3C,KACA;AAgCA,QAAO,oBAAC;EAAiB;EAAK,iBA/BF,eACsB;GAC9C,MAAM,GACJ,YAAY,aACV,UAAU,EACR,oBAAoB,SACrB,CAAC,EACJ,iBAAiB,KAClB;GAED,MAAM,GACJ,YAAY,YACR,UAAU,EACR,qBAAqB,SACtB,CAAC,GACF,QACJ,iBAAiB,KAClB;GAED,MAAM,GACJ,YAAY,aACV,UAAU,EACR,oBAAoB,SACrB,CAAC,EACJ,iBAAiB,KAClB;GACF,GAED;GAAC,iBAAiB;GAAM,iBAAiB;GAAM,iBAAiB;GAAM;GAAQ,CAC/E;EAEmE,GAAI;GAAS;EACjF;AAGF,gBAAgB,cAAc"}

package/dist/components/Divider/index.cjs

@@ -0,0 +1,4 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_components_Divider_Divider = require('./Divider.cjs');
+
+exports.Divider = require_components_Divider_Divider.Divider;

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

@@ -0,0 +1,2 @@
+import { Divider, DividerProps } from "./Divider.cjs";
+export { Divider, type DividerProps };

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

@@ -0,0 +1,2 @@
+import { Divider, DividerProps } from "./Divider.js";
+export { Divider, type DividerProps };

package/dist/components/Divider/index.js

@@ -0,0 +1,4 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { Divider } from "./Divider.js";
+
+export { Divider };

package/dist/components/FormLabel.cjs

@@ -0,0 +1,33 @@
+/*! © 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_components_Text = require('./Text.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_rolldown_runtime.__toESM(lodash_isFunction_js);
+
+//#region src/components/FormLabel.tsx
+const FormLabel = ({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className,...rest }) => {
+	const contents = label ? (0, lodash_isFunction_js.default)(label) ? label() : label : children;
+	if (!contents) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Text.Text, {
+		variant,
+		color,
+		as,
+		htmlFor,
+		className: require_styles_styler.cx("cursor-[inherit]", className),
+		...rest,
+		children: [contents, required && showRequiredAsterisk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			as: "sup",
+			color: hasError ? "alert" : "inherit",
+			variant: "inherit",
+			spacingStart: "0.5",
+			"aria-hidden": true,
+			children: "*"
+		})]
+	});
+};
+FormLabel.displayName = "FormLabel";
+
+//#endregion
+exports.FormLabel = FormLabel;

package/dist/components/FormLabel.d.cts

@@ -0,0 +1,27 @@
+import { UniversalFormLabelProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/FormLabel.d.ts
+type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
+interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
+declare const FormLabel: {
+  ({
+    htmlFor,
+    required,
+    label,
+    children,
+    color,
+    variant,
+    hasError,
+    showRequiredAsterisk,
+    as,
+    className,
+    ...rest
+  }: FormLabelProps): react_jsx_runtime0.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { FormLabel, type FormLabelProps };
+//# sourceMappingURL=FormLabel.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.d.cts","names":[],"sources":["../../src/components/FormLabel.tsx"],"sourcesContent":[],"mappings":";;;;;;KAQK,cAAA,CAAA,CAAA,CAAiB,KAAK,KAAA,CAAM,oBAAoB;UAE3C,cAAA,CAAA,OAAA,CAAuB,yBAAyB,mBAAmB;cAEvE;EAJD,CAAA;IAAA,OAAA;IAAA,QAAc;IAAA,KAAA;IAAA,QAAA;IAAA,KAAA;IAAA,OAAA;IAAA,QAAA;IAAA,oBAAA;IAAA,EAAA;IAAA,SAAA;IAAA,CAAA,CAAA,CAAA;EAAA,CAAA,CAAA,CAgBhB,cAhBgB,CAAA,CAAA,CAgBF,kBAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAhBE,IAAA;EAAkC,WAAA,CAAA,CAAA,MAAA;CAA1B"}

package/dist/components/FormLabel.d.ts

@@ -0,0 +1,27 @@
+import { UniversalFormLabelProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/components/FormLabel.d.ts
+type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
+interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
+declare const FormLabel: {
+  ({
+    htmlFor,
+    required,
+    label,
+    children,
+    color,
+    variant,
+    hasError,
+    showRequiredAsterisk,
+    as,
+    className,
+    ...rest
+  }: FormLabelProps): react_jsx_runtime2.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { FormLabel, type FormLabelProps };
+//# sourceMappingURL=FormLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.d.ts","names":[],"sources":["../../src/components/FormLabel.tsx"],"sourcesContent":[],"mappings":";;;;;;KAQK,cAAA,CAAA,CAAA,CAAiB,KAAK,KAAA,CAAM,oBAAoB;UAE3C,cAAA,CAAA,OAAA,CAAuB,yBAAyB,mBAAmB;cAEvE;EAJD,CAAA;IAAA,OAAA;IAAA,QAAc;IAAA,KAAA;IAAA,QAAA;IAAA,KAAA;IAAA,OAAA;IAAA,QAAA;IAAA,oBAAA;IAAA,EAAA;IAAA,SAAA;IAAA,CAAA,CAAA,CAAA;EAAA,CAAA,CAAA,CAgBhB,cAhBgB,CAAA,CAAA,CAgBF,kBAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAhBE,IAAA;EAAkC,WAAA,CAAA,CAAA,MAAA;CAA1B"}

package/dist/components/FormLabel.js

@@ -0,0 +1,32 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../styles/styler.js";
+import { Text } from "./Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+
+//#region src/components/FormLabel.tsx
+const FormLabel = ({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className,...rest }) => {
+	const contents = label ? isFunction(label) ? label() : label : children;
+	if (!contents) return null;
+	return /* @__PURE__ */ jsxs(Text, {
+		variant,
+		color,
+		as,
+		htmlFor,
+		className: cx("cursor-[inherit]", className),
+		...rest,
+		children: [contents, required && showRequiredAsterisk && /* @__PURE__ */ jsx(Text, {
+			as: "sup",
+			color: hasError ? "alert" : "inherit",
+			variant: "inherit",
+			spacingStart: "0.5",
+			"aria-hidden": true,
+			children: "*"
+		})]
+	});
+};
+FormLabel.displayName = "FormLabel";
+
+//#endregion
+export { FormLabel };
+//# sourceMappingURL=FormLabel.js.map

package/dist/components/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","names":[],"sources":["../../src/components/FormLabel.tsx"],"sourcesContent":["import type { UniversalFormLabelProps } from '@yahoo/uds/tokens';\nimport { isFunction } from 'lodash';\nimport type { PropsWithChildren } from 'react';\n\nimport { cx } from '../styles/styler';\nimport type { TextProps } from './Text';\nimport { Text } from './Text';\n\ntype HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;\n\ninterface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}\n\nconst FormLabel = ({\n  htmlFor,\n  required,\n  label,\n  children,\n  color = 'muted',\n  variant = 'label3',\n  hasError = false,\n  showRequiredAsterisk = false,\n  as = 'label',\n  className,\n  ...rest\n}: FormLabelProps) => {\n  const contents = label ? (isFunction(label) ? label() : label) : children;\n\n  if (!contents) {\n    return null;\n  }\n\n  return (\n    <Text\n      variant={variant}\n      color={color}\n      as={as as TextProps['as']}\n      htmlFor={htmlFor}\n      className={cx(\n        // Use the same cursor as the wrapping form component.\n        // The form component controls pointer vs disabled so\n        // this keeps Text from resetting it back to text cursor.\n        'cursor-[inherit]',\n        className,\n      )}\n      {...rest}\n    >\n      {contents}\n\n      {required && showRequiredAsterisk && (\n        <Text\n          as=\"sup\"\n          color={hasError ? 'alert' : 'inherit'}\n          variant=\"inherit\"\n          spacingStart=\"0.5\"\n          aria-hidden\n        >\n          *\n        </Text>\n      )}\n    </Text>\n  );\n};\n\nFormLabel.displayName = 'FormLabel';\n\nexport { FormLabel, type FormLabelProps };\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa,EACjB,SACA,UACA,OACA,UACA,QAAQ,SACR,UAAU,UACV,WAAW,OACX,uBAAuB,OACvB,KAAK,SACL,UACA,GAAG,WACiB;CACpB,MAAM,WAAW,QAAS,WAAW,MAAM,GAAG,OAAO,GAAG,QAAS;AAEjE,KAAI,CAAC,SACH,QAAO;AAGT,QACE,qBAAC;EACU;EACF;EACH;EACK;EACT,WAAW,GAIT,oBACA,UACD;EACD,GAAI;aAEH,UAEA,YAAY,wBACX,oBAAC;GACC,IAAG;GACH,OAAO,WAAW,UAAU;GAC5B,SAAQ;GACR,cAAa;GACb;aACF;IAEM;GAEJ;;AAIV,UAAU,cAAc"}

package/dist/components/HStack.cjs

@@ -0,0 +1,51 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_Box = require('./Box.cjs');
+const require_utils_intersperse = require('../utils/intersperse.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/HStack.tsx
+/**
+* **📏 A layout component that arranges its children in columns using flexbox** 
+* 
+* @description
+* HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+* and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to
+* add spacing between children.
+*
+* @example
+* ```tsx
+* import { HStack, Text } from '@yahoo/uds';
+
+* <HStack gap="6">
+*   <Text variant="body1" color="primary">First</Text>
+*   <Text variant="body1" color="primary">Second</Text>
+*   <Text variant="body1" color="primary">Third</Text>
+* </HStack>
+* ```
+* 
+* @usage
+* - Create a row of items, optionally with gaps between items.
+* - Create columns that are sized to their content.
+* - Create columns that fill the available space within the parent container.
+* - Create columns of proportionate size to each other (also known as a ratio-based layout).
+*
+* @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
+*
+* @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
+**/
+const HStack = (0, react.forwardRef)(function HStack$1({ gap, children, separator,...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		flexDirection: "row",
+		rowGap: gap,
+		columnGap: gap,
+		...props,
+		children: separator ? require_utils_intersperse.intersperseReactChildren(children, separator) : children
+	});
+});
+HStack.displayName = "HStack";
+
+//#endregion
+exports.HStack = HStack;

package/dist/components/HStack.d.cts

@@ -0,0 +1,40 @@
+import { UniversalStackProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import { DivProps } from "./Box.cjs";
+import * as react1 from "react";
+
+//#region src/components/HStack.d.ts
+interface HStackProps extends UniversalStackProps, DivProps {}
+/**
+ * **📏 A layout component that arranges its children in columns using flexbox**
+ *
+ * @description
+ * HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { HStack, Text } from '@yahoo/uds';
+
+ * <HStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </HStack>
+ * ```
+ *
+ * @usage
+ * - Create a row of items, optionally with gaps between items.
+ * - Create columns that are sized to their content.
+ * - Create columns that fill the available space within the parent container.
+ * - Create columns of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
+ **/
+declare const HStack: react1.ForwardRefExoticComponent<HStackProps & react1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { HStack, type HStackProps };
+//# sourceMappingURL=HStack.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.d.cts","names":[],"sources":["../../src/components/HStack.tsx"],"sourcesContent":[],"mappings":";;;;;;UAOU,WAAA,CAAA,OAAA,CAAoB,qBAAqB;;;AAHb,CAAA;AAGqB,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BrD,QAAM,MAAA,CAAA,0BAAA,cAAA,MAAA,CAAA,cAAA"}