@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/Spinner.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Spinner.tsx"],
+  "sourcesContent": ["import React from 'react'\n\n/** @internal */\nexport function Spinner(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg width={16} height={16} viewBox=\"0 0 16 16\" {...props}>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AAMG,SACC,KADD;AAHI,SAAS,QAAQ,OAAsC;AAC7D,SACC,oBAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAa,GAAG,OACnD,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,wBAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,oBAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,MAAC;AAAA;AAAA,QACA,eAAc;AAAA,QACd,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,aAAY;AAAA;AAAA,IACb,GACD;AAAA,KACD,GACD;AAEF;",
+  "names": []
+}

package/dist-esm/lib/ui/components/StopFollowing.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { track, useEditor } from "@bigbluebutton/editor";
+import { useActions } from "../hooks/useActions.mjs";
+import { Button } from "./primitives/Button.mjs";
+const StopFollowing = track(function ExitPenMode() {
+  const editor = useEditor();
+  const actions = useActions();
+  if (!editor.getInstanceState().followingUserId) {
+    return null;
+  }
+  const action = actions["stop-following"];
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "normal",
+      label: action.label,
+      iconLeft: action.icon,
+      onClick: () => action.onSelect("people-menu")
+    }
+  );
+});
+export {
+  StopFollowing
+};
+//# sourceMappingURL=StopFollowing.mjs.map

package/dist-esm/lib/ui/components/StopFollowing.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/StopFollowing.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { Button } from './primitives/Button'\n\nexport const StopFollowing = track(function ExitPenMode() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\n\tif (!editor.getInstanceState().followingUserId) {\n\t\treturn null\n\t}\n\n\tconst action = actions['stop-following']\n\n\treturn (\n\t\t<Button\n\t\t\ttype=\"normal\"\n\t\t\tlabel={action.label}\n\t\t\ticonLeft={action.icon}\n\t\t\tonClick={() => action.onSelect('people-menu')}\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AAeE;AAfF,SAAS,OAAO,iBAAiB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEhB,MAAM,gBAAgB,MAAM,SAAS,cAAc;AACzD,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,WAAW;AAE3B,MAAI,CAAC,OAAO,iBAAiB,EAAE,iBAAiB;AAC/C,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,QAAQ,gBAAgB;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,SAAS,MAAM,OAAO,SAAS,aAAa;AAAA;AAAA,EAC7C;AAEF,CAAC;",
+  "names": []
+}

package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { preventDefault } from "@bigbluebutton/editor";
+import { Trigger } from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import * as DropdownMenu from "../primitives/DropdownMenu.mjs";
+const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker2({
+  label,
+  uiTypeA,
+  uiTypeB,
+  labelA,
+  labelB,
+  itemsA,
+  itemsB,
+  styleA,
+  styleB,
+  valueA,
+  valueB,
+  onValueChange
+}) {
+  const msg = useTranslation();
+  const iconA = React.useMemo(
+    () => itemsA.find((item) => valueA.type === "shared" && valueA.value === item.value)?.icon ?? "mixed",
+    [itemsA, valueA]
+  );
+  const iconB = React.useMemo(
+    () => itemsB.find((item) => valueB.type === "shared" && valueB.value === item.value)?.icon ?? "mixed",
+    [itemsB, valueB]
+  );
+  if (valueA === void 0 && valueB === void 0)
+    return null;
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__double-select-picker", children: [
+    /* @__PURE__ */ jsx("div", { title: msg(label), className: "tlui-style-panel__double-select-picker-label", children: msg(label) }),
+    /* @__PURE__ */ jsxs("div", { className: "tlui-buttons__horizontal", children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.Root, { id: `style panel ${uiTypeA} A`, children: [
+        /* @__PURE__ */ jsx(
+          Trigger,
+          {
+            asChild: true,
+            onTouchEnd: (e) => preventDefault(e),
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "icon",
+                "data-testid": `style.${uiTypeA}`,
+                title: msg(labelA) + " \u2014 " + (valueA === null || valueA.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeA}-style.${valueA.value}`)),
+                icon: iconA,
+                invertIcon: true,
+                smallIcon: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { side: "bottom", align: "end", sideOffset: 0, alignOffset: -2, children: /* @__PURE__ */ jsx("div", { className: "tlui-buttons__grid", children: itemsA.map((item) => {
+          return /* @__PURE__ */ jsx(
+            DropdownMenu.Item,
+            {
+              type: "icon",
+              title: msg(labelA) + " \u2014 " + msg(`${uiTypeA}-style.${item.value}`),
+              "data-testid": `style.${uiTypeA}.${item.value}`,
+              icon: item.icon,
+              onClick: () => onValueChange(styleA, item.value, false),
+              invertIcon: true
+            },
+            item.value
+          );
+        }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Root, { id: `style panel ${uiTypeB}`, children: [
+        /* @__PURE__ */ jsx(
+          Trigger,
+          {
+            asChild: true,
+            onTouchEnd: (e) => preventDefault(e),
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "icon",
+                "data-testid": `style.${uiTypeB}`,
+                title: msg(labelB) + " \u2014 " + (valueB === null || valueB.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiTypeB}-style.${valueB.value}`)),
+                icon: iconB,
+                smallIcon: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { side: "bottom", align: "end", sideOffset: 0, alignOffset: -2, children: /* @__PURE__ */ jsx("div", { className: "tlui-buttons__grid", children: itemsB.map((item) => {
+          return /* @__PURE__ */ jsx(
+            DropdownMenu.Item,
+            {
+              type: "icon",
+              title: msg(labelB) + " \u2014 " + msg(`${uiTypeB}-style.${item.value}`),
+              "data-testid": `style.${uiTypeB}.${item.value}`,
+              icon: item.icon,
+              onClick: () => onValueChange(styleB, item.value, false)
+            },
+            item.value
+          );
+        }) }) })
+      ] })
+    ] })
+  ] });
+});
+export {
+  DoubleDropdownPicker
+};
+//# sourceMappingURL=DoubleDropdownPicker.mjs.map

package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, preventDefault } from '@bigbluebutton/editor'\nimport { Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Button } from '../primitives/Button'\nimport * as DropdownMenu from '../primitives/DropdownMenu'\nimport { StyleValuesForUi } from './styles'\n\ninterface DoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nexport const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T extends string>({\n\tlabel,\n\tuiTypeA,\n\tuiTypeB,\n\tlabelA,\n\tlabelB,\n\titemsA,\n\titemsB,\n\tstyleA,\n\tstyleB,\n\tvalueA,\n\tvalueB,\n\tonValueChange,\n}: DoubleDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\n\tconst iconA = React.useMemo(\n\t\t() =>\n\t\t\titemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsA, valueA]\n\t)\n\tconst iconB = React.useMemo(\n\t\t() =>\n\t\t\titemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsB, valueB]\n\t)\n\n\tif (valueA === undefined && valueB === undefined) return null\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(label)}\n\t\t\t</div>\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeA} A`}>\n\t\t\t\t\t<Trigger\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={iconA as any}\n\t\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Trigger>\n\t\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiTypeA}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleA, item.value, false)}\n\t\t\t\t\t\t\t\t\t\tinvertIcon\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t</DropdownMenu.Root>\n\t\t\t\t<DropdownMenu.Root id={`style panel ${uiTypeB}`}>\n\t\t\t\t\t<Trigger\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={iconB as any}\n\t\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Trigger>\n\t\t\t\t\t<DropdownMenu.Content side=\"bottom\" align=\"end\" sideOffset={0} alignOffset={-2}>\n\t\t\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onValueChange(styleB, item.value, false)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t</DropdownMenu.Root>\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["DoubleDropdownPicker"]
+}

package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { preventDefault } from "@bigbluebutton/editor";
+import { Trigger } from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import * as DropdownMenu from "../primitives/DropdownMenu.mjs";
+const DropdownPicker = React.memo(function DropdownPicker2({
+  id,
+  label,
+  uiType,
+  style,
+  items,
+  type,
+  value,
+  onValueChange
+}) {
+  const msg = useTranslation();
+  const icon = React.useMemo(
+    () => items.find((item) => value.type === "shared" && item.value === value.value)?.icon,
+    [items, value]
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { id: `style panel ${id}`, children: [
+    /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        asChild: true,
+        onTouchEnd: (e) => preventDefault(e),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type,
+            "data-testid": `style.${uiType}`,
+            title: value.type === "mixed" ? msg("style-panel.mixed") : msg(`${uiType}-style.${value.value}`),
+            label,
+            icon: icon ?? "mixed"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { side: "left", align: "center", alignOffset: 0, children: /* @__PURE__ */ jsx("div", { className: "tlui-buttons__grid", children: items.map((item) => {
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "icon",
+          "data-testid": `style.${uiType}.${item.value}`,
+          title: msg(`${uiType}-style.${item.value}`),
+          icon: item.icon,
+          onClick: () => onValueChange(style, item.value, false)
+        },
+        item.value
+      );
+    }) }) })
+  ] });
+});
+export {
+  DropdownPicker
+};
+//# sourceMappingURL=DropdownPicker.mjs.map

package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, preventDefault } from '@bigbluebutton/editor'\nimport { Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { Button, TLUiButtonProps } from '../primitives/Button'\nimport * as DropdownMenu from '../primitives/DropdownMenu'\nimport { StyleValuesForUi } from './styles'\n\ninterface DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: TLUiButtonProps['type']\n\tonValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void\n}\n\nexport const DropdownPicker = React.memo(function DropdownPicker<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\treturn (\n\t\t<DropdownMenu.Root id={`style panel ${id}`}>\n\t\t\t<Trigger\n\t\t\t\tasChild\n\t\t\t\t// Firefox fix: Stop the dropdown immediately closing after touch\n\t\t\t\tonTouchEnd={(e) => preventDefault(e)}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttitle={\n\t\t\t\t\t\tvalue.type === 'mixed'\n\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t: msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\t\t\t\t\t}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\ticon={(icon as TLUiIconType) ?? 'mixed'}\n\t\t\t\t/>\n\t\t\t</Trigger>\n\t\t\t<DropdownMenu.Content side=\"left\" align=\"center\" alignOffset={0}>\n\t\t\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\ttitle={msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}\n\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\ticon={item.icon as TLUiIconType}\n\t\t\t\t\t\t\t\tonClick={() => onValueChange(style, item.value, false)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Content>\n\t\t</DropdownMenu.Root>\n\t)\n})\n"],
+  "mappings": "AAuCE,SAME,KANF;AAvCF,SAAiC,sBAAsB;AACvD,SAAS,eAAe;AACxB,YAAY,WAAW;AAEvB,SAAS,sBAAsB;AAE/B,SAAS,cAA+B;AACxC,YAAY,kBAAkB;AAcvB,MAAM,iBAAiB,MAAM,KAAK,SAASA,gBAAiC;AAAA,EAClF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,MAAM,eAAe;AAE3B,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,SACC,qBAAC,aAAa,MAAb,EAAkB,IAAI,eAAe,EAAE,IACvC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAO;AAAA,QAEP,YAAY,CAAC,MAAM,eAAe,CAAC;AAAA,QAEnC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,OACC,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AAAA,YAE9D;AAAA,YACA,MAAO,QAAyB;AAAA;AAAA,QACjC;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,aAAa,SAAb,EAAqB,MAAK,QAAO,OAAM,UAAS,aAAa,GAC7D,8BAAC,SAAI,WAAU,sBACb,gBAAM,IAAI,CAAC,SAAS;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,MAAK;AAAA,UACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,UAC1C,OAAO,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,UAEhE,MAAM,KAAK;AAAA,UACX,SAAS,MAAM,cAAc,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA,QAFhD,KAAK;AAAA,MAGX;AAAA,IAEF,CAAC,GACF,GACD;AAAA,KACD;AAEF,CAAC;",
+  "names": ["DropdownPicker"]
+}

package/dist-esm/lib/ui/components/StylePanel/StylePanel.mjs

@@ -0,0 +1,297 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowShapeArrowheadEndStyle,
+  ArrowShapeArrowheadStartStyle,
+  DefaultColorStyle,
+  DefaultDashStyle,
+  DefaultFillStyle,
+  DefaultFontStyle,
+  DefaultHorizontalAlignStyle,
+  DefaultSizeStyle,
+  DefaultVerticalAlignStyle,
+  GeoShapeGeoStyle,
+  LineShapeSplineStyle,
+  minBy,
+  useEditor
+} from "@bigbluebutton/editor";
+import React, { useCallback } from "react";
+import { useRelevantStyles } from "../../hooks/useRevelantStyles.mjs";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import { ButtonPicker } from "../primitives/ButtonPicker.mjs";
+import { Slider } from "../primitives/Slider.mjs";
+import { DoubleDropdownPicker } from "./DoubleDropdownPicker.mjs";
+import { DropdownPicker } from "./DropdownPicker.mjs";
+import { STYLES } from "./styles.mjs";
+const StylePanel = function StylePanel2({ isMobile }) {
+  const editor = useEditor();
+  const relevantStyles = useRelevantStyles();
+  const handlePointerOut = useCallback(() => {
+    if (!isMobile) {
+      editor.updateInstanceState({ isChangingStyle: false });
+    }
+  }, [editor, isMobile]);
+  if (!relevantStyles)
+    return null;
+  const { styles, opacity } = relevantStyles;
+  const geo = styles.get(GeoShapeGeoStyle);
+  const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle);
+  const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle);
+  const spline = styles.get(LineShapeSplineStyle);
+  const font = styles.get(DefaultFontStyle);
+  const hideGeo = geo === void 0;
+  const hideArrowHeads = arrowheadEnd === void 0 && arrowheadStart === void 0;
+  const hideSpline = spline === void 0;
+  const hideText = font === void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel", "data-ismobile": isMobile, onPointerLeave: handlePointerOut, children: [
+    /* @__PURE__ */ jsx(CommonStylePickerSet, { styles, opacity }),
+    !hideText && /* @__PURE__ */ jsx(TextStylePickerSet, { styles }),
+    !(hideGeo && hideArrowHeads && hideSpline) && /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", "aria-label": "style panel styles", children: [
+      /* @__PURE__ */ jsx(GeoStylePickerSet, { styles }),
+      /* @__PURE__ */ jsx(ArrowheadStylePickerSet, { styles }),
+      /* @__PURE__ */ jsx(SplineStylePickerSet, { styles })
+    ] })
+  ] });
+};
+function useStyleChangeCallback() {
+  const editor = useEditor();
+  return React.useMemo(() => {
+    return function handleStyleChange(style, value, squashing) {
+      editor.batch(() => {
+        if (editor.isIn("select")) {
+          editor.setStyleForSelectedShapes(style, value, { squashing });
+        }
+        editor.setStyleForNextShapes(style, value, { squashing });
+        editor.updateInstanceState({ isChangingStyle: true });
+      });
+    };
+  }, [editor]);
+}
+const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1];
+function CommonStylePickerSet({
+  styles,
+  opacity
+}) {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const handleValueChange = useStyleChangeCallback();
+  const handleOpacityValueChange = React.useCallback(
+    (value, ephemeral) => {
+      const item = tldrawSupportedOpacities[value];
+      editor.batch(() => {
+        if (editor.isIn("select")) {
+          editor.setOpacityForSelectedShapes(item, { ephemeral });
+        }
+        editor.setOpacityForNextShapes(item, { ephemeral });
+        editor.updateInstanceState({ isChangingStyle: true });
+      });
+    },
+    [editor]
+  );
+  const color = styles.get(DefaultColorStyle);
+  const fill = styles.get(DefaultFillStyle);
+  const dash = styles.get(DefaultDashStyle);
+  const size = styles.get(DefaultSizeStyle);
+  const showPickers = fill !== void 0 || dash !== void 0 || size !== void 0;
+  const opacityIndex = opacity.type === "mixed" ? -1 : tldrawSupportedOpacities.indexOf(
+    minBy(
+      tldrawSupportedOpacities,
+      (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
+    )
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        tabIndex: -1,
+        className: "tlui-style-panel__section__common",
+        "aria-label": "style panel styles",
+        children: [
+          color === void 0 ? null : /* @__PURE__ */ jsx(
+            ButtonPicker,
+            {
+              title: msg("style-panel.color"),
+              uiType: "color",
+              style: DefaultColorStyle,
+              items: STYLES.color,
+              value: color,
+              onValueChange: handleValueChange
+            }
+          ),
+          opacity === void 0 ? null : /* @__PURE__ */ jsx(
+            Slider,
+            {
+              "data-testid": "style.opacity",
+              value: opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1,
+              label: opacity.type === "mixed" ? "style-panel.mixed" : `opacity-style.${opacity.value}`,
+              onValueChange: handleOpacityValueChange,
+              steps: tldrawSupportedOpacities.length - 1,
+              title: msg("style-panel.opacity")
+            }
+          )
+        ]
+      }
+    ),
+    showPickers && /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", "aria-label": "style panel styles", children: [
+      fill === void 0 ? null : /* @__PURE__ */ jsx(
+        ButtonPicker,
+        {
+          title: msg("style-panel.fill"),
+          uiType: "fill",
+          style: DefaultFillStyle,
+          items: STYLES.fill,
+          value: fill,
+          onValueChange: handleValueChange
+        }
+      ),
+      dash === void 0 ? null : /* @__PURE__ */ jsx(
+        ButtonPicker,
+        {
+          title: msg("style-panel.dash"),
+          uiType: "dash",
+          style: DefaultDashStyle,
+          items: STYLES.dash,
+          value: dash,
+          onValueChange: handleValueChange
+        }
+      ),
+      size === void 0 ? null : /* @__PURE__ */ jsx(
+        ButtonPicker,
+        {
+          title: msg("style-panel.size"),
+          uiType: "size",
+          style: DefaultSizeStyle,
+          items: STYLES.size,
+          value: size,
+          onValueChange: handleValueChange
+        }
+      )
+    ] })
+  ] });
+}
+function TextStylePickerSet({ styles }) {
+  const msg = useTranslation();
+  const handleValueChange = useStyleChangeCallback();
+  const font = styles.get(DefaultFontStyle);
+  const align = styles.get(DefaultHorizontalAlignStyle);
+  const verticalAlign = styles.get(DefaultVerticalAlignStyle);
+  if (font === void 0 && align === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", "aria-label": "style panel text", children: [
+    font === void 0 ? null : /* @__PURE__ */ jsx(
+      ButtonPicker,
+      {
+        title: msg("style-panel.font"),
+        uiType: "font",
+        style: DefaultFontStyle,
+        items: STYLES.font,
+        value: font,
+        onValueChange: handleValueChange
+      }
+    ),
+    align === void 0 ? null : /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__row", children: [
+      /* @__PURE__ */ jsx(
+        ButtonPicker,
+        {
+          title: msg("style-panel.align"),
+          uiType: "align",
+          style: DefaultHorizontalAlignStyle,
+          items: STYLES.horizontalAlign,
+          value: align,
+          onValueChange: handleValueChange
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "tlui-style-panel__row__extra-button", children: verticalAlign === void 0 ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "icon",
+          title: msg("style-panel.vertical-align"),
+          "data-testid": "vertical-align",
+          icon: "vertical-align-center",
+          disabled: true
+        }
+      ) : /* @__PURE__ */ jsx(
+        DropdownPicker,
+        {
+          type: "icon",
+          id: "geo-vertical-alignment",
+          uiType: "verticalAlign",
+          style: DefaultVerticalAlignStyle,
+          items: STYLES.verticalAlign,
+          value: verticalAlign,
+          onValueChange: handleValueChange
+        }
+      ) })
+    ] })
+  ] });
+}
+function GeoStylePickerSet({ styles }) {
+  const handleValueChange = useStyleChangeCallback();
+  const geo = styles.get(GeoShapeGeoStyle);
+  if (geo === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DropdownPicker,
+    {
+      id: "geo",
+      type: "menu",
+      label: "style-panel.geo",
+      uiType: "geo",
+      style: GeoShapeGeoStyle,
+      items: STYLES.geo,
+      value: geo,
+      onValueChange: handleValueChange
+    }
+  );
+}
+function SplineStylePickerSet({ styles }) {
+  const handleValueChange = useStyleChangeCallback();
+  const spline = styles.get(LineShapeSplineStyle);
+  if (spline === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DropdownPicker,
+    {
+      id: "spline",
+      type: "menu",
+      label: "style-panel.spline",
+      uiType: "spline",
+      style: LineShapeSplineStyle,
+      items: STYLES.spline,
+      value: spline,
+      onValueChange: handleValueChange
+    }
+  );
+}
+function ArrowheadStylePickerSet({ styles }) {
+  const handleValueChange = useStyleChangeCallback();
+  const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle);
+  const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle);
+  if (!arrowheadEnd || !arrowheadStart) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DoubleDropdownPicker,
+    {
+      label: "style-panel.arrowheads",
+      uiTypeA: "arrowheadStart",
+      styleA: ArrowShapeArrowheadStartStyle,
+      itemsA: STYLES.arrowheadStart,
+      valueA: arrowheadStart,
+      uiTypeB: "arrowheadEnd",
+      styleB: ArrowShapeArrowheadEndStyle,
+      itemsB: STYLES.arrowheadEnd,
+      valueB: arrowheadEnd,
+      onValueChange: handleValueChange,
+      labelA: "style-panel.arrowhead-start",
+      labelB: "style-panel.arrowhead-end"
+    }
+  );
+}
+export {
+  StylePanel
+};
+//# sourceMappingURL=StylePanel.mjs.map

package/dist-esm/lib/ui/components/StylePanel/StylePanel.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanel.tsx"],
+  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tReadonlySharedStyleMap,\n\tSharedStyle,\n\tStyleProp,\n\tminBy,\n\tuseEditor,\n} from '@bigbluebutton/editor'\nimport React, { useCallback } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRevelantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\nimport { ButtonPicker } from '../primitives/ButtonPicker'\nimport { Slider } from '../primitives/Slider'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\nimport { STYLES } from './styles'\n\ninterface StylePanelProps {\n\tisMobile?: boolean\n}\n\n/** @internal */\nexport const StylePanel = function StylePanel({ isMobile }: StylePanelProps) {\n\tconst editor = useEditor()\n\n\tconst relevantStyles = useRelevantStyles()\n\n\tconst handlePointerOut = useCallback(() => {\n\t\tif (!isMobile) {\n\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t}\n\t}, [editor, isMobile])\n\n\tif (!relevantStyles) return null\n\n\tconst { styles, opacity } = relevantStyles\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideText = font === undefined\n\n\treturn (\n\t\t<div className=\"tlui-style-panel\" data-ismobile={isMobile} onPointerLeave={handlePointerOut}>\n\t\t\t<CommonStylePickerSet styles={styles} opacity={opacity} />\n\t\t\t{!hideText && <TextStylePickerSet styles={styles} />}\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline) && (\n\t\t\t\t<div className=\"tlui-style-panel__section\" aria-label=\"style panel styles\">\n\t\t\t\t\t<GeoStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowheadStylePickerSet styles={styles} />\n\t\t\t\t\t<SplineStylePickerSet styles={styles} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\treturn function handleStyleChange<T>(style: StyleProp<T>, value: T, squashing: boolean) {\n\t\t\teditor.batch(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setStyleForSelectedShapes(style, value, { squashing })\n\t\t\t\t}\n\t\t\t\teditor.setStyleForNextShapes(style, value, { squashing })\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\t\t}\n\t}, [editor])\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n\nfunction CommonStylePickerSet({\n\tstyles,\n\topacity,\n}: {\n\tstyles: ReadonlySharedStyleMap\n\topacity: SharedStyle<number>\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number, ephemeral: boolean) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.batch(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item, { ephemeral })\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item, { ephemeral })\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t  )\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclassName=\"tlui-style-panel__section__common\"\n\t\t\t\taria-label=\"style panel styles\"\n\t\t\t>\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t<ButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.color')}\n\t\t\t\t\t\tuiType=\"color\"\n\t\t\t\t\t\tstyle={DefaultColorStyle}\n\t\t\t\t\t\titems={STYLES.color}\n\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{opacity === undefined ? null : (\n\t\t\t\t\t<Slider\n\t\t\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\topacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{showPickers && (\n\t\t\t\t<div className=\"tlui-style-panel__section\" aria-label=\"style panel styles\">\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t<ButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.fill')}\n\t\t\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\t\t\tvalue={fill}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t<ButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.dash')}\n\t\t\t\t\t\t\tuiType=\"dash\"\n\t\t\t\t\t\t\tstyle={DefaultDashStyle}\n\t\t\t\t\t\t\titems={STYLES.dash}\n\t\t\t\t\t\t\tvalue={dash}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t<ButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.size')}\n\t\t\t\t\t\t\tuiType=\"size\"\n\t\t\t\t\t\t\tstyle={DefaultSizeStyle}\n\t\t\t\t\t\t\titems={STYLES.size}\n\t\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\nfunction TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst align = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && align === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__section\" aria-label=\"style panel text\">\n\t\t\t{font === undefined ? null : (\n\t\t\t\t<ButtonPicker\n\t\t\t\t\ttitle={msg('style-panel.font')}\n\t\t\t\t\tuiType=\"font\"\n\t\t\t\t\tstyle={DefaultFontStyle}\n\t\t\t\t\titems={STYLES.font}\n\t\t\t\t\tvalue={font}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{align === undefined ? null : (\n\t\t\t\t<div className=\"tlui-style-panel__row\">\n\t\t\t\t\t<ButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\t\tvalue={align}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t{verticalAlign === undefined ? (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\ticon=\"vertical-align-center\"\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<DropdownPicker\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\t\t\tvalue={verticalAlign}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DropdownPicker\n\t\t\tid=\"geo\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.geo'}\n\t\t\tuiType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t\tonValueChange={handleValueChange}\n\t\t/>\n\t)\n}\n\nfunction SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DropdownPicker\n\t\t\tid=\"spline\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.spline'}\n\t\t\tuiType=\"spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t\tonValueChange={handleValueChange}\n\t\t/>\n\t)\n}\n\nfunction ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DoubleDropdownPicker\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tonValueChange={handleValueChange}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["StylePanel"]
+}