@atlaskit/editor-plugin-block-controls/dist/cjs/ui/drag-handle-nested-icon.js

Block controls plugin for @atlaskit/editor-core

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DragHandleNestedIcon = void 0;
var _react = require("@emotion/react");
/** @jsxRuntime classic */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var spanStyles = (0, _react.css)({
  display: 'inline-block',
  boxSizing: 'border-box',
  flexShrink: 0
});
var svgSizeStyles = (0, _react.css)({
  width: '24px',
  height: '24px'
});
var svgStyles = (0, _react.css)({
  color: 'currentColor',
  overflow: 'hidden',
  pointerEvents: 'none',
  verticalAlign: 'bottom'
});

/**
 * Custom 3-dot vertical drag handle icon for nested nodes.
 * Similar to DragHandleVerticalIcon but with only 3 dots instead of 6.
 * Hardcoded to medium size with spacious spacing.
 */
var DragHandleNestedIcon = exports.DragHandleNestedIcon = function DragHandleNestedIcon() {
  return (0, _react.jsx)("span", {
    "aria-hidden": true,
    css: spanStyles
  }, (0, _react.jsx)("svg", {
    width: 24,
    height: 24,
    viewBox: "-8 -8 32 32",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    role: "presentation",
    css: [svgStyles, svgSizeStyles]
  }, (0, _react.jsx)("circle", {
    cx: "8",
    cy: "2.75",
    r: "1.75",
    fill: "currentColor"
  }), (0, _react.jsx)("circle", {
    cx: "8",
    cy: "8",
    r: "1.75",
    fill: "currentColor"
  }), (0, _react.jsx)("circle", {
    cx: "8",
    cy: "13.25",
    r: "1.75",
    fill: "currentColor"
  })));
};