@atlaskit/editor-toolbar 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-toolbar
 
+## 0.8.2
+
+### Patch Changes
+
+- [`98e68957ca04d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98e68957ca04d) -
+  [ux] ED-29186 Update responsiveness breakpoints to accommodate Jira and comment editor toolbar
+
+## 0.8.1
+
+### Patch Changes
+
+- [`555ac8f256674`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/555ac8f256674) -
+  Update menu item icon size to small, tweak paddings and font styles
+
 ## 0.8.0
 
 ### Minor Changes

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

@@ -3,10 +3,12 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
-@container toolbar-container (max-width: 1024px){._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
-@container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
+@container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
+@container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -14,10 +14,12 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
-  responsiveRulesReduced: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -66,6 +68,6 @@ var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveConta
   var children = _ref.children,
     reducedBreakpoints = _ref.reducedBreakpoints;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+    xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
 };

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

@@ -7,6 +7,7 @@
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._fy9oglyw [data-toolbar-component=section]:not(:has([data-toolbar-component=button])){display:none}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -16,8 +16,8 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _ResponsiveContainer = require("./ResponsiveContainer");
 var styles = {
-  toolbarBase: "_2rko1qi0 _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
-  toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
+  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };

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

@@ -1,6 +1,7 @@
-
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tke1f4h{min-height:28px}
@@ -8,7 +9,6 @@
 ._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)}
 ._o5721q9c{white-space:nowrap}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}

package/dist/cjs/ui/ToolbarButton.js

@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _uiContext = require("../hooks/ui-context");
 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 = {
-  button: "_zulp12x7 _2rko12b0 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  button: "_zulp12x7 _2rko12b0 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

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

@@ -1,13 +1,15 @@
-._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
-._1tke14no{min-height:36px}
-._1ul9163w{min-width:230px}
+._1tkezwfg{min-height:2pc}
+._1ul9eoa3{min-width:225px}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -16,7 +16,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 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 = {
-  toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1bas12b0 _1ah31i6y",
+  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

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

@@ -1,4 +1,4 @@
 
-._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._1mouv77o{margin-block:var(--ds-space-025,2px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
 ._18m91wug{overflow-y:auto}
 ._c71lnklw{max-height:20pc}

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -19,7 +19,7 @@ var _ToolbarButton = require("./ToolbarButton");
 var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 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 = {
-  sectionMargin: "_1mou1b66",
+  sectionMargin: "_1mouv77o",
   firstSectionSeparator: "_18l8n7od",
   scrollContainer: "_c71lnklw _18m91wug"
 };

package/dist/cjs/ui/icons/TextColorIcon.compiled.css

@@ -1 +1 @@
-._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}

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

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  icon: "_19pk1b66"
+  icon: "_19pk12x7"
 };
 var TextColorIcon = exports.TextColorIcon = function TextColorIcon(_ref) {
   var label = _ref.label,

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

@@ -3,10 +3,12 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
-@container toolbar-container (max-width: 1024px){._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
-@container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
+@container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
+@container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -7,10 +7,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
-  responsiveRulesReduced: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -60,6 +62,6 @@ export const ResponsiveContainer = ({
   reducedBreakpoints
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? editorExperiment('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
 };

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

@@ -7,6 +7,7 @@
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._fy9oglyw [data-toolbar-component=section]:not(:has([data-toolbar-component=button])){display:none}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/Toolbar.js

@@ -9,8 +9,8 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ResponsiveContainer } from './ResponsiveContainer';
 const styles = {
-  toolbarBase: "_2rko1qi0 _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
-  toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
+  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };

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

@@ -1,6 +1,7 @@
-
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tke1f4h{min-height:28px}
@@ -8,7 +9,6 @@
 ._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)}
 ._o5721q9c{white-space:nowrap}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}

package/dist/es2019/ui/ToolbarButton.js

@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { useToolbarUI } from '../hooks/ui-context';
 const styles = {
-  button: "_zulp12x7 _2rko12b0 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  button: "_zulp12x7 _2rko12b0 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

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

@@ -1,13 +1,15 @@
-._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
-._1tke14no{min-height:36px}
-._1ul9163w{min-width:230px}
+._1tkezwfg{min-height:2pc}
+._1ul9eoa3{min-width:225px}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -8,7 +8,7 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
 const styles = {
-  toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1bas12b0 _1ah31i6y",
+  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

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

@@ -1,4 +1,4 @@
 
-._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._1mouv77o{margin-block:var(--ds-space-025,2px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
 ._18m91wug{overflow-y:auto}
 ._c71lnklw{max-height:20pc}

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -10,7 +10,7 @@ import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 const styles = {
-  sectionMargin: "_1mou1b66",
+  sectionMargin: "_1mouv77o",
   firstSectionSeparator: "_18l8n7od",
   scrollContainer: "_c71lnklw _18m91wug"
 };

package/dist/es2019/ui/icons/TextColorIcon.compiled.css

@@ -1 +1 @@
-._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}

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

@@ -5,7 +5,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/core/text-style';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  icon: "_19pk1b66"
+  icon: "_19pk12x7"
 };
 export const TextColorIcon = ({
   label,

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

@@ -3,10 +3,12 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
-@container toolbar-container (max-width: 1024px){._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
-@container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
+@container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
+@container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -7,10 +7,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
-  responsiveRulesReduced: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -59,6 +61,6 @@ export var ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
     reducedBreakpoints = _ref.reducedBreakpoints;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? editorExperiment('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
 };

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

@@ -7,6 +7,7 @@
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._fy9oglyw [data-toolbar-component=section]:not(:has([data-toolbar-component=button])){display:none}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/Toolbar.js

@@ -9,8 +9,8 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ResponsiveContainer } from './ResponsiveContainer';
 var styles = {
-  toolbarBase: "_2rko1qi0 _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
-  toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
+  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };

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

@@ -1,6 +1,7 @@
-
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tke1f4h{min-height:28px}
@@ -8,7 +9,6 @@
 ._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)}
 ._o5721q9c{white-space:nowrap}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}

package/dist/esm/ui/ToolbarButton.js

@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { useToolbarUI } from '../hooks/ui-context';
 var styles = {
-  button: "_zulp12x7 _2rko12b0 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  button: "_zulp12x7 _2rko12b0 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

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

@@ -1,13 +1,15 @@
-._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
-._1tke14no{min-height:36px}
-._1ul9163w{min-width:230px}
+._1tkezwfg{min-height:2pc}
+._1ul9eoa3{min-width:225px}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -8,7 +8,7 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
 var styles = {
-  toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1bas12b0 _1ah31i6y",
+  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

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

@@ -1,4 +1,4 @@
 
-._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._1mouv77o{margin-block:var(--ds-space-025,2px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
 ._18m91wug{overflow-y:auto}
 ._c71lnklw{max-height:20pc}

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -10,7 +10,7 @@ import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 var styles = {
-  sectionMargin: "_1mou1b66",
+  sectionMargin: "_1mouv77o",
   firstSectionSeparator: "_18l8n7od",
   scrollContainer: "_c71lnklw _18m91wug"
 };

package/dist/esm/ui/icons/TextColorIcon.compiled.css

@@ -1 +1 @@
-._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}

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

@@ -5,7 +5,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/core/text-style';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  icon: "_19pk1b66"
+  icon: "_19pk12x7"
 };
 export var TextColorIcon = function TextColorIcon(_ref) {
   var label = _ref.label,

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.8.0",
+	"version": "0.8.2",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -31,7 +31,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.13.0",
-		"@atlaskit/tmp-editor-statsig": "^12.4.0",
+		"@atlaskit/tmp-editor-statsig": "^12.5.0",
 		"@atlaskit/tokens": "^6.2.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",