@yahoo/uds-v5-wip 1.51.0 → 1.52.0

package/dist/config/dist/refs.js

@@ -58,8 +58,11 @@ function parseTokenRef(value) {
 function resolveTokenRef(value, configPrefix) {
 	const ref = parseTokenRef(value);
 	if (!ref) return value;
-	const cssPrefix = kebabCase(ref.namespace);
-	const cssName = safeTokenName(ref.name);
+	return refToVar(ref.namespace, ref.name, configPrefix);
+}
+function refToVar(namespace, name, configPrefix) {
+	const cssPrefix = kebabCase(namespace);
+	const cssName = safeTokenName(name);
 	return `var(${configPrefix ? `--${configPrefix}-${cssPrefix}-${cssName}` : `--${cssPrefix}-${cssName}`})`;
 }
 //#endregion

package/dist/core/dist/createComponent.js

@@ -1,6 +1,6 @@
-import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
 import { processStyleProps } from "./getStyles.js";
 import { createComponentStyler } from "./getComponentStyles.js";
+import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
 import { createElement } from "react";
 //#region ../core/dist/createComponent.js
 function createPrimitiveRenderFn(tag) {

package/dist/core/dist/getStyles.js

@@ -3,8 +3,8 @@ import "../../utils/dist/index.js";
 import { expandCompositeStyles, getCompositeStylesConfig } from "./compositeStyles.js";
 import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { modifierMappings } from "./modifier-mappings.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.

package/dist/loader/dist/packages/core/dist/getStyles.js

@@ -2,8 +2,8 @@ import "../../../../../utils/dist/index.js";
 import "./compositeStyles.js";
 import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { modifierMappings } from "./modifier-mappings.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 //#region ../loader/dist/packages/core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.
 *  CSS custom properties (--*) are kept as-is since React supports them verbatim. */

package/dist/remotion/dist/components/image-slide.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/image-slide.d.ts
-//#region src/components/image-slide.d.ts
 /**
  * @description Full-screen image slide with optional caption overlay
  */
@@ -15,6 +14,6 @@ declare const ImageSlide: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   root: "div";
   image: "img";
   caption: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { ImageSlide };

package/dist/remotion/dist/components/image-slide.js

@@ -5,15 +5,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen image slide with optional caption overlay
 */
-const ImageSlide = createComponent(({ props, src, alt, caption, children }) => /* @__PURE__ */ jsxs("div", {
+const ImageSlide = createComponent(({ props, src, alt, caption, children }) => jsxs("div", {
 	...props.root,
 	children: [
-		/* @__PURE__ */ jsx("img", {
+		jsx("img", {
 			...props.image,
 			src,
 			alt: alt ?? ""
 		}),
-		caption && /* @__PURE__ */ jsx("div", {
+		caption && jsx("div", {
 			...props.caption,
 			children: caption
 		}),

package/dist/remotion/dist/components/index.js

@@ -1,16 +1,16 @@
 import "./image-slide.js";
-import "./lower-third.js";
-import "./quote-card.js";
-import "./split-screen.js";
-import "./stat-card.js";
-import "./text-overlay.js";
-import "./title-card.js";
-import "./typing-text.js";
 import "./image-slide.config.js";
+import "./lower-third.js";
 import "./lower-third.config.js";
+import "./quote-card.js";
 import "./quote-card.config.js";
+import "./split-screen.js";
 import "./split-screen.config.js";
+import "./stat-card.js";
 import "./stat-card.config.js";
+import "./text-overlay.js";
 import "./text-overlay.config.js";
+import "./title-card.js";
 import "./title-card.config.js";
+import "./typing-text.js";
 import "./typing-text.config.js";

package/dist/remotion/dist/components/lower-third.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/lower-third.d.ts
-//#region src/components/lower-third.d.ts
 /**
  * @description Lower-third overlay with title and optional subtitle
  */
@@ -16,6 +15,6 @@ declare const LowerThird: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   content: "div";
   title: "div";
   subtitle: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { LowerThird };

package/dist/remotion/dist/components/lower-third.js

@@ -5,16 +5,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Lower-third overlay with title and optional subtitle
 */
-const LowerThird = createComponent(({ props, title, subtitle, children }) => /* @__PURE__ */ jsxs("div", {
+const LowerThird = createComponent(({ props, title, subtitle, children }) => jsxs("div", {
 	...props.root,
 	children: [
-		/* @__PURE__ */ jsx("div", { ...props.bar }),
-		/* @__PURE__ */ jsxs("div", {
+		jsx("div", { ...props.bar }),
+		jsxs("div", {
 			...props.content,
-			children: [/* @__PURE__ */ jsx("div", {
+			children: [jsx("div", {
 				...props.title,
 				children: title
-			}), subtitle && /* @__PURE__ */ jsx("div", {
+			}), subtitle && jsx("div", {
 				...props.subtitle,
 				children: subtitle
 			})]

package/dist/remotion/dist/components/quote-card.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/quote-card.d.ts
-//#region src/components/quote-card.d.ts
 /**
  * @description Full-screen quote display with optional attribution
  */
@@ -16,6 +15,6 @@ declare const QuoteCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
   quote: "div";
   divider: "div";
   attribution: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { QuoteCard };

package/dist/remotion/dist/components/quote-card.js

@@ -5,18 +5,18 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen quote display with optional attribution
 */
-const QuoteCard = createComponent(({ props, quote, attribution, children }) => /* @__PURE__ */ jsxs("div", {
+const QuoteCard = createComponent(({ props, quote, attribution, children }) => jsxs("div", {
 	...props.root,
 	children: [
-		/* @__PURE__ */ jsx("div", {
+		jsx("div", {
 			...props.mark,
 			children: "“"
 		}),
-		/* @__PURE__ */ jsx("div", {
+		jsx("div", {
 			...props.quote,
 			children: quote
 		}),
-		attribution && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { ...props.divider }), /* @__PURE__ */ jsx("div", {
+		attribution && jsxs(Fragment, { children: [jsx("div", { ...props.divider }), jsx("div", {
 			...props.attribution,
 			children: attribution
 		})] }),

package/dist/remotion/dist/components/split-screen.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/split-screen.d.ts
-//#region src/components/split-screen.d.ts
 /**
  * @description Side-by-side split screen layout for comparing content
  */
@@ -20,6 +19,6 @@ declare const SplitScreen: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   leftBody: "div";
   rightTitle: "div";
   rightBody: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { SplitScreen };

package/dist/remotion/dist/components/split-screen.js

@@ -5,25 +5,25 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Side-by-side split screen layout for comparing content
 */
-const SplitScreen = createComponent(({ props, leftTitle, leftBody, rightTitle, rightBody, children }) => /* @__PURE__ */ jsxs("div", {
+const SplitScreen = createComponent(({ props, leftTitle, leftBody, rightTitle, rightBody, children }) => jsxs("div", {
 	...props.root,
 	children: [
-		/* @__PURE__ */ jsxs("div", {
+		jsxs("div", {
 			...props.left,
-			children: [leftTitle && /* @__PURE__ */ jsx("div", {
+			children: [leftTitle && jsx("div", {
 				...props.leftTitle,
 				children: leftTitle
-			}), leftBody && /* @__PURE__ */ jsx("div", {
+			}), leftBody && jsx("div", {
 				...props.leftBody,
 				children: leftBody
 			})]
 		}),
-		/* @__PURE__ */ jsxs("div", {
+		jsxs("div", {
 			...props.right,
-			children: [rightTitle && /* @__PURE__ */ jsx("div", {
+			children: [rightTitle && jsx("div", {
 				...props.rightTitle,
 				children: rightTitle
-			}), rightBody && /* @__PURE__ */ jsx("div", {
+			}), rightBody && jsx("div", {
 				...props.rightBody,
 				children: rightBody
 			})]

package/dist/remotion/dist/components/stat-card.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/stat-card.d.ts
-//#region src/components/stat-card.d.ts
 /**
  * @description Full-screen statistic display with large value and label
  */
@@ -14,6 +13,6 @@ declare const StatCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
   root: "div";
   value: "div";
   label: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { StatCard };

package/dist/remotion/dist/components/stat-card.js

@@ -5,14 +5,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen statistic display with large value and label
 */
-const StatCard = createComponent(({ props, value, label, children }) => /* @__PURE__ */ jsxs("div", {
+const StatCard = createComponent(({ props, value, label, children }) => jsxs("div", {
 	...props.root,
 	children: [
-		/* @__PURE__ */ jsx("div", {
+		jsx("div", {
 			...props.value,
 			children: value
 		}),
-		label && /* @__PURE__ */ jsx("div", {
+		label && jsx("div", {
 			...props.label,
 			children: label
 		}),

package/dist/remotion/dist/components/text-overlay.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/text-overlay.d.ts
-//#region src/components/text-overlay.d.ts
 /**
  * @description Full-screen text overlay for displaying text over video or images
  */
@@ -12,6 +11,6 @@ declare const TextOverlay: _$react.FC<_$_uds_types0.CreateComponentProps<string,
 }, {
   root: "div";
   text: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { TextOverlay };

package/dist/remotion/dist/components/text-overlay.js

@@ -5,9 +5,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen text overlay for displaying text over video or images
 */
-const TextOverlay = createComponent(({ props, text, children }) => /* @__PURE__ */ jsxs("div", {
+const TextOverlay = createComponent(({ props, text, children }) => jsxs("div", {
 	...props.root,
-	children: [/* @__PURE__ */ jsx("div", {
+	children: [jsx("div", {
 		...props.text,
 		children: text
 	}), children]

package/dist/remotion/dist/components/title-card.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/title-card.d.ts
-//#region src/components/title-card.d.ts
 /**
  * @description Full-screen title card with optional subtitle for video scenes
  */
@@ -14,6 +13,6 @@ declare const TitleCard: _$react.FC<_$_uds_types0.CreateComponentProps<string, {
   root: "div";
   title: "div";
   subtitle: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { TitleCard };

package/dist/remotion/dist/components/title-card.js

@@ -5,14 +5,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * @description Full-screen title card with optional subtitle for video scenes
 */
-const TitleCard = createComponent(({ props, title, subtitle, children }) => /* @__PURE__ */ jsxs("div", {
+const TitleCard = createComponent(({ props, title, subtitle, children }) => jsxs("div", {
 	...props.root,
 	children: [
-		/* @__PURE__ */ jsx("div", {
+		jsx("div", {
 			...props.title,
 			children: title
 		}),
-		subtitle && /* @__PURE__ */ jsx("div", {
+		subtitle && jsx("div", {
 			...props.subtitle,
 			children: subtitle
 		}),

package/dist/remotion/dist/components/typing-text.d.ts

@@ -2,7 +2,6 @@ import * as _$react from "react";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../remotion/dist/components/typing-text.d.ts
-//#region src/components/typing-text.d.ts
 /**
  * @description Typing text animation that reveals characters frame by frame
  */
@@ -16,6 +15,6 @@ declare const TypingText: _$react.FC<_$_uds_types0.CreateComponentProps<string,
   root: "div";
   text: "div";
   cursor: "div";
-}>>; //#endregion
+}>>;
 //#endregion
 export { TypingText };

package/dist/remotion/dist/components/typing-text.js

@@ -11,11 +11,11 @@ const TypingText = createComponent(({ props, text, speed = 1, delay = 0, frame,
 	const charsToShow = isAnimating ? Math.min(Math.floor(effectiveFrame * speed), text.length) : text.length;
 	const visibleText = text.slice(0, charsToShow);
 	const showCursor = isAnimating && charsToShow < text.length;
-	return /* @__PURE__ */ jsxs("div", {
+	return jsxs("div", {
 		...props.root,
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [jsxs("div", {
 			...props.text,
-			children: [visibleText, showCursor && /* @__PURE__ */ jsx("span", { ...props.cursor })]
+			children: [visibleText, showCursor && jsx("span", { ...props.cursor })]
 		}), children]
 	});
 });