<commit_before>import React, { memo } from 'react';
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { useStyles } from '@grafana/ui';

const getStyles = (theme: GrafanaTheme) => ({
  metaContainer: css`
    flex: 1;
    color: ${theme.colors.textWeak};
    margin-bottom: ${theme.spacing.d};
    min-width: 30%;
    display: flex;
    flex-wrap: wrap;
  `,
  metaItem: css`
    margin-right: ${theme.spacing.d};
    margin-top: ${theme.spacing.xs};
    display: flex;
    align-items: baseline;

    .logs-meta-item__error {
      color: ${theme.palette.red};
    }
  `,
  metaLabel: css`
    margin-right: calc(${theme.spacing.d} / 2);
    font-size: ${theme.typography.size.sm};
    font-weight: ${theme.typography.weight.semibold};
  `,
  metaValue: css`
    font-family: ${theme.typography.fontFamily.monospace};
    font-size: ${theme.typography.size.sm};
  `,
});

export interface MetaItemProps {
  label?: string;
  value: string | JSX.Element;
}

export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {
  const style = useStyles(getStyles);
  const { label, value } = props;

  return (
    <div className={style.metaItem}>
      {label && <span className={style.metaLabel}>{label}:</span>}
      <span className={style.metaValue}>{value}</span>
    </div>
  );
});

export interface MetaInfoTextProps {
  metaItems: MetaItemProps[];
}

export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps) {
  const style = useStyles(getStyles);
  const { metaItems } = props;

  return (
    <div className={style.metaContainer}>
      {metaItems.map((item, index) => (
        <MetaInfoItem key={`${index}-${item.label}`} label={item.label} value={item.value} />
      ))}
    </div>
  );<commit_msg>Explore: use GrafanaTheme2 (MetaInfoText component) (#37539)<commit_after>import React, { memo } from 'react';
import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';

const getStyles = (theme: GrafanaTheme2) => ({
  metaContainer: css`
    flex: 1;
    color: ${theme.colors.text.secondary};
    margin-bottom: ${theme.spacing(2)};
    min-width: 30%;
    display: flex;
    flex-wrap: wrap;
  `,
  metaItem: css`
    margin-right: ${theme.spacing(2)};
    margin-top: ${theme.spacing(0.5)};
    display: flex;
    align-items: baseline;

    .logs-meta-item__error {
      color: ${theme.colors.error.text};
    }
  `,
  metaLabel: css`
    margin-right: calc(${theme.spacing(2)} / 2);
    font-size: ${theme.typography.bodySmall.fontSize};
    font-weight: ${theme.typography.fontWeightMedium};
  `,
  metaValue: css`
    font-family: ${theme.typography.fontFamilyMonospace};
    font-size: ${theme.typography.bodySmall.fontSize};
  `,
});

export interface MetaItemProps {
  label?: string;
  value: string | JSX.Element;
}

export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {
  const style = useStyles2(getStyles);
  const { label, value } = props;

  return (
    <div className={style.metaItem}>
      {label && <span className={style.metaLabel}>{label}:</span>}
      <span className={style.metaValue}>{value}</span>
    </div>
  );
});

export interface MetaInfoTextProps {
  metaItems: MetaItemProps[];
}

export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps) {
  const style = useStyles2(getStyles);
  const { metaItems } = props;

  return (
    <div className={style.metaContainer}>
      {metaItems.map((item, index) => (
        <MetaInfoItem key={`${index}-${item.label}`} label={item.label} value={item.value} />
      ))}
    </div>
  );
{'fraction_non_alphanumeric': 0.165075034106412, 'fraction_numerical': 0.006548431105047749, 'mean_word_length': 3.681992337164751, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1551555', 'n_tokens_mistral': 1250, 'n_tokens_neox': 1230, 'n_words': 245}