@yamada-ui/highlight 1.0.42 → 1.0.43-dev-20241119150031

package/dist/{chunk-RHTZJRTC.mjs → chunk-JI2JLM73.mjs}

@@ -24,6 +24,7 @@ var highlightWords = ({ query, text }) => {
 var useHighlight = ({ query, text }) => useMemo(() => highlightWords({ query, text }), [text, query]);
 var Highlight = ({
   children: text,
+  fragment,
   isFragment = false,
   lineHeight = "tall",
   query,
@@ -32,9 +33,10 @@ var Highlight = ({
 }) => {
   if (typeof text !== "string")
     throw new Error("The children prop of Highlight must be a string");
+  fragment != null ? fragment : fragment = isFragment;
   const chunks = useHighlight({ query, text });
-  const Component = isFragment ? Fragment : Text;
-  return /* @__PURE__ */ jsx(Component, { ...!isFragment ? { lineHeight } : {}, ...rest, children: chunks.map(
+  const Component = fragment ? Fragment : Text;
+  return /* @__PURE__ */ jsx(Component, { ...!fragment ? { lineHeight } : {}, ...rest, children: chunks.map(
     ({ match, text: text2 }, i) => match ? /* @__PURE__ */ jsx(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ jsx(Fragment, { children: text2 }, i)
   ) });
 };
@@ -66,4 +68,4 @@ export {
   Highlight,
   Mark
 };
-//# sourceMappingURL=chunk-RHTZJRTC.mjs.map
+//# sourceMappingURL=chunk-JI2JLM73.mjs.map

package/dist/chunk-JI2JLM73.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n  query: string | string[]\n  text: string\n}\n\ninterface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n  const regex = buildRegex(isArray(query) ? query : [query])\n\n  if (!regex) return [{ match: false, text }]\n\n  return text\n    .split(regex)\n    .filter(Boolean)\n    .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n  useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n   */\n  children: ((props: Chunk[]) => ReactNode) | string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  fragment?: boolean\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   *\n   * @deprecated Use `fragment` instead.\n   */\n  isFragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  fragment,\n  isFragment = false,\n  lineHeight = \"tall\",\n  query,\n  markProps,\n  ...rest\n}) => {\n  if (typeof text !== \"string\")\n    throw new Error(\"The children prop of Highlight must be a string\")\n\n  fragment ??= isFragment\n\n  const chunks = useHighlight({ query, text })\n\n  const Component: FC = fragment ? Fragment : Text\n\n  return (\n    <Component {...(!fragment ? { lineHeight } : {})} {...rest}>\n      {chunks.map(({ match, text }, i) =>\n        match ? (\n          <Mark key={i} {...markProps}>\n            {text}\n          </Mark>\n        ) : (\n          <Fragment key={i}>{text}</Fragment>\n        ),\n      )}\n    </Component>\n  )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n  const { className, ...rest } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    bg: \"transparent\",\n    whiteSpace: \"nowrap\",\n    ...styles,\n  }\n\n  return (\n    <ui.mark\n      ref={ref}\n      className={cx(\"ui-mark\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,IAAI,eAAe;AAC5B,SAAS,UAAU,eAAe;AA2FxB;AA/EV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,WAAW,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,MACzC,QAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,2CAAa;AAEb,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,WAAW,WAAW;AAE5C,SACE,oBAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,oBAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,oBAAC,YAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,OAAO,WAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI,eAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}

package/dist/highlight.d.mts

@@ -1,5 +1,5 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
-import { FC, HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, FC } from '@yamada-ui/core';
 import { TextProps } from '@yamada-ui/typography';
 import { ReactNode } from 'react';
 
@@ -26,6 +26,14 @@ interface HighlightProps extends Omit<TextProps, "children"> {
      *
      * @default false
      */
+    fragment?: boolean;
+    /**
+     * If `true`, `Fragment` is used for rendering.
+     *
+     * @default false
+     *
+     * @deprecated Use `fragment` instead.
+     */
     isFragment?: boolean;
     /**
      * Properties passed to the Mark component which is used to highlight the matched terms.

package/dist/highlight.d.ts

@@ -1,5 +1,5 @@
 import * as _yamada_ui_core from '@yamada-ui/core';
-import { FC, HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, FC } from '@yamada-ui/core';
 import { TextProps } from '@yamada-ui/typography';
 import { ReactNode } from 'react';
 
@@ -26,6 +26,14 @@ interface HighlightProps extends Omit<TextProps, "children"> {
      *
      * @default false
      */
+    fragment?: boolean;
+    /**
+     * If `true`, `Fragment` is used for rendering.
+     *
+     * @default false
+     *
+     * @deprecated Use `fragment` instead.
+     */
     isFragment?: boolean;
     /**
      * Properties passed to the Mark component which is used to highlight the matched terms.

package/dist/highlight.js

@@ -44,6 +44,7 @@ var highlightWords = ({ query, text }) => {
 var useHighlight = ({ query, text }) => (0, import_react.useMemo)(() => highlightWords({ query, text }), [text, query]);
 var Highlight = ({
   children: text,
+  fragment,
   isFragment = false,
   lineHeight = "tall",
   query,
@@ -52,9 +53,10 @@ var Highlight = ({
 }) => {
   if (typeof text !== "string")
     throw new Error("The children prop of Highlight must be a string");
+  fragment != null ? fragment : fragment = isFragment;
   const chunks = useHighlight({ query, text });
-  const Component = isFragment ? import_react.Fragment : import_typography.Text;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!isFragment ? { lineHeight } : {}, ...rest, children: chunks.map(
+  const Component = fragment ? import_react.Fragment : import_typography.Text;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!fragment ? { lineHeight } : {}, ...rest, children: chunks.map(
     ({ match, text: text2 }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: text2 }, i)
   ) });
 };

package/dist/highlight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n  query: string | string[]\n  text: string\n}\n\ninterface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n  const regex = buildRegex(isArray(query) ? query : [query])\n\n  if (!regex) return [{ match: false, text }]\n\n  return text\n    .split(regex)\n    .filter(Boolean)\n    .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n  useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n   */\n  children: ((props: Chunk[]) => ReactNode) | string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  isFragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  isFragment = false,\n  lineHeight = \"tall\",\n  query,\n  markProps,\n  ...rest\n}) => {\n  if (typeof text !== \"string\")\n    throw new Error(\"The children prop of Highlight must be a string\")\n\n  const chunks = useHighlight({ query, text })\n\n  const Component: FC = isFragment ? Fragment : Text\n\n  return (\n    <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n      {chunks.map(({ match, text }, i) =>\n        match ? (\n          <Mark key={i} {...markProps}>\n            {text}\n          </Mark>\n        ) : (\n          <Fragment key={i}>{text}</Fragment>\n        ),\n      )}\n    </Component>\n  )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n  const { className, ...rest } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    bg: \"transparent\",\n    whiteSpace: \"nowrap\",\n    ...styles,\n  }\n\n  return (\n    <ui.mark\n      ref={ref}\n      className={cx(\"ui-mark\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAKO;AACP,wBAAqB;AACrB,mBAA4B;AAC5B,mBAAkC;AAgFxB;AApEV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,UACzC,sBAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AA4BvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,wBAAW;AAE9C,SACE,4CAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
+{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n  query: string | string[]\n  text: string\n}\n\ninterface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n  const regex = buildRegex(isArray(query) ? query : [query])\n\n  if (!regex) return [{ match: false, text }]\n\n  return text\n    .split(regex)\n    .filter(Boolean)\n    .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n  useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n   */\n  children: ((props: Chunk[]) => ReactNode) | string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  fragment?: boolean\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   *\n   * @deprecated Use `fragment` instead.\n   */\n  isFragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  fragment,\n  isFragment = false,\n  lineHeight = \"tall\",\n  query,\n  markProps,\n  ...rest\n}) => {\n  if (typeof text !== \"string\")\n    throw new Error(\"The children prop of Highlight must be a string\")\n\n  fragment ??= isFragment\n\n  const chunks = useHighlight({ query, text })\n\n  const Component: FC = fragment ? Fragment : Text\n\n  return (\n    <Component {...(!fragment ? { lineHeight } : {})} {...rest}>\n      {chunks.map(({ match, text }, i) =>\n        match ? (\n          <Mark key={i} {...markProps}>\n            {text}\n          </Mark>\n        ) : (\n          <Fragment key={i}>{text}</Fragment>\n        ),\n      )}\n    </Component>\n  )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n  const { className, ...rest } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    bg: \"transparent\",\n    whiteSpace: \"nowrap\",\n    ...styles,\n  }\n\n  return (\n    <ui.mark\n      ref={ref}\n      className={cx(\"ui-mark\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAKO;AACP,wBAAqB;AACrB,mBAA4B;AAC5B,mBAAkC;AA2FxB;AA/EV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,UACzC,sBAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,2CAAa;AAEb,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,WAAW,wBAAW;AAE5C,SACE,4CAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}

package/dist/highlight.mjs

@@ -3,7 +3,7 @@ import {
   Highlight,
   Mark,
   useHighlight
-} from "./chunk-RHTZJRTC.mjs";
+} from "./chunk-JI2JLM73.mjs";
 export {
   Highlight,
   Mark,

package/dist/index.js

@@ -46,6 +46,7 @@ var highlightWords = ({ query, text }) => {
 var useHighlight = ({ query, text }) => (0, import_react.useMemo)(() => highlightWords({ query, text }), [text, query]);
 var Highlight = ({
   children: text,
+  fragment,
   isFragment = false,
   lineHeight = "tall",
   query,
@@ -54,9 +55,10 @@ var Highlight = ({
 }) => {
   if (typeof text !== "string")
     throw new Error("The children prop of Highlight must be a string");
+  fragment != null ? fragment : fragment = isFragment;
   const chunks = useHighlight({ query, text });
-  const Component = isFragment ? import_react.Fragment : import_typography.Text;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!isFragment ? { lineHeight } : {}, ...rest, children: chunks.map(
+  const Component = fragment ? import_react.Fragment : import_typography.Text;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!fragment ? { lineHeight } : {}, ...rest, children: chunks.map(
     ({ match, text: text2 }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: text2 }, i)
   ) });
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/highlight.tsx"],"sourcesContent":["export { Highlight, Mark, useHighlight } from \"./highlight\"\nexport type { HighlightProps, MarkProps } from \"./highlight\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n  query: string | string[]\n  text: string\n}\n\ninterface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n  const regex = buildRegex(isArray(query) ? query : [query])\n\n  if (!regex) return [{ match: false, text }]\n\n  return text\n    .split(regex)\n    .filter(Boolean)\n    .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n  useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n   */\n  children: ((props: Chunk[]) => ReactNode) | string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  isFragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  isFragment = false,\n  lineHeight = \"tall\",\n  query,\n  markProps,\n  ...rest\n}) => {\n  if (typeof text !== \"string\")\n    throw new Error(\"The children prop of Highlight must be a string\")\n\n  const chunks = useHighlight({ query, text })\n\n  const Component: FC = isFragment ? Fragment : Text\n\n  return (\n    <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n      {chunks.map(({ match, text }, i) =>\n        match ? (\n          <Mark key={i} {...markProps}>\n            {text}\n          </Mark>\n        ) : (\n          <Fragment key={i}>{text}</Fragment>\n        ),\n      )}\n    </Component>\n  )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n  const { className, ...rest } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    bg: \"transparent\",\n    whiteSpace: \"nowrap\",\n    ...styles,\n  }\n\n  return (\n    <ui.mark\n      ref={ref}\n      className={cx(\"ui-mark\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,kBAKO;AACP,wBAAqB;AACrB,mBAA4B;AAC5B,mBAAkC;AAgFxB;AApEV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,UACzC,sBAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AA4BvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,wBAAW;AAE9C,SACE,4CAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
+{"version":3,"sources":["../src/index.ts","../src/highlight.tsx"],"sourcesContent":["export { Highlight, Mark, useHighlight } from \"./highlight\"\nexport type { HighlightProps, MarkProps } from \"./highlight\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n  query: string | string[]\n  text: string\n}\n\ninterface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n  const regex = buildRegex(isArray(query) ? query : [query])\n\n  if (!regex) return [{ match: false, text }]\n\n  return text\n    .split(regex)\n    .filter(Boolean)\n    .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n  useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n   */\n  children: ((props: Chunk[]) => ReactNode) | string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  fragment?: boolean\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   *\n   * @deprecated Use `fragment` instead.\n   */\n  isFragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  fragment,\n  isFragment = false,\n  lineHeight = \"tall\",\n  query,\n  markProps,\n  ...rest\n}) => {\n  if (typeof text !== \"string\")\n    throw new Error(\"The children prop of Highlight must be a string\")\n\n  fragment ??= isFragment\n\n  const chunks = useHighlight({ query, text })\n\n  const Component: FC = fragment ? Fragment : Text\n\n  return (\n    <Component {...(!fragment ? { lineHeight } : {})} {...rest}>\n      {chunks.map(({ match, text }, i) =>\n        match ? (\n          <Mark key={i} {...markProps}>\n            {text}\n          </Mark>\n        ) : (\n          <Fragment key={i}>{text}</Fragment>\n        ),\n      )}\n    </Component>\n  )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n  const { className, ...rest } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    bg: \"transparent\",\n    whiteSpace: \"nowrap\",\n    ...styles,\n  }\n\n  return (\n    <ui.mark\n      ref={ref}\n      className={cx(\"ui-mark\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,kBAKO;AACP,wBAAqB;AACrB,mBAA4B;AAC5B,mBAAkC;AA2FxB;AA/EV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,UACzC,sBAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,2CAAa;AAEb,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,WAAW,wBAAW;AAE5C,SACE,4CAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   Highlight,
   Mark,
   useHighlight
-} from "./chunk-RHTZJRTC.mjs";
+} from "./chunk-JI2JLM73.mjs";
 export {
   Highlight,
   Mark,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/highlight",
-  "version": "1.0.42",
+  "version": "1.0.43-dev-20241119150031",
   "description": "Yamada UI highlight component",
   "keywords": [
     "yamada",

package/dist/chunk-RHTZJRTC.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n  query: string | string[]\n  text: string\n}\n\ninterface Chunk {\n  match: boolean\n  text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n  if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n  const regex = buildRegex(isArray(query) ? query : [query])\n\n  if (!regex) return [{ match: false, text }]\n\n  return text\n    .split(regex)\n    .filter(Boolean)\n    .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n  useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n   */\n  children: ((props: Chunk[]) => ReactNode) | string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  isFragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  isFragment = false,\n  lineHeight = \"tall\",\n  query,\n  markProps,\n  ...rest\n}) => {\n  if (typeof text !== \"string\")\n    throw new Error(\"The children prop of Highlight must be a string\")\n\n  const chunks = useHighlight({ query, text })\n\n  const Component: FC = isFragment ? Fragment : Text\n\n  return (\n    <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n      {chunks.map(({ match, text }, i) =>\n        match ? (\n          <Mark key={i} {...markProps}>\n            {text}\n          </Mark>\n        ) : (\n          <Fragment key={i}>{text}</Fragment>\n        ),\n      )}\n    </Component>\n  )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n  const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n  const { className, ...rest } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    bg: \"transparent\",\n    whiteSpace: \"nowrap\",\n    ...styles,\n  }\n\n  return (\n    <ui.mark\n      ref={ref}\n      className={cx(\"ui-mark\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,IAAI,eAAe;AAC5B,SAAS,UAAU,eAAe;AAgFxB;AApEV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,WAAW,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,MACzC,QAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AA4BvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,WAAW;AAE9C,SACE,oBAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,oBAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,oBAAC,YAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,OAAO,WAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI,eAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}