@activecollab/components 2.0.451 → 2.0.453

package/dist/cjs/presentation/whiteboard/elements.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withOpacity = exports.stopClick = exports.stickyGradient = exports.snapValue = exports.shapeBorder = exports.renderShapeBody = exports.gridLevel = exports.defaultShapeState = exports.WHEEL_SIZE = exports.WHEEL_RADIUS = exports.ToolbarTextControls = exports.ToolbarColorSwatch = exports.ToolbarActions = exports.THICKNESS_OPTIONS = exports.StyledToolbarLink = exports.StyledToolbarButton = exports.StyledSwatchRow = exports.StyledSticky = exports.StyledHandles = exports.StyledFormattingToolbar = exports.StyledFontSizeValue = exports.StyledColorWheel = exports.StyledColorPopover = exports.StyledCanvasLayer = exports.StyledCanvasElement = exports.ShapeTypeMenu = exports.ShapeFormattingToolbar = exports.SUBMENU_SHADOW = exports.STYLE_OPTIONS = exports.STICKY_FILL = exports.SHAPE_TYPE_OPTIONS = exports.SHAPE_TYPE_ICON = exports.SELECTION_BLUE = exports.ResizeHandles = exports.RESIZE_DIRECTIONS = exports.RADIUS_OPTIONS = exports.PostitFormattingToolbar = exports.OPACITY_OPTIONS = exports.INITIAL_SHAPES = exports.INITIAL_POSITIONS = exports.GRID_LEVELS = exports.FONT_SIZE_OPTIONS = exports.ELEMENT_TEXT = exports.ELEMENT_STROKE = exports.ELEMENT_FILL = exports.ELEMENT_BODIES = exports.ColorWheel = exports.ColorSwatchRow = exports.COLOR_PALETTE = exports.COLOR_OPTIONS = exports.CANVAS_ELEMENTS = exports.BORDER_STYLE_OPTIONS = exports.AlignmentMenu = exports.ALIGN_OPTIONS = void 0;
+exports.withOpacity = exports.stopClick = exports.stickyGradient = exports.snapValue = exports.shapeBorder = exports.renderShapeBody = exports.gridLevel = exports.defaultShapeState = exports.ToolbarTextControls = exports.ToolbarFontSizeSelect = exports.ToolbarColorSwatch = exports.ToolbarActions = exports.THICKNESS_OPTIONS = exports.StyledToolbarLink = exports.StyledToolbarButton = exports.StyledSticky = exports.StyledHandles = exports.StyledFormattingToolbar = exports.StyledCanvasLayer = exports.StyledCanvasElement = exports.ShapeTypeMenu = exports.ShapeFormattingToolbar = exports.STYLE_OPTIONS = exports.STICKY_FILL = exports.SHAPE_TYPE_OPTIONS = exports.SHAPE_TYPE_ICON = exports.SELECTION_BLUE = exports.ResizeHandles = exports.RESIZE_DIRECTIONS = exports.RADIUS_OPTIONS = exports.PostitFormattingToolbar = exports.OPACITY_OPTIONS = exports.INITIAL_SHAPES = exports.INITIAL_POSITIONS = exports.GRID_LEVELS = exports.FONT_SIZE_OPTIONS = exports.ELEMENT_TEXT = exports.ELEMENT_STROKE = exports.ELEMENT_FILL = exports.ELEMENT_BODIES = exports.COLOR_OPTIONS = exports.CANVAS_ELEMENTS = exports.BORDER_STYLE_OPTIONS = exports.AlignmentMenu = exports.ALIGN_OPTIONS = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _glyphs = require("./glyphs");
 var _Dot = require("../../components/Dot");
 var _IconButton = require("../../components/IconButton");
 var _Icons = require("../../components/Icons");
 var _List = require("../../components/List");
 var _Menu = require("../../components/Menu");
+var _Select = require("../../components/Select");
+var _SelectTrigger = require("../../components/SelectTrigger");
 var _Tooltip = require("../../components/Tooltip");
 var _colors = require("../../utils/colors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,9 +42,6 @@ var ELEMENT_TEXT = exports.ELEMENT_TEXT = "#1f2937";
 var STICKY_FILL = exports.STICKY_FILL = "#fbbf24";
 var SELECTION_BLUE = exports.SELECTION_BLUE = "#3b82f6";
 
-/* COLOR_PALETTE from toolbar/colorPalette.js (submenu swatch rows) */
-var COLOR_PALETTE = exports.COLOR_PALETTE = ["#ffffff", "#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#f97316", "#06b6d4", "#84cc16", "#ec4899", "#6b7280"];
-
 /* Discrete option sets for the right Inspector — mirror the app's fixed
    font-size ladder and the border-thickness steps offered in the toolbar. */
 var FONT_SIZE_OPTIONS = exports.FONT_SIZE_OPTIONS = [10, 13, 16, 20, 24, 30, 36, 48, 72, 96, 144, 216, 288];
@@ -261,13 +259,17 @@ var ResizeHandles = exports.ResizeHandles = function ResizeHandles() {
 var StyledFormattingToolbar = exports.StyledFormattingToolbar = _styledComponents.default.div.withConfig({
   displayName: "elements__StyledFormattingToolbar",
   componentId: "sc-ohnju4-4"
-})(["position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:8px;border-radius:8px;background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);white-space:nowrap;cursor:auto;z-index:20;.tb-group{position:relative;display:flex;align-items:center;gap:4px;padding-right:8px;margin-right:8px;border-right:1px solid var(--border-primary);}.tb-rel{position:relative;display:inline-flex;}.divider{width:1px;height:20px;background-color:var(--border-primary);margin:0 4px;flex-shrink:0;}"]);
+})(["position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:8px;border-radius:8px;background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);white-space:nowrap;cursor:auto;z-index:20;.tb-group{position:relative;display:flex;align-items:center;gap:4px;padding-right:8px;margin-right:8px;border-right:1px solid var(--border-primary);}.tb-rel{position:relative;display:inline-flex;}.tb-color-value{display:inline-flex;align-items:center;justify-content:center;width:100%;}.divider{width:1px;height:20px;background-color:var(--border-primary);margin:0 4px;flex-shrink:0;}"]);
 
-/* Button variant="option" (idle) / "tertiary" (active), h-8 px-2 gap-1 */
+/* The app's toolbar buttons are DS `Button` / `IconButton` variant="option",
+   size small, h-8 px-2: grey text (theme-700) that darkens on hover over a
+   theme-300 wash, and the primary colour only for a PRESSED state (an armed
+   lock, an active text style). Same palette here, so the story's bars read as
+   the app's and not as a row of links. */
 var StyledToolbarButton = exports.StyledToolbarButton = _styledComponents.default.button.withConfig({
   displayName: "elements__StyledToolbarButton",
   componentId: "sc-ohnju4-5"
-})(["display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;box-sizing:border-box;padding:0 8px;border:0;border-radius:8px;background-color:transparent;color:var(--color-secondary);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;font-size:14px;cursor:pointer;&:hover{background-color:var(--color-theme-200);}&.active{background-color:var(--color-theme-300);}&.icon-only{width:32px;padding:0;}&:disabled{opacity:0.45;cursor:default;&:hover{background-color:transparent;}}svg{fill:currentColor;flex-shrink:0;}svg.i16{width:16px;height:16px;}svg.i12{width:12px;height:12px;}"]);
+})(["display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;box-sizing:border-box;padding:0 8px;border:0;border-radius:var(--ac-br-6);background-color:transparent;color:var(--color-theme-700);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;font-size:14px;font-weight:500;cursor:pointer;&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&.active,&.active:hover{color:var(--color-primary);}&.icon-only{width:32px;padding:0;}&:disabled{opacity:0.45;cursor:default;&:hover{background-color:transparent;}}svg{fill:currentColor;flex-shrink:0;}svg.i16{width:16px;height:16px;}svg.i12{width:12px;height:12px;}"]);
 
 /* Same chrome as a toolbar button, but an <a> — used where the action is a real
    navigation (Visit). `withComponent` keeps the styles and swaps the element, so
@@ -276,101 +278,29 @@ var StyledToolbarLink = exports.StyledToolbarLink = (0, _styledComponents.defaul
   displayName: "elements__StyledToolbarLink",
   componentId: "sc-ohnju4-6"
 })(["text-decoration:none;"]);
-
-/* font-mono min-w-[24px] text-xs readout between the stepper buttons */
-var StyledFontSizeValue = exports.StyledFontSizeValue = _styledComponents.default.span.withConfig({
-  displayName: "elements__StyledFontSizeValue",
-  componentId: "sc-ohnju4-7"
-})(["min-width:24px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--color-secondary);"]);
 var stopClick = exports.stopClick = function stopClick(event) {
   return event.stopPropagation();
 };
 
-/* Shared drop shadow for the colour swatch popover / colour wheel that the
-   compact toolbar swatch trigger opens. */
-var SUBMENU_SHADOW = exports.SUBMENU_SHADOW = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
-
-/* ColorWheelPopover: beside the submenu (SHAPE_POPOVER_CLASS) or below
-   a toolbar trigger (sticky default class) */
-var StyledColorPopover = exports.StyledColorPopover = _styledComponents.default.div.withConfig({
-  displayName: "elements__StyledColorPopover",
-  componentId: "sc-ohnju4-8"
-})(["position:absolute;box-sizing:border-box;padding:12px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);border-radius:8px;box-shadow:", ";z-index:70;cursor:auto;&.beside{top:0;left:100%;margin-left:8px;}&.below{top:40px;left:0;}"], SUBMENU_SHADOW);
-
-/* ImprovedColorWheel: hue = angle from east (atan2), saturation = distance,
-   lightness 50 — the canvas wheel replicated with CSS gradients */
-var WHEEL_SIZE = exports.WHEEL_SIZE = 200;
-var WHEEL_RADIUS = exports.WHEEL_RADIUS = WHEEL_SIZE / 2 - 5;
-var StyledColorWheel = exports.StyledColorWheel = _styledComponents.default.button.withConfig({
-  displayName: "elements__StyledColorWheel",
-  componentId: "sc-ohnju4-9"
-})(["display:block;width:", "px;height:", "px;padding:0;border:0;border-radius:50%;cursor:crosshair;box-shadow:", ";background:radial-gradient( circle closest-side,#ffffff,rgba(255,255,255,0) ),conic-gradient( from 90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000 );"], WHEEL_SIZE, WHEEL_SIZE, SUBMENU_SHADOW);
-var ColorWheel = exports.ColorWheel = function ColorWheel(_ref) {
-  var onColorChange = _ref.onColorChange;
-  return /*#__PURE__*/_react.default.createElement(StyledColorWheel, {
-    onClick: function onClick(event) {
-      var rect = event.currentTarget.getBoundingClientRect();
-      var dx = event.clientX - rect.left - WHEEL_SIZE / 2;
-      var dy = event.clientY - rect.top - WHEEL_SIZE / 2;
-      var distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance > WHEEL_RADIUS) {
-        return;
-      }
-      var angle = Math.atan2(dy, dx);
-      if (angle < 0) {
-        angle += 2 * Math.PI;
-      }
-      var hue = Math.round(angle * 180 / Math.PI);
-      var saturation = Math.round(Math.min(100, distance / WHEEL_RADIUS * 100));
-      onColorChange("hsl(".concat(hue, ", ").concat(saturation, "%, 50%)"));
-    }
-  });
-};
+/* The trigger widths the app gives its toolbar selects: `tw-w-20` for the font
+   size ("16 pt"), `tw-w-16 tw-px-2` for the swatch-only colour trigger. */
+var TOOLBAR_SELECT_WIDTH = 80;
+var TOOLBAR_COLOR_TRIGGER_WIDTH = 64;
 
-/* ColorSwatchRow.jsx: 32px swatches + a "+" that opens the color wheel */
-var StyledSwatchRow = exports.StyledSwatchRow = _styledComponents.default.div.withConfig({
-  displayName: "elements__StyledSwatchRow",
-  componentId: "sc-ohnju4-10"
-})(["display:flex;flex-wrap:wrap;gap:8px;.swatch{width:32px;height:32px;box-sizing:border-box;padding:0;border:2px solid var(--border-primary);border-radius:4px;cursor:pointer;&:hover{border-color:var(--color-theme-500);}&.selected{box-shadow:0 0 0 2px ", ";}}.swatch-add{display:flex;align-items:center;justify-content:center;background-color:var(--color-theme-200);color:var(--color-secondary);}"], SELECTION_BLUE);
-var ColorSwatchRow = exports.ColorSwatchRow = function ColorSwatchRow(_ref2) {
-  var selectedColor = _ref2.selectedColor,
-    includeTransparent = _ref2.includeTransparent,
-    onSelect = _ref2.onSelect,
-    onAddClick = _ref2.onAddClick;
-  return /*#__PURE__*/_react.default.createElement(StyledSwatchRow, null, includeTransparent ? /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: selectedColor === "transparent" ? "swatch swatch-add selected" : "swatch swatch-add",
-    "aria-label": "Transparent",
-    onClick: function onClick() {
-      return onSelect("transparent");
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
-    width: 20,
-    height: 20,
-    fill: "currentColor"
-  })) : null, COLOR_PALETTE.map(function (color) {
-    return /*#__PURE__*/_react.default.createElement("button", {
-      key: color,
-      type: "button",
-      className: selectedColor === color ? "swatch selected" : "swatch",
-      style: {
-        backgroundColor: color
-      },
-      onClick: function onClick() {
-        return onSelect(color);
-      }
-    });
-  }), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "swatch swatch-add",
-    onClick: onAddClick
-  }, /*#__PURE__*/_react.default.createElement(_glyphs.PlusGlyph, null)));
-};
+/* Hollow rounded rectangle, the app's own glyph for the "Rounded Rectangle"
+   shape option (its ShapeTypeMenu draws a bordered span, because the icon set
+   has one rectangle glyph and it is already taken by "Rectangle"). */
+var RoundedRectangleOutline = _styledComponents.default.span.withConfig({
+  displayName: "elements__RoundedRectangleOutline",
+  componentId: "sc-ohnju4-7"
+})(["display:block;width:16px;height:16px;box-sizing:border-box;border:1px solid currentColor;border-radius:4px;"]);
 var SHAPE_TYPE_ICON = exports.SHAPE_TYPE_ICON = {
-  rectangle: /*#__PURE__*/_react.default.createElement(_glyphs.SquareGlyph, null),
-  roundedRectangle: /*#__PURE__*/_react.default.createElement(_Icons.RoundedRectangleIcon, {
+  rectangle: /*#__PURE__*/_react.default.createElement(_Icons.RoundedRectangleIcon, {
     className: "i16"
   }),
+  roundedRectangle: /*#__PURE__*/_react.default.createElement(RoundedRectangleOutline, {
+    "aria-hidden": "true"
+  }),
   circle: /*#__PURE__*/_react.default.createElement(_Icons.CircleIcon, {
     className: "i16"
   }),
@@ -419,10 +349,10 @@ var BORDER_STYLE_OPTIONS = exports.BORDER_STYLE_OPTIONS = [{
    separator → Lock → Delete, in the standard control colour (not red). Mirrors
    app `toolbar/ToolbarActions.jsx`. */
 
-var ToolbarActions = exports.ToolbarActions = function ToolbarActions(_ref3) {
-  var locked = _ref3.locked,
-    onToggleLock = _ref3.onToggleLock,
-    onDelete = _ref3.onDelete;
+var ToolbarActions = exports.ToolbarActions = function ToolbarActions(_ref) {
+  var locked = _ref.locked,
+    onToggleLock = _ref.onToggleLock,
+    onDelete = _ref.onDelete;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "divider"
   }), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
@@ -447,9 +377,9 @@ var ToolbarActions = exports.ToolbarActions = function ToolbarActions(_ref3) {
    current shape, opening a dropdown of the four types. Modeled on the app's
    ShapeTypeMenu (DS Menu + List). */
 
-var ShapeTypeMenu = exports.ShapeTypeMenu = function ShapeTypeMenu(_ref4) {
-  var value = _ref4.value,
-    onChange = _ref4.onChange;
+var ShapeTypeMenu = exports.ShapeTypeMenu = function ShapeTypeMenu(_ref2) {
+  var value = _ref2.value,
+    onChange = _ref2.onChange;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -465,7 +395,7 @@ var ShapeTypeMenu = exports.ShapeTypeMenu = function ShapeTypeMenu(_ref4) {
     position: "bottom-start",
     target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
       type: "button",
-      variant: "text gray",
+      variant: "option",
       active: open,
       "aria-label": "Shape"
     }, SHAPE_TYPE_ICON[value])
@@ -490,11 +420,11 @@ var ShapeTypeMenu = exports.ShapeTypeMenu = function ShapeTypeMenu(_ref4) {
    compact-toolbar counterpart to the Inspector's expanded four-button row.
    Mirrors the app's AlignmentMenu. */
 
-var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref5) {
+var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref3) {
   var _ALIGN_OPTIONS$find;
-  var value = _ref5.value,
-    onChange = _ref5.onChange,
-    disabled = _ref5.disabled;
+  var value = _ref3.value,
+    onChange = _ref3.onChange,
+    disabled = _ref3.disabled;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     open = _useState4[0],
@@ -513,7 +443,7 @@ var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref5) {
     position: "bottom-start",
     target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
       type: "button",
-      variant: "text gray",
+      variant: "option",
       active: open,
       disabled: disabled,
       "aria-label": "Alignment"
@@ -535,71 +465,113 @@ var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref5) {
   })));
 };
 
-/* Compact swatch-only colour trigger: a single dot (or a CircleSlash chip when
-   transparent) that opens a swatch popover. The Inspector's ColorPickerField
-   keeps the swatch + name; the floating toolbars use this swatch-only variant.
-   `includeTransparent` is passed through to the swatch row — shape fill opts
-   in, sticky fill and text colour do not. */
-
-var ToolbarColorSwatch = exports.ToolbarColorSwatch = function ToolbarColorSwatch(_ref6) {
-  var value = _ref6.value,
-    includeTransparent = _ref6.includeTransparent,
-    label = _ref6.label,
-    onChange = _ref6.onChange;
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    wheelOpen = _useState8[0],
-    setWheelOpen = _useState8[1];
-  var isTransparent = value === "transparent";
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "tb-rel"
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    title: label
-  }, /*#__PURE__*/_react.default.createElement(StyledToolbarButton, {
-    className: open ? "icon-only active" : "icon-only",
-    "aria-label": label,
-    onClick: function onClick() {
-      setOpen(function (current) {
-        return !current;
-      });
-      setWheelOpen(false);
-    }
-  }, isTransparent ? /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
+/* The app's compact `ColorPicker`: a DS `Select` whose trigger is the swatch
+   alone (a Dot, or the CircleSlash chip when transparent) and whose menu is the
+   standard dot-and-name list — the same control the Inspector's colour field
+   uses, minus the name on the trigger. `includeTransparent` adds "Transparent"
+   first: shape fill opts in, sticky fill and text colour do not. */
+
+var TOOLBAR_TRANSPARENT_OPTION = {
+  id: "transparent",
+  name: "Transparent",
+  color: "transparent",
+  textColor: "transparent"
+};
+var sameHex = function sameHex(a, b) {
+  return a.toLowerCase() === b.toLowerCase();
+};
+var ColorDot = function ColorDot(_ref4) {
+  var color = _ref4.color;
+  return sameHex(color, "transparent") ? /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
     width: 16,
     height: 16,
     fill: "currentColor"
   }) : /*#__PURE__*/_react.default.createElement(_Dot.Dot, {
-    color: value,
+    color: color,
     size: 16
-  }))), open ? /*#__PURE__*/_react.default.createElement(StyledColorPopover, {
-    className: "below"
-  }, /*#__PURE__*/_react.default.createElement(ColorSwatchRow, {
-    selectedColor: value,
-    includeTransparent: includeTransparent,
-    onSelect: function onSelect(color) {
-      onChange(color);
-      setOpen(false);
+  });
+};
+var ToolbarColorSwatch = exports.ToolbarColorSwatch = function ToolbarColorSwatch(_ref5) {
+  var _options$find$id, _options$find;
+  var value = _ref5.value,
+    includeTransparent = _ref5.includeTransparent,
+    label = _ref5.label,
+    _onChange = _ref5.onChange;
+  var options = includeTransparent ? [TOOLBAR_TRANSPARENT_OPTION, ...COLOR_OPTIONS] : COLOR_OPTIONS;
+  var selected = (_options$find$id = (_options$find = options.find(function (option) {
+    return sameHex(option.id, value);
+  })) === null || _options$find === void 0 ? void 0 : _options$find.id) !== null && _options$find$id !== void 0 ? _options$find$id : value;
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: label
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "tb-rel"
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    keepSameOptionsOrder: true,
+    options: options,
+    selected: selected,
+    onChange: function onChange(next) {
+      return _onChange(String(Array.isArray(next) ? next[0] : next));
     },
-    onAddClick: function onAddClick() {
-      return setWheelOpen(function (current) {
-        return !current;
-      });
-    }
-  }), wheelOpen ? /*#__PURE__*/_react.default.createElement(StyledColorPopover, {
-    className: "beside"
-  }, /*#__PURE__*/_react.default.createElement(ColorWheel, {
-    onColorChange: function onColorChange(color) {
-      onChange(color);
-      setOpen(false);
-    }
-  })) : null) : null);
+    renderOption: function renderOption(option) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "tb-color-option"
+      }, /*#__PURE__*/_react.default.createElement(ColorDot, {
+        color: String(option.id)
+      }), option.name);
+    },
+    target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+      "aria-label": label,
+      style: {
+        width: TOOLBAR_COLOR_TRIGGER_WIDTH,
+        paddingLeft: 8,
+        paddingRight: 8
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "tb-color-value"
+    }, /*#__PURE__*/_react.default.createElement(ColorDot, {
+      color: value
+    })))
+  })));
+};
+
+/* The app's `ValuePicker` for the font size: a DS `Select` over the fixed size
+   ladder, its trigger reading "16 pt". */
+
+var ToolbarFontSizeSelect = exports.ToolbarFontSizeSelect = function ToolbarFontSizeSelect(_ref6) {
+  var value = _ref6.value,
+    _onChange2 = _ref6.onChange;
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: "Font Size"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "tb-rel"
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    keepSameOptionsOrder: true,
+    options: FONT_SIZE_OPTIONS.map(function (size) {
+      return {
+        id: size,
+        name: "".concat(size, " pt")
+      };
+    }),
+    selected: value,
+    onChange: function onChange(next) {
+      return _onChange2(Number(Array.isArray(next) ? next[0] : next));
+    },
+    target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+      "aria-label": "Font Size",
+      style: {
+        width: TOOLBAR_SELECT_WIDTH
+      }
+    }, value, " pt")
+  })));
 };
 
-/* The text controls shared by the shape and sticky toolbars: font-size stepper,
+/* The text controls shared by the shape and sticky toolbars: font-size select,
    B / I / U / S, and the collapsed alignment menu. Same set the app's sticky
    and shape toolbars share (font-size picker, TextStyleButtons, AlignmentMenu).
    Kept generic so both element shapes can drive it. */
@@ -611,27 +583,10 @@ var ToolbarTextControls = exports.ToolbarTextControls = function ToolbarTextCont
     onFontSize = _ref7.onFontSize,
     onToggleStyle = _ref7.onToggleStyle,
     onAlign = _ref7.onAlign;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    title: "Decrease font size"
-  }, /*#__PURE__*/_react.default.createElement(StyledToolbarButton, {
-    className: "icon-only",
-    "aria-label": "Decrease font size",
-    onClick: function onClick() {
-      return onFontSize(Math.max(8, fontSize - 2));
-    }
-  }, /*#__PURE__*/_react.default.createElement(_glyphs.MinusGlyph, {
-    className: "i16"
-  }))), /*#__PURE__*/_react.default.createElement(StyledFontSizeValue, null, fontSize), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    title: "Increase font size"
-  }, /*#__PURE__*/_react.default.createElement(StyledToolbarButton, {
-    className: "icon-only",
-    "aria-label": "Increase font size",
-    onClick: function onClick() {
-      return onFontSize(Math.min(96, fontSize + 2));
-    }
-  }, /*#__PURE__*/_react.default.createElement(_glyphs.PlusGlyph, {
-    className: "i16"
-  }))), STYLE_OPTIONS.map(function (option) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ToolbarFontSizeSelect, {
+    value: fontSize,
+    onChange: onFontSize
+  }), STYLE_OPTIONS.map(function (option) {
     return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       key: option.key,
       title: option.label
@@ -709,7 +664,7 @@ var ShapeFormattingToolbar = exports.ShapeFormattingToolbar = function ShapeForm
    Mirrors the app's PostitFormattingToolbar. */
 var PostitFormattingToolbar = exports.PostitFormattingToolbar = function PostitFormattingToolbar(_ref9) {
   var value = _ref9.value,
-    _onChange = _ref9.onChange,
+    _onChange3 = _ref9.onChange,
     onDelete = _ref9.onDelete,
     locked = _ref9.locked,
     onToggleLock = _ref9.onToggleLock;
@@ -720,7 +675,7 @@ var PostitFormattingToolbar = exports.PostitFormattingToolbar = function PostitF
     value: value.color,
     label: "Note color",
     onChange: function onChange(color) {
-      return _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      return _onChange3(_objectSpread(_objectSpread({}, value), {}, {
         color
       }));
     }
@@ -729,17 +684,17 @@ var PostitFormattingToolbar = exports.PostitFormattingToolbar = function PostitF
     styleFlags: value,
     align: value.align,
     onFontSize: function onFontSize(fontSize) {
-      return _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      return _onChange3(_objectSpread(_objectSpread({}, value), {}, {
         fontSize
       }));
     },
     onToggleStyle: function onToggleStyle(key) {
-      return _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      return _onChange3(_objectSpread(_objectSpread({}, value), {}, {
         [key]: !value[key]
       }));
     },
     onAlign: function onAlign(align) {
-      return _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      return _onChange3(_objectSpread(_objectSpread({}, value), {}, {
         align
       }));
     }