@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/StylePanel/StylePanel.js

@@ -0,0 +1,313 @@
+"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 StylePanel_exports = {};
+__export(StylePanel_exports, {
+  StylePanel: () => StylePanel
+});
+module.exports = __toCommonJS(StylePanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = __toESM(require("react"));
+var import_useRevelantStyles = require("../../hooks/useRevelantStyles");
+var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_Button = require("../primitives/Button");
+var import_ButtonPicker = require("../primitives/ButtonPicker");
+var import_Slider = require("../primitives/Slider");
+var import_DoubleDropdownPicker = require("./DoubleDropdownPicker");
+var import_DropdownPicker = require("./DropdownPicker");
+var import_styles = require("./styles");
+const StylePanel = function StylePanel2({ isMobile }) {
+  const editor = (0, import_editor.useEditor)();
+  const relevantStyles = (0, import_useRevelantStyles.useRelevantStyles)();
+  const handlePointerOut = (0, import_react.useCallback)(() => {
+    if (!isMobile) {
+      editor.updateInstanceState({ isChangingStyle: false });
+    }
+  }, [editor, isMobile]);
+  if (!relevantStyles)
+    return null;
+  const { styles, opacity } = relevantStyles;
+  const geo = styles.get(import_editor.GeoShapeGeoStyle);
+  const arrowheadEnd = styles.get(import_editor.ArrowShapeArrowheadEndStyle);
+  const arrowheadStart = styles.get(import_editor.ArrowShapeArrowheadStartStyle);
+  const spline = styles.get(import_editor.LineShapeSplineStyle);
+  const font = styles.get(import_editor.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel", "data-ismobile": isMobile, onPointerLeave: handlePointerOut, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommonStylePickerSet, { styles, opacity }),
+    !hideText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextStylePickerSet, { styles }),
+    !(hideGeo && hideArrowHeads && hideSpline) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", "aria-label": "style panel styles", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GeoStylePickerSet, { styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowheadStylePickerSet, { styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SplineStylePickerSet, { styles })
+    ] })
+  ] });
+};
+function useStyleChangeCallback() {
+  const editor = (0, import_editor.useEditor)();
+  return import_react.default.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 = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const handleValueChange = useStyleChangeCallback();
+  const handleOpacityValueChange = import_react.default.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(import_editor.DefaultColorStyle);
+  const fill = styles.get(import_editor.DefaultFillStyle);
+  const dash = styles.get(import_editor.DefaultDashStyle);
+  const size = styles.get(import_editor.DefaultSizeStyle);
+  const showPickers = fill !== void 0 || dash !== void 0 || size !== void 0;
+  const opacityIndex = opacity.type === "mixed" ? -1 : tldrawSupportedOpacities.indexOf(
+    (0, import_editor.minBy)(
+      tldrawSupportedOpacities,
+      (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
+    )
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        tabIndex: -1,
+        className: "tlui-style-panel__section__common",
+        "aria-label": "style panel styles",
+        children: [
+          color === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ButtonPicker.ButtonPicker,
+            {
+              title: msg("style-panel.color"),
+              uiType: "color",
+              style: import_editor.DefaultColorStyle,
+              items: import_styles.STYLES.color,
+              value: color,
+              onValueChange: handleValueChange
+            }
+          ),
+          opacity === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Slider.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", "aria-label": "style panel styles", children: [
+      fill === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ButtonPicker.ButtonPicker,
+        {
+          title: msg("style-panel.fill"),
+          uiType: "fill",
+          style: import_editor.DefaultFillStyle,
+          items: import_styles.STYLES.fill,
+          value: fill,
+          onValueChange: handleValueChange
+        }
+      ),
+      dash === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ButtonPicker.ButtonPicker,
+        {
+          title: msg("style-panel.dash"),
+          uiType: "dash",
+          style: import_editor.DefaultDashStyle,
+          items: import_styles.STYLES.dash,
+          value: dash,
+          onValueChange: handleValueChange
+        }
+      ),
+      size === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ButtonPicker.ButtonPicker,
+        {
+          title: msg("style-panel.size"),
+          uiType: "size",
+          style: import_editor.DefaultSizeStyle,
+          items: import_styles.STYLES.size,
+          value: size,
+          onValueChange: handleValueChange
+        }
+      )
+    ] })
+  ] });
+}
+function TextStylePickerSet({ styles }) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const handleValueChange = useStyleChangeCallback();
+  const font = styles.get(import_editor.DefaultFontStyle);
+  const align = styles.get(import_editor.DefaultHorizontalAlignStyle);
+  const verticalAlign = styles.get(import_editor.DefaultVerticalAlignStyle);
+  if (font === void 0 && align === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", "aria-label": "style panel text", children: [
+    font === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ButtonPicker.ButtonPicker,
+      {
+        title: msg("style-panel.font"),
+        uiType: "font",
+        style: import_editor.DefaultFontStyle,
+        items: import_styles.STYLES.font,
+        value: font,
+        onValueChange: handleValueChange
+      }
+    ),
+    align === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ButtonPicker.ButtonPicker,
+        {
+          title: msg("style-panel.align"),
+          uiType: "align",
+          style: import_editor.DefaultHorizontalAlignStyle,
+          items: import_styles.STYLES.horizontalAlign,
+          value: align,
+          onValueChange: handleValueChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-style-panel__row__extra-button", children: verticalAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.Button,
+        {
+          type: "icon",
+          title: msg("style-panel.vertical-align"),
+          "data-testid": "vertical-align",
+          icon: "vertical-align-center",
+          disabled: true
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DropdownPicker.DropdownPicker,
+        {
+          type: "icon",
+          id: "geo-vertical-alignment",
+          uiType: "verticalAlign",
+          style: import_editor.DefaultVerticalAlignStyle,
+          items: import_styles.STYLES.verticalAlign,
+          value: verticalAlign,
+          onValueChange: handleValueChange
+        }
+      ) })
+    ] })
+  ] });
+}
+function GeoStylePickerSet({ styles }) {
+  const handleValueChange = useStyleChangeCallback();
+  const geo = styles.get(import_editor.GeoShapeGeoStyle);
+  if (geo === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DropdownPicker.DropdownPicker,
+    {
+      id: "geo",
+      type: "menu",
+      label: "style-panel.geo",
+      uiType: "geo",
+      style: import_editor.GeoShapeGeoStyle,
+      items: import_styles.STYLES.geo,
+      value: geo,
+      onValueChange: handleValueChange
+    }
+  );
+}
+function SplineStylePickerSet({ styles }) {
+  const handleValueChange = useStyleChangeCallback();
+  const spline = styles.get(import_editor.LineShapeSplineStyle);
+  if (spline === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DropdownPicker.DropdownPicker,
+    {
+      id: "spline",
+      type: "menu",
+      label: "style-panel.spline",
+      uiType: "spline",
+      style: import_editor.LineShapeSplineStyle,
+      items: import_styles.STYLES.spline,
+      value: spline,
+      onValueChange: handleValueChange
+    }
+  );
+}
+function ArrowheadStylePickerSet({ styles }) {
+  const handleValueChange = useStyleChangeCallback();
+  const arrowheadEnd = styles.get(import_editor.ArrowShapeArrowheadEndStyle);
+  const arrowheadStart = styles.get(import_editor.ArrowShapeArrowheadStartStyle);
+  if (!arrowheadEnd || !arrowheadStart) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DoubleDropdownPicker.DoubleDropdownPicker,
+    {
+      label: "style-panel.arrowheads",
+      uiTypeA: "arrowheadStart",
+      styleA: import_editor.ArrowShapeArrowheadStartStyle,
+      itemsA: import_styles.STYLES.arrowheadStart,
+      valueA: arrowheadStart,
+      uiTypeB: "arrowheadEnd",
+      styleB: import_editor.ArrowShapeArrowheadEndStyle,
+      itemsB: import_styles.STYLES.arrowheadEnd,
+      valueB: arrowheadEnd,
+      onValueChange: handleValueChange,
+      labelA: "style-panel.arrowhead-start",
+      labelB: "style-panel.arrowhead-end"
+    }
+  );
+}
+//# sourceMappingURL=StylePanel.js.map

package/dist-cjs/lib/ui/components/StylePanel/StylePanel.js.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", "React"]
+}

package/dist-cjs/lib/ui/components/StylePanel/styles.js

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  STYLES: () => STYLES
+});
+module.exports = __toCommonJS(styles_exports);
+const STYLES = {
+  color: [
+    { value: "black", icon: "color" },
+    { value: "grey", icon: "color" },
+    { value: "light-violet", icon: "color" },
+    { value: "violet", icon: "color" },
+    { value: "blue", icon: "color" },
+    { value: "light-blue", icon: "color" },
+    { value: "yellow", icon: "color" },
+    { value: "orange", icon: "color" },
+    { value: "green", icon: "color" },
+    { value: "light-green", icon: "color" },
+    { value: "light-red", icon: "color" },
+    { value: "red", icon: "color" }
+  ],
+  fill: [
+    { value: "none", icon: "fill-none" },
+    { value: "semi", icon: "fill-semi" },
+    { value: "solid", icon: "fill-solid" },
+    { value: "pattern", icon: "fill-pattern" }
+  ],
+  dash: [
+    { value: "draw", icon: "dash-draw" },
+    { value: "dashed", icon: "dash-dashed" },
+    { value: "dotted", icon: "dash-dotted" },
+    { value: "solid", icon: "dash-solid" }
+  ],
+  size: [
+    { value: "s", icon: "size-small" },
+    { value: "m", icon: "size-medium" },
+    { value: "l", icon: "size-large" },
+    { value: "xl", icon: "size-extra-large" }
+  ],
+  font: [
+    { value: "draw", icon: "font-draw" },
+    { value: "sans", icon: "font-sans" },
+    { value: "serif", icon: "font-serif" },
+    { value: "mono", icon: "font-mono" }
+  ],
+  horizontalAlign: [
+    { value: "start", icon: "text-align-left" },
+    { value: "middle", icon: "text-align-center" },
+    { value: "end", icon: "text-align-right" }
+  ],
+  verticalAlign: [
+    { value: "start", icon: "vertical-align-start" },
+    { value: "middle", icon: "vertical-align-center" },
+    { value: "end", icon: "vertical-align-end" }
+  ],
+  geo: [
+    { value: "rectangle", icon: "geo-rectangle" },
+    { value: "ellipse", icon: "geo-ellipse" },
+    { value: "cloud", icon: "geo-cloud" },
+    { value: "triangle", icon: "geo-triangle" },
+    { value: "diamond", icon: "geo-diamond" },
+    { value: "pentagon", icon: "geo-pentagon" },
+    { value: "hexagon", icon: "geo-hexagon" },
+    { value: "octagon", icon: "geo-octagon" },
+    { value: "star", icon: "geo-star" },
+    { value: "rhombus", icon: "geo-rhombus" },
+    { value: "rhombus-2", icon: "geo-rhombus-2" },
+    { value: "oval", icon: "geo-oval" },
+    { value: "trapezoid", icon: "geo-trapezoid" },
+    { value: "arrow-right", icon: "geo-arrow-right" },
+    { value: "arrow-left", icon: "geo-arrow-left" },
+    { value: "arrow-up", icon: "geo-arrow-up" },
+    { value: "arrow-down", icon: "geo-arrow-down" },
+    { value: "x-box", icon: "geo-x-box" },
+    { value: "check-box", icon: "geo-check-box" }
+  ],
+  arrowheadStart: [
+    { value: "none", icon: "arrowhead-none" },
+    { value: "arrow", icon: "arrowhead-arrow" },
+    { value: "triangle", icon: "arrowhead-triangle" },
+    { value: "square", icon: "arrowhead-square" },
+    { value: "dot", icon: "arrowhead-dot" },
+    { value: "diamond", icon: "arrowhead-diamond" },
+    { value: "inverted", icon: "arrowhead-triangle-inverted" },
+    { value: "bar", icon: "arrowhead-bar" }
+  ],
+  arrowheadEnd: [
+    { value: "none", icon: "arrowhead-none" },
+    { value: "arrow", icon: "arrowhead-arrow" },
+    { value: "triangle", icon: "arrowhead-triangle" },
+    { value: "square", icon: "arrowhead-square" },
+    { value: "dot", icon: "arrowhead-dot" },
+    { value: "diamond", icon: "arrowhead-diamond" },
+    { value: "inverted", icon: "arrowhead-triangle-inverted" },
+    { value: "bar", icon: "arrowhead-bar" }
+  ],
+  spline: [
+    { value: "line", icon: "spline-line" },
+    { value: "cubic", icon: "spline-cubic" }
+  ]
+};
+//# sourceMappingURL=styles.js.map

package/dist-cjs/lib/ui/components/StylePanel/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/styles.tsx"],
+  "sourcesContent": ["export type StyleValuesForUi<T> = readonly {\n\treadonly value: T\n\treadonly icon: string\n}[]\n\nexport const STYLES = {\n\tcolor: [\n\t\t{ value: 'black', icon: 'color' },\n\t\t{ value: 'grey', icon: 'color' },\n\t\t{ value: 'light-violet', icon: 'color' },\n\t\t{ value: 'violet', icon: 'color' },\n\t\t{ value: 'blue', icon: 'color' },\n\t\t{ value: 'light-blue', icon: 'color' },\n\t\t{ value: 'yellow', icon: 'color' },\n\t\t{ value: 'orange', icon: 'color' },\n\t\t{ value: 'green', icon: 'color' },\n\t\t{ value: 'light-green', icon: 'color' },\n\t\t{ value: 'light-red', icon: 'color' },\n\t\t{ value: 'red', icon: 'color' },\n\t],\n\tfill: [\n\t\t{ value: 'none', icon: 'fill-none' },\n\t\t{ value: 'semi', icon: 'fill-semi' },\n\t\t{ value: 'solid', icon: 'fill-solid' },\n\t\t{ value: 'pattern', icon: 'fill-pattern' },\n\t],\n\tdash: [\n\t\t{ value: 'draw', icon: 'dash-draw' },\n\t\t{ value: 'dashed', icon: 'dash-dashed' },\n\t\t{ value: 'dotted', icon: 'dash-dotted' },\n\t\t{ value: 'solid', icon: 'dash-solid' },\n\t],\n\tsize: [\n\t\t{ value: 's', icon: 'size-small' },\n\t\t{ value: 'm', icon: 'size-medium' },\n\t\t{ value: 'l', icon: 'size-large' },\n\t\t{ value: 'xl', icon: 'size-extra-large' },\n\t],\n\tfont: [\n\t\t{ value: 'draw', icon: 'font-draw' },\n\t\t{ value: 'sans', icon: 'font-sans' },\n\t\t{ value: 'serif', icon: 'font-serif' },\n\t\t{ value: 'mono', icon: 'font-mono' },\n\t],\n\thorizontalAlign: [\n\t\t{ value: 'start', icon: 'text-align-left' },\n\t\t{ value: 'middle', icon: 'text-align-center' },\n\t\t{ value: 'end', icon: 'text-align-right' },\n\t],\n\tverticalAlign: [\n\t\t{ value: 'start', icon: 'vertical-align-start' },\n\t\t{ value: 'middle', icon: 'vertical-align-center' },\n\t\t{ value: 'end', icon: 'vertical-align-end' },\n\t],\n\tgeo: [\n\t\t{ value: 'rectangle', icon: 'geo-rectangle' },\n\t\t{ value: 'ellipse', icon: 'geo-ellipse' },\n\t\t{ value: 'cloud', icon: 'geo-cloud' },\n\t\t{ value: 'triangle', icon: 'geo-triangle' },\n\t\t{ value: 'diamond', icon: 'geo-diamond' },\n\t\t{ value: 'pentagon', icon: 'geo-pentagon' },\n\t\t{ value: 'hexagon', icon: 'geo-hexagon' },\n\t\t{ value: 'octagon', icon: 'geo-octagon' },\n\t\t{ value: 'star', icon: 'geo-star' },\n\t\t{ value: 'rhombus', icon: 'geo-rhombus' },\n\t\t{ value: 'rhombus-2', icon: 'geo-rhombus-2' },\n\t\t{ value: 'oval', icon: 'geo-oval' },\n\t\t{ value: 'trapezoid', icon: 'geo-trapezoid' },\n\t\t{ value: 'arrow-right', icon: 'geo-arrow-right' },\n\t\t{ value: 'arrow-left', icon: 'geo-arrow-left' },\n\t\t{ value: 'arrow-up', icon: 'geo-arrow-up' },\n\t\t{ value: 'arrow-down', icon: 'geo-arrow-down' },\n\t\t{ value: 'x-box', icon: 'geo-x-box' },\n\t\t{ value: 'check-box', icon: 'geo-check-box' },\n\t],\n\tarrowheadStart: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tarrowheadEnd: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tspline: [\n\t\t{ value: 'line', icon: 'spline-line' },\n\t\t{ value: 'cubic', icon: 'spline-cubic' },\n\t],\n} as const satisfies Record<string, StyleValuesForUi<string>>\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/lib/ui/components/Toasts.js

@@ -0,0 +1,101 @@
+"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 Toasts_exports = {};
+__export(Toasts_exports, {
+  ToastViewport: () => ToastViewport,
+  Toasts: () => Toasts
+});
+module.exports = __toCommonJS(Toasts_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var T = __toESM(require("@radix-ui/react-toast"));
+var React = __toESM(require("react"));
+var import_useToastsProvider = require("../hooks/useToastsProvider");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var import_Icon = require("./primitives/Icon");
+function Toast({ toast }) {
+  const { removeToast } = (0, import_useToastsProvider.useToasts)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const onOpenChange = (isOpen) => {
+    if (!isOpen) {
+      removeToast(toast.id);
+    }
+  };
+  const hasActions = toast.actions && toast.actions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    T.Root,
+    {
+      onOpenChange,
+      className: "tlui-toast__container",
+      duration: toast.keepOpen ? Infinity : 5e3,
+      children: [
+        toast.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: toast.icon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toast__main", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toast__content", children: [
+            toast.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(T.Title, { className: "tlui-toast__title", children: toast.title }),
+            toast.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(T.Description, { className: "tlui-toast__description", children: toast.description })
+          ] }),
+          toast.actions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toast__actions", children: [
+            toast.actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(T.Action, { altText: action.label, asChild: true, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: action.type, children: action.label }) }, i)),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(T.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "normal", className: "tlui-toast__close", style: { marginLeft: "auto" }, children: toast.closeLabel ?? msg("toast.close") }) })
+          ] })
+        ] }),
+        !hasActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(T.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "normal", className: "tlui-toast__close", children: toast.closeLabel ?? msg("toast.close") }) })
+      ]
+    }
+  );
+}
+function _Toasts() {
+  const { toasts } = (0, import_useToastsProvider.useToasts)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toast, { toast }, toast.id)) });
+}
+const Toasts = React.memo(_Toasts);
+function ToastViewport() {
+  const { toasts } = (0, import_useToastsProvider.useToasts)();
+  const [hasToasts, setHasToasts] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    if (toasts.length) {
+      setHasToasts(true);
+    } else {
+      setTimeout(() => {
+        if (!cancelled) {
+          setHasToasts(false);
+        }
+      }, 1e3);
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [toasts.length, setHasToasts]);
+  if (!hasToasts)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(T.ToastViewport, { className: "tlui-toast__viewport" });
+}
+//# sourceMappingURL=Toasts.js.map

package/dist-cjs/lib/ui/components/Toasts.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Toasts.tsx"],
+  "sourcesContent": ["import * as T from '@radix-ui/react-toast'\nimport * as React from 'react'\nimport { TLUiToast, useToasts } from '../hooks/useToastsProvider'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\n\nfunction Toast({ toast }: { toast: TLUiToast }) {\n\tconst { removeToast } = useToasts()\n\tconst msg = useTranslation()\n\n\tconst onOpenChange = (isOpen: boolean) => {\n\t\tif (!isOpen) {\n\t\t\tremoveToast(toast.id)\n\t\t}\n\t}\n\n\tconst hasActions = toast.actions && toast.actions.length > 0\n\n\treturn (\n\t\t<T.Root\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tclassName=\"tlui-toast__container\"\n\t\t\tduration={toast.keepOpen ? Infinity : 5000}\n\t\t>\n\t\t\t{toast.icon && (\n\t\t\t\t<div className=\"tlui-toast__icon\">\n\t\t\t\t\t<Icon icon={toast.icon as TLUiIconType} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"tlui-toast__main\">\n\t\t\t\t<div className=\"tlui-toast__content\">\n\t\t\t\t\t{toast.title && <T.Title className=\"tlui-toast__title\">{toast.title}</T.Title>}\n\t\t\t\t\t{toast.description && (\n\t\t\t\t\t\t<T.Description className=\"tlui-toast__description\">{toast.description}</T.Description>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{toast.actions && (\n\t\t\t\t\t<div className=\"tlui-toast__actions\">\n\t\t\t\t\t\t{toast.actions.map((action, i) => (\n\t\t\t\t\t\t\t<T.Action key={i} altText={action.label} asChild onClick={action.onClick}>\n\t\t\t\t\t\t\t\t<Button type={action.type}>{action.label}</Button>\n\t\t\t\t\t\t\t</T.Action>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<T.Close asChild>\n\t\t\t\t\t\t\t<Button type=\"normal\" className=\"tlui-toast__close\" style={{ marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{toast.closeLabel ?? msg('toast.close')}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</T.Close>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!hasActions && (\n\t\t\t\t<T.Close asChild>\n\t\t\t\t\t<Button type=\"normal\" className=\"tlui-toast__close\">\n\t\t\t\t\t\t{toast.closeLabel ?? msg('toast.close')}\n\t\t\t\t\t</Button>\n\t\t\t\t</T.Close>\n\t\t\t)}\n\t\t</T.Root>\n\t)\n}\n\nfunction _Toasts() {\n\tconst { toasts } = useToasts()\n\n\treturn (\n\t\t<>\n\t\t\t{toasts.map((toast) => (\n\t\t\t\t<Toast key={toast.id} toast={toast} />\n\t\t\t))}\n\t\t</>\n\t)\n}\n\nexport const Toasts = React.memo(_Toasts)\n\nexport function ToastViewport() {\n\tconst { toasts } = useToasts()\n\n\tconst [hasToasts, setHasToasts] = React.useState(false)\n\n\tReact.useEffect(() => {\n\t\tlet cancelled = false\n\t\tif (toasts.length) {\n\t\t\tsetHasToasts(true)\n\t\t} else {\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (!cancelled) {\n\t\t\t\t\tsetHasToasts(false)\n\t\t\t\t}\n\t\t\t}, 1000)\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelled = true\n\t\t}\n\t}, [toasts.length, setHasToasts])\n\n\tif (!hasToasts) return null\n\n\treturn <T.ToastViewport className=\"tlui-toast__viewport\" />\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BK;AA5BL,QAAmB;AACnB,YAAuB;AACvB,+BAAqC;AACrC,4BAA+B;AAE/B,oBAAuB;AACvB,kBAAqB;AAErB,SAAS,MAAM,EAAE,MAAM,GAAyB;AAC/C,QAAM,EAAE,YAAY,QAAI,oCAAU;AAClC,QAAM,UAAM,sCAAe;AAE3B,QAAM,eAAe,CAAC,WAAoB;AACzC,QAAI,CAAC,QAAQ;AACZ,kBAAY,MAAM,EAAE;AAAA,IACrB;AAAA,EACD;AAEA,QAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,SAAS;AAE3D,SACC;AAAA,IAAC,EAAE;AAAA,IAAF;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM,WAAW,WAAW;AAAA,MAErC;AAAA,cAAM,QACN,4CAAC,SAAI,WAAU,oBACd,sDAAC,oBAAK,MAAM,MAAM,MAAsB,GACzC;AAAA,QAED,6CAAC,SAAI,WAAU,oBACd;AAAA,uDAAC,SAAI,WAAU,uBACb;AAAA,kBAAM,SAAS,4CAAC,EAAE,OAAF,EAAQ,WAAU,qBAAqB,gBAAM,OAAM;AAAA,YACnE,MAAM,eACN,4CAAC,EAAE,aAAF,EAAc,WAAU,2BAA2B,gBAAM,aAAY;AAAA,aAExE;AAAA,UACC,MAAM,WACN,6CAAC,SAAI,WAAU,uBACb;AAAA,kBAAM,QAAQ,IAAI,CAAC,QAAQ,MAC3B,4CAAC,EAAE,QAAF,EAAiB,SAAS,OAAO,OAAO,SAAO,MAAC,SAAS,OAAO,SAChE,sDAAC,wBAAO,MAAM,OAAO,MAAO,iBAAO,OAAM,KAD3B,CAEf,CACA;AAAA,YACD,4CAAC,EAAE,OAAF,EAAQ,SAAO,MACf,sDAAC,wBAAO,MAAK,UAAS,WAAU,qBAAoB,OAAO,EAAE,YAAY,OAAO,GAC9E,gBAAM,cAAc,IAAI,aAAa,GACvC,GACD;AAAA,aACD;AAAA,WAEF;AAAA,QACC,CAAC,cACD,4CAAC,EAAE,OAAF,EAAQ,SAAO,MACf,sDAAC,wBAAO,MAAK,UAAS,WAAU,qBAC9B,gBAAM,cAAc,IAAI,aAAa,GACvC,GACD;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,UAAU;AAClB,QAAM,EAAE,OAAO,QAAI,oCAAU;AAE7B,SACC,2EACE,iBAAO,IAAI,CAAC,UACZ,4CAAC,SAAqB,SAAV,MAAM,EAAkB,CACpC,GACF;AAEF;AAEO,MAAM,SAAS,MAAM,KAAK,OAAO;AAEjC,SAAS,gBAAgB;AAC/B,QAAM,EAAE,OAAO,QAAI,oCAAU;AAE7B,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,UAAU,MAAM;AACrB,QAAI,YAAY;AAChB,QAAI,OAAO,QAAQ;AAClB,mBAAa,IAAI;AAAA,IAClB,OAAO;AACN,iBAAW,MAAM;AAChB,YAAI,CAAC,WAAW;AACf,uBAAa,KAAK;AAAA,QACnB;AAAA,MACD,GAAG,GAAI;AAAA,IACR;AAEA,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAC,OAAO,QAAQ,YAAY,CAAC;AAEhC,MAAI,CAAC;AAAW,WAAO;AAEvB,SAAO,4CAAC,EAAE,eAAF,EAAgB,WAAU,wBAAuB;AAC1D;",
+  "names": []
+}