@atlaskit/editor-toolbar 0.2.3 → 0.3.1

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -1,16 +1,39 @@
-import React from 'react';
+/* ToolbarDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolbarDropdownMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
-export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
+import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+var styles = {
+  sectionMargin: "_1mou1b66"
+};
+var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
-    groupLocation = _ref.groupLocation,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label;
   var _useToolbarUI = useToolbarUI(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
+  var _useToolbarDropdownMe = useToolbarDropdownMenu(),
+    closeMenu = _useToolbarDropdownMe.closeMenu,
+    isOpen = _useToolbarDropdownMe.isOpen,
+    openMenu = _useToolbarDropdownMe.openMenu;
+  var handleOpenChange = useCallback(function (args) {
+    onDropdownOpenChanged(args);
+    if (!args.isOpen) {
+      closeMenu();
+    }
+  }, [closeMenu, onDropdownOpenChanged]);
+  var handleClick = useCallback(function () {
+    if (!isOpen) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, openMenu, isOpen]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -20,15 +43,35 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         "aria-haspopup": triggerProps['aria-haspopup'],
         "aria-controls": triggerProps['aria-controls'],
         onBlur: triggerProps.onBlur,
-        onClick: triggerProps.onClick,
+        onClick: function onClick(e) {
+          handleClick();
+          triggerProps.onClick && triggerProps.onClick(e);
+        },
         onFocus: triggerProps.onFocus,
         testId: testId,
         iconBefore: iconBefore,
-        groupLocation: groupLocation,
         isDisabled: isDisabled,
         label: label
       });
     },
-    onOpenChange: onDropdownOpenChanged
+    onOpenChange: handleOpenChange,
+    isOpen: isOpen
   }, children);
+};
+export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
+  var iconBefore = _ref2.iconBefore,
+    children = _ref2.children,
+    isDisabled = _ref2.isDisabled,
+    testId = _ref2.testId,
+    label = _ref2.label,
+    _ref2$hasSectionMargi = _ref2.hasSectionMargin,
+    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+    iconBefore: iconBefore,
+    isDisabled: isDisabled,
+    testId: testId,
+    label: label
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([hasSectionMargin && styles.sectionMargin])
+  }, children)));
 };

package/dist/esm/ui/ToolbarDropdownMenuContext.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useState } from 'react';
+var ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
+export var useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+  var context = useContext(ToolbarDropdownMenuContext);
+  if (!context) {
+    throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+  }
+  return context;
+};
+export var ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var openMenu = function openMenu() {
+    return setIsOpen(true);
+  };
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+  };
+  var contextValue = {
+    openMenu: openMenu,
+    closeMenu: closeMenu,
+    isOpen: isOpen
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContext.Provider, {
+    value: contextValue
+  }, children);
+};

package/dist/types/index.d.ts

@@ -8,8 +8,8 @@ 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';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -55,5 +55,6 @@ 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 type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export { default as ColorPalette } from './ui/ColorPalette';
+export type { IconComponent } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types/types.d.ts

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

package/dist/types/ui/ColorPalette/Color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ColorProps } from './types';
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export declare const Color: React.NamedExoticComponent<ColorProps>;

package/dist/types/ui/ColorPalette/getColorMessage.d.ts

@@ -0,0 +1,8 @@
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+export default function getColorMessage(messages: Record<string | number, MessageDescriptor>, color: string): MessageDescriptor | undefined;

package/dist/types/ui/ColorPalette/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorPaletteProps } from './types';
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+export default ColorPalette;

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

@@ -0,0 +1,89 @@
+import { type ReactElement } from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Represents a single color in the palette
+ */
+export interface PaletteColor {
+    /** The color value (hex, token, etc.) */
+    value: string;
+    /** Display label for the color */
+    label: string;
+    /** Border color for the color swatch */
+    border: string;
+    /** Optional internationalization message */
+    message?: MessageDescriptor;
+    /** Optional decorator element to display instead of checkmark */
+    decorator?: ReactElement;
+}
+/**
+ * Array of palette colors
+ */
+export type Palette = Array<PaletteColor>;
+/**
+ * Tooltip messages for different themes
+ */
+export type PaletteTooltipMessages = {
+    dark: Record<string, MessageDescriptor>;
+    light: Record<string, MessageDescriptor>;
+};
+/**
+ * Configuration options for the color palette
+ */
+export interface PaletteOptions {
+    /** Array of colors to display */
+    palette: PaletteColor[];
+    /**
+     * Function to convert hex codes to design system tokens
+     * Different color palettes may use different mapping functions
+     */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /**
+     * Tooltip messages for different color themes
+     * Consumer determines which tooltip messages to use
+     */
+    paletteColorTooltipMessages?: PaletteTooltipMessages;
+}
+/**
+ * Props for the main ColorPalette component
+ */
+export interface ColorPaletteProps {
+    /** Currently selected color value */
+    selectedColor: string | null;
+    /** Callback when a color is clicked */
+    onClick: (value: string, label: string) => void;
+    /** Optional callback for keyboard navigation */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Number of columns in the palette grid */
+    cols?: number;
+    /** Optional CSS class name */
+    className?: string;
+    /** Palette configuration options */
+    paletteOptions: PaletteOptions;
+}
+/**
+ * Props for individual color palette items
+ */
+export interface ColorProps {
+    /** The color value */
+    value: string;
+    /** Display label for accessibility */
+    label: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** Whether this color is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick: (value: string, label: string) => void;
+    /** Keyboard event handler */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Border color for the swatch */
+    borderColor: string;
+    /** Color for the checkmark icon */
+    checkMarkColor?: string;
+    /** Whether to auto-focus this item */
+    autoFocus?: boolean;
+    /** Function to convert hex to palette color */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /** Optional decorator element */
+    decorator?: ReactElement;
+}

package/dist/types/ui/ColorPalette/utils.d.ts

@@ -0,0 +1,40 @@
+import type { PaletteColor } from './types';
+/**
+ * Default number of columns in the color picker
+ */
+export declare const DEFAULT_COLOR_PICKER_COLUMNS = 7;
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+export declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor[], selectedColor: string | null, cols?: number): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+export declare const getTokenCSSVariableValue: (variableExpression: string) => string;

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

@@ -1,6 +1,5 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarButtonProps = Partial<TriggerProps> & {
     children?: ReactNode;
     isSelected?: boolean;
@@ -9,7 +8,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
     iconBefore: React.ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;
     label?: string;

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

@@ -1,6 +1,10 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarButtonGroupProps = {
     children?: ReactNode;
 };
-export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => React.JSX.Element;
+export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,8 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownItemSectionProps = {
     children?: ReactNode;
+    hasSeparator?: boolean;
+    title?: string;
 };
-export declare const ToolbarDropdownItemSection: ({ children }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
+export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
 export {};

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

@@ -1,12 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type ReactNode } from 'react';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
     children?: ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     testId?: string;
     label?: string;
+    /**
+     * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+     */
+    hasSectionMargin?: boolean;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ToolbarDropdownMenuContextValue {
+    openMenu: () => void;
+    closeMenu: () => void;
+    isOpen: boolean;
+}
+export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+interface ToolbarDropdownMenuProviderProps {
+    children: React.ReactNode;
+}
+export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export {};

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

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

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

@@ -8,8 +8,8 @@ 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';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -55,5 +55,6 @@ 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 type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export { default as ColorPalette } from './ui/ColorPalette';
+export type { IconComponent } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

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

package/dist/types-ts4.5/ui/ColorPalette/Color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ColorProps } from './types';
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export declare const Color: React.NamedExoticComponent<ColorProps>;

package/dist/types-ts4.5/ui/ColorPalette/getColorMessage.d.ts

@@ -0,0 +1,8 @@
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+export default function getColorMessage(messages: Record<string | number, MessageDescriptor>, color: string): MessageDescriptor | undefined;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorPaletteProps } from './types';
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+export default ColorPalette;

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

@@ -0,0 +1,89 @@
+import { type ReactElement } from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Represents a single color in the palette
+ */
+export interface PaletteColor {
+    /** The color value (hex, token, etc.) */
+    value: string;
+    /** Display label for the color */
+    label: string;
+    /** Border color for the color swatch */
+    border: string;
+    /** Optional internationalization message */
+    message?: MessageDescriptor;
+    /** Optional decorator element to display instead of checkmark */
+    decorator?: ReactElement;
+}
+/**
+ * Array of palette colors
+ */
+export type Palette = Array<PaletteColor>;
+/**
+ * Tooltip messages for different themes
+ */
+export type PaletteTooltipMessages = {
+    dark: Record<string, MessageDescriptor>;
+    light: Record<string, MessageDescriptor>;
+};
+/**
+ * Configuration options for the color palette
+ */
+export interface PaletteOptions {
+    /** Array of colors to display */
+    palette: PaletteColor[];
+    /**
+     * Function to convert hex codes to design system tokens
+     * Different color palettes may use different mapping functions
+     */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /**
+     * Tooltip messages for different color themes
+     * Consumer determines which tooltip messages to use
+     */
+    paletteColorTooltipMessages?: PaletteTooltipMessages;
+}
+/**
+ * Props for the main ColorPalette component
+ */
+export interface ColorPaletteProps {
+    /** Currently selected color value */
+    selectedColor: string | null;
+    /** Callback when a color is clicked */
+    onClick: (value: string, label: string) => void;
+    /** Optional callback for keyboard navigation */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Number of columns in the palette grid */
+    cols?: number;
+    /** Optional CSS class name */
+    className?: string;
+    /** Palette configuration options */
+    paletteOptions: PaletteOptions;
+}
+/**
+ * Props for individual color palette items
+ */
+export interface ColorProps {
+    /** The color value */
+    value: string;
+    /** Display label for accessibility */
+    label: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** Whether this color is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick: (value: string, label: string) => void;
+    /** Keyboard event handler */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Border color for the swatch */
+    borderColor: string;
+    /** Color for the checkmark icon */
+    checkMarkColor?: string;
+    /** Whether to auto-focus this item */
+    autoFocus?: boolean;
+    /** Function to convert hex to palette color */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /** Optional decorator element */
+    decorator?: ReactElement;
+}

package/dist/types-ts4.5/ui/ColorPalette/utils.d.ts

@@ -0,0 +1,40 @@
+import type { PaletteColor } from './types';
+/**
+ * Default number of columns in the color picker
+ */
+export declare const DEFAULT_COLOR_PICKER_COLUMNS = 7;
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+export declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor[], selectedColor: string | null, cols?: number): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+export declare const getTokenCSSVariableValue: (variableExpression: string) => string;

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

@@ -1,6 +1,5 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarButtonProps = Partial<TriggerProps> & {
     children?: ReactNode;
     isSelected?: boolean;
@@ -9,7 +8,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
     iconBefore: React.ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;
     label?: string;

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

@@ -1,6 +1,10 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarButtonGroupProps = {
     children?: ReactNode;
 };
-export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => React.JSX.Element;
+export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,8 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownItemSectionProps = {
     children?: ReactNode;
+    hasSeparator?: boolean;
+    title?: string;
 };
-export declare const ToolbarDropdownItemSection: ({ children }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
+export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
 export {};

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

@@ -1,12 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type ReactNode } from 'react';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
     children?: ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     testId?: string;
     label?: string;
+    /**
+     * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+     */
+    hasSectionMargin?: boolean;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};