@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/primitives/ButtonPicker.js

@@ -0,0 +1,121 @@
+"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);
+var ButtonPicker_exports = {};
+__export(ButtonPicker_exports, {
+  ButtonPicker: () => ButtonPicker
+});
+module.exports = __toCommonJS(ButtonPicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_classnames = __toESM(require("classnames"));
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Button = require("./Button");
+function _ButtonPicker(props) {
+  const {
+    uiType,
+    items,
+    title,
+    style,
+    value,
+    // columns = clamp(items.length, 2, 4),
+    onValueChange
+  } = props;
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const rPointing = (0, import_react.useRef)(false);
+  const {
+    handleButtonClick,
+    handleButtonPointerDown,
+    handleButtonPointerEnter,
+    handleButtonPointerUp
+  } = React.useMemo(() => {
+    const handlePointerUp = () => {
+      rPointing.current = false;
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+    const handleButtonClick2 = (e) => {
+      const { id } = e.currentTarget.dataset;
+      if (value.type === "shared" && value.value === id)
+        return;
+      editor.mark("point picker item");
+      onValueChange(style, id, false);
+    };
+    const handleButtonPointerDown2 = (e) => {
+      const { id } = e.currentTarget.dataset;
+      editor.mark("point picker item");
+      onValueChange(style, id, true);
+      rPointing.current = true;
+      window.addEventListener("pointerup", handlePointerUp);
+    };
+    const handleButtonPointerEnter2 = (e) => {
+      if (!rPointing.current)
+        return;
+      const { id } = e.currentTarget.dataset;
+      onValueChange(style, id, true);
+    };
+    const handleButtonPointerUp2 = (e) => {
+      const { id } = e.currentTarget.dataset;
+      onValueChange(style, id, false);
+    };
+    return {
+      handleButtonClick: handleButtonClick2,
+      handleButtonPointerDown: handleButtonPointerDown2,
+      handleButtonPointerEnter: handleButtonPointerEnter2,
+      handleButtonPointerUp: handleButtonPointerUp2
+    };
+  }, [value, editor, onValueChange, style]);
+  const theme = (0, import_editor.useValue)(
+    "theme",
+    () => (0, import_editor.getDefaultColorTheme)({ isDarkMode: editor.user.getIsDarkMode() }),
+    [editor]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("tlui-buttons__grid"), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      type: "icon",
+      "data-id": item.value,
+      "data-testid": `style.${uiType}.${item.value}`,
+      "aria-label": item.value,
+      "data-state": value.type === "shared" && value.value === item.value ? "hinted" : void 0,
+      title: title + " \u2014 " + msg(`${uiType}-style.${item.value}`),
+      className: (0, import_classnames.default)("tlui-button-grid__button"),
+      style: style === import_editor.DefaultColorStyle ? { color: theme[item.value].solid } : void 0,
+      onPointerEnter: handleButtonPointerEnter,
+      onPointerDown: handleButtonPointerDown,
+      onPointerUp: handleButtonPointerUp,
+      onClick: handleButtonClick,
+      icon: item.icon
+    },
+    item.value
+  )) });
+}
+const ButtonPicker = React.memo(_ButtonPicker);
+//# sourceMappingURL=ButtonPicker.js.map

package/dist-cjs/lib/ui/components/primitives/ButtonPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/ButtonPicker.tsx"],
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { StyleValuesForUi } from '../StylePanel/styles'\nimport { Button } from './Button'\n\n/** @internal */\nexport interface ButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nfunction _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\t// columns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rPointing = useRef(false)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\teditor.mark('point picker item')\n\t\t\tonValueChange(style, id as T, false)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\teditor.mark('point picker item')\n\t\t\tonValueChange(style, id as T, true)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T, true)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T, false)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, editor, onValueChange, style])\n\n\tconst theme = useValue(\n\t\t'theme',\n\t\t() => getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() }),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<div className={classNames('tlui-buttons__grid')}>\n\t\t\t{items.map((item) => (\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\taria-label={item.value}\n\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'hinted' : undefined}\n\t\t\t\t\ttitle={title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}\n\t\t\t\t\tclassName={classNames('tlui-button-grid__button')}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t? { color: theme[item.value as TLDefaultColorStyle].solid }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\n/** @internal */\nexport const ButtonPicker = React.memo(_ButtonPicker) as typeof _ButtonPicker\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGI;AArGJ,oBAQO;AACP,wBAAuB;AACvB,YAAuB;AACvB,mBAAuB;AAEvB,4BAA+B;AAG/B,oBAAuB;AAYvB,SAAS,cAAgC,OAA6B;AACrE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACD,IAAI;AACJ,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,gBAAY,qBAAO,KAAK;AAE9B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,MAAM,QAAQ,MAAM;AACvB,UAAM,kBAAkB,MAAM;AAC7B,gBAAU,UAAU;AACpB,aAAO,oBAAoB,aAAa,eAAe;AAAA,IACxD;AAEA,UAAMA,qBAAoB,CAAC,MAA6C;AACvE,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,MAAM,SAAS,YAAY,MAAM,UAAU;AAAI;AAEnD,aAAO,KAAK,mBAAmB;AAC/B,oBAAc,OAAO,IAAS,KAAK;AAAA,IACpC;AAEA,UAAMC,2BAA0B,CAAC,MAA6C;AAC7E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAE/B,aAAO,KAAK,mBAAmB;AAC/B,oBAAc,OAAO,IAAS,IAAI;AAElC,gBAAU,UAAU;AACpB,aAAO,iBAAiB,aAAa,eAAe;AAAA,IACrD;AAEA,UAAMC,4BAA2B,CAAC,MAA6C;AAC9E,UAAI,CAAC,UAAU;AAAS;AAExB,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,IAAS,IAAI;AAAA,IACnC;AAEA,UAAMC,yBAAwB,CAAC,MAA6C;AAC3E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,IAAS,KAAK;AAAA,IACpC;AAEA,WAAO;AAAA,MACN,mBAAAH;AAAA,MACA,yBAAAC;AAAA,MACA,0BAAAC;AAAA,MACA,uBAAAC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,OAAO,QAAQ,eAAe,KAAK,CAAC;AAExC,QAAM,YAAQ;AAAA,IACb;AAAA,IACA,UAAM,oCAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAAA,IACtE,CAAC,MAAM;AAAA,EACR;AAEA,SACC,4CAAC,SAAI,eAAW,kBAAAC,SAAW,oBAAoB,GAC7C,gBAAM,IAAI,CAAC,SACX;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MAEL,WAAS,KAAK;AAAA,MACd,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,MAC1C,cAAY,KAAK;AAAA,MACjB,cAAY,MAAM,SAAS,YAAY,MAAM,UAAU,KAAK,QAAQ,WAAW;AAAA,MAC/E,OAAO,QAAQ,aAAQ,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,MAChF,eAAW,kBAAAA,SAAW,0BAA0B;AAAA,MAChD,OACC,UAAW,kCACR,EAAE,OAAO,MAAM,KAAK,KAA4B,EAAE,MAAM,IACxD;AAAA,MAEJ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAM,KAAK;AAAA;AAAA,IAhBN,KAAK;AAAA,EAiBX,CACA,GACF;AAEF;AAGO,MAAM,eAAe,MAAM,KAAK,aAAa;",
+  "names": ["handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp", "classNames"]
+}

package/dist-cjs/lib/ui/components/primitives/Dialog.js

@@ -0,0 +1,70 @@
+"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);
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  Body: () => Body,
+  CloseButton: () => CloseButton,
+  Footer: () => Footer,
+  Header: () => Header,
+  Title: () => Title
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var _Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_classnames = __toESM(require("classnames"));
+var import_Button = require("./Button");
+var import_Icon = require("./Icon");
+function Header({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("tlui-dialog__header", className), children });
+}
+function Title({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_Dialog.DialogTitle, { dir: "ltr", className: (0, import_classnames.default)("tlui-dialog__header__title", className), children });
+}
+function CloseButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-dialog__header__close", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_Dialog.DialogClose, { "data-testid": "dialog.close", dir: "ltr", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      type: "icon",
+      "aria-label": "Close",
+      onTouchEnd: (e) => e.target.click(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { small: true, icon: "cross-2" })
+    }
+  ) }) });
+}
+function Body({
+  className,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("tlui-dialog__body", className), style, children });
+}
+function Footer({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("tlui-dialog__footer", className), children });
+}
+//# sourceMappingURL=Dialog.js.map

package/dist-cjs/lib/ui/components/primitives/Dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Dialog.tsx"],
+  "sourcesContent": ["import * as _Dialog from '@radix-ui/react-dialog'\nimport classNames from 'classnames'\nimport { Button } from './Button'\nimport { Icon } from './Icon'\n\n/** @public */\nexport function Header({ className, children }: { className?: string; children: any }) {\n\treturn <div className={classNames('tlui-dialog__header', className)}>{children}</div>\n}\n\n/** @public */\nexport function Title({ className, children }: { className?: string; children: any }) {\n\treturn (\n\t\t<_Dialog.DialogTitle dir=\"ltr\" className={classNames('tlui-dialog__header__title', className)}>\n\t\t\t{children}\n\t\t</_Dialog.DialogTitle>\n\t)\n}\n\n/** @public */\nexport function CloseButton() {\n\treturn (\n\t\t<div className=\"tlui-dialog__header__close\">\n\t\t\t<_Dialog.DialogClose data-testid=\"dialog.close\" dir=\"ltr\" asChild>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\tonTouchEnd={(e) => (e.target as HTMLButtonElement).click()}\n\t\t\t\t>\n\t\t\t\t\t<Icon small icon=\"cross-2\" />\n\t\t\t\t</Button>\n\t\t\t</_Dialog.DialogClose>\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport function Body({\n\tclassName,\n\tchildren,\n\tstyle,\n}: {\n\tclassName?: string\n\tchildren: any\n\tstyle?: React.CSSProperties\n}) {\n\treturn (\n\t\t<div className={classNames('tlui-dialog__body', className)} style={style}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport function Footer({ className, children }: { className?: string; children: any }) {\n\treturn <div className={classNames('tlui-dialog__footer', className)}>{children}</div>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AAPR,cAAyB;AACzB,wBAAuB;AACvB,oBAAuB;AACvB,kBAAqB;AAGd,SAAS,OAAO,EAAE,WAAW,SAAS,GAA0C;AACtF,SAAO,4CAAC,SAAI,eAAW,kBAAAA,SAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;AAGO,SAAS,MAAM,EAAE,WAAW,SAAS,GAA0C;AACrF,SACC,4CAAC,QAAQ,aAAR,EAAoB,KAAI,OAAM,eAAW,kBAAAA,SAAW,8BAA8B,SAAS,GAC1F,UACF;AAEF;AAGO,SAAS,cAAc;AAC7B,SACC,4CAAC,SAAI,WAAU,8BACd,sDAAC,QAAQ,aAAR,EAAoB,eAAY,gBAAe,KAAI,OAAM,SAAO,MAChE;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,YAAY,CAAC,MAAO,EAAE,OAA6B,MAAM;AAAA,MAEzD,sDAAC,oBAAK,OAAK,MAAC,MAAK,WAAU;AAAA;AAAA,EAC5B,GACD,GACD;AAEF;AAGO,SAAS,KAAK;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,SACC,4CAAC,SAAI,eAAW,kBAAAA,SAAW,qBAAqB,SAAS,GAAG,OAC1D,UACF;AAEF;AAGO,SAAS,OAAO,EAAE,WAAW,SAAS,GAA0C;AACtF,SAAO,4CAAC,SAAI,eAAW,kBAAAA,SAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;",
+  "names": ["classNames"]
+}

package/dist-cjs/lib/ui/components/primitives/DropdownMenu.js

@@ -0,0 +1,187 @@
+"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);
+var DropdownMenu_exports = {};
+__export(DropdownMenu_exports, {
+  CheckboxItem: () => CheckboxItem,
+  Content: () => Content,
+  Group: () => Group,
+  Indicator: () => Indicator,
+  Item: () => Item,
+  RadioItem: () => RadioItem,
+  Root: () => Root,
+  Sub: () => Sub,
+  SubContent: () => SubContent,
+  SubTrigger: () => SubTrigger,
+  Trigger: () => Trigger
+});
+module.exports = __toCommonJS(DropdownMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
+var import_Button = require("./Button");
+var import_Icon = require("./Icon");
+function Root({
+  id,
+  children,
+  modal = false,
+  debugOpen = false
+}) {
+  const [open, onOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)(id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Root, { open: debugOpen || open, dir: "ltr", modal, onOpenChange, children });
+}
+function Trigger({
+  children,
+  "data-testid": testId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DropdownMenu.Trigger,
+    {
+      dir: "ltr",
+      "data-testid": testId,
+      asChild: true,
+      onTouchEnd: (e) => (0, import_editor.preventDefault)(e),
+      children
+    }
+  );
+}
+function Content({
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  alignOffset = 8,
+  children
+}) {
+  const container = (0, import_editor.useContainer)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DropdownMenu.Content,
+    {
+      className: "tlui-menu",
+      align,
+      sideOffset,
+      side,
+      alignOffset,
+      collisionPadding: 4,
+      children
+    }
+  ) });
+}
+function Sub({ id, children }) {
+  const [open, onOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)(id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Sub, { open, onOpenChange, children });
+}
+function SubTrigger({
+  label,
+  "data-testid": testId,
+  "data-direction": dataDirection
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.SubTrigger, { dir: "ltr", "data-direction": dataDirection, "data-testid": testId, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.Button,
+    {
+      type: "menu",
+      className: "tlui-menu__submenu__trigger",
+      label,
+      icon: "chevron-right"
+    }
+  ) });
+}
+function SubContent({
+  alignOffset = 0,
+  sideOffset = 5,
+  children
+}) {
+  const container = (0, import_editor.useContainer)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DropdownMenu.SubContent,
+    {
+      className: "tlui-menu tlui-menu__submenu__content",
+      alignOffset,
+      sideOffset,
+      collisionPadding: 4,
+      children
+    }
+  ) });
+}
+function Group({
+  children,
+  size = "medium"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.Group, { dir: "ltr", className: "tlui-menu__group", "data-size": size, children });
+}
+function Indicator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.ItemIndicator, { dir: "ltr", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: "check" }) });
+}
+function Item({ noClose, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DropdownMenu.Item,
+    {
+      dir: "ltr",
+      asChild: true,
+      onClick: noClose || props.isChecked !== void 0 ? import_editor.preventDefault : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { ...props })
+    }
+  );
+}
+function CheckboxItem({ children, onSelect, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    DropdownMenu.CheckboxItem,
+    {
+      dir: "ltr",
+      className: "tlui-button tlui-button__menu tlui-button__checkbox",
+      onSelect: (e) => {
+        onSelect?.(e);
+        (0, import_editor.preventDefault)(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { small: true, icon: rest.checked ? "check" : "checkbox-empty" }),
+        children
+      ]
+    }
+  );
+}
+function RadioItem({ children, onSelect, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    DropdownMenu.CheckboxItem,
+    {
+      dir: "ltr",
+      className: "tlui-button tlui-button__menu tlui-button__checkbox",
+      onSelect: (e) => {
+        onSelect?.(e);
+        (0, import_editor.preventDefault)(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-button__checkbox__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenu.ItemIndicator, { dir: "ltr", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: "check", small: true }) }) }),
+        children
+      ]
+    }
+  );
+}
+//# sourceMappingURL=DropdownMenu.js.map

package/dist-cjs/lib/ui/components/primitives/DropdownMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/DropdownMenu.tsx"],
+  "sourcesContent": ["import { preventDefault, useContainer } from '@bigbluebutton/editor'\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { Button, TLUiButtonProps } from './Button'\nimport { Icon } from './Icon'\n\n/** @public */\nexport function Root({\n\tid,\n\tchildren,\n\tmodal = false,\n\tdebugOpen = false,\n}: {\n\tid: string\n\tchildren: any\n\tmodal?: boolean\n\tdebugOpen?: boolean\n}) {\n\tconst [open, onOpenChange] = useMenuIsOpen(id)\n\n\treturn (\n\t\t<DropdownMenu.Root open={debugOpen || open} dir=\"ltr\" modal={modal} onOpenChange={onOpenChange}>\n\t\t\t{children}\n\t\t</DropdownMenu.Root>\n\t)\n}\n\n/** @public */\nexport function Trigger({\n\tchildren,\n\t'data-testid': testId,\n}: {\n\tchildren: any\n\t'data-testid'?: string\n}) {\n\treturn (\n\t\t<DropdownMenu.Trigger\n\t\t\tdir=\"ltr\"\n\t\t\tdata-testid={testId}\n\t\t\tasChild\n\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t>\n\t\t\t{children}\n\t\t</DropdownMenu.Trigger>\n\t)\n}\n\n/** @public */\nexport function Content({\n\tside = 'bottom',\n\talign = 'start',\n\tsideOffset = 8,\n\talignOffset = 8,\n\tchildren,\n}: {\n\tchildren: any\n\talignOffset?: number\n\tsideOffset?: number\n\talign?: 'start' | 'center' | 'end'\n\tside?: 'bottom' | 'top' | 'right' | 'left'\n}) {\n\tconst container = useContainer()\n\n\treturn (\n\t\t<DropdownMenu.Portal container={container}>\n\t\t\t<DropdownMenu.Content\n\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\talign={align}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tside={side}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tcollisionPadding={4}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DropdownMenu.Content>\n\t\t</DropdownMenu.Portal>\n\t)\n}\n\n/** @public */\nexport function Sub({ id, children }: { id: string; children: any }) {\n\tconst [open, onOpenChange] = useMenuIsOpen(id)\n\n\treturn (\n\t\t<DropdownMenu.Sub open={open} onOpenChange={onOpenChange}>\n\t\t\t{children}\n\t\t</DropdownMenu.Sub>\n\t)\n}\n\n/** @public */\nexport function SubTrigger({\n\tlabel,\n\t'data-testid': testId,\n\t'data-direction': dataDirection,\n}: {\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\t'data-testid'?: string\n\t'data-direction'?: 'left' | 'right'\n}) {\n\treturn (\n\t\t<DropdownMenu.SubTrigger dir=\"ltr\" data-direction={dataDirection} data-testid={testId} asChild>\n\t\t\t<Button\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-menu__submenu__trigger\"\n\t\t\t\tlabel={label}\n\t\t\t\ticon=\"chevron-right\"\n\t\t\t/>\n\t\t</DropdownMenu.SubTrigger>\n\t)\n}\n\n/** @public */\nexport function SubContent({\n\talignOffset = 0,\n\tsideOffset = 5,\n\tchildren,\n}: {\n\talignOffset?: number\n\tsideOffset?: number\n\tchildren: any\n}) {\n\tconst container = useContainer()\n\treturn (\n\t\t<DropdownMenu.Portal container={container}>\n\t\t\t<DropdownMenu.SubContent\n\t\t\t\tclassName=\"tlui-menu tlui-menu__submenu__content\"\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tcollisionPadding={4}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DropdownMenu.SubContent>\n\t\t</DropdownMenu.Portal>\n\t)\n}\n\n/** @public */\nexport function Group({\n\tchildren,\n\tsize = 'medium',\n}: {\n\tchildren: any\n\tsize?: 'tiny' | 'small' | 'medium' | 'wide'\n}) {\n\treturn (\n\t\t<DropdownMenu.Group dir=\"ltr\" className=\"tlui-menu__group\" data-size={size}>\n\t\t\t{children}\n\t\t</DropdownMenu.Group>\n\t)\n}\n\n/** @public */\nexport function Indicator() {\n\treturn (\n\t\t<DropdownMenu.ItemIndicator dir=\"ltr\" asChild>\n\t\t\t<Icon icon=\"check\" />\n\t\t</DropdownMenu.ItemIndicator>\n\t)\n}\n\n/** @public */\nexport interface DropdownMenuItemProps extends TLUiButtonProps {\n\tnoClose?: boolean\n}\n\n/** @public */\nexport function Item({ noClose, ...props }: DropdownMenuItemProps) {\n\treturn (\n\t\t<DropdownMenu.Item\n\t\t\tdir=\"ltr\"\n\t\t\tasChild\n\t\t\tonClick={noClose || props.isChecked !== undefined ? preventDefault : undefined}\n\t\t>\n\t\t\t<Button {...props} />\n\t\t</DropdownMenu.Item>\n\t)\n}\n\n/** @public */\nexport interface DropdownMenuCheckboxItemProps {\n\tchecked?: boolean\n\tonSelect?: (e: Event) => void\n\tdisabled?: boolean\n\ttitle: string\n\tchildren: any\n}\n\n/** @public */\nexport function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<DropdownMenu.CheckboxItem\n\t\t\tdir=\"ltr\"\n\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\tonSelect={(e) => {\n\t\t\t\tonSelect?.(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<Icon small icon={rest.checked ? 'check' : 'checkbox-empty'} />\n\t\t\t{children}\n\t\t</DropdownMenu.CheckboxItem>\n\t)\n}\n\n/** @public */\nexport function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<DropdownMenu.CheckboxItem\n\t\t\tdir=\"ltr\"\n\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\tonSelect={(e) => {\n\t\t\t\tonSelect?.(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className=\"tlui-button__checkbox__indicator\">\n\t\t\t\t<DropdownMenu.ItemIndicator dir=\"ltr\">\n\t\t\t\t\t<Icon icon=\"check\" small />\n\t\t\t\t</DropdownMenu.ItemIndicator>\n\t\t\t</div>\n\t\t\t{children}\n\t\t</DropdownMenu.CheckboxItem>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBE;AAtBF,oBAA6C;AAC7C,mBAA8B;AAC9B,2BAA8B;AAE9B,oBAAwC;AACxC,kBAAqB;AAGd,SAAS,KAAK;AAAA,EACpB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AACb,GAKG;AACF,QAAM,CAAC,MAAM,YAAY,QAAI,oCAAc,EAAE;AAE7C,SACC,4CAAC,aAAa,MAAb,EAAkB,MAAM,aAAa,MAAM,KAAI,OAAM,OAAc,cAClE,UACF;AAEF;AAGO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA,eAAe;AAChB,GAGG;AACF,SACC;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA,KAAI;AAAA,MACJ,eAAa;AAAA,MACb,SAAO;AAAA,MAEP,YAAY,CAAC,UAAM,8BAAe,CAAC;AAAA,MAElC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,QAAQ;AAAA,EACvB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AACD,GAMG;AACF,QAAM,gBAAY,4BAAa;AAE/B,SACC,4CAAC,aAAa,QAAb,EAAoB,WACpB;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAEjB;AAAA;AAAA,EACF,GACD;AAEF;AAGO,SAAS,IAAI,EAAE,IAAI,SAAS,GAAkC;AACpE,QAAM,CAAC,MAAM,YAAY,QAAI,oCAAc,EAAE;AAE7C,SACC,4CAAC,aAAa,KAAb,EAAiB,MAAY,cAC5B,UACF;AAEF;AAGO,SAAS,WAAW;AAAA,EAC1B;AAAA,EACA,eAAe;AAAA,EACf,kBAAkB;AACnB,GAIG;AACF,SACC,4CAAC,aAAa,YAAb,EAAwB,KAAI,OAAM,kBAAgB,eAAe,eAAa,QAAQ,SAAO,MAC7F;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA;AAAA,EACN,GACD;AAEF;AAGO,SAAS,WAAW;AAAA,EAC1B,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AACD,GAIG;AACF,QAAM,gBAAY,4BAAa;AAC/B,SACC,4CAAC,aAAa,QAAb,EAAoB,WACpB;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAEjB;AAAA;AAAA,EACF,GACD;AAEF;AAGO,SAAS,MAAM;AAAA,EACrB;AAAA,EACA,OAAO;AACR,GAGG;AACF,SACC,4CAAC,aAAa,OAAb,EAAmB,KAAI,OAAM,WAAU,oBAAmB,aAAW,MACpE,UACF;AAEF;AAGO,SAAS,YAAY;AAC3B,SACC,4CAAC,aAAa,eAAb,EAA2B,KAAI,OAAM,SAAO,MAC5C,sDAAC,oBAAK,MAAK,SAAQ,GACpB;AAEF;AAQO,SAAS,KAAK,EAAE,SAAS,GAAG,MAAM,GAA0B;AAClE,SACC;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA,KAAI;AAAA,MACJ,SAAO;AAAA,MACP,SAAS,WAAW,MAAM,cAAc,SAAY,+BAAiB;AAAA,MAErE,sDAAC,wBAAQ,GAAG,OAAO;AAAA;AAAA,EACpB;AAEF;AAYO,SAAS,aAAa,EAAE,UAAU,UAAU,GAAG,KAAK,GAAkC;AAC5F,SACC;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA,KAAI;AAAA,MACJ,WAAU;AAAA,MACV,UAAU,CAAC,MAAM;AAChB,mBAAW,CAAC;AACZ,0CAAe,CAAC;AAAA,MACjB;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,oBAAK,OAAK,MAAC,MAAM,KAAK,UAAU,UAAU,kBAAkB;AAAA,QAC5D;AAAA;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,UAAU,EAAE,UAAU,UAAU,GAAG,KAAK,GAAkC;AACzF,SACC;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA,KAAI;AAAA,MACJ,WAAU;AAAA,MACV,UAAU,CAAC,MAAM;AAChB,mBAAW,CAAC;AACZ,0CAAe,CAAC;AAAA,MACjB;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,SAAI,WAAU,oCACd,sDAAC,aAAa,eAAb,EAA2B,KAAI,OAC/B,sDAAC,oBAAK,MAAK,SAAQ,OAAK,MAAC,GAC1B,GACD;AAAA,QACC;AAAA;AAAA;AAAA,EACF;AAEF;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/primitives/Icon.js

@@ -0,0 +1,71 @@
+"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);
+var Icon_exports = {};
+__export(Icon_exports, {
+  Icon: () => Icon
+});
+module.exports = __toCommonJS(Icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
+var import_useAssetUrls = require("../../hooks/useAssetUrls");
+const Icon = (0, import_react.memo)(function Icon2({
+  small,
+  invertIcon,
+  icon,
+  color,
+  className,
+  ...props
+}) {
+  const assetUrls = (0, import_useAssetUrls.useAssetUrls)();
+  const asset = assetUrls.icons[icon] ?? assetUrls.icons["question-mark-circle"];
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!asset) {
+      console.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`);
+    }
+    if (ref?.current) {
+      ref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`;
+    }
+  }, [ref, asset, icon]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      className: (0, import_classnames.default)("tlui-icon", { "tlui-icon__small": small }, className),
+      style: {
+        color,
+        mask: `url(${asset}) center 100% / 100% no-repeat`,
+        transform: invertIcon ? "scale(-1, 1)" : void 0
+      }
+    }
+  );
+});
+//# sourceMappingURL=Icon.js.map

package/dist-cjs/lib/ui/components/primitives/Icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/Icon.tsx"],
+  "sourcesContent": ["import classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../hooks/useAssetUrls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public */\nexport const Icon = memo(function Icon({\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line deprecation/deprecation\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CE;AA3CF,wBAAuB;AACvB,mBAA8C;AAC9C,0BAA6B;AActB,MAAM,WAAO,mBAAK,SAASA,MAAK;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,QAAM,gBAAY,kCAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AAEvC,oCAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,eAAW,kBAAAC,SAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "names": ["Icon", "classNames"]
+}