/* wp:polyfill */
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = HighlightedColors;
var _components = require("@wordpress/components");
var _hooks = require("./hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function HighlightedColors({
  normalizedColorSwatchSize,
  ratio
}) {
  const {
    highlightedColors
  } = (0, _hooks.useStylesPreviewColors)();
  const scaledSwatchSize = normalizedColorSwatchSize * ratio;
  return highlightedColors.map(({
    slug,
    color
  }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
    style: {
      height: scaledSwatchSize,
      width: scaledSwatchSize,
      background: color,
      borderRadius: scaledSwatchSize / 2
    },
    animate: {
      scale: 1,
      opacity: 1
    },
    initial: {
      scale: 0.1,
      opacity: 0
    },
    transition: {
      delay: index === 1 ? 0.2 : 0.1
    }
  }, `${slug}-${index}`));
}
//# sourceMappingURL=highlighted-colors.js.map