@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/top-navigation-theming-with-picker.tsx

@@ -1,128 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useReducer, useState } from 'react';
-
-import { jsx } from '@compiled/react';
-
-import AKBadge from '@atlaskit/badge';
-import { Label } from '@atlaskit/form';
-import { ConfluenceIcon } from '@atlaskit/logo';
-import { Main, Root, SideNav } from '@atlaskit/navigation-system';
-import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	TopNav,
-	TopNavEnd,
-	TopNavMiddle,
-	TopNavStart,
-} from '@atlaskit/navigation-system/layout/top-nav';
-import {
-	AppLogo,
-	AppSwitcher,
-	ChatButton,
-	CreateButton,
-	Help,
-	Profile,
-	Settings,
-} from '@atlaskit/navigation-system/top-nav-items';
-import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
-
-// TODO: consider exposing this type properly, but it isn't needed for normal usage
-// eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
-import { type CustomTheme } from '../src/ui/top-nav-items/themed/get-custom-theme-styles';
-
-import { WithResponsiveViewport } from './utils/example-utils';
-import { MockSearch } from './utils/mock-search';
-
-const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
-
-const TopNavigation = ({ customTheme }: { customTheme?: CustomTheme }) => {
-	const [isAppSwitcherSelected, toggleIsAppSwitcherSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-	const [isChatSelected, toggleIsChatSelected] = useReducer((isSelected) => !isSelected, true);
-	const [isNotificationsSelected, toggleIsNotificationsSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-	const [isHelpSelected, toggleIsHelpSelected] = useReducer((isSelected) => !isSelected, false);
-	const [isSettingsSelected, toggleIsSettingsSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-	const [isProfileSelected, toggleIsProfileSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-
-	return (
-		<TopNav UNSAFE_theme={customTheme}>
-			<TopNavStart>
-				<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
-				<AppSwitcher
-					label="App switcher"
-					onClick={toggleIsAppSwitcherSelected}
-					isSelected={isAppSwitcherSelected}
-				/>
-				<AppLogo
-					href="http://www.atlassian.design"
-					icon={ConfluenceIcon}
-					name="Confluence"
-					label="Home page"
-				/>
-			</TopNavStart>
-			<TopNavMiddle>
-				<MockSearch />
-				<CreateButton>Create</CreateButton>
-			</TopNavMiddle>
-			<TopNavEnd>
-				<ChatButton onClick={toggleIsChatSelected} isSelected={isChatSelected}>
-					Chat
-				</ChatButton>
-				<Notifications
-					badge={Badge}
-					isSelected={isNotificationsSelected}
-					onClick={toggleIsNotificationsSelected}
-					label="Notifications"
-				/>
-				<Help label="Help" onClick={toggleIsHelpSelected} isSelected={isHelpSelected} />
-				<Settings
-					isSelected={isSettingsSelected}
-					onClick={toggleIsSettingsSelected}
-					label="Settings"
-				/>
-				<Profile
-					isSelected={isProfileSelected}
-					onClick={toggleIsProfileSelected}
-					label="Your profile"
-				/>
-			</TopNavEnd>
-		</TopNav>
-	);
-};
-
-export const TopNavigationThemingWithPickerExample = () => {
-	const [backgroundColor, setColor] = useState('#FFFFFF');
-
-	return (
-		<WithResponsiveViewport>
-			<Root>
-				<TopNavigation customTheme={{ backgroundColor, highlightColor: '#d8388a' }} />
-				<SideNav>Hello world</SideNav>
-				<Main>
-					<Label htmlFor="background-color">Background color</Label>
-					<input
-						type="color"
-						id="background-color"
-						value={backgroundColor}
-						onChange={(e) => setColor(e.currentTarget.value)}
-					/>
-				</Main>
-			</Root>
-		</WithResponsiveViewport>
-	);
-};
-
-export default TopNavigationThemingWithPickerExample;

package/examples/top-navigation-theming.tsx

@@ -1,197 +0,0 @@
-import React, { useReducer } from 'react';
-
-import AKBadge from '@atlaskit/badge';
-import { AtlassianIcon, AtlassianLogo, JiraIcon } from '@atlaskit/logo';
-import { parseHex } from '@atlaskit/navigation-system/experimental/color-utils/parse-hex';
-import { parseHsl } from '@atlaskit/navigation-system/experimental/color-utils/parse-hsl';
-import { parseRgb } from '@atlaskit/navigation-system/experimental/color-utils/parse-rgb';
-import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	TopNav,
-	TopNavEnd,
-	TopNavMiddle,
-	TopNavStart,
-} from '@atlaskit/navigation-system/layout/top-nav';
-import {
-	AppLogo,
-	AppSwitcher,
-	ChatButton,
-	CreateButton,
-	CustomLogo,
-	CustomTitle,
-	Help,
-	Profile,
-	Settings,
-} from '@atlaskit/navigation-system/top-nav-items';
-import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Stack } from '@atlaskit/primitives';
-
-// TODO: consider exposing this type properly, but it isn't needed for normal usage
-// eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
-import { type CustomTheme } from '../src/ui/top-nav-items/themed/get-custom-theme-styles';
-
-import { WithResponsiveViewport } from './utils/example-utils';
-import { MockRoot } from './utils/mock-root';
-import { MockSearch } from './utils/mock-search';
-
-const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
-
-const TopNavigationThemingInstance = ({
-	customTheme,
-	useCustomLogo,
-}: {
-	customTheme?: CustomTheme;
-	useCustomLogo?: boolean;
-}) => {
-	const [isAppSwitcherSelected, toggleIsAppSwitcherSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-	const [isChatSelected, toggleIsChatSelected] = useReducer((isSelected) => !isSelected, false);
-	const [isNotificationsSelected, toggleIsNotificationsSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-	const [isHelpSelected, toggleIsHelpSelected] = useReducer((isSelected) => !isSelected, false);
-	const [isSettingsSelected, toggleIsSettingsSelected] = useReducer(
-		(isSelected) => !isSelected,
-		true,
-	);
-	const [isProfileSelected, toggleIsProfileSelected] = useReducer(
-		(isSelected) => !isSelected,
-		false,
-	);
-
-	return (
-		/**
-		 * Wrapping in `Root to ensure the TopNav height is set correctly, as it would in a proper composed usage.
-		 * Root sets the top bar height CSS variable that TopNav uses to set its height
-		 */
-		<MockRoot>
-			<TopNav UNSAFE_theme={customTheme}>
-				<TopNavStart>
-					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
-					<AppSwitcher
-						label="App switcher"
-						onClick={toggleIsAppSwitcherSelected}
-						isSelected={isAppSwitcherSelected}
-					/>
-					{useCustomLogo ? (
-						<CustomLogo
-							href="http://www.atlassian.design"
-							icon={AtlassianIcon}
-							logo={AtlassianLogo}
-							label="Home page"
-						/>
-					) : (
-						<AppLogo
-							href="http://www.atlassian.design"
-							icon={JiraIcon}
-							name="Jira"
-							label="Home page"
-						/>
-					)}
-					<CustomTitle>Optional custom title</CustomTitle>
-				</TopNavStart>
-				<TopNavMiddle>
-					<MockSearch />
-					<CreateButton>Create</CreateButton>
-				</TopNavMiddle>
-				<TopNavEnd>
-					<ChatButton onClick={toggleIsChatSelected} isSelected={isChatSelected}>
-						Chat
-					</ChatButton>
-					<Notifications
-						badge={Badge}
-						isSelected={isNotificationsSelected}
-						onClick={toggleIsNotificationsSelected}
-						label="Notifications"
-					/>
-					<Help label="Help" onClick={toggleIsHelpSelected} isSelected={isHelpSelected} />
-					<Settings
-						isSelected={isSettingsSelected}
-						onClick={toggleIsSettingsSelected}
-						label="Settings"
-					/>
-					<Profile
-						isSelected={isProfileSelected}
-						onClick={toggleIsProfileSelected}
-						label="Your profile"
-					/>
-				</TopNavEnd>
-			</TopNav>
-		</MockRoot>
-	);
-};
-
-export const TopNavigationThemingExample = () => (
-	<WithResponsiveViewport>
-		<Stack space="space.200">
-			<TopNavigationThemingInstance
-				customTheme={{ backgroundColor: parseHex('#FFF'), highlightColor: parseHex('#d8388a') }}
-			/>
-			<TopNavigationThemingInstance
-				// Hex notation is still supported for backwards compatibility
-				// Keeping at least some VR coverage for it
-				customTheme={{ backgroundColor: '#e8cbd2', highlightColor: '#333' }}
-			/>
-			<TopNavigationThemingInstance
-				customTheme={{ backgroundColor: parseHex('#ef816b'), highlightColor: parseHex('#FDEE80') }}
-			/>
-			<TopNavigationThemingInstance
-				customTheme={{ backgroundColor: parseHex('#997A82'), highlightColor: parseHex('#333') }}
-			/>
-			<TopNavigationThemingInstance
-				customTheme={{ backgroundColor: parseHex('#5B5FAE'), highlightColor: parseHex('#6FF2B4') }}
-			/>
-			<TopNavigationThemingInstance
-				customTheme={{ backgroundColor: parseHex('#000448'), highlightColor: parseHex('#6FF2B4') }}
-			/>
-			<TopNavigationThemingInstance
-				customTheme={{ backgroundColor: parseHex('#272727'), highlightColor: parseHex('#E94E34') }}
-			/>
-		</Stack>
-	</WithResponsiveViewport>
-);
-
-export const TopNavigationThemingSingleExample = () => (
-	<WithResponsiveViewport>
-		<TopNavigationThemingInstance
-			customTheme={{ backgroundColor: parseHex('#000448'), highlightColor: parseHex('#6FF2B4') }}
-		/>
-	</WithResponsiveViewport>
-);
-
-export const TopNavigationThemingSingleExampleCustomLogo = () => (
-	<WithResponsiveViewport>
-		<TopNavigationThemingInstance
-			customTheme={{ backgroundColor: parseHex('#000448'), highlightColor: parseHex('#6FF2B4') }}
-			useCustomLogo
-		/>
-	</WithResponsiveViewport>
-);
-
-export const TopNavigationThemingRGBExample = () => (
-	<WithResponsiveViewport>
-		<TopNavigationThemingInstance
-			customTheme={{
-				backgroundColor: parseRgb('rgb(200, 100, 0)'),
-				highlightColor: parseRgb('rgb(0, 33, 66)'),
-			}}
-		/>
-	</WithResponsiveViewport>
-);
-
-export const TopNavigationThemingHSLExample = () => (
-	<WithResponsiveViewport>
-		<TopNavigationThemingInstance
-			customTheme={{
-				backgroundColor: parseHsl('hsl(90deg, 75%, 25%)'),
-				highlightColor: parseHsl('hsl(270deg, 66%, 33%)'),
-			}}
-		/>
-	</WithResponsiveViewport>
-);
-
-export default TopNavigationThemingExample;

package/examples/top-navigation.tsx

@@ -1,126 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@compiled/react';
-
-import AKBadge from '@atlaskit/badge';
-import AtlassianIntelligenceIcon from '@atlaskit/icon/core/atlassian-intelligence';
-import SearchIcon from '@atlaskit/icon/core/search';
-import { ConfluenceIcon } from '@atlaskit/logo';
-import { Root } from '@atlaskit/navigation-system/layout/root';
-import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	TopNav,
-	TopNavEnd,
-	TopNavMiddle,
-	TopNavStart,
-} from '@atlaskit/navigation-system/layout/top-nav';
-import {
-	AppLogo,
-	AppSwitcher,
-	ChatButton,
-	CreateButton,
-	EndItem,
-	Help,
-	Profile,
-	Search,
-	Settings,
-} from '@atlaskit/navigation-system/top-nav-items';
-import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
-import { token } from '@atlaskit/tokens';
-
-import { WithResponsiveViewport } from './utils/example-utils';
-import { MockSearch } from './utils/mock-search';
-
-const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
-
-export const TopNavigationExample = () => (
-	<WithResponsiveViewport>
-		{/**
-		 * Wrapping in `Root to ensure the TopNav height is set correctly, as it would in a proper composed usage.
-		 * Root sets the top bar height CSS variable that TopNav uses to set its height
-		 */}
-		<Root>
-			<TopNav>
-				<TopNavStart>
-					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
-					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
-					<AppLogo
-						href="http://www.atlassian.design"
-						icon={ConfluenceIcon}
-						name="Confluence"
-						label="Home page"
-					/>
-				</TopNavStart>
-				<TopNavMiddle>
-					<Search onClick={() => alert('mobile search')} label="Search" />
-					<CreateButton onClick={() => alert('create')}>Create</CreateButton>
-				</TopNavMiddle>
-				<TopNavEnd>
-					<ChatButton onClick={() => alert('chat')}>Chat</ChatButton>
-					<EndItem
-						icon={AtlassianIntelligenceIcon}
-						onClick={() => alert('inshelligence')}
-						label="Atlassian Intelligence"
-					/>
-					<Help onClick={() => alert('help')} label="Help" />
-					<Notifications
-						badge={Badge}
-						onClick={() => alert('notifications')}
-						label="Notifications"
-					/>
-					<Settings onClick={() => alert('settings')} label="Settings" />
-					<Profile onClick={() => alert('User settings')} label="Your profile" />
-				</TopNavEnd>
-			</TopNav>
-		</Root>
-	</WithResponsiveViewport>
-);
-
-export const SearchRightElem = () => (
-	<WithResponsiveViewport>
-		<Root>
-			<TopNav>
-				<TopNavStart>
-					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
-				</TopNavStart>
-				<TopNavMiddle>
-					<Search
-						iconBefore={AtlassianIntelligenceIcon}
-						elemAfter={<SearchIcon spacing="spacious" color={token('color.icon')} label="" />}
-						onClick={() => alert('mobile search')}
-						label="Search"
-					/>
-					<CreateButton onClick={() => alert('create')}>Create</CreateButton>
-				</TopNavMiddle>
-				<TopNavEnd>
-					<Settings onClick={() => alert('settings')} label="Settings" />
-				</TopNavEnd>
-			</TopNav>
-		</Root>
-	</WithResponsiveViewport>
-);
-
-export const TopNavigationEnlargedSearchInput = () => (
-	<WithResponsiveViewport>
-		<Root>
-			<TopNav>
-				<TopNavStart>
-					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
-				</TopNavStart>
-				<div>
-					<TopNavMiddle>
-						<MockSearch isEnlarged />
-						<CreateButton onClick={() => alert('create')}>Create</CreateButton>
-					</TopNavMiddle>
-				</div>
-				<TopNavEnd>
-					<Settings onClick={() => alert('settings')} label="Settings" />
-				</TopNavEnd>
-			</TopNav>
-		</Root>
-	</WithResponsiveViewport>
-);
-
-export default TopNavigationExample;

package/examples/utils/example-utils.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-/**
- * Adds a responsive viewport meta tag. Useful for examples that need to be responsive based on viewport size.
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
- *
- * This can be cleaned up once the Gemini platform is updated to support responsive scaling - https://hello.jira.atlassian.cloud/browse/UTEST-1686
- */
-export const WithResponsiveViewport = ({ children }: { children: React.ReactNode }) => (
-	<>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		{children}
-	</>
-);

package/examples/utils/long-placeholder-content.tsx

@@ -1,161 +0,0 @@
-import React from 'react';
-
-import { Stack, Text } from '@atlaskit/primitives/compiled';
-
-/**
- * Long placeholder content for showcasing how the layout areas behave when overflowing.
- */
-export function LongPlaceholderContent() {
-	return (
-		<Stack space="space.150">
-			<Text as="p">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a sapien ac nisi maximus
-				tincidunt. Suspendisse id orci eros. Integer vitae eros et nulla sollicitudin lacinia. Nam
-				congue tellus id dui feugiat, nec maximus velit rhoncus. Praesent laoreet diam vitae est
-				tristique, id faucibus leo pellentesque. Donec pellentesque volutpat felis vel tristique.
-				Curabitur tincidunt justo at maximus placerat. Suspendisse efficitur at nisi et ultricies.
-				Nullam in consequat erat, eu auctor justo. Donec sed ex molestie, rhoncus nulla sit amet,
-				vulputate libero. Integer aliquet sapien id velit iaculis congue. Aenean hendrerit mi nec
-				neque varius, eu hendrerit est gravida. Cras porttitor tellus congue velit egestas interdum.
-				Donec imperdiet, nisi accumsan facilisis venenatis, dolor urna pulvinar tellus, et eleifend
-				felis arcu vitae elit. Suspendisse potenti. Phasellus tristique libero rutrum, porta massa
-				sed, tristique lectus.
-			</Text>
-			<Text as="p">
-				Vivamus a pretium ligula. Morbi vestibulum quam sed odio commodo cursus. Vivamus eleifend id
-				erat ut rhoncus. Donec sit amet nulla ac nisi dignissim egestas. Pellentesque dignissim
-				egestas dui. Nunc at eros eros. Nunc tincidunt accumsan metus, non cursus enim consectetur
-				ut. Sed id mattis diam, quis luctus libero. Nulla facilisi. Vivamus condimentum nisi est.
-				Maecenas pretium sollicitudin rhoncus. In hac habitasse platea dictumst. Curabitur ac
-				eleifend purus.
-			</Text>
-			<Text as="p">
-				Integer posuere scelerisque tortor, vitae hendrerit sapien dapibus eget. Curabitur maximus
-				tortor in nisi tempus suscipit in ut ligula. Sed vel neque posuere, vehicula ante
-				sollicitudin, pulvinar metus. In hac habitasse platea dictumst. Sed vestibulum, augue vitae
-				tempor placerat, odio dolor vulputate massa, ullamcorper pulvinar augue sapien quis neque.
-				Donec vitae lobortis ante, ut auctor nisi. In tristique ante quis ornare gravida. Nulla
-				tortor lacus, efficitur in metus dapibus, viverra iaculis dolor. Mauris purus orci, interdum
-				a tincidunt ut, fermentum nec dui. Ut facilisis ut massa in tempor. Nulla quis lorem eget
-				nulla pulvinar laoreet. Pellentesque pharetra magna in dui dictum fermentum. Cras lorem
-				dolor, aliquam sit amet justo vel, ultricies consequat massa. Quisque purus massa, maximus
-				sed vehicula eu, consectetur ac ex. Mauris cursus, diam luctus tempus ultrices, risus lectus
-				dapibus arcu, vitae accumsan velit quam quis metus.
-			</Text>
-			<Text as="p">
-				Nullam nunc enim, malesuada et pellentesque eu, auctor non nibh. Suspendisse potenti.
-				Aliquam sed augue scelerisque, sodales tellus at, eleifend diam. Aliquam ac vestibulum
-				sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-				curae; Nulla et arcu sem. Duis ultrices, enim a aliquam volutpat, enim turpis malesuada
-				tellus, at egestas nunc eros quis quam. Nam iaculis odio euismod vehicula feugiat.
-			</Text>
-			<Text as="p">
-				Vivamus pharetra cursus lacus, ut molestie lacus commodo eu. Mauris dictum a ex malesuada
-				mollis. Vivamus at malesuada leo. Ut aliquam magna non sem sagittis, at finibus augue
-				rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
-				egestas. Cras tempus nunc at dignissim dictum. Aliquam sagittis, lectus nec sagittis
-				aliquam, nisl quam finibus turpis, nec pulvinar enim purus non felis. Nulla lectus mi,
-				tempor non fringilla nec, ullamcorper eget metus. Ut molestie neque quis ipsum porttitor
-				dapibus.
-			</Text>
-			<Text as="p">
-				Pellentesque lobortis porta ligula, sed porta nisi sagittis vitae. Vestibulum ante ipsum
-				primis in faucibus orci luctus et ultrices posuere cubilia curae; In ex enim, porta non
-				tempor a, sodales sodales purus. Morbi sit amet volutpat eros, non tincidunt est.
-				Pellentesque ac efficitur lacus. Maecenas sagittis, augue sit amet tempus vestibulum, nulla
-				felis tempor lacus, vel ullamcorper nunc velit in arcu. Nullam commodo metus id ex consequat
-				porta. Pellentesque dictum, urna sit amet ultricies vestibulum, nisl enim congue nulla, at
-				convallis nisi urna at urna. Integer feugiat viverra ex, id efficitur augue placerat quis.
-				Proin sed rhoncus turpis. Vestibulum leo lorem, suscipit in pellentesque ultrices, pulvinar
-				at sapien. Ut dui libero, malesuada vel sollicitudin nec, dictum sed velit.
-			</Text>
-			<Text as="p">
-				Morbi ac quam mattis, blandit sem eu, pharetra mi. Sed id arcu quis mi molestie finibus.
-				Donec quis eros placerat lectus tempor porta. Proin ultrices lectus nibh, eu varius odio
-				laoreet a. Morbi dignissim molestie purus sed varius. Nam eu nunc nec nunc congue sodales
-				sit amet pulvinar augue. Suspendisse faucibus ut enim sed bibendum.
-			</Text>
-			<Text as="p">
-				Nam ex libero, interdum a cursus sed, faucibus quis sapien. Aenean pellentesque, eros non
-				pellentesque facilisis, velit augue facilisis nisl, eu ultrices ex velit non augue. Fusce
-				lobortis ullamcorper lorem, vel rutrum neque scelerisque et. Fusce sed tempor dui.
-				Suspendisse vel urna id mauris egestas imperdiet. Phasellus vitae porta elit, non suscipit
-				ex. Nullam eget ipsum eu ante luctus aliquam vel sed ligula. Aliquam non tellus eu quam
-				pretium finibus sed nec est. Cras luctus, eros non feugiat luctus, metus est volutpat dolor,
-				id imperdiet justo nulla sed arcu. Aliquam pulvinar gravida arcu tempus molestie. Fusce
-				vehicula, turpis et sollicitudin maximus, eros odio feugiat erat, in vehicula urna diam
-				faucibus erat.
-			</Text>
-			<Text as="p">
-				Suspendisse molestie urna arcu, dignissim tempor elit vulputate nec. Nunc at tellus ac
-				sapien facilisis tincidunt eget vel quam. Praesent vulputate arcu ligula, at vestibulum
-				lectus iaculis nec. Pellentesque dictum, quam vitae sodales ornare, metus mi sollicitudin
-				eros, non dignissim nisl erat eu magna. Vestibulum a ultricies dui, at semper massa. Mauris
-				bibendum, velit vulputate imperdiet sagittis, massa ipsum laoreet ante, non ultricies dui
-				lectus at massa. Vestibulum sed tincidunt dui, ac venenatis eros. Sed dictum feugiat
-				sodales. Nulla sed sapien vel sapien tincidunt suscipit. Nam eget turpis turpis. Phasellus
-				sed tortor tristique ligula venenatis finibus sed a ante. Pellentesque vel luctus magna.
-				Duis vitae congue elit, pellentesque pellentesque est.
-			</Text>
-			<Text as="p">
-				Suspendisse sed arcu sit amet elit faucibus malesuada condimentum non sapien. Quisque ex
-				urna, vulputate ac nisi sed, placerat dignissim nisl. Etiam aliquet lacus in enim cursus,
-				quis pulvinar lectus imperdiet. Praesent quis massa et lacus sagittis blandit sit amet sit
-				amet nulla. Morbi consectetur dapibus orci vulputate interdum. Integer sit amet felis quis
-				sem interdum dapibus sed quis massa. Proin interdum fringilla finibus. Sed tincidunt nisl
-				nec volutpat finibus. Nulla in lobortis nunc, quis volutpat eros. Duis sit amet sem metus.
-				Nullam sit amet lectus posuere magna fringilla elementum in sed lectus.
-			</Text>
-			<Text as="p">
-				Donec lorem neque, interdum id sapien sit amet, consectetur luctus lorem. Integer nisl
-				lacus, ornare eu magna sed, interdum euismod quam. Suspendisse a eros sed leo aliquam
-				faucibus ut et justo. Vivamus eleifend leo sed bibendum cursus. Praesent erat neque, varius
-				viverra sagittis vitae, sagittis sed tellus. Fusce ullamcorper erat sed eros scelerisque
-				maximus. Maecenas pharetra libero in orci euismod, ut varius neque commodo. Sed scelerisque
-				justo pellentesque velit condimentum, quis varius velit dictum. Nullam a sem et nisi sodales
-				scelerisque. Aliquam dignissim dignissim ante vel sodales. Aenean eu magna quis metus dictum
-				tincidunt sodales sit amet nisi.
-			</Text>
-			<Text as="p">
-				Morbi augue erat, elementum eu tortor id, rhoncus ullamcorper purus. Nulla facilisi.
-				Phasellus fermentum ultrices tempus. Duis ultrices lorem non massa vehicula, ut fringilla
-				tellus iaculis. Cras porta mi at neque convallis, a tincidunt mi convallis. Praesent
-				ultricies urna orci, non egestas ligula accumsan in. Quisque non massa gravida, sagittis
-				nibh sit amet, elementum nisi. Phasellus at nisl iaculis, ultricies purus non, interdum
-				elit. Sed molestie ex et felis porta, vitae auctor tortor scelerisque. Duis eros sapien,
-				varius nec consequat aliquet, semper nec sapien. Fusce finibus ipsum mauris, sit amet rutrum
-				diam ultricies commodo. Sed dictum odio quam, vitae posuere lacus elementum eleifend.
-				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
-				egestas. Nulla felis metus, fermentum in nulla tristique, congue dictum odio. Proin sagittis
-				arcu quis ipsum mattis vehicula. Morbi id lacus sit amet est rhoncus viverra.
-			</Text>
-			<Text as="p">
-				Aliquam mollis libero egestas scelerisque gravida. In id ante tortor. Pellentesque vitae
-				rhoncus velit. Mauris vel turpis maximus, feugiat nunc non, pellentesque diam. Donec
-				scelerisque nulla sed ultrices auctor. Phasellus ac mattis purus. Donec maximus augue orci,
-				eu tristique magna gravida vel. Praesent bibendum tempor egestas. Aliquam at congue lacus,
-				at vulputate purus. Suspendisse porta ullamcorper libero ac accumsan. Quisque convallis
-				vitae erat et vestibulum. Praesent at congue ligula. Suspendisse potenti.
-			</Text>
-			<Text as="p">
-				Fusce iaculis diam quis blandit dapibus. Nam imperdiet condimentum velit. Mauris aliquam sem
-				ut dui porta, id congue lectus lobortis. Nullam et tellus nec neque cursus elementum.
-				Suspendisse eget faucibus ex. Proin in magna vulputate orci sollicitudin tincidunt. Interdum
-				et malesuada fames ac ante ipsum primis in faucibus. Curabitur at tempor velit. Praesent
-				suscipit iaculis mauris, quis faucibus urna lacinia laoreet. Curabitur id nisi eget tortor
-				tristique pulvinar eu nec neque. Mauris purus elit, cursus vel tincidunt nec, venenatis a
-				turpis.
-			</Text>
-			<Text as="p">
-				Integer maximus elit et nulla fermentum, at aliquam metus sollicitudin. Mauris condimentum
-				erat eu eros condimentum semper. Quisque interdum dignissim odio id condimentum. Quisque id
-				sagittis erat, eget volutpat justo. Phasellus sed ullamcorper ante, nec lobortis mauris.
-				Mauris iaculis sem velit, eget dictum purus viverra in. Donec maximus, ipsum interdum
-				blandit varius, justo tellus vestibulum erat, in dictum magna magna fringilla turpis.
-				Curabitur mollis, purus vitae sodales facilisis, massa tortor porttitor felis, ac feugiat
-				neque velit sit amet magna. Sed non felis volutpat, suscipit nisi a, euismod justo. Ut nulla
-				lectus, pellentesque sit amet porttitor nec, facilisis id augue.
-			</Text>
-		</Stack>
-	);
-}

package/examples/utils/mock-root.tsx

@@ -1,19 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box, xcss } from '@atlaskit/primitives';
-
-const mockRootStyles = xcss({
-	display: 'grid',
-	gridTemplateAreas: '"top-bar"',
-	height: '48px',
-});
-
-/**
- * A mock root allows us to show multiple top bars on the same example.
- *
- * It also avoids examples occupying the full screen height.
- */
-export function MockRoot({ children }: { children: ReactNode }) {
-	return <Box xcss={mockRootStyles}>{children}</Box>;
-}