@atlaskit/menu 8.4.2 → 8.4.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/menu
 
+## 8.4.4
+
+### Patch Changes
+
+- [`39e543109ec09`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39e543109ec09) -
+  add type info to forwardRef components
+- Updated dependencies
+
+## 8.4.3
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 8.4.2
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.compiled.css

@@ -61,10 +61,14 @@
 ._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}
 ._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._10531r31:visited{color:currentColor}
 ._1053hu5v:visited{color:var(--ds-text-selected,currentColor)}
-._1bg41gjf:focus, ._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
-._1hvwdkaa:focus, ._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt75194a:focus, ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._1bg41gjf:focus{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
+._1hvwdkaa:focus{outline-width:var(--ds-border-width-focused,2px)}
+._49pcnqa1:focus{outline-style:solid}
+._nt75194a:focus{outline-color:var(--ds-border-focused,#2684ff)}
+._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
 ._30l31r31:hover{color:currentColor}

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -1,4 +1,4 @@
-/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/menu-item/button-item.js

@@ -1,4 +1,4 @@
-/* button-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* button-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-item/custom-item.js

@@ -1,4 +1,4 @@
-/* custom-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* custom-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-item/heading-item.js

@@ -1,4 +1,4 @@
-/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-item/link-item.js

@@ -1,4 +1,4 @@
-/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* link-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-item/skeleton-heading-item.compiled.css

@@ -1,16 +1,22 @@
+
 ._14mj53f4:after{border-radius:75pt}
 ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1rjcze3t{padding-block:var(--ds-space-0,0)}
-._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
-._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
-._19oh1hno:after, ._10881hno:before{animation-name:k1mc5q4v}
-._1hfk3yfp:after, ._1rus3yfp:before{background-color:var(--_1j9jaml)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._10881hno:before{animation-name:k1mc5q4v}
+._18f312c5:after{animation-iteration-count:infinite}
+._18lgp3kn:after{animation-timing-function:linear}
+._19oh1hno:after{animation-name:k1mc5q4v}
+._1hfk3yfp:after{background-color:var(--_1j9jaml)}
 ._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1qdgu2gc:after{height:var(--ds-space-100,8px)}
+._1rus3yfp:before{background-color:var(--_1j9jaml)}
 ._1ywu1ule:after{display:block}
+._9nev1yy8:before{animation-direction:alternate}
 ._aetrb3bt:after{content:""}
-._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
-._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._evp612c5:before{animation-iteration-count:infinite}
+._joxl12o8:before{animation-duration:1.5s}
+._kwc012o8:after{animation-duration:1.5s}
+._unfq1yy8:after{animation-direction:alternate}
 ._z0ai1r5k:after{width:30%}
 ._z0airzut:after{width:var(--width)}
+._zo24p3kn:before{animation-timing-function:linear}
 @keyframes k1mc5q4v{0%{background-color:var(--_1j9jaml)}to{background-color:var(--_wb902m)}}

package/dist/cjs/menu-item/skeleton-heading-item.js

@@ -1,4 +1,4 @@
-/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-item/skeleton-item.compiled.css

@@ -4,12 +4,13 @@
 ._rfx3fajl:before{border-radius:var(--ds-radius-small,3px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
 ._18zrv47k{padding-inline:var(--ds-space-250,20px)}
-._1rjcze3t{padding-block:var(--ds-space-0,0)}._11w8rzut:after{flex-basis:var(--width)}
-._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
-._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
-._19oh1hno:after, ._10881hno:before{animation-name:k1mc5q4v}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._10881hno:before{animation-name:k1mc5q4v}
+._11w8rzut:after{flex-basis:var(--width)}
+._18f312c5:after{animation-iteration-count:infinite}
+._18lgp3kn:after{animation-timing-function:linear}
+._19oh1hno:after{animation-name:k1mc5q4v}
 ._1e0c1txw{display:flex}
-._1hfk3yfp:after, ._1rus3yfp:before{background-color:var(--_1j9jaml)}
+._1hfk3yfp:after{background-color:var(--_1j9jaml)}
 ._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1kt9b3bt:before{content:""}
 ._1mbqdlk8:before{margin-inline-end:14px}
@@ -18,6 +19,7 @@
 ._1mp4gktf:before{width:20px}
 ._1qdgrdoj:after{height:9px}
 ._1rhxv77o:before{margin-inline-start:var(--ds-space-025,2px)}
+._1rus3yfp:before{background-color:var(--_1j9jaml)}
 ._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1tke1ylp{min-height:40px}
 ._3mxot94y:after{margin-block-start:1px}
@@ -25,14 +27,18 @@
 ._4rfy1ssb:nth-of-type(2n):after{flex-basis:50%}
 ._69tq19wn:nth-of-type(5n):after{flex-basis:35%}
 ._7bjqidpf:before{flex-shrink:0}
+._9nev1yy8:before{animation-direction:alternate}
 ._aetrb3bt:after{content:""}
 ._baud1nrf:nth-of-type(3n):after{flex-basis:60%}
+._evp612c5:before{animation-iteration-count:infinite}
+._joxl12o8:before{animation-duration:1.5s}
 ._kfgt1k8s:before{height:1.5rem}
 ._kfgtgktf:before{height:20px}
 ._kt4d1n05:nth-of-type(6n):after{flex-basis:77%}
-._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._kwc012o8:after{animation-duration:1.5s}
 ._lcxvglyw{pointer-events:none}
 ._mr7o1vuk:nth-of-type(4n):after{flex-basis:90%}
 ._sf1e1n8h:nth-of-type(1n):after{flex-basis:70%}
-._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._unfq1yy8:after{animation-direction:alternate}
+._zo24p3kn:before{animation-timing-function:linear}
 @keyframes k1mc5q4v{0%{background-color:var(--_1j9jaml)}to{background-color:var(--_wb902m)}}

package/dist/cjs/menu-item/skeleton-item.js

@@ -1,4 +1,4 @@
-/* skeleton-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-section/menu-group.js

@@ -1,4 +1,4 @@
-/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-section/popup-menu-group.js

@@ -1,4 +1,4 @@
-/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/menu-section/section.compiled.css

@@ -1,17 +1,20 @@
 
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
-._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._mqm21ag2{border-block-start:var(--ds-border-width,1px) solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1kt9b3bt:before{content:""}
 ._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
 ._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
-._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1qdgi2wt:after{height:6px}
 ._1reo1wug{overflow-x:auto}
-._1ywu1ule:after, ._cfu11ule:before{display:block}
-._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._1ywu1ule:after{display:block}
+._aetrb3bt:after{content:""}
 ._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._cfu11ule:before{display:block}
 ._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._kfgti2wt:before{height:6px}
 ._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
 [data-section]+._n7cnyjp0{margin-block-start:-6px}
 ._1bg41n1a:focus{outline-offset:-1px}

package/dist/cjs/menu-section/section.js

@@ -1,4 +1,4 @@
-/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* section.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -30,7 +30,7 @@ var styles = {
   root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
   scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
   unscrollable: "_1o9zidpf",
-  thinSeparator: "_mqm21imm",
+  thinSeparator: "_mqm21ag2",
   noSeparator: "_n7cnyjp0",
   sideNavSectionHeading: "_18zru2gc"
 };

package/dist/es2019/internal/components/menu-item-primitive.compiled.css

@@ -61,10 +61,14 @@
 ._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}
 ._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._10531r31:visited{color:currentColor}
 ._1053hu5v:visited{color:var(--ds-text-selected,currentColor)}
-._1bg41gjf:focus, ._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
-._1hvwdkaa:focus, ._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt75194a:focus, ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._1bg41gjf:focus{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
+._1hvwdkaa:focus{outline-width:var(--ds-border-width-focused,2px)}
+._49pcnqa1:focus{outline-style:solid}
+._nt75194a:focus{outline-color:var(--ds-border-focused,#2684ff)}
+._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
 ._30l31r31:hover{color:currentColor}

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -1,4 +1,4 @@
-/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./menu-item-primitive.compiled.css";
 import * as React from 'react';
 import { useContext } from 'react';

package/dist/es2019/menu-item/button-item.js

@@ -1,4 +1,4 @@
-/* button-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* button-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/menu-item/custom-item.js

@@ -1,4 +1,4 @@
-/* custom-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* custom-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/menu-item/heading-item.js

@@ -1,4 +1,4 @@
-/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./heading-item.compiled.css";
 import * as React from 'react';

package/dist/es2019/menu-item/link-item.js

@@ -1,4 +1,4 @@
-/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* link-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/menu-item/skeleton-heading-item.compiled.css

@@ -1,16 +1,21 @@
+
 ._14mj53f4:after{border-radius:75pt}
 ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1rjcze3t{padding-block:var(--ds-space-0,0)}
-._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
-._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
-._19oh1qxh:after, ._10881qxh:before{animation-name:kiz0l3k}
-._1hfklbf8:after, ._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._10881qxh:before{animation-name:kiz0l3k}
+._18f312c5:after{animation-iteration-count:infinite}
+._18lgp3kn:after{animation-timing-function:linear}
+._19oh1qxh:after{animation-name:kiz0l3k}
 ._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1qdgu2gc:after{height:var(--ds-space-100,8px)}
+._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1ywu1ule:after{display:block}
+._9nev1yy8:before{animation-direction:alternate}
 ._aetrb3bt:after{content:""}
-._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
-._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._evp612c5:before{animation-iteration-count:infinite}
+._joxl12o8:before{animation-duration:1.5s}
+._kwc012o8:after{animation-duration:1.5s}
+._unfq1yy8:after{animation-direction:alternate}
 ._z0ai1r5k:after{width:30%}
 ._z0airzut:after{width:var(--width)}
+._zo24p3kn:before{animation-timing-function:linear}
 @keyframes kiz0l3k{0%{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}to{background-color:var(--ds-skeleton-subtle,rgba(9,30,66,.08))}}

package/dist/es2019/menu-item/skeleton-heading-item.js

@@ -1,4 +1,4 @@
-/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./skeleton-heading-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/menu-item/skeleton-item.compiled.css

@@ -4,12 +4,12 @@
 ._rfx3fajl:before{border-radius:var(--ds-radius-small,3px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
 ._18zrv47k{padding-inline:var(--ds-space-250,20px)}
-._1rjcze3t{padding-block:var(--ds-space-0,0)}._11w8rzut:after{flex-basis:var(--width)}
-._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
-._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
-._19oh1qxh:after, ._10881qxh:before{animation-name:kiz0l3k}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._10881qxh:before{animation-name:kiz0l3k}
+._11w8rzut:after{flex-basis:var(--width)}
+._18f312c5:after{animation-iteration-count:infinite}
+._18lgp3kn:after{animation-timing-function:linear}
+._19oh1qxh:after{animation-name:kiz0l3k}
 ._1e0c1txw{display:flex}
-._1hfklbf8:after, ._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1kt9b3bt:before{content:""}
 ._1mbqdlk8:before{margin-inline-end:14px}
@@ -25,14 +25,18 @@
 ._4rfy1ssb:nth-of-type(2n):after{flex-basis:50%}
 ._69tq19wn:nth-of-type(5n):after{flex-basis:35%}
 ._7bjqidpf:before{flex-shrink:0}
+._9nev1yy8:before{animation-direction:alternate}
 ._aetrb3bt:after{content:""}
 ._baud1nrf:nth-of-type(3n):after{flex-basis:60%}
+._evp612c5:before{animation-iteration-count:infinite}
+._joxl12o8:before{animation-duration:1.5s}
 ._kfgt1k8s:before{height:1.5rem}
 ._kfgtgktf:before{height:20px}
 ._kt4d1n05:nth-of-type(6n):after{flex-basis:77%}
-._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._kwc012o8:after{animation-duration:1.5s}
 ._lcxvglyw{pointer-events:none}
 ._mr7o1vuk:nth-of-type(4n):after{flex-basis:90%}
 ._sf1e1n8h:nth-of-type(1n):after{flex-basis:70%}
-._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._unfq1yy8:after{animation-direction:alternate}
+._zo24p3kn:before{animation-timing-function:linear}
 @keyframes kiz0l3k{0%{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}to{background-color:var(--ds-skeleton-subtle,rgba(9,30,66,.08))}}

package/dist/es2019/menu-item/skeleton-item.js

@@ -1,4 +1,4 @@
-/* skeleton-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./skeleton-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/menu-section/menu-group.js

@@ -1,4 +1,4 @@
-/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-group.compiled.css";
 import * as React from 'react';

package/dist/es2019/menu-section/popup-menu-group.js

@@ -1,4 +1,4 @@
-/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/menu-section/section.compiled.css

@@ -1,17 +1,20 @@
 
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
-._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._mqm21ag2{border-block-start:var(--ds-border-width,1px) solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1kt9b3bt:before{content:""}
 ._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
 ._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
-._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1qdgi2wt:after{height:6px}
 ._1reo1wug{overflow-x:auto}
-._1ywu1ule:after, ._cfu11ule:before{display:block}
-._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._1ywu1ule:after{display:block}
+._aetrb3bt:after{content:""}
 ._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._cfu11ule:before{display:block}
 ._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._kfgti2wt:before{height:6px}
 ._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
 [data-section]+._n7cnyjp0{margin-block-start:-6px}
 ._1bg41n1a:focus{outline-offset:-1px}

package/dist/es2019/menu-section/section.js

@@ -1,4 +1,4 @@
-/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* section.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./section.compiled.css";
 import * as React from 'react';
@@ -19,7 +19,7 @@ const styles = {
   root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
   scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
   unscrollable: "_1o9zidpf",
-  thinSeparator: "_mqm21imm",
+  thinSeparator: "_mqm21ag2",
   noSeparator: "_n7cnyjp0",
   sideNavSectionHeading: "_18zru2gc"
 };

package/dist/esm/internal/components/menu-item-primitive.compiled.css

@@ -61,10 +61,14 @@
 ._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}
 ._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._10531r31:visited{color:currentColor}
 ._1053hu5v:visited{color:var(--ds-text-selected,currentColor)}
-._1bg41gjf:focus, ._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
-._1hvwdkaa:focus, ._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt75194a:focus, ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._1bg41gjf:focus{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
+._1hvwdkaa:focus{outline-width:var(--ds-border-width-focused,2px)}
+._49pcnqa1:focus{outline-style:solid}
+._nt75194a:focus{outline-color:var(--ds-border-focused,#2684ff)}
+._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah31gjf:focus-visible{outline-offset:calc(0px - var(--ds-border-width-focused, 2px))}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
 ._30l31r31:hover{color:currentColor}

package/dist/esm/internal/components/menu-item-primitive.js

@@ -1,4 +1,4 @@
-/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./menu-item-primitive.compiled.css";
 import * as React from 'react';
 import { useContext } from 'react';

package/dist/esm/menu-item/button-item.js

@@ -1,4 +1,4 @@
-/* button-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* button-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];

package/dist/esm/menu-item/custom-item.js

@@ -1,4 +1,4 @@
-/* custom-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* custom-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["component", "isDisabled", "isSelected", "isTitleHeading", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];

package/dist/esm/menu-item/heading-item.js

@@ -1,4 +1,4 @@
-/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "testId", "headingLevel", "id", "className"];

package/dist/esm/menu-item/link-item.js

@@ -1,4 +1,4 @@
-/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* link-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];

package/dist/esm/menu-item/skeleton-heading-item.compiled.css

@@ -1,16 +1,22 @@
+
 ._14mj53f4:after{border-radius:75pt}
 ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1rjcze3t{padding-block:var(--ds-space-0,0)}
-._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
-._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
-._19oh1hno:after, ._10881hno:before{animation-name:k1mc5q4v}
-._1hfk3yfp:after, ._1rus3yfp:before{background-color:var(--_1j9jaml)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._10881hno:before{animation-name:k1mc5q4v}
+._18f312c5:after{animation-iteration-count:infinite}
+._18lgp3kn:after{animation-timing-function:linear}
+._19oh1hno:after{animation-name:k1mc5q4v}
+._1hfk3yfp:after{background-color:var(--_1j9jaml)}
 ._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1qdgu2gc:after{height:var(--ds-space-100,8px)}
+._1rus3yfp:before{background-color:var(--_1j9jaml)}
 ._1ywu1ule:after{display:block}
+._9nev1yy8:before{animation-direction:alternate}
 ._aetrb3bt:after{content:""}
-._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
-._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._evp612c5:before{animation-iteration-count:infinite}
+._joxl12o8:before{animation-duration:1.5s}
+._kwc012o8:after{animation-duration:1.5s}
+._unfq1yy8:after{animation-direction:alternate}
 ._z0ai1r5k:after{width:30%}
 ._z0airzut:after{width:var(--width)}
+._zo24p3kn:before{animation-timing-function:linear}
 @keyframes k1mc5q4v{0%{background-color:var(--_1j9jaml)}to{background-color:var(--_wb902m)}}

package/dist/esm/menu-item/skeleton-heading-item.js

@@ -1,4 +1,4 @@
-/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./skeleton-heading-item.compiled.css";
 import * as React from 'react';

package/dist/esm/menu-item/skeleton-item.compiled.css

@@ -4,12 +4,13 @@
 ._rfx3fajl:before{border-radius:var(--ds-radius-small,3px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
 ._18zrv47k{padding-inline:var(--ds-space-250,20px)}
-._1rjcze3t{padding-block:var(--ds-space-0,0)}._11w8rzut:after{flex-basis:var(--width)}
-._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
-._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
-._19oh1hno:after, ._10881hno:before{animation-name:k1mc5q4v}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._10881hno:before{animation-name:k1mc5q4v}
+._11w8rzut:after{flex-basis:var(--width)}
+._18f312c5:after{animation-iteration-count:infinite}
+._18lgp3kn:after{animation-timing-function:linear}
+._19oh1hno:after{animation-name:k1mc5q4v}
 ._1e0c1txw{display:flex}
-._1hfk3yfp:after, ._1rus3yfp:before{background-color:var(--_1j9jaml)}
+._1hfk3yfp:after{background-color:var(--_1j9jaml)}
 ._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1kt9b3bt:before{content:""}
 ._1mbqdlk8:before{margin-inline-end:14px}
@@ -18,6 +19,7 @@
 ._1mp4gktf:before{width:20px}
 ._1qdgrdoj:after{height:9px}
 ._1rhxv77o:before{margin-inline-start:var(--ds-space-025,2px)}
+._1rus3yfp:before{background-color:var(--_1j9jaml)}
 ._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
 ._1tke1ylp{min-height:40px}
 ._3mxot94y:after{margin-block-start:1px}
@@ -25,14 +27,18 @@
 ._4rfy1ssb:nth-of-type(2n):after{flex-basis:50%}
 ._69tq19wn:nth-of-type(5n):after{flex-basis:35%}
 ._7bjqidpf:before{flex-shrink:0}
+._9nev1yy8:before{animation-direction:alternate}
 ._aetrb3bt:after{content:""}
 ._baud1nrf:nth-of-type(3n):after{flex-basis:60%}
+._evp612c5:before{animation-iteration-count:infinite}
+._joxl12o8:before{animation-duration:1.5s}
 ._kfgt1k8s:before{height:1.5rem}
 ._kfgtgktf:before{height:20px}
 ._kt4d1n05:nth-of-type(6n):after{flex-basis:77%}
-._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._kwc012o8:after{animation-duration:1.5s}
 ._lcxvglyw{pointer-events:none}
 ._mr7o1vuk:nth-of-type(4n):after{flex-basis:90%}
 ._sf1e1n8h:nth-of-type(1n):after{flex-basis:70%}
-._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._unfq1yy8:after{animation-direction:alternate}
+._zo24p3kn:before{animation-timing-function:linear}
 @keyframes k1mc5q4v{0%{background-color:var(--_1j9jaml)}to{background-color:var(--_wb902m)}}

package/dist/esm/menu-item/skeleton-item.js

@@ -1,4 +1,4 @@
-/* skeleton-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./skeleton-item.compiled.css";
 import * as React from 'react';

package/dist/esm/menu-section/menu-group.js

@@ -1,4 +1,4 @@
-/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "menuLabel", "className"];

package/dist/esm/menu-section/popup-menu-group.js

@@ -1,4 +1,4 @@
-/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["maxWidth", "minWidth"];

package/dist/esm/menu-section/section.compiled.css

@@ -1,17 +1,20 @@
 
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
-._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._mqm21ag2{border-block-start:var(--ds-border-width,1px) solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1kt9b3bt:before{content:""}
 ._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
 ._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
-._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1qdgi2wt:after{height:6px}
 ._1reo1wug{overflow-x:auto}
-._1ywu1ule:after, ._cfu11ule:before{display:block}
-._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._1ywu1ule:after{display:block}
+._aetrb3bt:after{content:""}
 ._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._cfu11ule:before{display:block}
 ._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._kfgti2wt:before{height:6px}
 ._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
 [data-section]+._n7cnyjp0{margin-block-start:-6px}
 ._1bg41n1a:focus{outline-offset:-1px}

package/dist/esm/menu-section/section.js

@@ -1,4 +1,4 @@
-/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* section.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "className"];
@@ -21,7 +21,7 @@ var styles = {
   root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
   scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
   unscrollable: "_1o9zidpf",
-  thinSeparator: "_mqm21imm",
+  thinSeparator: "_mqm21ag2",
   noSeparator: "_n7cnyjp0",
   sideNavSectionHeading: "_18zru2gc"
 };

package/dist/types/menu-section/section.d.ts

@@ -7,5 +7,5 @@ import type { SectionProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+declare const Section: React.ForwardRefExoticComponent<React.PropsWithoutRef<SectionProps> & React.RefAttributes<HTMLElement>>;
 export default Section;

package/dist/types-ts4.5/menu-section/section.d.ts

@@ -7,5 +7,5 @@ import type { SectionProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+declare const Section: React.ForwardRefExoticComponent<React.PropsWithoutRef<SectionProps> & React.RefAttributes<HTMLElement>>;
 export default Section;

package/offerings.json

@@ -0,0 +1,34 @@
+[
+	{
+		"name": "MenuGroup",
+		"package": "@atlaskit/menu",
+		"import": {
+			"name": "MenuGroup",
+			"package": "@atlaskit/menu",
+			"type": "named"
+		},
+		"keywords": ["menu", "group", "navigation", "section", "items"],
+		"categories": ["navigation"],
+		"shortDescription": "A component for displaying menus with grouped items.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide clear menu item labels",
+			"Use appropriate ARIA attributes",
+			"Ensure keyboard navigation with arrow keys",
+			"Provide clear section titles"
+		],
+		"usageGuidelines": [
+			"Use for organizing menu items into sections",
+			"Group related menu items together",
+			"Use clear section titles",
+			"Consider menu density and spacing"
+		],
+		"contentGuidelines": [
+			"Use clear, descriptive menu item labels",
+			"Group related items logically",
+			"Use consistent terminology",
+			"Keep menu structure simple"
+		],
+		"examples": ["./examples/ai/menu.tsx"]
+	}
+]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "8.4.2",
+	"version": "8.4.4",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,13 +40,13 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^3.1.0",
+		"@atlaskit/app-provider": "^3.2.0",
 		"@atlaskit/css": "^0.14.0",
-		"@atlaskit/interaction-context": "^3.0.0",
+		"@atlaskit/interaction-context": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -59,9 +59,9 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.4.0",
-		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/docs": "^11.1.0",
+		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-object": "^7.2.0",
 		"@atlaskit/link": "^3.2.0",