@atlaskit/page-layout 1.2.4 → 1.2.7

package/dist/esm/components/slots/left-sidebar.js

@@ -4,6 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
@@ -15,6 +17,14 @@ import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
 import SlotDimensions from './slot-dimensions';
+/**
+ * __Left sidebar__
+ *
+ * Provides a slot for a left sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,
@@ -233,7 +243,8 @@ var LeftSidebar = function LeftSidebar(props) {
     }, children), jsx(ResizeControl, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
-      resizeButtonLabel: resizeButtonLabel,
+      resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      ,
       overrides: overrides,
       onCollapse: onCollapse,
       onExpand: onExpand,

package/dist/esm/components/slots/main.js

@@ -35,6 +35,14 @@ var draggingStyles = css({
 var flyoutStyles = css({
   marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
+/**
+ * __Main__
+ *
+ * Provides a slot for main content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var Main = function Main(props) {
   var children = props.children,

package/dist/esm/components/slots/page-layout.js

@@ -19,6 +19,14 @@ var gridStyles = css({
   gridTemplateRows: "".concat(BANNER_HEIGHT, " ").concat(TOP_NAVIGATION_HEIGHT, " auto"),
   outline: 'none'
 });
+/**
+ * __Page layout__
+ *
+ * A collection of components which let you compose an application's page layout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,

package/dist/esm/components/slots/right-panel.js

@@ -19,6 +19,14 @@ var fixedStyles = css({
   right: 0,
   bottom: 0
 });
+/**
+ * __Right panel__
+ *
+ * Provides a slot for a right panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var RightPanel = function RightPanel(props) {
   var children = props.children,

package/dist/esm/components/slots/right-sidebar.js

@@ -46,6 +46,14 @@ var fixedOuterStyles = css({
     content: "''"
   }
 });
+/**
+ * __Right sidebar__
+ *
+ * Provides a slot for a right sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,

package/dist/esm/components/slots/top-navigation.js

@@ -20,6 +20,14 @@ var fixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: LEFT_PANEL_WIDTH
 });
+/**
+ * __Top navigation__
+ *
+ * Provides a slot for top navigation within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,

package/dist/esm/controllers/sidebar-resize-context.js

@@ -7,9 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { createContext, useContext, useEffect } from 'react';
-
-var noop = function noop() {};
-
+import noop from '@atlaskit/ds-lib/noop';
 var leftSidebarState = {
   isFlyoutOpen: false,
   isResizing: false,
@@ -18,7 +16,8 @@ var leftSidebarState = {
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
   isFixed: true
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export var SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
   expandLeftSidebar: noop,
@@ -34,7 +33,7 @@ export var usePageLayoutResize = function usePageLayoutResize() {
   return context;
 };
 /**
- * **WARNING:** This hook is intended as a temporary solution and
+ * _**WARNING:**_ This hook is intended as a temporary solution and
  * is likely to be removed in a future version of page-layout.
  *
  * ---

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -1,19 +1,19 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
 import { SidebarResizeContext } from './sidebar-resize-context';
 
-var noop = function noop() {};
-
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
   var isLeftSidebarCollapsed = arguments.length > 1 ? arguments[1] : undefined;
   var leftSidebarState = arguments.length > 2 ? arguments[2] : undefined;
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export var SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,
@@ -40,6 +40,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       var $leftSidebarResizeController = document.querySelector("[".concat(GRAB_AREA_SELECTOR, "]"));
       var isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
       handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
 
       document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -49,6 +50,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     var $leftSidebar = document.querySelector(leftSidebarSelector);
 
     if ($leftSidebar && !isReducedMotion()) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
     }
   }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);

package/dist/esm/controllers/skip-link-context.js

@@ -1,7 +1,6 @@
 import { createContext, useContext, useEffect } from 'react';
-
-var noop = function noop() {};
-
+import noop from '@atlaskit/ds-lib/noop';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SkipLinksContext = /*#__PURE__*/createContext({
   skipLinksData: [],
   registerSkipLink: noop,

package/dist/esm/controllers/skip-link-controller.js

@@ -28,7 +28,8 @@ var byDOMOrder = function byDOMOrder(a, b) {
   }
 
   return indexA - indexB;
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export var SkipLinksController = function SkipLinksController(_ref) {
   var children = _ref.children;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.2.4",
+	"version": "1.2.7",
 	"sideEffects": false
 }

package/dist/types/common/types.d.ts

@@ -2,27 +2,39 @@ import { ElementType, ReactElement, ReactNode } from 'react';
 import { ResizeButtonProps } from '../components/resize-control/types';
 import { LeftSidebarState } from '../controllers/sidebar-resize-context';
 interface SlotProps {
-    /** Sets positon to fixed. */
+    /**
+     * Sets positon to fixed.
+     */
     isFixed?: boolean;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests .
      */
     testId?: string;
-    /** React Children! */
+    /**
+     * React Children!
+     */
     children: ReactNode;
     id?: string;
     skipLinkTitle?: string;
 }
 export interface SlotHeightProps extends SlotProps {
-    /** It save height in local storage. */
+    /**
+     * It save height in local storage.
+     */
     shouldPersistHeight?: boolean;
-    /** Height! */
+    /**
+     * Height!
+     */
     height?: number;
 }
 export interface SlotWidthProps extends SlotProps {
-    /** It save width in local storage. */
+    /**
+     * It save width in local storage.
+     */
     shouldPersistWidth?: boolean;
-    /** Width! */
+    /**
+     * Width!
+     */
     width?: number;
 }
 export interface LeftSidebarProps extends SlotWidthProps {
@@ -30,48 +42,76 @@ export interface LeftSidebarProps extends SlotWidthProps {
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /** You can override prop(s) for the mentioned component(s). */
+    /**
+     * You can override prop(s) for the mentioned component(s).
+     */
     overrides?: {
         ResizeButton?: {
             render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
         };
     };
-    /** Display label for grab area. This will be announced to the screenreaders when the grab area receives focus */
+    /**
+     * Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
+     */
     resizeGrabAreaLabel?: string;
-    /** Display label for resize button. */
+    /**
+     * Display label for resize button.
+     */
     resizeButtonLabel?: string;
-    /** Called when left-sidebar is collapsed. */
+    /**
+     * Called when left-sidebar is collapsed.
+     */
     onCollapse?: () => void;
-    /** Called when left-sidebar is expanded. */
+    /**
+     * Called when left-sidebar is expanded.
+     */
     onExpand?: () => void;
-    /** Called when left-sidebar resize starts using mouse or touch. */
+    /**
+     * Called when left-sidebar resize starts using mouse or touch.
+     */
     onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar resize ends using mouse or touch. */
+    /**
+     * Called when left-sidebar resize ends using mouse or touch.
+     */
     onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar is collapsed and mouse leaves the area. */
+    /**
+     * Called when left-sidebar is collapsed and mouse leaves the area.
+     */
     onFlyoutCollapse?: () => void;
-    /** Called after flyout delay when left-sidebar is collapsed and mouse enters the area. */
+    /**
+     * Called after flyout delay when left-sidebar is collapsed and mouse enters the area.
+     */
     onFlyoutExpand?: () => void;
-    /** Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage */
+    /**
+     * Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage
+     */
     collapsedState?: 'collapsed' | 'expanded';
-    /** Controls the width when LeftSidebar mounts, this will override the setting in localStorage */
+    /**
+     * Controls the width when LeftSidebar mounts, this will override the setting in localStorage
+     */
     width?: number;
 }
 export declare type SidebarResizeControllerProps = {
-    /** Called when left-sidebar expanded. */
+    /**
+     * Called when left-sidebar expanded.
+     */
     onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar collapsed. */
+    /**
+     * Called when left-sidebar collapsed.
+     */
     onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
 };
 export declare type DimensionNames = 'leftPanelWidth' | 'bannerHeight' | 'topNavigationHeight' | 'leftSidebarWidth' | 'leftSidebarFlyoutWidth' | 'rightSidebarWidth' | 'rightPanelWidth';
 export declare type Dimensions = Partial<Record<DimensionNames, number>>;
 export interface PageLayoutProps extends SidebarResizeControllerProps {
-    /** React children! */
+    /**
+     * React children!
+     */
     children: ReactNode;
     skipLinksLabel?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-     **/
+     */
     testId?: string;
 }
 export type { LeftSidebarState } from '../controllers/sidebar-resize-context';

package/dist/types/common/utils.d.ts

@@ -1,4 +1,4 @@
-import { DimensionNames, Dimensions } from '../common/types';
+import { DimensionNames, Dimensions } from './types';
 declare const emptyGridState: Dimensions;
 declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
 declare const getGridStateFromStorage: (key: string) => any;

package/dist/types/components/slots/banner.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotHeightProps } from '../../common/types';
+/**
+ * __Banner__
+ *
+ * Provides a slot for a Banner within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const Banner: (props: SlotHeightProps) => JSX.Element;
 export default Banner;

package/dist/types/components/slots/content.d.ts

@@ -1,12 +1,22 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 interface ContentProps {
-    /** React children! */
+    /**
+     * React children
+     */
     children: ReactNode;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-     **/
+     */
     testId?: string;
 }
+/**
+ * __Content__
+ *
+ * Provides a slot for your application content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const Content: (props: ContentProps) => JSX.Element;
 export default Content;

package/dist/types/components/slots/left-panel.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
+/**
+ * __Left panel__
+ *
+ * Provides a slot for a left panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const LeftPanel: (props: SlotWidthProps) => JSX.Element;
 export default LeftPanel;

package/dist/types/components/slots/left-sidebar-without-resize.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
+/**
+ * __Left sidebar without resize__
+ *
+ * Provides a slot for a left sidebar without resize within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const LeftSidebarWithoutResize: (props: SlotWidthProps) => JSX.Element;
 export default LeftSidebarWithoutResize;

package/dist/types/components/slots/left-sidebar.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { LeftSidebarProps } from '../../common/types';
+/**
+ * __Left sidebar__
+ *
+ * Provides a slot for a left sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const LeftSidebar: (props: LeftSidebarProps) => JSX.Element;
 export default LeftSidebar;

package/dist/types/components/slots/main.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
+/**
+ * __Main__
+ *
+ * Provides a slot for main content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const Main: (props: SlotWidthProps) => JSX.Element;
 export default Main;

package/dist/types/components/slots/page-layout.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { PageLayoutProps } from '../../common/types';
+/**
+ * __Page layout__
+ *
+ * A collection of components which let you compose an application's page layout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => JSX.Element;
 export default PageLayout;

package/dist/types/components/slots/right-panel.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
+/**
+ * __Right panel__
+ *
+ * Provides a slot for a right panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const RightPanel: (props: SlotWidthProps) => JSX.Element;
 export default RightPanel;

package/dist/types/components/slots/right-sidebar.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotWidthProps } from '../../common/types';
+/**
+ * __Right sidebar__
+ *
+ * Provides a slot for a right sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const RightSidebar: (props: SlotWidthProps) => JSX.Element;
 export default RightSidebar;

package/dist/types/components/slots/top-navigation.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
 import { SlotHeightProps } from '../../common/types';
+/**
+ * __Top navigation__
+ *
+ * Provides a slot for top navigation within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 declare const TopNavigation: (props: SlotHeightProps) => JSX.Element;
 export default TopNavigation;

package/dist/types/controllers/sidebar-resize-context.d.ts

@@ -23,7 +23,7 @@ export declare const usePageLayoutResize: () => {
     leftSidebarState: LeftSidebarState;
 };
 /**
- * **WARNING:** This hook is intended as a temporary solution and
+ * _**WARNING:**_ This hook is intended as a temporary solution and
  * is likely to be removed in a future version of page-layout.
  *
  * ---

package/dist/types/controllers/types.d.ts

@@ -4,11 +4,17 @@ export declare type SkipLinkContextProps = {
     unregisterSkipLink: (id: string | undefined) => void;
 };
 export declare type SkipLinkData = {
-    /** id for the element that will be skipped to */
+    /**
+     * id for the element that will be skipped to
+     */
     id: string;
-    /** Text for the link that will appear in the skip link menu */
+    /**
+     * Text for the link that will appear in the skip link menu
+     */
     skipLinkTitle: string;
-    /** Desired position in the skip link menu */
+    /**
+     * Desired position in the skip link menu
+     */
     listIndex?: number;
 };
 export declare type SkipLinkI18n = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.2.4",
+  "version": "1.2.7",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,23 +13,26 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Page layout"
+      "name": "Page layout",
+      "category": "Components"
     }
   },
   "homepage": "https://atlassian.design/components/page-layout/",
   "dependencies": {
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.1.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
+    "bind-event-listener": "^2.1.1",
     "raf-schd": "^4.0.3"
   },
   "peerDependencies": {
@@ -43,12 +46,12 @@
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/icon": "*",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/notification-indicator": "^9.0.0",
     "@atlaskit/notification-log-client": "^6.0.0",
-    "@atlaskit/onboarding": "^10.4.0",
-    "@atlaskit/popup": "^1.3.0",
+    "@atlaskit/onboarding": "^10.5.0",
+    "@atlaskit/popup": "^1.4.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/side-navigation": "^1.2.0",
     "@atlaskit/ssr": "*",
@@ -75,6 +78,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": [
         "lite-mode"
       ],