@atlaskit/editor-toolbar 0.17.3 → 0.17.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-toolbar
 
+## 0.17.5
+
+### Patch Changes
+
+- [`8263f21e34dff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8263f21e34dff) -
+  [ux] ED-29646 Implement ResponsiveContainer breakpoint preset system
+
+## 0.17.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.17.3
 
 ### Patch Changes

package/dist/cjs/ui/ColorPalette/Color.compiled.css

@@ -11,7 +11,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3icr4y{height:var(--ds-space-300,26px)}
 ._80omtlke{cursor:pointer}
-._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._ca0qidpf{padding-top:0}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
@@ -19,8 +19,8 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._u5f3idpf{padding-right:0}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._jyzfmuej:focus-within{border-color:var(--ds-border,#091e4224)}
-._y2mv1q03:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#388bff)}
-._858umuej:focus{border-color:var(--ds-border,#091e4224)}
+._jyzf1l7x:focus-within{border-color:var(--ds-border,#0b120e24)}
+._y2mvdfik:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._858u1l7x:focus{border-color:var(--ds-border,#0b120e24)}
 ._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}
-._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
+._4cvx1l7x:hover{border-color:var(--ds-border,#0b120e24)}

package/dist/cjs/ui/ColorPalette/Color.js

@@ -51,7 +51,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: label
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: (0, _runtime.ax)(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858u1l7x _jyzf1l7x _4cvx1l7x"])
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     "aria-label": label,
@@ -66,7 +66,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", borderColor)
     },
     autoFocus: autoFocus,
-    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv1q03 _1bg4v77o"])
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
   }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
     color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,

package/dist/cjs/ui/ColorPalette/index.js

@@ -39,7 +39,7 @@ function getCheckMarkColor(color, useIconToken) {
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)";
 }
 
 /**

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

@@ -17,8 +17,9 @@
 @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: 550px){._167iglyw._167iglyw .show-above-lg{display:none}._kyxb1ule._kyxb1ule .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: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
 @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -13,15 +13,35 @@ require("./ResponsiveContainer.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  fullpage: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  reduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jiraIssue: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jsmComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _167iglyw _kyxb1ule _19x4glyw _qck01ule",
+  confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
   responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
+
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+
+// Map preset names to camelCase style keys
+var presetStyleMap = {
+  'fullpage': styles.fullpage,
+  'reduced': styles.reduced,
+  'jira-issue': styles.jiraIssue,
+  'jsm-comment': styles.jsmComment,
+  'confluence-comment': styles.confluenceComment
+};
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -62,12 +82,21 @@ var styles = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
 var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
+    breakpointPreset = _ref.breakpointPreset,
     reducedBreakpoints = _ref.reducedBreakpoints;
+  // Use new preset-based logic when preset is provided and feature gate is enabled
+  if (breakpointPreset && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_responsive_improve')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: (0, _css.cx)(styles.responsiveContainer, presetStyleMap[breakpointPreset])
+    }, children);
+  }
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);

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

@@ -1,7 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/cjs/ui/Toolbar.js

@@ -20,7 +20,7 @@ var _ToolbarKeyboardNavigationProvider = require("./ToolbarKeyboardNavigationPro
 var _ViewEventEmitter = require("./ViewEventEmitter");
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
-  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs130s",
   toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   toolbarSeparator: "_1mj714no",
@@ -80,9 +80,11 @@ var Toolbar = exports.Toolbar = function Toolbar(_ref) {
 var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref2) {
   var children = _ref2.children,
     label = _ref2.label,
+    breakpointPreset = _ref2.breakpointPreset,
     reducedBreakpoints = _ref2.reducedBreakpoints;
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
     return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveContainer, {
+      breakpointPreset: breakpointPreset,
       reducedBreakpoints: reducedBreakpoints
     }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),

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

@@ -7,17 +7,17 @@
 ._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._o5721q9c{white-space:nowrap}
-._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
-._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
-._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._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)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/cjs/ui/ToolbarButton.js

@@ -14,10 +14,10 @@ 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 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
-  enabled: "_irr3166n _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
+  button: "_zulp12x7 _2rko12b0 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syazazsu _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  enabled: "_irr31dpa _1di6fcek",
+  disabled: "_syaz1gmx _80om13gf",
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
 };
 var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var iconBefore = _ref.iconBefore,

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

@@ -1,5 +1,5 @@
 
-._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._1bah1h6o{justify-content:center}
 ._1bsbgktf{width:20px}

package/dist/cjs/ui/ToolbarColorSwatch.js

@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  colorSwatch: "_19it7r9e _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
+  colorSwatch: "_19itia51 _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
 };
 var ToolbarColorSwatch = exports.ToolbarColorSwatch = function ToolbarColorSwatch(_ref) {
   var children = _ref.children,

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

@@ -6,15 +6,15 @@
 ._1tkezwfg{min-height:2pc}
 ._1ul9eoa3{min-width:225px}
 ._80om13gf{cursor:not-allowed}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._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)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
-._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)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -20,10 +20,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
-  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
-  enabled: "_irr3166n _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
+  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syazazsu _1bas12b0 _1ah31i6y",
+  enabled: "_irr31dpa _1di6fcek",
+  disabled: "_syaz1gmx _80om13gf",
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,

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

@@ -4,4 +4,4 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3igktf{height:20px}
-._bfhkmuej{background-color:var(--ds-border,#091e4224)}
+._bfhk1l7x{background-color:var(--ds-border,#0b120e24)}

package/dist/cjs/ui/ToolbarSection.js

@@ -26,7 +26,7 @@ var ToolbarSeparator = function ToolbarSeparator() {
     "data-toolbar-component": "separator",
     role: "separator",
     "aria-orientation": "vertical",
-    className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+    className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x"])
   });
 };
 var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {

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

@@ -28,7 +28,7 @@ var TextColorIcon = exports.TextColorIcon = function TextColorIcon(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_textStyle.default, {
     label: label,
     testId: testId,
-    color: isDisabled ? "var(--ds-icon-disabled, #091E424F)" : iconColor,
+    color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : iconColor,
     shouldRecommendSmallIcon: shouldRecommendSmallIcon,
     spacing: spacing,
     size: size

package/dist/es2019/ui/ColorPalette/Color.compiled.css

@@ -11,7 +11,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3icr4y{height:var(--ds-space-300,26px)}
 ._80omtlke{cursor:pointer}
-._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._ca0qidpf{padding-top:0}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
@@ -19,8 +19,8 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._u5f3idpf{padding-right:0}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._jyzfmuej:focus-within{border-color:var(--ds-border,#091e4224)}
-._y2mv1q03:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#388bff)}
-._858umuej:focus{border-color:var(--ds-border,#091e4224)}
+._jyzf1l7x:focus-within{border-color:var(--ds-border,#0b120e24)}
+._y2mvdfik:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._858u1l7x:focus{border-color:var(--ds-border,#0b120e24)}
 ._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}
-._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
+._4cvx1l7x:hover{border-color:var(--ds-border,#0b120e24)}

package/dist/es2019/ui/ColorPalette/Color.js

@@ -42,7 +42,7 @@ export const Color = /*#__PURE__*/memo(({
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: label
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858u1l7x _jyzf1l7x _4cvx1l7x"])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,
@@ -57,7 +57,7 @@ export const Color = /*#__PURE__*/memo(({
       border: `${"var(--ds-border-width, 1px)"} solid ${borderColor}`
     },
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv1q03 _1bg4v77o"])
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,

package/dist/es2019/ui/ColorPalette/index.js

@@ -29,7 +29,7 @@ function getCheckMarkColor(color, useIconToken) {
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)";
 }
 
 /**

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

@@ -17,8 +17,9 @@
 @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: 550px){._167iglyw._167iglyw .show-above-lg{display:none}._kyxb1ule._kyxb1ule .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: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
 @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -6,15 +6,35 @@ import "./ResponsiveContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  fullpage: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  reduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jiraIssue: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jsmComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _167iglyw _kyxb1ule _19x4glyw _qck01ule",
+  confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
   responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
+
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+
+// Map preset names to camelCase style keys
+const presetStyleMap = {
+  'fullpage': styles.fullpage,
+  'reduced': styles.reduced,
+  'jira-issue': styles.jiraIssue,
+  'jsm-comment': styles.jsmComment,
+  'confluence-comment': styles.confluenceComment
+};
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -55,13 +75,22 @@ const styles = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
 export const ResponsiveContainer = ({
   children,
+  breakpointPreset,
   reducedBreakpoints
 }) => {
+  // Use new preset-based logic when preset is provided and feature gate is enabled
+  if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.responsiveContainer, presetStyleMap[breakpointPreset])
+    }, children);
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);

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

@@ -1,7 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/es2019/ui/Toolbar.js

@@ -13,7 +13,7 @@ import { ToolbarKeyboardNavigationProvider } from './ToolbarKeyboardNavigationPr
 import { ACTION_SUBJECT, ViewEventEmitter } from './ViewEventEmitter';
 const styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
-  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs130s",
   toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   toolbarSeparator: "_1mj714no",
@@ -77,10 +77,12 @@ export const Toolbar = ({
 export const PrimaryToolbar = ({
   children,
   label,
+  breakpointPreset,
   reducedBreakpoints
 }) => {
   if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
     return /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      breakpointPreset: breakpointPreset,
       reducedBreakpoints: reducedBreakpoints
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),

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

@@ -7,17 +7,17 @@
 ._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._o5721q9c{white-space:nowrap}
-._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
-._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
-._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._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)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/es2019/ui/ToolbarButton.js

@@ -6,10 +6,10 @@ import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { useToolbarUI } from '../hooks/ui-context';
 const styles = {
-  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"
+  button: "_zulp12x7 _2rko12b0 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syazazsu _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  enabled: "_irr31dpa _1di6fcek",
+  disabled: "_syaz1gmx _80om13gf",
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
 };
 export const ToolbarButton = /*#__PURE__*/forwardRef(({
   iconBefore,

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

@@ -1,5 +1,5 @@
 
-._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._1bah1h6o{justify-content:center}
 ._1bsbgktf{width:20px}

package/dist/es2019/ui/ToolbarColorSwatch.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  colorSwatch: "_19it7r9e _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
+  colorSwatch: "_19itia51 _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
 };
 export const ToolbarColorSwatch = ({
   children,

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

@@ -6,15 +6,15 @@
 ._1tkezwfg{min-height:2pc}
 ._1ul9eoa3{min-width:225px}
 ._80om13gf{cursor:not-allowed}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._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)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
-._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)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -8,10 +8,10 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 const styles = {
-  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
-  enabled: "_irr3166n _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
+  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syazazsu _1bas12b0 _1ah31i6y",
+  enabled: "_irr31dpa _1di6fcek",
+  disabled: "_syaz1gmx _80om13gf",
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
 };
 const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
   children,

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

@@ -4,4 +4,4 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3igktf{height:20px}
-._bfhkmuej{background-color:var(--ds-border,#091e4224)}
+._bfhk1l7x{background-color:var(--ds-border,#0b120e24)}

package/dist/es2019/ui/ToolbarSection.js

@@ -18,7 +18,7 @@ const ToolbarSeparator = () => {
     "data-toolbar-component": "separator",
     role: "separator",
     "aria-orientation": "vertical",
-    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x"])
   });
 };
 export const ToolbarSection = ({

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

@@ -22,7 +22,7 @@ export const TextColorIcon = ({
   }, /*#__PURE__*/React.createElement(Icon, {
     label: label,
     testId: testId,
-    color: isDisabled ? "var(--ds-icon-disabled, #091E424F)" : iconColor,
+    color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : iconColor,
     shouldRecommendSmallIcon: shouldRecommendSmallIcon,
     spacing: spacing,
     size: size

package/dist/esm/ui/ColorPalette/Color.compiled.css

@@ -11,7 +11,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3icr4y{height:var(--ds-space-300,26px)}
 ._80omtlke{cursor:pointer}
-._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._ca0qidpf{padding-top:0}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
@@ -19,8 +19,8 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._u5f3idpf{padding-right:0}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._jyzfmuej:focus-within{border-color:var(--ds-border,#091e4224)}
-._y2mv1q03:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#388bff)}
-._858umuej:focus{border-color:var(--ds-border,#091e4224)}
+._jyzf1l7x:focus-within{border-color:var(--ds-border,#0b120e24)}
+._y2mvdfik:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._858u1l7x:focus{border-color:var(--ds-border,#0b120e24)}
 ._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}
-._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
+._4cvx1l7x:hover{border-color:var(--ds-border,#0b120e24)}

package/dist/esm/ui/ColorPalette/Color.js

@@ -42,7 +42,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: label
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858u1l7x _jyzf1l7x _4cvx1l7x"])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,
@@ -57,7 +57,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", borderColor)
     },
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv1q03 _1bg4v77o"])
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,

package/dist/esm/ui/ColorPalette/index.js

@@ -31,7 +31,7 @@ function getCheckMarkColor(color, useIconToken) {
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)";
 }
 
 /**

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

@@ -17,8 +17,9 @@
 @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: 550px){._167iglyw._167iglyw .show-above-lg{display:none}._kyxb1ule._kyxb1ule .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: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
 @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -6,15 +6,35 @@ import "./ResponsiveContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  fullpage: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  reduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jiraIssue: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jsmComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _167iglyw _kyxb1ule _19x4glyw _qck01ule",
+  confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
   responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
+
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+
+// Map preset names to camelCase style keys
+var presetStyleMap = {
+  'fullpage': styles.fullpage,
+  'reduced': styles.reduced,
+  'jira-issue': styles.jiraIssue,
+  'jsm-comment': styles.jsmComment,
+  'confluence-comment': styles.confluenceComment
+};
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -55,12 +75,21 @@ var styles = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
 export var ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
+    breakpointPreset = _ref.breakpointPreset,
     reducedBreakpoints = _ref.reducedBreakpoints;
+  // Use new preset-based logic when preset is provided and feature gate is enabled
+  if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.responsiveContainer, presetStyleMap[breakpointPreset])
+    }, children);
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);

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

@@ -1,7 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/esm/ui/Toolbar.js

@@ -13,7 +13,7 @@ import { ToolbarKeyboardNavigationProvider } from './ToolbarKeyboardNavigationPr
 import { ACTION_SUBJECT, ViewEventEmitter } from './ViewEventEmitter';
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
-  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs130s",
   toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   toolbarSeparator: "_1mj714no",
@@ -73,9 +73,11 @@ export var Toolbar = function Toolbar(_ref) {
 export var PrimaryToolbar = function PrimaryToolbar(_ref2) {
   var children = _ref2.children,
     label = _ref2.label,
+    breakpointPreset = _ref2.breakpointPreset,
     reducedBreakpoints = _ref2.reducedBreakpoints;
   if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
     return /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      breakpointPreset: breakpointPreset,
       reducedBreakpoints: reducedBreakpoints
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),

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

@@ -7,17 +7,17 @@
 ._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._o5721q9c{white-space:nowrap}
-._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
-._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
-._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._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)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/esm/ui/ToolbarButton.js

@@ -6,10 +6,10 @@ import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { useToolbarUI } from '../hooks/ui-context';
 var styles = {
-  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"
+  button: "_zulp12x7 _2rko12b0 _11c82smr _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syazazsu _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  enabled: "_irr31dpa _1di6fcek",
+  disabled: "_syaz1gmx _80om13gf",
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
 };
 export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var iconBefore = _ref.iconBefore,

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

@@ -1,5 +1,5 @@
 
-._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._1bah1h6o{justify-content:center}
 ._1bsbgktf{width:20px}

package/dist/esm/ui/ToolbarColorSwatch.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  colorSwatch: "_19it7r9e _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
+  colorSwatch: "_19itia51 _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
 };
 export var ToolbarColorSwatch = function ToolbarColorSwatch(_ref) {
   var children = _ref.children,

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

@@ -6,15 +6,15 @@
 ._1tkezwfg{min-height:2pc}
 ._1ul9eoa3{min-width:225px}
 ._80om13gf{cursor:not-allowed}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._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)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._1bas12b0:focus-visible{border-radius:var(--ds-radius-small,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
-._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)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -11,10 +11,10 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 var styles = {
-  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
-  enabled: "_irr3166n _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
+  toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syazazsu _1bas12b0 _1ah31i6y",
+  enabled: "_irr31dpa _1di6fcek",
+  disabled: "_syaz1gmx _80om13gf",
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,

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

@@ -4,4 +4,4 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3igktf{height:20px}
-._bfhkmuej{background-color:var(--ds-border,#091e4224)}
+._bfhk1l7x{background-color:var(--ds-border,#0b120e24)}

package/dist/esm/ui/ToolbarSection.js

@@ -18,7 +18,7 @@ var ToolbarSeparator = function ToolbarSeparator() {
     "data-toolbar-component": "separator",
     role: "separator",
     "aria-orientation": "vertical",
-    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x"])
   });
 };
 export var ToolbarSection = function ToolbarSection(_ref) {

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

@@ -21,7 +21,7 @@ export var TextColorIcon = function TextColorIcon(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     label: label,
     testId: testId,
-    color: isDisabled ? "var(--ds-icon-disabled, #091E424F)" : iconColor,
+    color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : iconColor,
     shouldRecommendSmallIcon: shouldRecommendSmallIcon,
     spacing: spacing,
     size: size

package/dist/types/index.d.ts

@@ -11,7 +11,7 @@ export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
-export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { ResponsiveContainer, type BreakpointPreset } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';

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

@@ -1,9 +1,26 @@
 import React, { type ReactNode } from 'react';
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+export type BreakpointPreset = 'fullpage' | 'reduced' | 'jira-issue' | 'jsm-comment' | 'confluence-comment';
 export type ResponsiveContainerProps = {
-    children: ReactNode;
     /**
-     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     * Selects the breakpoint preset for the responsive container.
+     *
+     * Available presets:
+     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences
+     * - 'reduced': (210, 408, 575, 1024) - Default compact toolbars, constrained layouts
+     * - 'jira-issue': (210, 408, 575, 1024) - Jira issue view and similar contexts
+     * - 'jsm-comment': (210, 408, 550, 1024) - JSM comment editor with canned responses button
+     * - 'confluence-comment': (210, 408, 648, 1024) - Confluence comment editor and inline contexts
      *
+     * @default 'fullpage'
+     */
+    breakpointPreset?: BreakpointPreset;
+    children: ReactNode;
+    /**
+     * Use `preset` prop instead. This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
      * Usages - for smaller editors such as comments
      */
     reducedBreakpoints?: boolean;
@@ -48,10 +65,12 @@ export type ResponsiveContainerProps = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
-export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+export declare const ResponsiveContainer: ({ children, breakpointPreset, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
 /**
  * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
  */

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

@@ -21,5 +21,5 @@ type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
-export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, breakpointPreset, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

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

@@ -11,7 +11,7 @@ export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
-export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { ResponsiveContainer, type BreakpointPreset } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';

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

@@ -1,9 +1,26 @@
 import React, { type ReactNode } from 'react';
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+export type BreakpointPreset = 'fullpage' | 'reduced' | 'jira-issue' | 'jsm-comment' | 'confluence-comment';
 export type ResponsiveContainerProps = {
-    children: ReactNode;
     /**
-     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     * Selects the breakpoint preset for the responsive container.
+     *
+     * Available presets:
+     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences
+     * - 'reduced': (210, 408, 575, 1024) - Default compact toolbars, constrained layouts
+     * - 'jira-issue': (210, 408, 575, 1024) - Jira issue view and similar contexts
+     * - 'jsm-comment': (210, 408, 550, 1024) - JSM comment editor with canned responses button
+     * - 'confluence-comment': (210, 408, 648, 1024) - Confluence comment editor and inline contexts
      *
+     * @default 'fullpage'
+     */
+    breakpointPreset?: BreakpointPreset;
+    children: ReactNode;
+    /**
+     * Use `preset` prop instead. This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
      * Usages - for smaller editors such as comments
      */
     reducedBreakpoints?: boolean;
@@ -48,10 +65,12 @@ export type ResponsiveContainerProps = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
-export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+export declare const ResponsiveContainer: ({ children, breakpointPreset, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
 /**
  * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
  */

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

@@ -21,5 +21,5 @@ type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
-export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, breakpointPreset, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.17.3",
+	"version": "0.17.5",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -26,14 +26,14 @@
 		"@atlaskit/button": "^23.6.0",
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/icon-lab": "^5.11.0",
+		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/icon-lab": "^5.12.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.6.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tmp-editor-statsig": "^13.32.0",
+		"@atlaskit/tmp-editor-statsig": "^13.35.0",
 		"@atlaskit/tokens": "^8.0.0",
 		"@atlaskit/tooltip": "^20.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -89,6 +89,9 @@
 	"platform-feature-flags": {
 		"platform_editor_toolbar_aifc_patch_7": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_aifc_responsive_improve": {
+			"type": "boolean"
 		}
 	}
 }