/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { InnerBlocks, getColorClassName, useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
import { compose } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const v1ToV5ImageFillStyles = (url, focalPoint) => {
  return url ? {
    backgroundImage: `url(${url})`,
    backgroundPosition: focalPoint ? `${focalPoint.x * 100}% ${focalPoint.y * 100}%` : `50% 50%`
  } : {};
};
const v6ToV7ImageFillStyles = (url, focalPoint) => {
  return url ? {
    backgroundImage: `url(${url})`,
    backgroundPosition: focalPoint ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : `50% 50%`
  } : {};
};
const DEFAULT_MEDIA_WIDTH = 50;
const noop = () => {};
const migrateCustomColors = attributes => {
  if (!attributes.customBackgroundColor) {
    return attributes;
  }
  const style = {
    color: {
      background: attributes.customBackgroundColor
    }
  };
  const {
    customBackgroundColor,
    ...restAttributes
  } = attributes;
  return {
    ...restAttributes,
    style
  };
};

// After align attribute's default was updated this function explicitly sets
// the align value for deprecated blocks to the `wide` value which was default
// for their versions of this block.
const migrateDefaultAlign = attributes => {
  if (attributes.align) {
    return attributes;
  }
  return {
    ...attributes,
    align: 'wide'
  };
};
const v0Attributes = {
  align: {
    type: 'string',
    default: 'wide'
  },
  mediaAlt: {
    type: 'string',
    source: 'attribute',
    selector: 'figure img',
    attribute: 'alt',
    default: ''
  },
  mediaPosition: {
    type: 'string',
    default: 'left'
  },
  mediaId: {
    type: 'number'
  },
  mediaType: {
    type: 'string'
  },
  mediaWidth: {
    type: 'number',
    default: 50
  },
  isStackedOnMobile: {
    type: 'boolean',
    default: false
  }
};
const v4ToV5BlockAttributes = {
  ...v0Attributes,
  isStackedOnMobile: {
    type: 'boolean',
    default: true
  },
  mediaUrl: {
    type: 'string',
    source: 'attribute',
    selector: 'figure video,figure img',
    attribute: 'src'
  },
  mediaLink: {
    type: 'string'
  },
  linkDestination: {
    type: 'string'
  },
  linkTarget: {
    type: 'string',
    source: 'attribute',
    selector: 'figure a',
    attribute: 'target'
  },
  href: {
    type: 'string',
    source: 'attribute',
    selector: 'figure a',
    attribute: 'href'
  },
  rel: {
    type: 'string',
    source: 'attribute',
    selector: 'figure a',
    attribute: 'rel'
  },
  linkClass: {
    type: 'string',
    source: 'attribute',
    selector: 'figure a',
    attribute: 'class'
  },
  mediaSizeSlug: {
    type: 'string'
  },
  verticalAlignment: {
    type: 'string'
  },
  imageFill: {
    type: 'boolean'
  },
  focalPoint: {
    type: 'object'
  }
};
const v6Attributes = {
  ...v4ToV5BlockAttributes,
  mediaAlt: {
    type: 'string',
    source: 'attribute',
    selector: 'figure img',
    attribute: 'alt',
    default: '',
    role: 'content'
  },
  mediaId: {
    type: 'number',
    role: 'content'
  },
  mediaUrl: {
    type: 'string',
    source: 'attribute',
    selector: 'figure video,figure img',
    attribute: 'src',
    role: 'content'
  },
  href: {
    type: 'string',
    source: 'attribute',
    selector: 'figure a',
    attribute: 'href',
    role: 'content'
  },
  mediaType: {
    type: 'string',
    role: 'content'
  }
};
const v7Attributes = {
  ...v6Attributes,
  align: {
    type: 'string',
    // v7 changed the default for the `align` attribute.
    default: 'none'
  },
  // New attribute.
  useFeaturedImage: {
    type: 'boolean',
    default: false
  }
};
const v4ToV5Supports = {
  anchor: true,
  align: ['wide', 'full'],
  html: false,
  color: {
    gradients: true,
    link: true
  }
};
const v6Supports = {
  ...v4ToV5Supports,
  color: {
    gradients: true,
    link: true,
    __experimentalDefaultControls: {
      background: true,
      text: true
    }
  },
  spacing: {
    margin: true,
    padding: true
  },
  typography: {
    fontSize: true,
    lineHeight: true,
    __experimentalFontFamily: true,
    __experimentalFontWeight: true,
    __experimentalFontStyle: true,
    __experimentalTextTransform: true,
    __experimentalTextDecoration: true,
    __experimentalLetterSpacing: true,
    __experimentalDefaultControls: {
      fontSize: true
    }
  }
};
const v7Supports = {
  ...v6Supports,
  __experimentalBorder: {
    color: true,
    radius: true,
    style: true,
    width: true,
    __experimentalDefaultControls: {
      color: true,
      radius: true,
      style: true,
      width: true
    }
  },
  color: {
    gradients: true,
    heading: true,
    link: true,
    __experimentalDefaultControls: {
      background: true,
      text: true
    }
  },
  interactivity: {
    clientNavigation: true
  }
};

// Version with 'none' as the default alignment.
// See: https://github.com/WordPress/gutenberg/pull/64981
const v7 = {
  attributes: v7Attributes,
  supports: v7Supports,
  usesContext: ['postId', 'postType'],
  save({
    attributes
  }) {
    const {
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      mediaId,
      verticalAlignment,
      imageFill,
      focalPoint,
      linkClass,
      href,
      linkTarget,
      rel
    } = attributes;
    const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
    const newRel = !rel ? undefined : rel;
    const imageClasses = clsx({
      [`wp-image-${mediaId}`]: mediaId && mediaType === 'image',
      [`size-${mediaSizeSlug}`]: mediaId && mediaType === 'image'
    });
    let image = mediaUrl ? /*#__PURE__*/_jsx("img", {
      src: mediaUrl,
      alt: mediaAlt,
      className: imageClasses || null
    }) : null;
    if (href) {
      image = /*#__PURE__*/_jsx("a", {
        className: linkClass,
        href: href,
        target: linkTarget,
        rel: newRel,
        children: image
      });
    }
    const mediaTypeRenders = {
      image: () => image,
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      'is-stacked-on-mobile': isStackedOnMobile,
      [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
      'is-image-fill': imageFill
    });
    const backgroundStyles = imageFill ? v6ToV7ImageFillStyles(mediaUrl, focalPoint) : {};
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      gridTemplateColumns
    };
    if ('right' === mediaPosition) {
      return /*#__PURE__*/_jsxs("div", {
        ...useBlockProps.save({
          className,
          style
        }),
        children: [/*#__PURE__*/_jsx("div", {
          ...useInnerBlocksProps.save({
            className: 'wp-block-media-text__content'
          })
        }), /*#__PURE__*/_jsx("figure", {
          className: "wp-block-media-text__media",
          style: backgroundStyles,
          children: (mediaTypeRenders[mediaType] || noop)()
        })]
      });
    }
    return /*#__PURE__*/_jsxs("div", {
      ...useBlockProps.save({
        className,
        style
      }),
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        style: backgroundStyles,
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        ...useInnerBlocksProps.save({
          className: 'wp-block-media-text__content'
        })
      })]
    });
  }
};

// Version with wide as the default alignment.
// See: https://github.com/WordPress/gutenberg/pull/48404
const v6 = {
  attributes: v6Attributes,
  supports: v6Supports,
  save({
    attributes
  }) {
    const {
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      mediaId,
      verticalAlignment,
      imageFill,
      focalPoint,
      linkClass,
      href,
      linkTarget,
      rel
    } = attributes;
    const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
    const newRel = !rel ? undefined : rel;
    const imageClasses = clsx({
      [`wp-image-${mediaId}`]: mediaId && mediaType === 'image',
      [`size-${mediaSizeSlug}`]: mediaId && mediaType === 'image'
    });
    let image = /*#__PURE__*/_jsx("img", {
      src: mediaUrl,
      alt: mediaAlt,
      className: imageClasses || null
    });
    if (href) {
      image = /*#__PURE__*/_jsx("a", {
        className: linkClass,
        href: href,
        target: linkTarget,
        rel: newRel,
        children: image
      });
    }
    const mediaTypeRenders = {
      image: () => image,
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      'is-stacked-on-mobile': isStackedOnMobile,
      [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
      'is-image-fill': imageFill
    });
    const backgroundStyles = imageFill ? v6ToV7ImageFillStyles(mediaUrl, focalPoint) : {};
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      gridTemplateColumns
    };
    if ('right' === mediaPosition) {
      return /*#__PURE__*/_jsxs("div", {
        ...useBlockProps.save({
          className,
          style
        }),
        children: [/*#__PURE__*/_jsx("div", {
          ...useInnerBlocksProps.save({
            className: 'wp-block-media-text__content'
          })
        }), /*#__PURE__*/_jsx("figure", {
          className: "wp-block-media-text__media",
          style: backgroundStyles,
          children: (mediaTypeRenders[mediaType] || noop)()
        })]
      });
    }
    return /*#__PURE__*/_jsxs("div", {
      ...useBlockProps.save({
        className,
        style
      }),
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        style: backgroundStyles,
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        ...useInnerBlocksProps.save({
          className: 'wp-block-media-text__content'
        })
      })]
    });
  },
  migrate: migrateDefaultAlign,
  isEligible(attributes, innerBlocks, {
    block
  }) {
    const {
      attributes: finalizedAttributes
    } = block;
    // When the align attribute defaults to none, valid block markup should
    // not contain any alignment CSS class. Unfortunately, this
    // deprecation's version of the block won't be invalidated due to the
    // alignwide class still being in the markup. That is because the custom
    // CSS classname support picks it up and adds it to the className
    // attribute. At the time of parsing, the className attribute won't
    // contain the alignwide class, hence the need to check the finalized
    // block attributes.
    return attributes.align === undefined && !!finalizedAttributes.className?.includes('alignwide');
  }
};

// Version with non-rounded background position attribute for focal point.
// See: https://github.com/WordPress/gutenberg/pull/33915
const v5 = {
  attributes: v4ToV5BlockAttributes,
  supports: v4ToV5Supports,
  save({
    attributes
  }) {
    const {
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      mediaId,
      verticalAlignment,
      imageFill,
      focalPoint,
      linkClass,
      href,
      linkTarget,
      rel
    } = attributes;
    const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
    const newRel = !rel ? undefined : rel;
    const imageClasses = clsx({
      [`wp-image-${mediaId}`]: mediaId && mediaType === 'image',
      [`size-${mediaSizeSlug}`]: mediaId && mediaType === 'image'
    });
    let image = /*#__PURE__*/_jsx("img", {
      src: mediaUrl,
      alt: mediaAlt,
      className: imageClasses || null
    });
    if (href) {
      image = /*#__PURE__*/_jsx("a", {
        className: linkClass,
        href: href,
        target: linkTarget,
        rel: newRel,
        children: image
      });
    }
    const mediaTypeRenders = {
      image: () => image,
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      'is-stacked-on-mobile': isStackedOnMobile,
      [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
      'is-image-fill': imageFill
    });
    const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      gridTemplateColumns
    };
    if ('right' === mediaPosition) {
      return /*#__PURE__*/_jsxs("div", {
        ...useBlockProps.save({
          className,
          style
        }),
        children: [/*#__PURE__*/_jsx("div", {
          ...useInnerBlocksProps.save({
            className: 'wp-block-media-text__content'
          })
        }), /*#__PURE__*/_jsx("figure", {
          className: "wp-block-media-text__media",
          style: backgroundStyles,
          children: (mediaTypeRenders[mediaType] || noop)()
        })]
      });
    }
    return /*#__PURE__*/_jsxs("div", {
      ...useBlockProps.save({
        className,
        style
      }),
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        style: backgroundStyles,
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        ...useInnerBlocksProps.save({
          className: 'wp-block-media-text__content'
        })
      })]
    });
  },
  migrate: migrateDefaultAlign
};

// Version with CSS grid
// See: https://github.com/WordPress/gutenberg/pull/40806
const v4 = {
  attributes: v4ToV5BlockAttributes,
  supports: v4ToV5Supports,
  save({
    attributes
  }) {
    const {
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      mediaId,
      verticalAlignment,
      imageFill,
      focalPoint,
      linkClass,
      href,
      linkTarget,
      rel
    } = attributes;
    const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
    const newRel = !rel ? undefined : rel;
    const imageClasses = clsx({
      [`wp-image-${mediaId}`]: mediaId && mediaType === 'image',
      [`size-${mediaSizeSlug}`]: mediaId && mediaType === 'image'
    });
    let image = /*#__PURE__*/_jsx("img", {
      src: mediaUrl,
      alt: mediaAlt,
      className: imageClasses || null
    });
    if (href) {
      image = /*#__PURE__*/_jsx("a", {
        className: linkClass,
        href: href,
        target: linkTarget,
        rel: newRel,
        children: image
      });
    }
    const mediaTypeRenders = {
      image: () => image,
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      'is-stacked-on-mobile': isStackedOnMobile,
      [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
      'is-image-fill': imageFill
    });
    const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      gridTemplateColumns
    };
    return /*#__PURE__*/_jsxs("div", {
      ...useBlockProps.save({
        className,
        style
      }),
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        style: backgroundStyles,
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        ...useInnerBlocksProps.save({
          className: 'wp-block-media-text__content'
        })
      })]
    });
  },
  migrate: migrateDefaultAlign
};

// Version with ad-hoc color attributes
// See: https://github.com/WordPress/gutenberg/pull/21169
const v3 = {
  attributes: {
    ...v0Attributes,
    isStackedOnMobile: {
      type: 'boolean',
      default: true
    },
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    },
    mediaLink: {
      type: 'string'
    },
    linkDestination: {
      type: 'string'
    },
    linkTarget: {
      type: 'string',
      source: 'attribute',
      selector: 'figure a',
      attribute: 'target'
    },
    href: {
      type: 'string',
      source: 'attribute',
      selector: 'figure a',
      attribute: 'href'
    },
    rel: {
      type: 'string',
      source: 'attribute',
      selector: 'figure a',
      attribute: 'rel'
    },
    linkClass: {
      type: 'string',
      source: 'attribute',
      selector: 'figure a',
      attribute: 'class'
    },
    verticalAlignment: {
      type: 'string'
    },
    imageFill: {
      type: 'boolean'
    },
    focalPoint: {
      type: 'object'
    }
  },
  migrate: compose(migrateCustomColors, migrateDefaultAlign),
  save({
    attributes
  }) {
    const {
      backgroundColor,
      customBackgroundColor,
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      mediaId,
      verticalAlignment,
      imageFill,
      focalPoint,
      linkClass,
      href,
      linkTarget,
      rel
    } = attributes;
    const newRel = !rel ? undefined : rel;
    let image = /*#__PURE__*/_jsx("img", {
      src: mediaUrl,
      alt: mediaAlt,
      className: mediaId && mediaType === 'image' ? `wp-image-${mediaId}` : null
    });
    if (href) {
      image = /*#__PURE__*/_jsx("a", {
        className: linkClass,
        href: href,
        target: linkTarget,
        rel: newRel,
        children: image
      });
    }
    const mediaTypeRenders = {
      image: () => image,
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const backgroundClass = getColorClassName('background-color', backgroundColor);
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      'has-background': backgroundClass || customBackgroundColor,
      [backgroundClass]: backgroundClass,
      'is-stacked-on-mobile': isStackedOnMobile,
      [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
      'is-image-fill': imageFill
    });
    const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      gridTemplateColumns
    };
    return /*#__PURE__*/_jsxs("div", {
      className: className,
      style: style,
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        style: backgroundStyles,
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        className: "wp-block-media-text__content",
        children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
      })]
    });
  }
};

// Version with stack on mobile off by default
// See: https://github.com/WordPress/gutenberg/pull/14364
const v2 = {
  attributes: {
    ...v0Attributes,
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    },
    mediaUrl: {
      type: 'string',
      source: 'attribute',
      selector: 'figure video,figure img',
      attribute: 'src'
    },
    verticalAlignment: {
      type: 'string'
    },
    imageFill: {
      type: 'boolean'
    },
    focalPoint: {
      type: 'object'
    }
  },
  migrate: compose(migrateCustomColors, migrateDefaultAlign),
  save({
    attributes
  }) {
    const {
      backgroundColor,
      customBackgroundColor,
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      mediaId,
      verticalAlignment,
      imageFill,
      focalPoint
    } = attributes;
    const mediaTypeRenders = {
      image: () => /*#__PURE__*/_jsx("img", {
        src: mediaUrl,
        alt: mediaAlt,
        className: mediaId && mediaType === 'image' ? `wp-image-${mediaId}` : null
      }),
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const backgroundClass = getColorClassName('background-color', backgroundColor);
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      [backgroundClass]: backgroundClass,
      'is-stacked-on-mobile': isStackedOnMobile,
      [`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
      'is-image-fill': imageFill
    });
    const backgroundStyles = imageFill ? v1ToV5ImageFillStyles(mediaUrl, focalPoint) : {};
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      gridTemplateColumns
    };
    return /*#__PURE__*/_jsxs("div", {
      className: className,
      style: style,
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        style: backgroundStyles,
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        className: "wp-block-media-text__content",
        children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
      })]
    });
  }
};

// Version without the wp-image-#### class on image
// See: https://github.com/WordPress/gutenberg/pull/11922
const v1 = {
  attributes: {
    ...v0Attributes,
    backgroundColor: {
      type: 'string'
    },
    customBackgroundColor: {
      type: 'string'
    },
    mediaUrl: {
      type: 'string',
      source: 'attribute',
      selector: 'figure video,figure img',
      attribute: 'src'
    }
  },
  migrate: migrateDefaultAlign,
  save({
    attributes
  }) {
    const {
      backgroundColor,
      customBackgroundColor,
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth
    } = attributes;
    const mediaTypeRenders = {
      image: () => /*#__PURE__*/_jsx("img", {
        src: mediaUrl,
        alt: mediaAlt
      }),
      video: () => /*#__PURE__*/_jsx("video", {
        controls: true,
        src: mediaUrl
      })
    };
    const backgroundClass = getColorClassName('background-color', backgroundColor);
    const className = clsx({
      'has-media-on-the-right': 'right' === mediaPosition,
      [backgroundClass]: backgroundClass,
      'is-stacked-on-mobile': isStackedOnMobile
    });
    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      gridTemplateColumns
    };
    return /*#__PURE__*/_jsxs("div", {
      className: className,
      style: style,
      children: [/*#__PURE__*/_jsx("figure", {
        className: "wp-block-media-text__media",
        children: (mediaTypeRenders[mediaType] || noop)()
      }), /*#__PURE__*/_jsx("div", {
        className: "wp-block-media-text__content",
        children: /*#__PURE__*/_jsx(InnerBlocks.Content, {})
      })]
    });
  }
};
export default [v7, v6, v5, v4, v3, v2, v1];
//# sourceMappingURL=deprecated.js.map