@atlaskit/editor-common/dist/esm/resizer/ResizerBreakoutModeLabel.js

A package that contains common classes and components for editor and renderer

import React from 'react';
import { useIntl } from 'react-intl';

// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, Inline, xcss } from '@atlaskit/primitives';
import { breakoutMessages as messages } from '../messages';
var fullWidthLabelWrapperStyles = xcss({
  height: "var(--ds-space-400, 32px)",
  display: 'flex',
  backgroundColor: 'elevation.surface.overlay',
  borderRadius: 'radius.small',
  boxShadow: 'elevation.shadow.overlay',
  boxSizing: 'border-box',
  alignItems: 'center'
});
var fullWidthLabelStyles = xcss({
  marginLeft: 'space.100',
  marginRight: 'space.100',
  paddingLeft: 'space.075',
  paddingRight: 'space.075',
  paddingTop: 'space.050',
  paddingBottom: 'space.050'
});
export var ResizerBreakoutModeLabel = function ResizerBreakoutModeLabel(_ref) {
  var breakoutLayout = _ref.layout;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var message = React.useMemo(function () {
    switch (breakoutLayout) {
      case 'max':
        return formatMessage(messages.maxWidthLabel);
      case 'full-width':
        return formatMessage(messages.fullWidthLabel);
      case 'wide':
        return formatMessage(messages.wideWidthLabel);
      default:
        return null;
    }
  }, [breakoutLayout, formatMessage]);
  return message && /*#__PURE__*/React.createElement(Box, {
    testId: "resizer-breakout-mode-label",
    xcss: fullWidthLabelWrapperStyles
  }, /*#__PURE__*/React.createElement(Inline, {
    xcss: fullWidthLabelStyles
  }, message));
};