@atlaskit/editor-toolbar 0.3.0 → 0.3.2

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -162,16 +162,12 @@ export const ExampleManuallyComposedToolbar = () => {
 							<ToolbarButton
 								iconBefore={<AIChatIcon label="Ask Rovo" />}
 								onClick={onClick('Ask Rovo')}
-								groupLocation="start"
 								isDisabled={isRovoDisabled}
 							>
 								Ask Rovo
 							</ToolbarButton>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu
-							iconBefore={<MoreItemsIcon label="More formatting" />}
-							groupLocation="end"
-						>
+						<ToolbarDropdownMenu iconBefore={<MoreItemsIcon label="More formatting" />}>
 							<ToolbarDropdownItemSection>
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
@@ -380,16 +376,12 @@ export const ExampleManuallyComposedToolbar = () => {
 									formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
 									onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
 								)}
-								groupLocation="start"
 								isSelected={formatting.bold || formatting.italic}
 								isDisabled={formatting.italic ? isItalicDisabled : isBoldDisabled}
 								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu
-							iconBefore={<MoreItemsIcon label="More formatting" />}
-							groupLocation="end"
-						>
+						<ToolbarDropdownMenu iconBefore={<MoreItemsIcon label="More formatting" />}>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<BoldIcon label="Bold" />}
@@ -471,7 +463,6 @@ export const ExampleManuallyComposedToolbar = () => {
 									listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
 									onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
 								)}
-								groupLocation="start"
 								isSelected={listOrAlignment !== 'none'}
 								isDisabled={
 									listOrAlignment === 'numbered' ? isNumberedListDisabled : isBulletedListDisabled
@@ -480,7 +471,6 @@ export const ExampleManuallyComposedToolbar = () => {
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu
 							iconBefore={<MoreItemsIcon label="Lists, indentation and alignment" />}
-							groupLocation="end"
 						>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -25,12 +25,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/badge": "^18.1.0",
-		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/icon-lab": "^5.6.0",
-		"@atlaskit/logo": "^19.6.0",
+		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",

package/src/index.ts

@@ -9,7 +9,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 
@@ -58,9 +57,15 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { EmojiIcon } from './ui/icons/EmojiIcon';
+export { LayoutIcon } from './ui/icons/LayoutIcon';
+export { ImageIcon } from './ui/icons/ImageIcon';
+export { MentionIcon } from './ui/icons/MentionIcon';
+export { TableIcon } from './ui/icons/TableIcon';
+export { TaskIcon } from './ui/icons/TaskIcon';
 
 export { default as ColorPalette } from './ui/ColorPalette';
 
-export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export type { IconComponent } from './types';
 
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/src/types.ts

@@ -1,4 +1,3 @@
 import { type NewCoreIconProps } from '@atlaskit/icon';
 
-export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
 export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

package/src/ui/ColorPalette/Color.tsx

@@ -48,63 +48,71 @@ const buttonStyles = css({
  * Individual color palette item component
  * Displays a single color swatch with tooltip and selection state
  */
-export const Color = memo<ColorProps>(({
-	autoFocus,
-	tabIndex,
-	value,
-	label,
-	isSelected,
-	borderColor,
-	checkMarkColor = token('color.icon.inverse', '#FFFFFF'),
-	hexToPaletteColor,
-	decorator,
-	onClick,
-	onKeyDown,
-}) => {
-	const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+export const Color = memo<ColorProps>(
+	({
+		autoFocus,
+		tabIndex,
+		value,
+		label,
+		isSelected,
+		borderColor,
+		checkMarkColor = token('color.icon.inverse', '#FFFFFF'),
+		hexToPaletteColor,
+		decorator,
+		onClick,
+		onKeyDown,
+	}) => {
+		const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
 
-	const handleMouseDown = useCallback((e: React.MouseEvent) => {
-		e.preventDefault();
-	}, []);
+		const handleMouseDown = useCallback((e: React.MouseEvent) => {
+			e.preventDefault();
+		}, []);
 
-	const handleClick = useCallback((e: React.MouseEvent) => {
-		e.preventDefault();
-		onClick(value, label);
-	}, [onClick, value, label]);
+		const handleClick = useCallback(
+			(e: React.MouseEvent) => {
+				e.preventDefault();
+				onClick(value, label);
+			},
+			[onClick, value, label],
+		);
 
-	const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-		if (!onKeyDown) {
-			return;
-		}
-		e.preventDefault();
-		onKeyDown(value, label, e);
-	}, [onKeyDown, value, label]);
+		const handleKeyDown = useCallback(
+			(e: React.KeyboardEvent) => {
+				if (!onKeyDown) {
+					return;
+				}
+				e.preventDefault();
+				onKeyDown(value, label, e);
+			},
+			[onKeyDown, value, label],
+		);
 
-	return (
-		<Tooltip content={label}>
-			<span css={buttonWrapperStyles}>
-				<button
-					type="button"
-					css={buttonStyles}
-					aria-label={label}
-					role="radio"
-					aria-checked={isSelected}
-					onClick={handleClick}
-					onKeyDown={handleKeyDown}
-					onMouseDown={handleMouseDown}
-					tabIndex={tabIndex}
-					style={{
-						backgroundColor: colorStyle || token('color.background.input', '#FFFFFF'),
-						border: `1px solid ${borderColor}`,
-					}}
-					autoFocus={autoFocus}
-				>
-					{!decorator && isSelected && (
-						<EditorDoneIcon LEGACY_primaryColor={checkMarkColor} label="" />
-					)}
-					{decorator}
-				</button>
-			</span>
-		</Tooltip>
-	);
-});
+		return (
+			<Tooltip content={label}>
+				<span css={buttonWrapperStyles}>
+					<button
+						type="button"
+						css={buttonStyles}
+						aria-label={label}
+						role="radio"
+						aria-checked={isSelected}
+						onClick={handleClick}
+						onKeyDown={handleKeyDown}
+						onMouseDown={handleMouseDown}
+						tabIndex={tabIndex}
+						style={{
+							backgroundColor: colorStyle || token('color.background.input', '#FFFFFF'),
+							border: `1px solid ${borderColor}`,
+						}}
+						autoFocus={autoFocus}
+					>
+						{!decorator && isSelected && (
+							<EditorDoneIcon LEGACY_primaryColor={checkMarkColor} label="" />
+						)}
+						{decorator}
+					</button>
+				</span>
+			</Tooltip>
+		);
+	},
+);

package/src/ui/ToolbarButton.tsx

@@ -6,7 +6,6 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 import { useToolbarUI } from '../hooks/ui-context';
-import { type ToolbarButtonGroupLocation } from '../types';
 
 const styles = cssMap({
 	button: {
@@ -50,28 +49,6 @@ const styles = cssMap({
 			backgroundColor: token('color.background.selected.pressed'),
 		},
 	},
-	groupStart: {
-		borderTopRightRadius: '0px',
-		borderBottomRightRadius: '0px',
-		justifyContent: 'flex-end',
-		paddingLeft: token('space.075'),
-		paddingRight: token('space.025'),
-	},
-	groupMiddle: {
-		borderTopLeftRadius: '0px',
-		borderBottomLeftRadius: '0px',
-		borderTopRightRadius: '0px',
-		borderBottomRightRadius: '0px',
-		paddingLeft: token('space.050'),
-		paddingRight: token('space.050'),
-	},
-	groupEnd: {
-		borderTopLeftRadius: '0px',
-		borderBottomLeftRadius: '0px',
-		justifyContent: 'flex-start',
-		paddingLeft: token('space.025'),
-		paddingRight: token('space.075'),
-	},
 });
 
 type ToolbarButtonProps = Partial<TriggerProps> & {
@@ -82,7 +59,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	testId?: string;
 	iconBefore: React.ReactNode;
-	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	ariaKeyshortcuts?: string;
 	label?: string;
@@ -102,7 +78,6 @@ export const ToolbarButton = forwardRef(
 			onBlur,
 			onFocus,
 			testId,
-			groupLocation,
 			isDisabled,
 			ariaKeyshortcuts,
 			label,
@@ -117,9 +92,6 @@ export const ToolbarButton = forwardRef(
 				xcss={cx(
 					styles.button,
 					isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
-					groupLocation === 'start' && styles.groupStart,
-					groupLocation === 'middle' && styles.groupMiddle,
-					groupLocation === 'end' && styles.groupEnd,
 				)}
 				aria-pressed={isSelected}
 				aria-expanded={ariaExpanded}

package/src/ui/ToolbarButtonGroup.tsx

@@ -1,12 +1,34 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Children, Fragment, type ReactNode } from 'react';
+
+import { cssMap, jsx } from '@compiled/react';
 
-import { cssMap } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
 	container: {
 		display: 'flex',
 	},
+	firstChild: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+		button: {
+			borderTopRightRadius: 0,
+			borderBottomRightRadius: 0,
+			paddingInline: token('space.050'),
+		},
+	},
+	lastChild: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+		button: {
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0,
+			paddingInline: token('space.075'),
+		},
+	},
 });
 
 type ToolbarButtonGroupProps = {
@@ -14,5 +36,22 @@ type ToolbarButtonGroupProps = {
 };
 
 export const ToolbarButtonGroup = ({ children }: ToolbarButtonGroupProps) => {
-	return <Box xcss={styles.container}>{children}</Box>;
+	const items = Children.toArray(children);
+	const FirstChild = items.at(0);
+	const LastChild = items.at(-1);
+	const middleChildren = items.slice(1, -1);
+
+	return (
+		<Box xcss={styles.container}>
+			{items.length <= 1 ? (
+				children
+			) : (
+				<Fragment>
+					<div css={styles.firstChild}>{FirstChild}</div>
+					{middleChildren}
+					<div css={styles.lastChild}>{LastChild}</div>
+				</Fragment>
+			)}
+		</Box>
+	);
 };

package/src/ui/ToolbarDropdownItem.tsx

@@ -17,12 +17,14 @@ type TextStyle =
 
 const styles = cssMap({
 	toolbarDropdownItem: {
+		display: 'flex',
 		position: 'relative',
 		backgroundColor: token('color.background.neutral.subtle'),
 		width: '100%',
 		minHeight: '36px',
-		paddingLeft: token('space.150'),
-		paddingRight: token('space.150'),
+		minWidth: '230px',
+		paddingInline: token('space.200'),
+		paddingBlock: token('space.100'),
 		'&:focus-visible': {
 			outlineOffset: token('space.negative.025'),
 			borderRadius: token('border.radius'),

package/src/ui/ToolbarDropdownItemSection.tsx

@@ -1,19 +1,21 @@
 import React, { type ReactNode } from 'react';
 
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-
-const styles = cssMap({
-	container: {
-		display: 'flex',
-		flexDirection: 'column',
-	},
-});
+import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
 
 type ToolbarDropdownItemSectionProps = {
 	children?: ReactNode;
+	hasSeparator?: boolean;
+	title?: string;
 };
 
-export const ToolbarDropdownItemSection = ({ children }: ToolbarDropdownItemSectionProps) => {
-	return <Box xcss={styles.container}>{children}</Box>;
+export const ToolbarDropdownItemSection = ({
+	children,
+	hasSeparator,
+	title,
+}: ToolbarDropdownItemSectionProps) => {
+	return (
+		<DropdownItemGroup hasSeparator={hasSeparator} title={title}>
+			{children}
+		</DropdownItemGroup>
+	);
 };

package/src/ui/ToolbarDropdownMenu.tsx

@@ -1,27 +1,39 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type ReactNode, useCallback } from 'react';
 
+import { jsx, cssMap } from '@compiled/react';
+
 import DropdownMenu, { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+import { token } from '@atlaskit/tokens';
 
 import { useToolbarUI } from '../hooks/ui-context';
-import { type ToolbarButtonGroupLocation } from '../types';
 
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 
+const styles = cssMap({
+	sectionMargin: {
+		marginBlock: token('space.050'),
+	},
+});
+
 type ToolbarDropdownMenuProps = {
 	iconBefore: React.ReactNode;
 	children?: ReactNode;
-	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	testId?: string;
 	label?: string;
-	isOpen?: boolean;
-	onOpenChange?: (args: OnOpenChangeArgs) => void;
+	/**
+	 * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+	 */
+	hasSectionMargin?: boolean;
 };
 
 const ToolbarDropdownMenuContent = ({
 	iconBefore,
-	groupLocation,
 	children,
 	isDisabled,
 	testId,
@@ -30,12 +42,15 @@ const ToolbarDropdownMenuContent = ({
 	const { onDropdownOpenChanged } = useToolbarUI();
 	const { closeMenu, isOpen, openMenu } = useToolbarDropdownMenu();
 
-	const handleOpenChange = useCallback((args: OnOpenChangeArgs) => {
-		onDropdownOpenChanged(args);
-		if (!args.isOpen) {
-			closeMenu();
-		}
-	}, [closeMenu, onDropdownOpenChanged]);
+	const handleOpenChange = useCallback(
+		(args: OnOpenChangeArgs) => {
+			onDropdownOpenChanged(args);
+			if (!args.isOpen) {
+				closeMenu();
+			}
+		},
+		[closeMenu, onDropdownOpenChanged],
+	);
 
 	const handleClick = useCallback(() => {
 		if (!isOpen) {
@@ -62,7 +77,6 @@ const ToolbarDropdownMenuContent = ({
 					onFocus={triggerProps.onFocus}
 					testId={testId}
 					iconBefore={iconBefore}
-					groupLocation={groupLocation}
 					isDisabled={isDisabled}
 					label={label}
 				/>
@@ -77,22 +91,21 @@ const ToolbarDropdownMenuContent = ({
 
 export const ToolbarDropdownMenu = ({
 	iconBefore,
-	groupLocation,
 	children,
 	isDisabled,
 	testId,
 	label,
+	hasSectionMargin = true,
 }: ToolbarDropdownMenuProps) => {
 	return (
 		<ToolbarDropdownMenuProvider>
 			<ToolbarDropdownMenuContent
 				iconBefore={iconBefore}
-				groupLocation={groupLocation}
 				isDisabled={isDisabled}
 				testId={testId}
 				label={label}
 			>
-				{children}
+				<div css={hasSectionMargin && styles.sectionMargin}>{children}</div>
 			</ToolbarDropdownMenuContent>
 		</ToolbarDropdownMenuProvider>
 	);

package/src/ui/ToolbarDropdownMenuContext.tsx

@@ -6,7 +6,9 @@ interface ToolbarDropdownMenuContextValue {
 	isOpen: boolean;
 }
 
-const ToolbarDropdownMenuContext = createContext<ToolbarDropdownMenuContextValue | undefined>(undefined);
+const ToolbarDropdownMenuContext = createContext<ToolbarDropdownMenuContextValue | undefined>(
+	undefined,
+);
 
 export const useToolbarDropdownMenu = () => {
 	const context = useContext(ToolbarDropdownMenuContext);
@@ -20,9 +22,7 @@ interface ToolbarDropdownMenuProviderProps {
 	children: React.ReactNode;
 }
 
-export const ToolbarDropdownMenuProvider = ({
-	children,
-}: ToolbarDropdownMenuProviderProps) => {
+export const ToolbarDropdownMenuProvider = ({ children }: ToolbarDropdownMenuProviderProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 
 	const openMenu = () => setIsOpen(true);

package/src/ui/ToolbarTooltip.tsx

@@ -4,7 +4,7 @@ import type { PositionType } from '@atlaskit/tooltip';
 import Tooltip from '@atlaskit/tooltip';
 
 type ToolbarTooltipProps = {
-	content: string;
+	content: React.ReactNode;
 	children: React.ReactNode;
 	position?: PositionType;
 };

package/src/ui/icons/EmojiIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';

package/src/ui/icons/ImageIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export {default as ImageIcon} from '@atlaskit/icon/core/image';

package/src/ui/icons/LayoutIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export {default as LayoutIcon} from '@atlaskit/icon/core/layout-two-columns';

package/src/ui/icons/MentionIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as MentionIcon } from '@atlaskit/icon/core/mention';

package/src/ui/icons/TableIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as TableIcon } from '@atlaskit/icon/core/grid';

package/src/ui/icons/TaskIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as TaskIcon } from '@atlaskit/icon/core/task';

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

@@ -1,3 +0,0 @@
-._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}

package/dist/cjs/ui/ToolbarDropdownDivider.js

@@ -1,20 +0,0 @@
-/* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarDropdownDivider = void 0;
-require("./ToolbarDropdownDivider.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-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 = {
-  divider: "_1o3imuej _1il9nqa1 _1doce4h9"
-};
-var ToolbarDropdownDivider = exports.ToolbarDropdownDivider = function ToolbarDropdownDivider() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)([styles.divider])
-  });
-};

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

@@ -1,2 +0,0 @@
-._1e0c1txw{display:flex}
-._2lx21bp4{flex-direction:column}

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

@@ -1,3 +0,0 @@
-._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}

package/dist/es2019/ui/ToolbarDropdownDivider.js

@@ -1,12 +0,0 @@
-/* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDropdownDivider.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-const styles = {
-  divider: "_1o3imuej _1il9nqa1 _1doce4h9"
-};
-export const ToolbarDropdownDivider = () => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.divider])
-  });
-};

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

@@ -1,2 +0,0 @@
-._1e0c1txw{display:flex}
-._2lx21bp4{flex-direction:column}

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

@@ -1,3 +0,0 @@
-._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}

package/dist/esm/ui/ToolbarDropdownDivider.js

@@ -1,12 +0,0 @@
-/* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDropdownDivider.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-var styles = {
-  divider: "_1o3imuej _1il9nqa1 _1doce4h9"
-};
-export var ToolbarDropdownDivider = function ToolbarDropdownDivider() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.divider])
-  });
-};

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

@@ -1,2 +0,0 @@
-._1e0c1txw{display:flex}
-._2lx21bp4{flex-direction:column}

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

@@ -1 +0,0 @@
-export declare const ToolbarDropdownDivider: () => JSX.Element;

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

@@ -1 +0,0 @@
-export declare const ToolbarDropdownDivider: () => JSX.Element;