@atlaskit/editor-toolbar 0.0.8 → 0.0.10

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-toolbar
 
+## 0.0.10
+
+### Patch Changes
+
+- [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
+  [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
+  Add background colour to Toolbar component in editor-toolbar, add EditorToolbarProvider to the
+  selection Toolbar
+
+## 0.0.9
+
+### Patch Changes
+
+- [#195899](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195899)
+  [`345c0b6478f73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/345c0b6478f73) -
+  [ED-28682]
+
+  - Export more formatting icons
+  - Add optional position props to ToolbarTooltip dictating tooltip position
+  - Fix selected state for icon in ToolbarButton
+
 ## 0.0.8
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -93,6 +93,18 @@ Object.defineProperty(exports, "BoldIcon", {
     return _BoldIcon.BoldIcon;
   }
 });
+Object.defineProperty(exports, "ClearFormattingIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ClearFormattingIcon.ClearFormattingIcon;
+  }
+});
+Object.defineProperty(exports, "CodeIcon", {
+  enumerable: true,
+  get: function get() {
+    return _CodeIcon.CodeIcon;
+  }
+});
 Object.defineProperty(exports, "CommentIcon", {
   enumerable: true,
   get: function get() {
@@ -189,6 +201,24 @@ Object.defineProperty(exports, "QuoteIcon", {
     return _QuoteIcon.QuoteIcon;
   }
 });
+Object.defineProperty(exports, "StrikeThroughIcon", {
+  enumerable: true,
+  get: function get() {
+    return _StrikeThroughIcon.StrikeThroughIcon;
+  }
+});
+Object.defineProperty(exports, "SubscriptIcon", {
+  enumerable: true,
+  get: function get() {
+    return _SubscriptIcon.SubscriptIcon;
+  }
+});
+Object.defineProperty(exports, "SuperscriptIcon", {
+  enumerable: true,
+  get: function get() {
+    return _SuperscriptIcon.SuperscriptIcon;
+  }
+});
 Object.defineProperty(exports, "TextColorIcon", {
   enumerable: true,
   get: function get() {
@@ -219,6 +249,12 @@ Object.defineProperty(exports, "ToolbarButtonGroup", {
     return _ToolbarButtonGroup.ToolbarButtonGroup;
   }
 });
+Object.defineProperty(exports, "ToolbarDropdownDivider", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownDivider.ToolbarDropdownDivider;
+  }
+});
 Object.defineProperty(exports, "ToolbarDropdownItem", {
   enumerable: true,
   get: function get() {
@@ -261,6 +297,12 @@ Object.defineProperty(exports, "ToolbarTooltip", {
     return _ToolbarTooltip.ToolbarTooltip;
   }
 });
+Object.defineProperty(exports, "UnderlineIcon", {
+  enumerable: true,
+  get: function get() {
+    return _UnderlineIcon.UnderlineIcon;
+  }
+});
 var _Toolbar = require("./ui/Toolbar");
 var _ToolbarButton = require("./ui/ToolbarButton");
 var _ToolbarButtonGroup = require("./ui/ToolbarButtonGroup");
@@ -271,6 +313,7 @@ var _ToolbarKeyboardShortcutHint = require("./ui/ToolbarKeyboardShortcutHint");
 var _ToolbarSection = require("./ui/ToolbarSection");
 var _ToolbarTooltip = require("./ui/ToolbarTooltip");
 var _ToolbarNestedDropdownMenu = require("./ui/ToolbarNestedDropdownMenu");
+var _ToolbarDropdownDivider = require("./ui/ToolbarDropdownDivider");
 var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");
 var _AIChatIcon = require("./ui/icons/AIChatIcon");
 var _AIProfessionalIcon = require("./ui/icons/AIProfessionalIcon");
@@ -303,4 +346,10 @@ 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");
+var _TextIcon = require("./ui/icons/TextIcon");
+var _ClearFormattingIcon = require("./ui/icons/ClearFormattingIcon");
+var _UnderlineIcon = require("./ui/icons/UnderlineIcon");
+var _StrikeThroughIcon = require("./ui/icons/StrikeThroughIcon");
+var _CodeIcon = require("./ui/icons/CodeIcon");
+var _SubscriptIcon = require("./ui/icons/SubscriptIcon");
+var _SuperscriptIcon = require("./ui/icons/SuperscriptIcon");

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

@@ -5,4 +5,5 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,

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

@@ -21,6 +21,7 @@
 ._qrwqidpf{border-top-right-radius:0}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/cjs/ui/ToolbarButton.js

@@ -16,7 +16,7 @@ var styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _irr3i1yw _1di619ru",
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
   groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
   groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
   groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"

package/dist/cjs/ui/ToolbarDropdownDivider.js

@@ -1,20 +1,20 @@
 /* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarDropdownDivider = void 0;
 require("./ToolbarDropdownDivider.compiled.css");
+var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
-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 styles = {
   divider: "_1o3imuej _1il9nqa1 _1doce4h9"
 };
 var ToolbarDropdownDivider = exports.ToolbarDropdownDivider = function ToolbarDropdownDivider() {
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.divider
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.divider])
   });
 };

package/dist/cjs/ui/ToolbarTooltip.js

@@ -9,8 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var ToolbarTooltip = exports.ToolbarTooltip = function ToolbarTooltip(_ref) {
   var content = _ref.content,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position;
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: content
+    content: content,
+    position: position
   }, children);
 };

package/dist/cjs/ui/icons/CodeIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CodeIcon", {
+  enumerable: true,
+  get: function get() {
+    return _angleBrackets.default;
+  }
+});
+var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));

package/dist/cjs/ui/icons/StrikeThroughIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StrikeThroughIcon", {
+  enumerable: true,
+  get: function get() {
+    return _textStrikethrough.default;
+  }
+});
+var _textStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/text-strikethrough"));

package/dist/cjs/ui/icons/SubscriptIcon.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubscriptIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+var SVGContainer = function SVGContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)",
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, children);
+};
+var SubscriptIcon = exports.SubscriptIcon = function SubscriptIcon() {
+  return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5.10609 6.54799L7.88895 2.09448L9.16102 2.88936L5.99047 7.9633L9.21219 13.1191L7.94012 13.914L5.10609 9.37861L2.27207 13.914L1 13.1191L4.2217 7.9633L1.05117 2.88939L2.32324 2.09451L5.10609 6.54799ZM10.858 15.0001V13.696H12.3499V10.3153L10.8418 11.4343V9.86413L12.3138 8.83114H13.8161V13.696H14.9999V15.0001H10.858Z",
+    fill: "currentColor"
+  })));
+};

package/dist/cjs/ui/icons/SuperscriptIcon.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SuperscriptIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+var SVGContainer = function SVGContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)",
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, children);
+};
+var SuperscriptIcon = exports.SuperscriptIcon = function SuperscriptIcon() {
+  return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M10.858 7.16892V5.86487H12.3499V2.4842L10.8418 3.60312V2.03298L12.3138 1H13.8161V5.86487H14.9999V7.16892H10.858ZM5.10609 6.5479L7.88895 2.09439L9.16102 2.88927L5.99047 7.96321L9.21219 13.119L7.94012 13.9139L5.10609 9.37852L2.27207 13.9139L1 13.119L4.2217 7.96321L1.05117 2.8893L2.32324 2.09442L5.10609 6.5479Z",
+    fill: "currentColor"
+  })));
+};

package/dist/cjs/ui/icons/UnderlineIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UnderlineIcon", {
+  enumerable: true,
+  get: function get() {
+    return _textUnderline.default;
+  }
+});
+var _textUnderline = _interopRequireDefault(require("@atlaskit/icon/core/text-underline"));

package/dist/es2019/index.js

@@ -9,6 +9,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
+export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -41,4 +42,10 @@ export { PinIcon } from './ui/icons/PinIcon';
 export { PinnedIcon } from './ui/icons/PinnedIcon';
 export { QuoteIcon } from './ui/icons/QuoteIcon';
 export { TextColorIcon } from './ui/icons/TextColorIcon';
-export { TextIcon } from './ui/icons/TextIcon';
+export { TextIcon } from './ui/icons/TextIcon';
+export { ClearFormattingIcon } from './ui/icons/ClearFormattingIcon';
+export { UnderlineIcon } from './ui/icons/UnderlineIcon';
+export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
+export { CodeIcon } from './ui/icons/CodeIcon';
+export { SubscriptIcon } from './ui/icons/SubscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';

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

@@ -5,4 +5,5 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/Toolbar.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 export const Toolbar = ({
   children,

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

@@ -21,6 +21,7 @@
 ._qrwqidpf{border-top-right-radius:0}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/ui/ToolbarButton.js

@@ -8,7 +8,7 @@ const styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _irr3i1yw _1di619ru",
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
   groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
   groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
   groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"

package/dist/es2019/ui/ToolbarDropdownDivider.js

@@ -1,13 +1,12 @@
 /* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarDropdownDivider.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
   divider: "_1o3imuej _1il9nqa1 _1doce4h9"
 };
 export const ToolbarDropdownDivider = () => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.divider
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.divider])
   });
 };

package/dist/es2019/ui/ToolbarTooltip.js

@@ -2,9 +2,11 @@ import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 export const ToolbarTooltip = ({
   content,
-  children
+  children,
+  position = 'top'
 }) => {
   return /*#__PURE__*/React.createElement(Tooltip, {
-    content: content
+    content: content,
+    position: position
   }, children);
 };

package/dist/es2019/ui/icons/CodeIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as CodeIcon } from '@atlaskit/icon/core/angle-brackets';

package/dist/es2019/ui/icons/StrikeThroughIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as StrikeThroughIcon } from '@atlaskit/icon/core/text-strikethrough';

package/dist/es2019/ui/icons/SubscriptIcon.js

@@ -0,0 +1,25 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+const SVGContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  style: {
+    width: "var(--ds-space-200, 16px)",
+    height: "var(--ds-space-200, 16px)",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}, children);
+export const SubscriptIcon = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M5.10609 6.54799L7.88895 2.09448L9.16102 2.88936L5.99047 7.9633L9.21219 13.1191L7.94012 13.914L5.10609 9.37861L2.27207 13.914L1 13.1191L4.2217 7.9633L1.05117 2.88939L2.32324 2.09451L5.10609 6.54799ZM10.858 15.0001V13.696H12.3499V10.3153L10.8418 11.4343V9.86413L12.3138 8.83114H13.8161V13.696H14.9999V15.0001H10.858Z",
+  fill: "currentColor"
+})));

package/dist/es2019/ui/icons/SuperscriptIcon.js

@@ -0,0 +1,25 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+const SVGContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  style: {
+    width: "var(--ds-space-200, 16px)",
+    height: "var(--ds-space-200, 16px)",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}, children);
+export const SuperscriptIcon = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M10.858 7.16892V5.86487H12.3499V2.4842L10.8418 3.60312V2.03298L12.3138 1H13.8161V5.86487H14.9999V7.16892H10.858ZM5.10609 6.5479L7.88895 2.09439L9.16102 2.88927L5.99047 7.96321L9.21219 13.119L7.94012 13.9139L5.10609 9.37852L2.27207 13.9139L1 13.119L4.2217 7.96321L1.05117 2.8893L2.32324 2.09442L5.10609 6.5479Z",
+  fill: "currentColor"
+})));

package/dist/es2019/ui/icons/UnderlineIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as UnderlineIcon } from '@atlaskit/icon/core/text-underline';

package/dist/esm/index.js

@@ -9,6 +9,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
+export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -41,4 +42,10 @@ export { PinIcon } from './ui/icons/PinIcon';
 export { PinnedIcon } from './ui/icons/PinnedIcon';
 export { QuoteIcon } from './ui/icons/QuoteIcon';
 export { TextColorIcon } from './ui/icons/TextColorIcon';
-export { TextIcon } from './ui/icons/TextIcon';
+export { TextIcon } from './ui/icons/TextIcon';
+export { ClearFormattingIcon } from './ui/icons/ClearFormattingIcon';
+export { UnderlineIcon } from './ui/icons/UnderlineIcon';
+export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
+export { CodeIcon } from './ui/icons/CodeIcon';
+export { SubscriptIcon } from './ui/icons/SubscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';

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

@@ -5,4 +5,5 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/Toolbar.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,

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

@@ -21,6 +21,7 @@
 ._qrwqidpf{border-top-right-radius:0}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/esm/ui/ToolbarButton.js

@@ -8,7 +8,7 @@ var styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _irr3i1yw _1di619ru",
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
   groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
   groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
   groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"

package/dist/esm/ui/ToolbarDropdownDivider.js

@@ -1,13 +1,12 @@
 /* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarDropdownDivider.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
   divider: "_1o3imuej _1il9nqa1 _1doce4h9"
 };
 export var ToolbarDropdownDivider = function ToolbarDropdownDivider() {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.divider
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.divider])
   });
 };

package/dist/esm/ui/ToolbarTooltip.js

@@ -2,8 +2,11 @@ import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 export var ToolbarTooltip = function ToolbarTooltip(_ref) {
   var content = _ref.content,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position;
   return /*#__PURE__*/React.createElement(Tooltip, {
-    content: content
+    content: content,
+    position: position
   }, children);
 };

package/dist/esm/ui/icons/CodeIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as CodeIcon } from '@atlaskit/icon/core/angle-brackets';

package/dist/esm/ui/icons/StrikeThroughIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as StrikeThroughIcon } from '@atlaskit/icon/core/text-strikethrough';

package/dist/esm/ui/icons/SubscriptIcon.js

@@ -0,0 +1,28 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+var SVGContainer = function SVGContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)",
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, children);
+};
+export var SubscriptIcon = function SubscriptIcon() {
+  return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5.10609 6.54799L7.88895 2.09448L9.16102 2.88936L5.99047 7.9633L9.21219 13.1191L7.94012 13.914L5.10609 9.37861L2.27207 13.914L1 13.1191L4.2217 7.9633L1.05117 2.88939L2.32324 2.09451L5.10609 6.54799ZM10.858 15.0001V13.696H12.3499V10.3153L10.8418 11.4343V9.86413L12.3138 8.83114H13.8161V13.696H14.9999V15.0001H10.858Z",
+    fill: "currentColor"
+  })));
+};

package/dist/esm/ui/icons/SuperscriptIcon.js

@@ -0,0 +1,28 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+var SVGContainer = function SVGContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)",
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, children);
+};
+export var SuperscriptIcon = function SuperscriptIcon() {
+  return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M10.858 7.16892V5.86487H12.3499V2.4842L10.8418 3.60312V2.03298L12.3138 1H13.8161V5.86487H14.9999V7.16892H10.858ZM5.10609 6.5479L7.88895 2.09439L9.16102 2.88927L5.99047 7.96321L9.21219 13.119L7.94012 13.9139L5.10609 9.37852L2.27207 13.9139L1 13.119L4.2217 7.96321L1.05117 2.8893L2.32324 2.09442L5.10609 6.5479Z",
+    fill: "currentColor"
+  })));
+};

package/dist/esm/ui/icons/UnderlineIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as UnderlineIcon } from '@atlaskit/icon/core/text-underline';

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
+export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -41,4 +42,10 @@ export { PinnedIcon } from './ui/icons/PinnedIcon';
 export { QuoteIcon } from './ui/icons/QuoteIcon';
 export { TextColorIcon } from './ui/icons/TextColorIcon';
 export { TextIcon } from './ui/icons/TextIcon';
+export { ClearFormattingIcon } from './ui/icons/ClearFormattingIcon';
+export { UnderlineIcon } from './ui/icons/UnderlineIcon';
+export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
+export { CodeIcon } from './ui/icons/CodeIcon';
+export { SubscriptIcon } from './ui/icons/SubscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/dist/types/ui/ToolbarDropdownDivider.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const ToolbarDropdownDivider: () => React.JSX.Element;
+/// <reference types="react" />
+export declare const ToolbarDropdownDivider: () => JSX.Element;

package/dist/types/ui/ToolbarTooltip.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
     content: string;
     children: React.ReactNode;
+    position?: PositionType;
 };
-export declare const ToolbarTooltip: ({ content, children }: ToolbarTooltipProps) => React.JSX.Element;
+export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;
 export {};

package/dist/types/ui/icons/CodeIcon.d.ts

@@ -0,0 +1 @@
+export { default as CodeIcon } from '@atlaskit/icon/core/angle-brackets';

package/dist/types/ui/icons/StrikeThroughIcon.d.ts

@@ -0,0 +1 @@
+export { default as StrikeThroughIcon } from '@atlaskit/icon/core/text-strikethrough';

package/dist/types/ui/icons/SubscriptIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SubscriptIcon: () => React.JSX.Element;

package/dist/types/ui/icons/SuperscriptIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SuperscriptIcon: () => React.JSX.Element;

package/dist/types/ui/icons/UnderlineIcon.d.ts

@@ -0,0 +1 @@
+export { default as UnderlineIcon } from '@atlaskit/icon/core/text-underline';

package/dist/types-ts4.5/index.d.ts

@@ -8,6 +8,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
+export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -41,4 +42,10 @@ export { PinnedIcon } from './ui/icons/PinnedIcon';
 export { QuoteIcon } from './ui/icons/QuoteIcon';
 export { TextColorIcon } from './ui/icons/TextColorIcon';
 export { TextIcon } from './ui/icons/TextIcon';
+export { ClearFormattingIcon } from './ui/icons/ClearFormattingIcon';
+export { UnderlineIcon } from './ui/icons/UnderlineIcon';
+export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
+export { CodeIcon } from './ui/icons/CodeIcon';
+export { SubscriptIcon } from './ui/icons/SubscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/dist/types-ts4.5/ui/ToolbarDropdownDivider.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const ToolbarDropdownDivider: () => React.JSX.Element;
+/// <reference types="react" />
+export declare const ToolbarDropdownDivider: () => JSX.Element;

package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
     content: string;
     children: React.ReactNode;
+    position?: PositionType;
 };
-export declare const ToolbarTooltip: ({ content, children }: ToolbarTooltipProps) => React.JSX.Element;
+export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/icons/CodeIcon.d.ts

@@ -0,0 +1 @@
+export { default as CodeIcon } from '@atlaskit/icon/core/angle-brackets';

package/dist/types-ts4.5/ui/icons/StrikeThroughIcon.d.ts

@@ -0,0 +1 @@
+export { default as StrikeThroughIcon } from '@atlaskit/icon/core/text-strikethrough';

package/dist/types-ts4.5/ui/icons/SubscriptIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SubscriptIcon: () => React.JSX.Element;

package/dist/types-ts4.5/ui/icons/SuperscriptIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SuperscriptIcon: () => React.JSX.Element;

package/dist/types-ts4.5/ui/icons/UnderlineIcon.d.ts

@@ -0,0 +1 @@
+export { default as UnderlineIcon } from '@atlaskit/icon/core/text-underline';

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.8",
+	"version": "0.0.10",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -47,8 +47,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
-		"react-dom": "^18.2.0",
-		"typescript": "~5.4.2"
+		"react-dom": "^18.2.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {

package/src/index.ts

@@ -9,6 +9,7 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
+export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
@@ -43,5 +44,11 @@ export { PinnedIcon } from './ui/icons/PinnedIcon';
 export { QuoteIcon } from './ui/icons/QuoteIcon';
 export { TextColorIcon } from './ui/icons/TextColorIcon';
 export { TextIcon } from './ui/icons/TextIcon';
+export { ClearFormattingIcon } from './ui/icons/ClearFormattingIcon';
+export { UnderlineIcon } from './ui/icons/UnderlineIcon';
+export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
+export { CodeIcon } from './ui/icons/CodeIcon';
+export { SubscriptIcon } from './ui/icons/SubscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
 
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/src/ui/Toolbar.tsx

@@ -6,6 +6,7 @@ import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
 	toolbar: {
+		backgroundColor: token('elevation.surface'),
 		paddingRight: token('space.050'),
 		paddingLeft: token('space.050'),
 		boxShadow: token('elevation.shadow.overlay'),

package/src/ui/ToolbarButton.tsx

@@ -41,6 +41,7 @@ const styles = cssMap({
 	},
 	selected: {
 		backgroundColor: token('color.background.selected'),
+		color: token('color.text.selected'),
 		'&:hover': {
 			backgroundColor: token('color.background.selected.hovered'),
 		},

package/src/ui/ToolbarDropdownDivider.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@compiled/react';
 
 import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
@@ -13,5 +16,5 @@ const styles = cssMap({
 });
 
 export const ToolbarDropdownDivider = () => {
-	return <Box xcss={styles.divider} />;
+	return <div css={styles.divider} />;
 };

package/src/ui/ToolbarTooltip.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 
+import type { PositionType } from '@atlaskit/tooltip';
 import Tooltip from '@atlaskit/tooltip';
 
 type ToolbarTooltipProps = {
 	content: string;
 	children: React.ReactNode;
+	position?: PositionType;
 };
 
-export const ToolbarTooltip = ({ content, children }: ToolbarTooltipProps) => {
-	return <Tooltip content={content}>{children}</Tooltip>;
+export const ToolbarTooltip = ({ content, children, position = 'top' }: ToolbarTooltipProps) => {
+	return (
+		<Tooltip content={content} position={position}>
+			{children}
+		</Tooltip>
+	);
 };

package/src/ui/icons/CodeIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as CodeIcon } from '@atlaskit/icon/core/angle-brackets';

package/src/ui/icons/StrikeThroughIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as StrikeThroughIcon } from '@atlaskit/icon/core/text-strikethrough';

package/src/ui/icons/SubscriptIcon.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+
+import { token } from '@atlaskit/tokens';
+
+const SVGContainer = ({ children }: React.PropsWithChildren<object>) => (
+	<span
+		style={{
+			width: token('space.200', '16px'),
+			height: token('space.200', '16px'),
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+		}}
+	>
+		{children}
+	</span>
+);
+
+export const SubscriptIcon = () => (
+	<SVGContainer>
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M5.10609 6.54799L7.88895 2.09448L9.16102 2.88936L5.99047 7.9633L9.21219 13.1191L7.94012 13.914L5.10609 9.37861L2.27207 13.914L1 13.1191L4.2217 7.9633L1.05117 2.88939L2.32324 2.09451L5.10609 6.54799ZM10.858 15.0001V13.696H12.3499V10.3153L10.8418 11.4343V9.86413L12.3138 8.83114H13.8161V13.696H14.9999V15.0001H10.858Z"
+				fill="currentColor"
+			/>
+		</svg>
+	</SVGContainer>
+);

package/src/ui/icons/SuperscriptIcon.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+
+import { token } from '@atlaskit/tokens';
+
+const SVGContainer = ({ children }: React.PropsWithChildren<object>) => (
+	<span
+		style={{
+			width: token('space.200', '16px'),
+			height: token('space.200', '16px'),
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+		}}
+	>
+		{children}
+	</span>
+);
+
+export const SuperscriptIcon = () => (
+	<SVGContainer>
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M10.858 7.16892V5.86487H12.3499V2.4842L10.8418 3.60312V2.03298L12.3138 1H13.8161V5.86487H14.9999V7.16892H10.858ZM5.10609 6.5479L7.88895 2.09439L9.16102 2.88927L5.99047 7.96321L9.21219 13.119L7.94012 13.9139L5.10609 9.37852L2.27207 13.9139L1 13.119L4.2217 7.96321L1.05117 2.8893L2.32324 2.09442L5.10609 6.5479Z"
+				fill="currentColor"
+			/>
+		</svg>
+	</SVGContainer>
+);

package/src/ui/icons/UnderlineIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as UnderlineIcon } from '@atlaskit/icon/core/text-underline';