@mantine/core/cjs/components/Highlight/Highlight.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var React = require('react');
require('clsx');
require('@mantine/hooks');
require('../../core/MantineProvider/Mantine.context.cjs');
require('../../core/MantineProvider/default-theme.cjs');
require('../../core/MantineProvider/MantineProvider.cjs');
require('../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs');
var useProps = require('../../core/MantineProvider/use-props/use-props.cjs');
require('../../core/Box/Box.cjs');
var polymorphicFactory = require('../../core/factory/polymorphic-factory.cjs');
require('../../core/DirectionProvider/DirectionProvider.cjs');
var Mark = require('../Mark/Mark.cjs');
var Text = require('../Text/Text.cjs');
var highlighter = require('./highlighter/highlighter.cjs');

const defaultProps = {};
const Highlight = polymorphicFactory.polymorphicFactory((props, ref) => {
  const { unstyled, children, highlight, highlightStyles, color, ...others } = useProps.useProps(
    "Highlight",
    defaultProps,
    props
  );
  const highlightChunks = highlighter.highlighter(children, highlight);
  return /* @__PURE__ */ React.createElement(Text.Text, { unstyled, ref, ...others, __staticSelector: "Highlight" }, highlightChunks.map(
    ({ chunk, highlighted }, i) => highlighted ? /* @__PURE__ */ React.createElement(
      Mark.Mark,
      {
        unstyled,
        key: i,
        color,
        style: highlightStyles,
        "data-highlight": chunk
      },
      chunk
    ) : /* @__PURE__ */ React.createElement("span", { key: i }, chunk)
  ));
});
Highlight.classes = Text.Text.classes;
Highlight.displayName = "@mantine/core/Highlight";

exports.Highlight = Highlight;
//# sourceMappingURL=Highlight.cjs.map