@player-ui/reference-assets-plugin-react 0.8.0--canary.307.9621 → 0.8.0-next.0

package/dist/cjs/index.cjs

@@ -0,0 +1,581 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Action: () => Action,
+  Choice: () => Choice,
+  Collection: () => Collection,
+  Image: () => Image,
+  Info: () => Info,
+  Input: () => Input2,
+  ReferenceAssetsPlugin: () => ReferenceAssetsPlugin,
+  Text: () => Text,
+  TextModifierContext: () => TextModifierContext,
+  getConfig: () => getConfig,
+  getLinkModifier: () => getLinkModifier,
+  useAction: () => useAction,
+  useChoiceItems: () => useChoiceItems,
+  useInputAsset: () => useInputAsset,
+  useInputBeacon: () => useInputBeacon,
+  useText: () => useText
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/plugin.tsx
+var import_asset_provider_plugin_react = require("@player-ui/asset-provider-plugin-react");
+var import_reference_assets_plugin2 = require("@player-ui/reference-assets-plugin");
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/input/Input.tsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("@player-ui/react");
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Input.tsx
+var React = __toESM(require("react"));
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Input.tsx
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Label.tsx
+var React2 = __toESM(require("react"));
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var import_class_variance_authority = require("class-variance-authority");
+var labelVariants = (0, import_class_variance_authority.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/input/hooks.tsx
+var import_react = __toESM(require("react"));
+var import_beacon_plugin_react = require("@player-ui/beacon-plugin-react");
+var defaultKeyStrings = [
+  "Delete",
+  "Backspace",
+  "Tab",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Escape"
+];
+var getConfig = (userConfig = {}) => {
+  return {
+    liveFormat: true,
+    suppressBeacons: false,
+    quickFormatDelay: 200,
+    slowFormatDelay: 1e3,
+    slowFormatKeys: defaultKeyStrings,
+    decimalSymbol: ".",
+    prefix: "",
+    suffix: "",
+    ...userConfig
+  };
+};
+var useInputBeacon = (props) => {
+  const beaconHandler = (0, import_beacon_plugin_react.useBeacon)({ element: "text_input", asset: props });
+  return (newValue) => {
+    let action = "modified";
+    if (newValue === props.value) {
+      return;
+    }
+    if (newValue && !props.value) {
+      action = "added";
+    } else if (!newValue && props.value) {
+      action = "deleted";
+    }
+    beaconHandler({ action });
+  };
+};
+var useInputAsset = (props, config) => {
+  const [localValue, setLocalValue] = import_react.default.useState(props.value ?? "");
+  const formatTimerRef = import_react.default.useRef(void 0);
+  const inputBeacon = useInputBeacon(props);
+  const {
+    liveFormat,
+    suppressBeacons,
+    quickFormatDelay,
+    slowFormatDelay,
+    slowFormatKeys,
+    decimalSymbol,
+    prefix,
+    suffix
+  } = getConfig(config);
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = void 0;
+    }
+  }
+  function getFormatDelaySpeed(e) {
+    const key = slowFormatKeys.every((k) => typeof k === "number") ? e.which : e.key;
+    return slowFormatKeys.includes(key) ? slowFormatDelay : quickFormatDelay;
+  }
+  function handleAffixOnFocus(target) {
+    let val = target.value;
+    if (suffix)
+      val = val.substring(0, val.indexOf(suffix));
+    if (prefix && !val.includes(prefix)) {
+      val = `${prefix}${val}`;
+    }
+    return val;
+  }
+  function handlePrefixEdgeCases(e) {
+    const target = e.target;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const pl = prefix.length;
+    const atStart = start === pl;
+    const atEnd = end === pl;
+    if (start && end && start < pl) {
+      e.preventDefault();
+      target.setSelectionRange(pl, end - start + pl);
+    } else if (e.key === "ArrowLeft" && atStart || e.key === "Backspace" && atStart && atEnd || e.key === "Home") {
+      e.preventDefault();
+      target.setSelectionRange(prefix.length, prefix.length);
+    }
+  }
+  function formatValueWithAffix(value) {
+    if (!value)
+      return "";
+    return `${prefix}${value}${suffix}`;
+  }
+  const onKeyDownHandler = (currentValue) => {
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = props.format(currentValue) ?? "";
+    const newSymbolPosition = newValue.indexOf(decimalSymbol);
+    if ((symbolPosition === -1 || symbolPosition === 0) && newSymbolPosition > 0) {
+      return {
+        newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`,
+        newCursorPosition: newValue.includes(prefix) ? newSymbolPosition : newSymbolPosition + prefix.length
+      };
+    }
+    return {
+      newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`
+    };
+  };
+  const onBlur = (e) => {
+    clearPending();
+    const formatted = (prefix ? e.target.value.replace(prefix, "") : props.format(e.target.value)) ?? "";
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+    if (!suppressBeacons) {
+      inputBeacon(formatted);
+    }
+  };
+  const onChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const onKeyDown = (e) => {
+    clearPending();
+    if (prefix)
+      handlePrefixEdgeCases(e);
+    const target = e.target;
+    if (liveFormat) {
+      formatTimerRef.current = setTimeout(() => {
+        const cursorPosition = target.selectionStart;
+        const currentValue = target.value;
+        if (cursorPosition !== currentValue.length) {
+          return;
+        }
+        const obj = onKeyDownHandler(currentValue);
+        setLocalValue(obj.newValue);
+        target.selectionStart = obj.newCursorPosition ?? target.selectionStart;
+        target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;
+      }, getFormatDelaySpeed(e));
+    }
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    const inputEmpty = target.value === "";
+    if (!inputEmpty && suffix || inputEmpty && prefix) {
+      setLocalValue(handleAffixOnFocus(target));
+    }
+  };
+  const propsValue = props.value;
+  import_react.default.useEffect(() => {
+    setLocalValue(formatValueWithAffix(propsValue));
+  }, [propsValue]);
+  import_react.default.useEffect(() => clearPending, []);
+  return {
+    onBlur,
+    onChange,
+    onKeyDown,
+    onFocus,
+    value: localValue
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/input/Input.tsx
+var Input2 = (props) => {
+  const { validation, label, id, note } = props;
+  const inputProps = useInputAsset(props);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "grid w-full max-w-sm items-center gap-1.5" }, label && /* @__PURE__ */ import_react2.default.createElement(Label, { htmlFor: id }, /* @__PURE__ */ import_react2.default.createElement(import_react3.ReactAsset, { ...label })), /* @__PURE__ */ import_react2.default.createElement(
+    Input,
+    {
+      id,
+      "aria-invalid": Boolean(validation),
+      "aria-describedby": validation ? `${id}-validation` : void 0,
+      ...inputProps
+    }
+  ), validation && /* @__PURE__ */ import_react2.default.createElement(
+    Label,
+    {
+      id: `${id}-validation`,
+      className: "text-[0.8rem] font-medium text-destructive"
+    },
+    validation.message
+  ), note && /* @__PURE__ */ import_react2.default.createElement(Label, { className: "text-[0.8rem] text-muted-foreground" }, /* @__PURE__ */ import_react2.default.createElement(import_react3.ReactAsset, { ...note })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/text/Text.tsx
+var import_react6 = __toESM(require("react"));
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/text/hooks.tsx
+var import_react4 = __toESM(require("react"));
+var import_clsx2 = __toESM(require("clsx"));
+var import_react5 = require("@player-ui/react");
+var TextModifierContext = import_react4.default.createContext(void 0);
+var useText = (props) => {
+  let className;
+  const modifierContext = (0, import_react4.useContext)(TextModifierContext);
+  if (props.modifiers && modifierContext?.getClassForModifier) {
+    className = (0, import_clsx2.default)(
+      ...props.modifiers.map(modifierContext.getClassForModifier)
+    );
+  }
+  return {
+    ...(0, import_react5.useAssetProps)(props),
+    className,
+    children: props.value
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/text/Text.tsx
+var getLinkModifier = (asset) => {
+  return asset.modifiers?.find(
+    (mod) => mod.type === "link" && mod.metaData?.ref !== void 0
+  );
+};
+var Text = (props) => {
+  const spanProps = useText(props);
+  const linkModifier = getLinkModifier(props);
+  const { value } = props;
+  if (linkModifier) {
+    return /* @__PURE__ */ import_react6.default.createElement(
+      "a",
+      {
+        className: "underline text-blue-600 hover:text-blue-800 visited:text-purple-600",
+        href: linkModifier.metaData.ref
+      },
+      value
+    );
+  }
+  return /* @__PURE__ */ import_react6.default.createElement("span", { ...spanProps }, value);
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/collection/Collection.tsx
+var import_react7 = __toESM(require("react"));
+var import_react8 = require("@player-ui/react");
+var Collection = (props) => {
+  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-4" }, props.label && /* @__PURE__ */ import_react7.default.createElement("h3", null, /* @__PURE__ */ import_react7.default.createElement(import_react8.ReactAsset, { ...props.label })), props.values?.map((a) => /* @__PURE__ */ import_react7.default.createElement(import_react8.ReactAsset, { key: a.asset.id, ...a })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/action/Action.tsx
+var import_react11 = __toESM(require("react"));
+var import_react12 = require("@player-ui/react");
+var import_lucide_react = require("lucide-react");
+var import_reference_assets_plugin = require("@player-ui/reference-assets-plugin");
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/action/hooks.tsx
+var import_react9 = __toESM(require("react"));
+var import_react10 = require("@player-ui/react");
+var import_beacon_plugin_react2 = require("@player-ui/beacon-plugin-react");
+var useAction = (props) => {
+  const { label } = props;
+  const beacon = (0, import_beacon_plugin_react2.useBeacon)({
+    asset: props,
+    action: "clicked",
+    element: "button"
+  });
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: label?.asset ? /* @__PURE__ */ import_react9.default.createElement(import_react10.ReactAsset, { ...label?.asset }) : null
+  };
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Button.tsx
+var React9 = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React9.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ React9.createElement(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/action/Action.tsx
+var Action = (props) => {
+  const { label } = props;
+  const buttonProps = useAction(props);
+  return /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(
+    Button,
+    {
+      variant: (0, import_reference_assets_plugin.isBackAction)(props) ? "outline" : void 0,
+      ...buttonProps
+    },
+    props?.metaData?.role === "back" && /* @__PURE__ */ import_react11.default.createElement(import_lucide_react.ChevronLeftIcon, null),
+    label && /* @__PURE__ */ import_react11.default.createElement(import_react12.ReactAsset, { ...label })
+  ));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/info/Info.tsx
+var import_react13 = __toESM(require("react"));
+var import_react14 = require("@player-ui/react");
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/Separator.tsx
+var React11 = __toESM(require("react"));
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
+var Separator = React11.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/info/Info.tsx
+var Info = (props) => {
+  return /* @__PURE__ */ import_react13.default.createElement("div", { className: "max-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex flex-col gap-4" }, props.title && /* @__PURE__ */ import_react13.default.createElement("h1", { className: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl" }, /* @__PURE__ */ import_react13.default.createElement(import_react14.ReactAsset, { ...props.title })), props.subTitle && /* @__PURE__ */ import_react13.default.createElement("h3", { className: "scroll-m-20 text-2xl font-semibold tracking-tight" }, /* @__PURE__ */ import_react13.default.createElement(import_react14.ReactAsset, { ...props.subTitle })), props.primaryInfo && /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_react14.ReactAsset, { ...props.primaryInfo })), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex flex-col gap-4" }, props?.segmentedActions && /* @__PURE__ */ import_react13.default.createElement(Separator, null), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex justify-between sm:flex-row flex-col-reverse gap-4" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex gap-4" }, props?.segmentedActions?.prev?.map((a) => /* @__PURE__ */ import_react13.default.createElement(import_react14.ReactAsset, { key: a.asset.id, ...a }))), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex gap-4" }, props?.segmentedActions?.next?.map((a) => /* @__PURE__ */ import_react13.default.createElement(import_react14.ReactAsset, { key: a.asset.id, ...a })))))));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/image/Image.tsx
+var import_react15 = __toESM(require("react"));
+var import_react16 = require("@player-ui/react");
+var Image = (props) => {
+  const { metaData, caption, altText } = props;
+  return /* @__PURE__ */ import_react15.default.createElement("figure", { className: "figure" }, /* @__PURE__ */ import_react15.default.createElement("img", { className: "figure-img img-fluid", src: metaData.ref, alt: altText }), caption && /* @__PURE__ */ import_react15.default.createElement("figcaption", { className: "figure-caption", style: { marginTop: 15 } }, /* @__PURE__ */ import_react15.default.createElement(import_react16.ReactAsset, { ...caption })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/choice/Choice.tsx
+var import_react19 = __toESM(require("react"));
+var import_react20 = require("@player-ui/react");
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/components/ChoiceItem.tsx
+var import_react17 = __toESM(require("react"));
+var import_react18 = require("@player-ui/react");
+var ChoiceItem = (props) => {
+  const { label, id, ...rest } = props;
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react17.default.createElement(
+    Input,
+    {
+      type: "radio",
+      className: "h-fit w-fit shadow-none",
+      id,
+      ...rest
+    }
+  ), label && /* @__PURE__ */ import_react17.default.createElement(Label, { htmlFor: id }, /* @__PURE__ */ import_react17.default.createElement(import_react18.ReactAsset, { ...label })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/choice/hooks.tsx
+var import_beacon_plugin_react3 = require("@player-ui/beacon-plugin-react");
+var useChoiceItems = (props) => {
+  const beacon = (0, import_beacon_plugin_react3.useBeacon)({
+    asset: props,
+    action: "clicked",
+    element: "choice"
+  });
+  return props.items?.map((item) => {
+    const { id, value, label } = item;
+    return {
+      id,
+      label,
+      name: props.id,
+      value: (value ?? "").toString(),
+      checked: value === props.value,
+      onChange: () => {
+        beacon();
+        item.select();
+      }
+    };
+  }) ?? [];
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/assets/choice/Choice.tsx
+var Choice = (props) => {
+  const { validation, title, id, note } = props;
+  const choiceItemProps = useChoiceItems(props);
+  const renderChoices = () => choiceItemProps.map((choiceItemProp) => /* @__PURE__ */ import_react19.default.createElement(ChoiceItem, { key: choiceItemProp.id, ...choiceItemProp }));
+  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "grid w-full max-w-sm items-center gap-3" }, title && /* @__PURE__ */ import_react19.default.createElement(Label, { htmlFor: id }, /* @__PURE__ */ import_react19.default.createElement(import_react20.ReactAsset, { ...title })), /* @__PURE__ */ import_react19.default.createElement(
+    "div",
+    {
+      id: props.id,
+      className: "grid gap-2",
+      "aria-invalid": Boolean(validation),
+      "aria-describedby": validation ? `${id}-validation` : void 0
+    },
+    renderChoices()
+  ), validation && /* @__PURE__ */ import_react19.default.createElement(
+    Label,
+    {
+      id: `${id}-validation`,
+      className: "text-[0.8rem] font-medium text-destructive"
+    },
+    validation.message
+  ), note && /* @__PURE__ */ import_react19.default.createElement(Label, { className: "text-[0.8rem] text-muted-foreground" }, /* @__PURE__ */ import_react19.default.createElement(import_react20.ReactAsset, { ...note })));
+};
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/react/src/plugin.tsx
+var ReferenceAssetsPlugin = class {
+  constructor() {
+    this.name = "reference-assets-web-plugin";
+  }
+  applyReact(reactPlayer) {
+    reactPlayer.registerPlugin(
+      new import_asset_provider_plugin_react.AssetProviderPlugin([
+        ["input", Input2],
+        ["text", Text],
+        ["action", Action],
+        ["info", Info],
+        ["collection", Collection],
+        ["image", Image],
+        ["choice", Choice]
+      ])
+    );
+  }
+  apply(player) {
+    player.registerPlugin(new import_reference_assets_plugin2.ReferenceAssetsPlugin());
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action,
+  Choice,
+  Collection,
+  Image,
+  Info,
+  Input,
+  ReferenceAssetsPlugin,
+  Text,
+  TextModifierContext,
+  getConfig,
+  getLinkModifier,
+  useAction,
+  useChoiceItems,
+  useInputAsset,
+  useInputBeacon,
+  useText
+});
+//# sourceMappingURL=index.cjs.map