@atlaskit/editor-toolbar 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-toolbar
 
+## 0.0.5
+
+### Patch Changes
+
+- [#192090](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192090)
+  [`d1a5fb90b8bfd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d1a5fb90b8bfd) -
+  Add editor-plugin-toolbar package, which stores toolbar components and provides an api to register
+  them, using editor-toolbar-model libary as state manager. This plugin also renders a new selection
+  toolbar based on the new components.
+
 ## 0.0.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -0,0 +1,54 @@
+{
+	"extends": "../../../../tsconfig.entry-points.confluence.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"composite": true,
+		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-toolbar",
+		"rootDir": "../"
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/badge/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popup/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
+		}
+	]
+}

package/afm-jira/tsconfig.json

@@ -0,0 +1,54 @@
+{
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__editor-toolbar/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/badge/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon-lab/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popup/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-jira/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -0,0 +1,54 @@
+{
+	"extends": "../../../../tsconfig.entry-points.post-office.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../post-office/tsDist/@atlaskit__editor-toolbar/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/badge/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon-lab/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popup/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-post-office/tsconfig.json"
+		}
+	]
+}

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "paths": {}
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/dist/cjs/index.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AIAdjustLengthIcon", {
+  enumerable: true,
+  get: function get() {
+    return _AIAdjustLengthIcon.AIAdjustLengthIcon;
+  }
+});
+Object.defineProperty(exports, "AIChatIcon", {
+  enumerable: true,
+  get: function get() {
+    return _AIChatIcon.AIChatIcon;
+  }
+});
+Object.defineProperty(exports, "AICommandIcon", {
+  enumerable: true,
+  get: function get() {
+    return _AICommandIcon.AICommandIcon;
+  }
+});
+Object.defineProperty(exports, "AddIcon", {
+  enumerable: true,
+  get: function get() {
+    return _AddIcon.AddIcon;
+  }
+});
+Object.defineProperty(exports, "AppsIcon", {
+  enumerable: true,
+  get: function get() {
+    return _AppsIcon.AppsIcon;
+  }
+});
+Object.defineProperty(exports, "BoldIcon", {
+  enumerable: true,
+  get: function get() {
+    return _BoldIcon.BoldIcon;
+  }
+});
+Object.defineProperty(exports, "CommentIcon", {
+  enumerable: true,
+  get: function get() {
+    return _CommentIcon.CommentIcon;
+  }
+});
+Object.defineProperty(exports, "HeadingFiveIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingFiveIcon.HeadingFiveIcon;
+  }
+});
+Object.defineProperty(exports, "HeadingFourIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingFourIcon.HeadingFourIcon;
+  }
+});
+Object.defineProperty(exports, "HeadingOneIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingOneIcon.HeadingOneIcon;
+  }
+});
+Object.defineProperty(exports, "HeadingSixIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingSixIcon.HeadingSixIcon;
+  }
+});
+Object.defineProperty(exports, "HeadingThreeIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingThreeIcon.HeadingThreeIcon;
+  }
+});
+Object.defineProperty(exports, "HeadingTwoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _HeadingTwoIcon.HeadingTwoIcon;
+  }
+});
+Object.defineProperty(exports, "ItalicIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ItalicIcon.ItalicIcon;
+  }
+});
+Object.defineProperty(exports, "LinkIcon", {
+  enumerable: true,
+  get: function get() {
+    return _LinkIcon.LinkIcon;
+  }
+});
+Object.defineProperty(exports, "ListBulletedIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ListBulletedIcon.ListBulletedIcon;
+  }
+});
+Object.defineProperty(exports, "ListNumberedIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ListNumberedIcon.ListNumberedIcon;
+  }
+});
+Object.defineProperty(exports, "MoreItemsIcon", {
+  enumerable: true,
+  get: function get() {
+    return _MoreItemsIcon.MoreItemsIcon;
+  }
+});
+Object.defineProperty(exports, "PinIcon", {
+  enumerable: true,
+  get: function get() {
+    return _PinIcon.PinIcon;
+  }
+});
+Object.defineProperty(exports, "PinnedIcon", {
+  enumerable: true,
+  get: function get() {
+    return _PinnedIcon.PinnedIcon;
+  }
+});
+Object.defineProperty(exports, "QuoteIcon", {
+  enumerable: true,
+  get: function get() {
+    return _QuoteIcon.QuoteIcon;
+  }
+});
+Object.defineProperty(exports, "TextColorIcon", {
+  enumerable: true,
+  get: function get() {
+    return _TextColorIcon.TextColorIcon;
+  }
+});
+Object.defineProperty(exports, "TextIcon", {
+  enumerable: true,
+  get: function get() {
+    return _TextIcon.TextIcon;
+  }
+});
+Object.defineProperty(exports, "Toolbar", {
+  enumerable: true,
+  get: function get() {
+    return _Toolbar.Toolbar;
+  }
+});
+Object.defineProperty(exports, "ToolbarButton", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarButton.ToolbarButton;
+  }
+});
+Object.defineProperty(exports, "ToolbarButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarButtonGroup.ToolbarButtonGroup;
+  }
+});
+Object.defineProperty(exports, "ToolbarDropdownItem", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownItem.ToolbarDropdownItem;
+  }
+});
+Object.defineProperty(exports, "ToolbarDropdownItemSection", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownItemSection.ToolbarDropdownItemSection;
+  }
+});
+Object.defineProperty(exports, "ToolbarDropdownMenu", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownMenu.ToolbarDropdownMenu;
+  }
+});
+Object.defineProperty(exports, "ToolbarKeyboardShortcutHint", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarKeyboardShortcutHint.ToolbarKeyboardShortcutHint;
+  }
+});
+Object.defineProperty(exports, "ToolbarSection", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarSection.ToolbarSection;
+  }
+});
+Object.defineProperty(exports, "ToolbarTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarTooltip.ToolbarTooltip;
+  }
+});
+var _Toolbar = require("./ui/Toolbar");
+var _ToolbarButton = require("./ui/ToolbarButton");
+var _ToolbarButtonGroup = require("./ui/ToolbarButtonGroup");
+var _ToolbarDropdownMenu = require("./ui/ToolbarDropdownMenu");
+var _ToolbarDropdownItem = require("./ui/ToolbarDropdownItem");
+var _ToolbarDropdownItemSection = require("./ui/ToolbarDropdownItemSection");
+var _ToolbarKeyboardShortcutHint = require("./ui/ToolbarKeyboardShortcutHint");
+var _ToolbarSection = require("./ui/ToolbarSection");
+var _ToolbarTooltip = require("./ui/ToolbarTooltip");
+var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");
+var _AIChatIcon = require("./ui/icons/AIChatIcon");
+var _AICommandIcon = require("./ui/icons/AICommandIcon");
+var _AddIcon = require("./ui/icons/AddIcon");
+var _AppsIcon = require("./ui/icons/AppsIcon");
+var _BoldIcon = require("./ui/icons/BoldIcon");
+var _CommentIcon = require("./ui/icons/CommentIcon");
+var _HeadingFiveIcon = require("./ui/icons/HeadingFiveIcon");
+var _HeadingFourIcon = require("./ui/icons/HeadingFourIcon");
+var _HeadingOneIcon = require("./ui/icons/HeadingOneIcon");
+var _HeadingSixIcon = require("./ui/icons/HeadingSixIcon");
+var _HeadingThreeIcon = require("./ui/icons/HeadingThreeIcon");
+var _HeadingTwoIcon = require("./ui/icons/HeadingTwoIcon");
+var _ItalicIcon = require("./ui/icons/ItalicIcon");
+var _LinkIcon = require("./ui/icons/LinkIcon");
+var _ListBulletedIcon = require("./ui/icons/ListBulletedIcon");
+var _ListNumberedIcon = require("./ui/icons/ListNumberedIcon");
+var _MoreItemsIcon = require("./ui/icons/MoreItemsIcon");
+var _PinIcon = require("./ui/icons/PinIcon");
+var _PinnedIcon = require("./ui/icons/PinnedIcon");
+var _QuoteIcon = require("./ui/icons/QuoteIcon");
+var _TextColorIcon = require("./ui/icons/TextColorIcon");
+var _TextIcon = require("./ui/icons/TextIcon");

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/ColorIndicatorWrapper.compiled.css

@@ -0,0 +1,4 @@
+._1docjfq9{border-bottom-width:var(--ds-border-width-indicator,3px)}
+._1il9nqa1{border-bottom-style:solid}
+._1o3i7jlr{border-bottom-color:var(--ds-border-bold,#758195)}
+._4t3i7vkz{height:1pc}

package/dist/cjs/ui/ColorIndicatorWrapper.js

@@ -0,0 +1,26 @@
+/* ColorIndicatorWrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorIndicatorWrapper = void 0;
+require("./ColorIndicatorWrapper.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  indicator: "_4t3i7vkz _1o3i7jlr _1il9nqa1 _1docjfq9"
+};
+var ColorIndicatorWrapper = exports.ColorIndicatorWrapper = function ColorIndicatorWrapper(_ref) {
+  var color = _ref.color,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.indicator,
+    style: {
+      borderBottomColor: color
+    },
+    as: "span"
+  }, children);
+};

package/dist/cjs/ui/Toolbar.compiled.css

@@ -0,0 +1,8 @@
+
+._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1bsb184x{width:min-content}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1ylp{height:40px}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -0,0 +1,24 @@
+/* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = void 0;
+require("./Toolbar.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i1ylp _1bsb184x _1e0c1txw _4cvr1h6o"
+};
+var Toolbar = exports.Toolbar = function Toolbar(_ref) {
+  var children = _ref.children,
+    label = _ref.label;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.toolbar,
+    role: "toolbar",
+    "aria-label": label
+  }, children);
+};

package/dist/cjs/ui/ToolbarButton.compiled.css

@@ -0,0 +1,34 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}._13liidpf{border-top-left-radius:0}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1o0zidpf{border-bottom-right-radius:0}
+._1tkezwfg{min-height:2pc}
+._4cvr1h6o{align-items:center}
+._80om13gf{cursor:not-allowed}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._mrkbidpf{border-bottom-left-radius:0}
+._o5721q9c{white-space:nowrap}
+._qrwqidpf{border-top-right-radius:0}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}
+._1ah3idpf:focus-visible{outline-offset:0}
+._g0pbkb7n:focus-visible{z-index:1}
+._oh03h2mm:focus-visible{position:relative}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/cjs/ui/ToolbarButton.js

@@ -0,0 +1,65 @@
+/* ToolbarButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarButton = void 0;
+require("./ToolbarButton.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ICON_COLOR = {
+  default: "var(--ds-icon-subtle, #626F86)",
+  disabled: "var(--ds-icon-disabled, #091E424F)",
+  selected: "var(--ds-icon-selected, #0C66E4)"
+};
+var styles = {
+  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tkezwfg _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  enabled: "_irr3166n _1di61dty",
+  disabled: "_syaz1lh4 _80om13gf",
+  selected: "_bfhkfg4m _irr3i1yw _1di619ru",
+  groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
+  groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
+  groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
+};
+var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var IconComponent = _ref.icon,
+    label = _ref.label,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
+    ariaControls = _ref['aria-controls'],
+    dataDsLevel = _ref['data-ds--level'],
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    testId = _ref.testId,
+    groupLocation = _ref.groupLocation,
+    isDisabled = _ref.isDisabled,
+    ariaKeyshortcuts = _ref.ariaKeyshortcuts;
+  var iconColor = isDisabled ? ICON_COLOR.disabled : isSelected ? ICON_COLOR.selected : ICON_COLOR.default;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    ref: ref,
+    xcss: (0, _css.cx)(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
+    "aria-pressed": isSelected,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-controls": ariaControls,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    "data-ds--level": dataDsLevel,
+    onClick: onClick,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    testId: testId,
+    isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(IconComponent, {
+    label: label,
+    size: "medium",
+    color: iconColor
+  }), children);
+});

package/dist/cjs/ui/ToolbarButtonGroup.compiled.css

@@ -0,0 +1 @@
+._1e0c1txw{display:flex}

package/dist/cjs/ui/ToolbarButtonGroup.js

@@ -0,0 +1,21 @@
+/* ToolbarButtonGroup.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarButtonGroup = void 0;
+require("./ToolbarButtonGroup.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  container: "_1e0c1txw"
+};
+var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.container
+  }, children);
+};

package/dist/cjs/ui/ToolbarDivider.compiled.css

@@ -0,0 +1,6 @@
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1p3lnqa1{border-left-style:solid}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4t3i7vkz{height:1pc}
+._5wramuej{border-left-color:var(--ds-border,#091e4224)}
+._t6vde4h9{border-left-width:var(--ds-border-width,1px)}

package/dist/cjs/ui/ToolbarDivider.js

@@ -0,0 +1,20 @@
+/* ToolbarDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarDivider = void 0;
+require("./ToolbarDivider.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  divider: "_4t3i7vkz _5wramuej _1p3lnqa1 _t6vde4h9 _18u01b66 _2hwx1b66"
+};
+var ToolbarDivider = exports.ToolbarDivider = function ToolbarDivider() {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.divider
+  });
+};

package/dist/cjs/ui/ToolbarDropdownDivider.compiled.css

@@ -0,0 +1,3 @@
+._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
+._1il9nqa1{border-bottom-style:solid}
+._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}