@nethru/kit 1.0.3 → 1.0.4

package/dist/index.esm.js

@@ -1,1001 +1,216 @@
-import React$1, { useMemo, useState, useEffect, useCallback, createContext, useContext, useRef } from 'react';
+import { alpha, Box, keyframes, Stack, TextField, FormControl, Select, MenuItem, IconButton } from '@mui/material';
+import React$1, { useMemo, createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Highcharts$1 from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import highchartsAccessibility from 'highcharts/modules/accessibility';
 import highchartsAnnotations from 'highcharts/modules/annotations';
 import { blue, purple, green, yellow, red, orange, lime, grey } from '@nethru/ui/base/colors';
-import { alpha, Box, keyframes, Stack, TextField, FormControl, Select, MenuItem, IconButton } from '@mui/material';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Send } from '@mui/icons-material';
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+let globalConfig = {
+  apiUrl: ''
+};
+function configure$1(config) {
+  globalConfig = {
+    ...globalConfig,
+    ...config
+  };
+}
+function getConfig() {
+  return globalConfig;
 }
 
-var patternFill = {exports: {}};
+function ok$1() {}
+
+function unreachable() {}
 
 /**
- * Highcharts JS v11.3.0 (2024-01-10)
- *
- * Module for adding patterns and images as point fills.
+ * @typedef Options
+ *   Configuration for `stringify`.
+ * @property {boolean} [padLeft=true]
+ *   Whether to pad a space before a token.
+ * @property {boolean} [padRight=false]
+ *   Whether to pad a space after a token.
+ */
+
+
+/**
+ * Serialize an array of strings or numbers to comma-separated tokens.
  *
- * (c) 2010-2024 Highsoft AS
- * Author: Torstein Hønsi, Øystein Moseng
+ * @param {Array<string|number>} values
+ *   List of tokens.
+ * @param {Options} [options]
+ *   Configuration for `stringify` (optional).
+ * @returns {string}
+ *   Comma-separated tokens.
+ */
+function stringify$1(values, options) {
+  const settings = {};
+
+  // Ensure the last empty entry is seen.
+  const input = values[values.length - 1] === '' ? [...values, ''] : values;
+
+  return input
+    .join(
+      (settings.padRight ? ' ' : '') +
+        ',' +
+        (settings.padLeft === false ? '' : ' ')
+    )
+    .trim()
+}
+
+/**
+ * @typedef Options
+ *   Configuration.
+ * @property {boolean | null | undefined} [jsx=false]
+ *   Support JSX identifiers (default: `false`).
+ */
+
+const nameRe = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+const nameReJsx = /^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+
+/** @type {Options} */
+const emptyOptions$2 = {};
+
+/**
+ * Checks if the given value is a valid identifier name.
  *
- * License: www.highcharts.com/license
+ * @param {string} name
+ *   Identifier to check.
+ * @param {Options | null | undefined} [options]
+ *   Configuration (optional).
+ * @returns {boolean}
+ *   Whether `name` can be an identifier.
  */
+function name(name, options) {
+  const settings = emptyOptions$2;
+  const re = settings.jsx ? nameReJsx : nameRe;
+  return re.test(name)
+}
 
-var hasRequiredPatternFill;
+/**
+ * @typedef {import('hast').Nodes} Nodes
+ */
 
-function requirePatternFill () {
-	if (hasRequiredPatternFill) return patternFill.exports;
-	hasRequiredPatternFill = 1;
-	(function (module) {
-		!function(t){module.exports?(t.default=t,module.exports=t):t("undefined"!=typeof Highcharts?Highcharts:void 0);}(function(t){var e=t?t._modules:{};function r(t,e,r,i){t.hasOwnProperty(e)||(t[e]=i.apply(null,r),"function"==typeof CustomEvent&&window.dispatchEvent(new CustomEvent("HighchartsModuleLoaded",{detail:{path:e,module:t[e]}})));}r(e,"Extensions/PatternFill.js",[e["Core/Animation/AnimationUtilities.js"],e["Core/Defaults.js"],e["Core/Globals.js"],e["Core/Utilities.js"]],function(t,e,r,i){let{animObject:a}=t,{getOptions:o}=e,{composed:n}=r,{addEvent:s,defined:h,erase:l,extend:p,merge:c,pick:d,pushUnique:f,removeEvent:u,wrap:g}=i,m=function(){let t=[],e=o().colors,r=0;for(let i of ["M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5","M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5","M 2 0 L 2 5 M 4 0 L 4 5","M 0 2 L 5 2 M 0 4 L 5 4","M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5"])t.push({path:i,color:e[r++],width:5,height:5,patternTransform:"scale(1.4 1.4)"});for(let i of(r=5,["M 0 0 L 5 10 L 10 0","M 3 3 L 8 3 L 8 8 L 3 8 Z","M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0","M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11","M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9"]))t.push({path:i,color:e[r],width:10,height:10}),r+=5;return t}();function y(t,e){let r=JSON.stringify(t),i=r.length||0,a=0,o=0,n;if(e){n=Math.max(Math.floor(i/500),1);for(let t=0;t<i;t+=n)a+=r.charCodeAt(t);a&=a;}for(;o<i;++o)a=(a<<5)-a+r.charCodeAt(o),a&=a;return a.toString(16).replace("-","1")}function x(){if(this.renderer&&(this.renderer.defIds||[]).filter(t=>t&&t.indexOf&&0===t.indexOf("highcharts-pattern-")).length){for(let t of this.series)if(t.visible)for(let e of t.points){let t=e.options&&e.options.color;t&&t.pattern&&(t.pattern._width="defer",t.pattern._height="defer");}this.redraw(false);}}function w(){let t={},e=this.renderer,r=(e.defIds||[]).filter(t=>t.indexOf&&0===t.indexOf("highcharts-pattern-"));if(r.length)for(let i of([].forEach.call(this.renderTo.querySelectorAll('[color^="url("], [fill^="url("], [stroke^="url("]'),r=>{let i=r.getAttribute("fill")||r.getAttribute("color")||r.getAttribute("stroke");if(i){let r=i.replace(e.url,"").replace("url(#","").replace(")","");t[r]=true;}}),r))!t[i]&&(l(e.defIds,i),e.patternElements[i]&&(e.patternElements[i].destroy(),delete e.patternElements[i]));}function M(){let t=this.options.color;t&&t.pattern&&("string"==typeof t.pattern.path&&(t.pattern.path={d:t.pattern.path}),this.color=this.options.color=c(this.series.options.color,t));}function L(t){let e=t.args[0],r=t.args[1],i=t.args[2],a=this.chartIndex||0,o=e.pattern,n="#333333";if(void 0!==e.patternIndex&&m&&(o=m[e.patternIndex]),!o)return  true;if(o.image||"string"==typeof o.path||o.path&&o.path.d){let t=i.parentNode&&i.parentNode.getAttribute("class");t=t&&t.indexOf("highcharts-legend")>-1,("defer"===o._width||"defer"===o._height)&&_.call({graphic:{element:i}},o),(t||!o.id)&&((o=c({},o)).id="highcharts-pattern-"+a+"-"+y(o)+y(o,true)),this.addPattern(o,!this.forExport&&d(o.animation,this.globalAnimation,{duration:100})),n=`url(${this.url}#${o.id+(this.forExport?"-export":"")})`;}else n=o.color||n;return i.setAttribute(r,n),e.toString=function(){return n},false}function b(){let t=this.chart.isResizing;if(this.isDirtyData||t||!this.chart.hasRendered)for(let e of this.points){let r=e.options&&e.options.color;r&&r.pattern&&(t&&!(e.shapeArgs&&e.shapeArgs.width&&e.shapeArgs.height)?(r.pattern._width="defer",r.pattern._height="defer"):e.calculatePatternDimensions(r.pattern));}}function _(t){if(t.width&&t.height)return;let e=this.graphic&&(this.graphic.getBBox&&this.graphic.getBBox(true)||this.graphic.element&&this.graphic.element.getBBox())||{},r=this.shapeArgs;if(r&&(e.width=r.width||e.width,e.height=r.height||e.height,e.x=r.x||e.x,e.y=r.y||e.y),t.image){if(!e.width||!e.height){t._width="defer",t._height="defer";let e=this.series.chart.mapView&&this.series.chart.mapView.getSVGTransform().scaleY;h(e)&&e<0&&(t._inverted=true);return}t.aspectRatio&&(e.aspectRatio=e.width/e.height,t.aspectRatio>e.aspectRatio?e.aspectWidth=e.height*t.aspectRatio:e.aspectHeight=e.width/t.aspectRatio),t._width=t.width||Math.ceil(e.aspectWidth||e.width),t._height=t.height||Math.ceil(e.aspectHeight||e.height);}t.width||(t._x=t.x||0,t._x+=e.x-Math.round(e.aspectWidth?Math.abs(e.aspectWidth-e.width)/2:0)),t.height||(t._y=t.y||0,t._y+=e.y-Math.round(e.aspectHeight?Math.abs(e.aspectHeight-e.height)/2:0));}function A(t,e){let r=d(e,true),o=a(r),n=t.color||"#333333",s=t.height||("number"==typeof t._height?t._height:0)||32,h=t.width||("number"==typeof t._width?t._width:0)||32,l,p=t.id,c;if(!p&&(this.idCounter=this.idCounter||0,p="highcharts-pattern-"+this.idCounter+"-"+(this.chartIndex||0),++this.idCounter),this.forExport&&(p+="-export"),this.defIds=this.defIds||[],this.defIds.indexOf(p)>-1)return;this.defIds.push(p);let f={id:p,patternUnits:"userSpaceOnUse",patternContentUnits:t.patternContentUnits||"userSpaceOnUse",width:h,height:s,x:t._x||t.x||0,y:t._y||t.y||0};t._inverted&&(f.patternTransform="scale(1, -1)",t.patternTransform&&(t.patternTransform+=" scale(1, -1)")),t.patternTransform&&(f.patternTransform=t.patternTransform);let g=this.createElement("pattern").attr(f).add(this.defs);if(g.id=p,t.path){if(c=i.isObject(t.path)?t.path:{d:t.path},t.backgroundColor){var m;m=t.backgroundColor,this.rect(0,0,h,s).attr({fill:m}).add(g);}l={d:c.d},this.styledMode||(l.stroke=c.stroke||n,l["stroke-width"]=d(c.strokeWidth,2),l.fill=c.fill||"none"),c.transform&&(l.transform=c.transform),this.createElement("path").attr(l).add(g),g.color=n;}else t.image&&(r?this.image(t.image,0,0,h,s,function(){this.animate({opacity:d(t.opacity,1)},o),u(this.element,"load");}).attr({opacity:0}).add(g):this.image(t.image,0,0,h,s).add(g));return t.image&&r||void 0===t.opacity||[].forEach.call(g.element.childNodes,e=>{e.setAttribute("opacity",t.opacity);}),this.patternElements=this.patternElements||{},this.patternElements[p]=g,g}function C(t){let e=this.options.color;e&&e.pattern&&!e.pattern.color?(delete this.options.color,t.apply(this,[].slice.call(arguments,1)),e.pattern.color=this.color,this.color=this.options.color=e):t.apply(this,[].slice.call(arguments,1));}function E(){if(!this.chart?.mapView)return;let t=this.chart,e=t.renderer,r=e.patternElements;e.defIds?.length&&r&&this.points.filter(function(t){return !!t.graphic&&(t.graphic.element.hasAttribute("fill")||t.graphic.element.hasAttribute("color")||t.graphic.element.hasAttribute("stroke"))&&!t.options.color?.pattern?.image&&!!t.group?.scaleX&&!!t.group?.scaleY}).map(function(t){let r=(t.graphic?.element.getAttribute("fill")||t.graphic?.element.getAttribute("color")||t.graphic?.element.getAttribute("stroke")||"").replace(e.url,"").replace("url(#","").replace(")","");return [r,{x:t.group?.scaleX||1,y:t.group?.scaleY||1}]}).filter(function([t,e],r,i){return ""!==t&&-1!==t.indexOf("highcharts-pattern-")&&!i.some(function([e,i],a){return e===t&&a<r})}).forEach(function([t,e]){r[t].scaleX=1/e.x,r[t].scaleY=1/e.y,r[t].updateTransform("patternTransform");});}return {compose:function t(e,r,i){let a=r.prototype.pointClass;f(n,t)&&(s(e,"endResize",x),s(e,"redraw",w),p(a.prototype,{calculatePatternDimensions:_}),s(a,"afterInit",M),s(r,"render",b),g(r.prototype,"getColor",C),s(r,"afterRender",E),s(r,"mapZoomComplete",E),p(i.prototype,{addPattern:A}),s(i,"complexColor",L));},patterns:m}}),r(e,"masters/modules/pattern-fill.src.js",[e["Core/Globals.js"],e["Extensions/PatternFill.js"]],function(t,e){t.patterns=e.patterns,e.compose(t.Chart,t.Series,t.SVGRenderer);});}); 
-	} (patternFill));
-	return patternFill.exports;
+// HTML whitespace expression.
+// See <https://infra.spec.whatwg.org/#ascii-whitespace>.
+const re = /[ \t\n\f\r]/g;
+
+/**
+ * Check if the given value is *inter-element whitespace*.
+ *
+ * @param {Nodes | string} thing
+ *   Thing to check (`Node` or `string`).
+ * @returns {boolean}
+ *   Whether the `value` is inter-element whitespace (`boolean`): consisting of
+ *   zero or more of space, tab (`\t`), line feed (`\n`), carriage return
+ *   (`\r`), or form feed (`\f`); if a node is passed it must be a `Text` node,
+ *   whose `value` field is checked.
+ */
+function whitespace(thing) {
+  return typeof thing === 'object'
+    ? thing.type === 'text'
+      ? empty$1(thing.value)
+      : false
+    : empty$1(thing)
 }
 
-requirePatternFill();
+/**
+ * @param {string} value
+ * @returns {boolean}
+ */
+function empty$1(value) {
+  return value.replace(re, '') === ''
+}
 
-const PieChart = ({
-  data,
-  width = 230,
-  height = 180,
-  size = '60%',
-  colors = ['#2652a8', '#b47813', '#aa1a32']
-}) => {
-  const noData = data.metrics.some(m => m.transparent);
-  const options = useMemo(() => {
-    const chartData = data.metrics.filter(metric => metric.transparent || metric.value > 0).map((metric, index) => ({
-      name: metric.label,
-      y: metric.value,
-      color: metric.transparent ? checkerboardPattern() : colors[index % colors.length]
-    }));
-    return {
-      chart: {
-        type: 'pie',
-        backgroundColor: 'transparent',
-        width: width,
-        height: height,
-        style: {
-          fontFamily: fontFamily$1
-        }
-      },
-      title: {
-        text: undefined
-      },
-      tooltip: {
-        pointFormat: '<span><b>{point.y}</b> ({point.percentage:.1f}%)</span>',
-        style: {
-          fontFamily: fontFamily$1,
-          fontSize: '13px'
-        },
-        useHTML: true
-      },
-      plotOptions: {
-        pie: {
-          size: size,
-          allowPointSelect: true,
-          cursor: 'pointer',
-          dataLabels: {
-            enabled: true,
-            format: '{point.name}<br><b>{point.y}</b> ({point.percentage:.1f}%)',
-            distance: 20,
-            style: {
-              fontSize: '13px',
-              fontWeight: '100',
-              textOutline: 'none',
-              fontFamily: fontFamily$1
-            },
-            connectorColor: '#666',
-            connectorWidth: 1,
-            overflow: 'allow',
-            crop: false
-          },
-          showInLegend: false
-        }
-      },
-      series: [{
-        type: 'pie',
-        name: '',
-        colorByPoint: true,
-        data: chartData
-      }],
-      credits: {
-        enabled: false
-      },
-      accessibility: {
-        enabled: false
-      }
-    };
-  }, [data, width, height, size, colors]);
-  return /*#__PURE__*/React$1.createElement("div", {
-    style: styles$7.chartWrapper
-  }, /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      ...styles$7.chartContainer,
-      width,
-      height,
-      position: 'relative'
-    }
-  }, noData && /*#__PURE__*/React$1.createElement(CheckerboardBackground, {
-    width: width,
-    height: height
-  }), /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      position: 'relative',
-      zIndex: 1
+/**
+ * @import {Schema as SchemaType, Space} from 'property-information'
+ */
+
+/** @type {SchemaType} */
+class Schema {
+  /**
+   * @param {SchemaType['property']} property
+   *   Property.
+   * @param {SchemaType['normal']} normal
+   *   Normal.
+   * @param {Space | undefined} [space]
+   *   Space.
+   * @returns
+   *   Schema.
+   */
+  constructor(property, normal, space) {
+    this.normal = normal;
+    this.property = property;
+
+    if (space) {
+      this.space = space;
     }
-  }, /*#__PURE__*/React$1.createElement(HighchartsReact, {
-    highcharts: Highcharts$1,
-    options: options
-  }))), /*#__PURE__*/React$1.createElement("div", {
-    style: styles$7.agentName
-  }, data.name));
-};
-const fontFamily$1 = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
-const styles$7 = {
-  chartWrapper: {
-    background: 'transparent',
-    textAlign: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  chartContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  agentName: {
-    fontSize: '12px',
-    fontWeight: '100',
-    marginTop: '-30px',
-    color: '#333'
   }
-};
-const CheckerboardBackground = ({
-  width,
-  height
-}) => {
-  const circleSize = Math.min(width, height) * 0.47;
-  return /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      position: 'absolute',
-      width: circleSize,
-      height: circleSize,
-      borderRadius: '50%',
-      backgroundImage: `
-                linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
-                linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
-                linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
-                linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)
-              `,
-      backgroundSize: '10px 10px',
-      backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
-      backgroundColor: '#ffffff',
-      zIndex: 0
-    }
-  });
-};
-const checkerboardPattern = () => ({
-  pattern: {
-    path: {
-      d: 'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
-      stroke: '#d0d0d0',
-      strokeWidth: 1
-    },
-    width: 5,
-    height: 5,
-    backgroundColor: '#ffffff',
-    opacity: 1
-  }
-});
+}
 
-const ColumnChart = ({
-  data,
-  width,
-  height = 230
-}) => {
-  const series = useMemo(() => {
-    return data.series.map((item, sindex) => ({
-      ...item,
-      data: item.data.map((value, index) => ({
-        y: value,
-        color: data.colors[index % data.colors.length] + alphas[sindex % alphas.length]
-      }))
-    }));
-  }, [data]);
-  const colors = useMemo(() => {
-    return data.series.map((_, index) => data.colors[0] + alphas[index % alphas.length]);
-  }, [data]);
-  const options = useMemo(() => {
-    return {
-      chart: {
-        type: 'column',
-        backgroundColor: 'transparent',
-        width: width,
-        height: height,
-        style: {
-          fontFamily: fontFamily
-        }
-      },
-      title: {
-        text: undefined
-      },
-      tooltip: {
-        pointFormat: '<span><b>{point.y}</b></span>',
-        style: {
-          fontFamily: fontFamily,
-          fontSize: '13px',
-          fontWeight: '100'
-        },
-        useHTML: true
-      },
-      plotOptions: {
-        column: {
-          //size: size
-        }
-      },
-      xAxis: {
-        categories: data.categories,
-        crosshair: true,
-        labels: {
-          style: {
-            color: '#777',
-            fontFamily: fontFamily,
-            fontWeight: '400'
-          }
-        },
-        lineColor: '#aaa'
-      },
-      yAxis: {
-        title: {
-          text: undefined
-        },
-        labels: {
-          style: {
-            fontFamily: fontFamily,
-            fontSize: '12px',
-            fontWeight: '100'
-          }
-        },
-        gridLineColor: '#f9f9f9'
-      },
-      legend: {
-        layout: 'vertical',
-        itemStyle: {
-          fontFamily: fontFamily,
-          fontSize: '12px',
-          fontWeight: '100'
-        },
-        useHTML: true
-      },
-      series: series,
-      colors: colors,
-      credits: {
-        enabled: false
-      },
-      accessibility: {
-        enabled: false
-      }
-    };
-  }, [data, width, height, series, colors]);
-  return /*#__PURE__*/React$1.createElement("div", {
-    style: styles$6.chartWrapper
-  }, /*#__PURE__*/React$1.createElement(HighchartsReact, {
-    highcharts: Highcharts$1,
-    options: options
-  }));
-};
-const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
-const styles$6 = {
-  chartWrapper: {
-    background: 'transparent',
-    textAlign: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center'
+Schema.prototype.normal = {};
+Schema.prototype.property = {};
+Schema.prototype.space = undefined;
+
+/**
+ * @import {Info, Space} from 'property-information'
+ */
+
+
+/**
+ * @param {ReadonlyArray<Schema>} definitions
+ *   Definitions.
+ * @param {Space | undefined} [space]
+ *   Space.
+ * @returns {Schema}
+ *   Schema.
+ */
+function merge(definitions, space) {
+  /** @type {Record<string, Info>} */
+  const property = {};
+  /** @type {Record<string, string>} */
+  const normal = {};
+
+  for (const definition of definitions) {
+    Object.assign(property, definition.property);
+    Object.assign(normal, definition.normal);
   }
-};
-const alphas = ['ff', 'bb', '77', '33'];
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
+  return new Schema(property, normal, space)
 }
 
-function toValue(value) {
-  return value && typeof value === 'object' ? value.value : value;
-}
-function toPercent(value) {
-  return Math.round(value * 100 * 100) / 100;
-}
-function formatNumber(value) {
-  return value !== undefined ? value.toLocaleString() : '-';
-}
-function formatToPercent(value) {
-  return formatPercent(toPercent(value));
-}
-function formatPercent(value) {
-  return value !== undefined ? `${value.toLocaleString()}%` : '-';
-}
-function formatDuration(value) {
-  value = toValue(value);
-  if (!value) return '-';
-  let day = Math.floor(value / (60 * 60 * 24));
-  let hour = Math.floor(value / (60 * 60)) - day * 24;
-  let minute = Math.floor(value / 60) - (day * 24 + hour) * 60;
-  let second = Math.round(value % 60);
-  day = day > 0 ? `${day.toLocaleString()}일 ` : '';
-  hour = hour > 0 ? `${hour >= 10 ? hour : '0' + hour}시간 ` : '';
-  minute = `${minute >= 10 ? minute : '0' + minute}분 `;
-  second = `${second >= 10 ? second : '0' + second}초`;
-  return `${day}${hour}${minute}${second}`;
-}
-function formatBytes(value) {
-  return value !== undefined ? `${value.toLocaleString()} bytes` : '-';
+/**
+ * Get the cleaned case insensitive form of an attribute or property.
+ *
+ * @param {string} value
+ *   An attribute-like or property-like name.
+ * @returns {string}
+ *   Value that can be used to look up the properly cased property on a
+ *   `Schema`.
+ */
+function normalize$1(value) {
+  return value.toLowerCase()
 }
-function format(value, type) {
-  switch (type) {
-    case 'TO_PERCENT':
-      return formatToPercent(value);
-    case 'DURATION':
-      return formatDuration(value);
-    case 'BYTES':
-      return formatBytes(value);
-    case 'PERCENT':
-      return formatPercent(value);
-    default:
-      return formatNumber(value);
-  }
-}
-
-const all$1 = [[blue[500]], [purple[500], '#4168a6', '#81a7e1'], [green[500], '#debb7f', '#ecdbbe'], [yellow[500], '#1b8286', '#4ab3b6'], [red[500]], [orange[500]], [lime[500]], ['#54AAF9'], ['#BB4ECD'], ['#6DDBBA'], ['#FFE81C'], ['#FA7EBA'], ['#F55713'], ['#51B304'], ['#1559B2'], ['#733FAB'], ['#1C7B5F'], ['#D87500'], ['#C91E48'], ['#2F862F']];
-[[blue[400], blue[500]], [purple[400], purple[500]], [green[400], green[500]], [yellow[400], yellow[500]], [red[400], red[500]], [orange[400], orange[500]], [lime[400], lime[500]]];
-[[alpha(blue[500], 0.2), 'transparent', blue[300]], [alpha(purple[500], 0.2), 'transparent', purple[500]], [alpha(green[500], 0.2), 'transparent', green[500]], [alpha(yellow[500], 0.2), 'transparent', yellow[500]], [alpha(red[500], 0.2), 'transparent', red[500]], [alpha(orange[500], 0.2), 'transparent', orange[500]], [alpha(lime[500], 0.2), 'transparent', lime[500]]];
-const preset = ['#003f5c', '#a05195', '#665191', '#2f4b7c', '#d45087', '#f95d6a', '#ff7c43', '#ffa600'];
-all$1.map(color => color[0]);
-
-highchartsAccessibility(Highcharts$1);
-highchartsAnnotations(Highcharts$1);
-function Chart(props) {
-  const [legendLimitEnabled, setLegendLimitEnabled] = useState(props.legendLimit > 0);
-  const [options, setOptions] = useState(toOptions(props, legendLimitEnabled));
-  useEffect(() => {
-    if (props.delay) setTimeout(() => setOptions(toOptions(props, legendLimitEnabled, handleLegendItemClick)), props.delay);else setOptions(toOptions(props, legendLimitEnabled, handleLegendItemClick));
-    // eslint-disable-next-line
-  }, [props]);
-  const handleLegendItemClick = useCallback(() => setLegendLimitEnabled(false), []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, options && /*#__PURE__*/React.createElement(HighchartsReact, {
-    highcharts: Highcharts$1,
-    options: options
-  }));
-}
-function toOptions(props, legendLimitEnabled, handleLegendItemClick) {
-  const {
-    title = '',
-    type,
-    categorize,
-    stacking,
-    showLegend = true,
-    showDataLabel,
-    xAxisType,
-    xAxisLabel = true,
-    xAxisLabelFormat,
-    xAxisTickInterval,
-    yAxisLabelEnabled = true,
-    yAxisLabelFormat,
-    yAxisTickInterval = null,
-    yAxisPlotLines = [],
-    opacity = 1,
-    innerSize = 0,
-    colors: customColors,
-    backgroundColor = undefined,
-    xPlotIndex,
-    dimension,
-    metrics,
-    records = [],
-    metas,
-    height = 200,
-    legendLimit,
-    legendAlign = 'center',
-    tooltip = {},
-    secondaryXAxis = []
-  } = props;
-  const {
-    outside
-  } = tooltip;
-  const pie = type === 'pie';
-  const centers = pieCenters(metrics.length);
-  const size = pieSize(metrics.length);
-  const colors = customColors ? customColors : preset;
-  const categories = records.map(record => record[dimension]);
-  const mainXAxis = records.map(r => r.time);
-  const chartColorHandlers = {
-    line: (colors, index) => ({
-      color: colors[index],
-      mainColor: colors[index]
-    }),
-    area: (colors, index) => ({
-      color: colors[index][0],
-      mainColor: colors[index][1]
-    }),
-    gradient: (colors, index) => ({
-      color: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1
-        },
-        stops: [[0, `${colors[index][0]}`], [0.95, `${colors[index][1]}`]]
-      },
-      mainColor: colors[index][2]
-    })
-  };
-  const series = metrics.map(({
-    chartType,
-    metric
-  }, index) => {
-    const type = chartType === 'gradient' ? 'area' : chartType;
-    const {
-      color,
-      mainColor
-    } = chartColorHandlers[chartType](colors, index);
-    const meta = metas[metric];
-    let option = {
-      type: type,
-      name: meta ? meta.name : '',
-      data: records.map(record => {
-        const data = record.metric[metric] ?? null;
-        return pie ? {
-          name: record[dimension],
-          y: data
-        } : data;
-      }),
-      custom: {
-        type: meta ? meta.type : '',
-        pointerNames: meta?.pointerNames ?? null
-      },
-      center: centers[index] || [null, null],
-      size: size,
-      point: {
-        events: {
-          render: function () {
-            this.graphic.attr({
-              zIndex: this.y === 0 ? -1 : ZIndex.COMPARE_CHART_BASE - index
-            });
-          }
-        }
-      },
-      showInLegend: pie && index > 0 ? false : true,
-      color: color,
-      lineColor: mainColor,
-      lineWidth: 2,
-      marker: {
-        fillColor: mainColor
-      },
-      metric: metric
-    };
-    if (legendLimitEnabled) option = {
-      ...option,
-      visible: index < legendLimit
-    };
-    return option;
-  });
-  const yPlotLines = yAxisPlotLines.map((line, index) => {
-    return {
-      value: line.value,
-      width: 1,
-      color: line.color,
-      dashStyle: "Dash",
-      zIndex: ZIndex.AVERAGE_LINE_BASE + index,
-      label: {
-        text: line.label,
-        align: line.labelAlign,
-        style: {
-          color: line.labelColor,
-          opacity: 0.7,
-          fontSize: "12px",
-          padding: '1px 5px'
-        },
-        y: -8,
-        useHTML: true
-      }
-    };
-  });
-  const xPlotBands = [{
-    from: xPlotIndex,
-    to: categories.length - 1,
-    color: 'rgba(0, 0, 0, 0.03)',
-    zIndex: ZIndex.NOW_BAND
-  }];
-  const xPlotLines = [{
-    color: "#aaa",
-    width: 1,
-    value: xPlotIndex,
-    zIndex: ZIndex.NOW_BORDER,
-    label: {
-      text: "현재",
-      rotation: 0,
-      x: 5,
-      y: 13,
-      style: {
-        fontWeight: 500,
-        lineHeight: "16.8px",
-        color: "#333",
-        fontSize: "12px"
-      }
-    }
-  }];
-  return {
-    chart: {
-      type: type.toLowerCase(),
-      height: height,
-      backgroundColor,
-      events: {
-        render: secondaryXAxis.length === 0 ? undefined : function () {
-          const chart = this;
-          const visibleSeries = chart.series.filter(s => s.visible);
-          let newCategories = null;
-          if (visibleSeries.length === 1 && visibleSeries[0].options.metric === 'prev') {
-            newCategories = secondaryXAxis;
-          } else {
-            newCategories = mainXAxis;
-          }
-          const isSame = JSON.stringify(chart.xAxis[0].categories) === JSON.stringify(newCategories);
-          if (!isSame) {
-            chart.xAxis[0].setCategories(newCategories);
-          }
-        }
-      }
-    },
-    title: {
-      text: ''
-    },
-    subtitle: {
-      text: title
-    },
-    colors: colors,
-    xAxis: {
-      type: xAxisType,
-      labels: {
-        enabled: xAxisLabel,
-        autoRotation: false,
-        format: xAxisLabelFormat ? `{value:${xAxisLabelFormat}}` : undefined,
-        style: {
-          color: grey[600]
-        }
-      },
-      categories: categorize ? categories : undefined,
-      tickWidth: 1,
-      tickInterval: xAxisTickInterval ?? (xAxisType === 'datetime' ? records.length / 20 : 1),
-      lineColor: grey[900],
-      tickColor: grey[900],
-      crosshair: true,
-      startOnTick: true,
-      plotBands: xPlotIndex !== undefined ? xPlotBands : undefined,
-      plotLines: xPlotIndex !== undefined ? xPlotLines : undefined
-    },
-    yAxis: {
-      title: {
-        text: ''
-      },
-      labels: {
-        enabled: yAxisLabelEnabled,
-        formatter: yAxisLabelFormat,
-        style: {
-          color: grey[600]
-        }
-      },
-      tickInterval: yAxisTickInterval,
-      gridLineColor: '#f8f8f8',
-      plotLines: yPlotLines
-    },
-    plotOptions: {
-      series: {
-        opacity: opacity,
-        stacking: stackingType(stacking),
-        showInLegend: showLegend,
-        dataLabels: {
-          enabled: showDataLabel
-        },
-        colorByPoint: pie,
-        lineWidth: 2,
-        marker: {
-          enabled: false,
-          symbol: 'circle'
-        },
-        cursor: 'pointer',
-        point: {
-          events: {}
-        },
-        events: {
-          legendItemClick: handleLegendItemClick
-        }
-      },
-      pie: {
-        allowPointSelect: true,
-        innerSize: `${innerSize}%`
-      }
-    },
-    legend: {
-      align: legendAlign,
-      verticalAlign: 'top',
-      enabled: showLegend
-    },
-    tooltip: {
-      followPointer: false,
-      shared: true,
-      shadow: false,
-      useHTML: true,
-      formatter: function () {
-        return tooltipFormatter(this, tooltip);
-      },
-      outside: outside,
-      style: {
-        zIndex: 2000
-      }
-    },
-    series: series,
-    time: {
-      useUTC: false,
-      getTimezoneOffset: function () {
-        return new Date().getTimezoneOffset();
-      }
-    },
-    credits: {
-      enabled: false
-    }
-  };
-}
-const tooltipFormatter = (_this, props) => {
-  const {
-    headerVisible = true,
-    dateFormat,
-    headerTime,
-    legendColors = []
-  } = props;
-  let tooltip = '<div style="font-size: 14px;padding: 12px; min-width: 200px;">';
-  if (headerVisible) {
-    const xDate = new Date(_this.x);
-    const date = formatDate(xDate, dateFormat);
-    tooltip += `<div style="display: flex; justify-content: space-between; font-weight: bold; font-size: 12px;">
-                            <span style="font-size: 12px; color: #333;">${date}</span>`;
-    if (headerTime) {
-      const time = formatDate(xDate, '%H:%M');
-      tooltip += `<span style="font-size: 12px; color: #333;">${time}</span>`;
-    }
-    tooltip += '</div>';
-  }
-  _this.points.forEach(point => {
-    const type = point.series.options.custom.type;
-    const value = type !== 'TO_PERCENT' ? format(point.y, type) : formatToPercent(_this.percentage / 100);
-    const name = point.series.name;
-    let color = type !== 'TO_PERCENT' ? point.series.color : point.color;
-    if (legendColors.length !== 0) {
-      color = legendColors[point.series.index];
-    }
-    tooltip += `<div style="display: flex; flex-direction: column; gap: 8px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
-                  <span style="width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; background-color: ${color}"></span>
-                  <span style="flex-grow: 1; font-size: 14px; padding-right: 20px;">${name}</span>
-                  <span style="font-weight: bold; font-size: 14px;">${value}</span>
-                </div>
-              </div>`;
-  });
-  tooltip += '</div>';
-  return tooltip;
-};
-function formatDate(data, format) {
-  return Highcharts$1.dateFormat(format, data.getTime() - data.getTimezoneOffset() * 60000);
-}
-const ZIndex = {
-  AVERAGE_LINE_BASE: 10,
-  COMPARE_CHART_BASE: 5,
-  NOW_BORDER: 2,
-  NOW_BAND: 1
-};
-function stackingType(stacking) {
-  return stacking ? stacking.toLowerCase() : '';
-}
-function pieCenters(count) {
-  switch (count) {
-    case 2:
-      return [['25%', '50%'], ['75%', '50%']];
-    case 3:
-      return [['25%', '25%'], ['75%', '25%'], ['50%', '75%']];
-    case 4:
-      return [['25%', '25%'], ['75%', '25%'], ['25%', '75%'], ['75%', '75%']];
-    default:
-      return [];
-  }
-}
-function pieSize(count) {
-  switch (count) {
-    case 3:
-      return '50%';
-    case 4:
-      return '25%';
-    default:
-      return null;
-  }
-}
-
-function TrendChart({
-  colorIndex = 0,
-  legendColors,
-  isDaily,
-  isRealtime,
-  ...props
-}) {
-  const colors = useMemo(() => {
-    return all$1[colorIndex % all$1.length];
-  }, [colorIndex]);
-  const tooltip = useMemo(() => ({
-    dateFormat: isRealtime ? '%H:%M' : '%Y-%m-%d',
-    headerTime: !isDaily && !isRealtime,
-    outside: props.tooltipOutSide,
-    legendColors
-  }), [isRealtime, isDaily, props.tooltipOutSide, legendColors]);
-  return /*#__PURE__*/React.createElement(Chart, _extends({
-    type: "areaspline",
-    categorize: true,
-    xAxisType: "datetime",
-    xAxisLabelFormat: isDaily ? '%m-%d' : '%H:%M',
-    colors: colors,
-    tooltip: tooltip
-  }, props));
-}
-
-function StackedAreaTrendChart({
-  metrics,
-  records,
-  isDaily = false,
-  xPlotIndex,
-  xAxisTickInterval,
-  yAxisLabelEnabled = false,
-  legendLimit = 3,
-  colors = defaultColors,
-  ...props
-}) {
-  const _metrics = useMemo(() => {
-    return metrics.map(m => ({
-      metric: m.id,
-      chartType: 'area'
-    }));
-  }, [metrics]);
-  const metas = useMemo(() => {
-    const result = {
-      time: {
-        name: "일시",
-        type: "DATE"
-      }
-    };
-    metrics.forEach(m => {
-      result[m.id] = {
-        name: m.name,
-        type: "NUMBER"
-      };
-    });
-    return result;
-  }, [metrics]);
-  return /*#__PURE__*/React.createElement(TrendChart, _extends({
-    dimension: "time",
-    stacking: "normal",
-    metrics: _metrics,
-    metas: metas,
-    records: records,
-    isRealtime: xPlotIndex !== undefined,
-    isDaily: isDaily,
-    xPlotIndex: xPlotIndex,
-    xAxisTickInterval: xAxisTickInterval,
-    yAxisLabelEnabled: yAxisLabelEnabled,
-    legendLimit: legendLimit,
-    colors: colors
-  }, props));
-}
-const defaultColors = [["rgba(54,115,237,0.8)", "#3673ed"], ["rgba(149,77,241,0.8)", "#954df1"], ["#4dc391", "#20b476"], ["#fbba3d", "#faa90c"], ["#f2426d", "#ef1348"]];
-
-function ok$1() {}
-
-function unreachable() {}
-
-/**
- * @typedef Options
- *   Configuration for `stringify`.
- * @property {boolean} [padLeft=true]
- *   Whether to pad a space before a token.
- * @property {boolean} [padRight=false]
- *   Whether to pad a space after a token.
- */
-
-
-/**
- * Serialize an array of strings or numbers to comma-separated tokens.
- *
- * @param {Array<string|number>} values
- *   List of tokens.
- * @param {Options} [options]
- *   Configuration for `stringify` (optional).
- * @returns {string}
- *   Comma-separated tokens.
- */
-function stringify$1(values, options) {
-  const settings = {};
-
-  // Ensure the last empty entry is seen.
-  const input = values[values.length - 1] === '' ? [...values, ''] : values;
-
-  return input
-    .join(
-      (settings.padRight ? ' ' : '') +
-        ',' +
-        (settings.padLeft === false ? '' : ' ')
-    )
-    .trim()
-}
-
-/**
- * @typedef Options
- *   Configuration.
- * @property {boolean | null | undefined} [jsx=false]
- *   Support JSX identifiers (default: `false`).
- */
-
-const nameRe = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-const nameReJsx = /^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-
-/** @type {Options} */
-const emptyOptions$2 = {};
-
-/**
- * Checks if the given value is a valid identifier name.
- *
- * @param {string} name
- *   Identifier to check.
- * @param {Options | null | undefined} [options]
- *   Configuration (optional).
- * @returns {boolean}
- *   Whether `name` can be an identifier.
- */
-function name(name, options) {
-  const settings = emptyOptions$2;
-  const re = settings.jsx ? nameReJsx : nameRe;
-  return re.test(name)
-}
-
-/**
- * @typedef {import('hast').Nodes} Nodes
- */
-
-// HTML whitespace expression.
-// See <https://infra.spec.whatwg.org/#ascii-whitespace>.
-const re = /[ \t\n\f\r]/g;
-
-/**
- * Check if the given value is *inter-element whitespace*.
- *
- * @param {Nodes | string} thing
- *   Thing to check (`Node` or `string`).
- * @returns {boolean}
- *   Whether the `value` is inter-element whitespace (`boolean`): consisting of
- *   zero or more of space, tab (`\t`), line feed (`\n`), carriage return
- *   (`\r`), or form feed (`\f`); if a node is passed it must be a `Text` node,
- *   whose `value` field is checked.
- */
-function whitespace(thing) {
-  return typeof thing === 'object'
-    ? thing.type === 'text'
-      ? empty$1(thing.value)
-      : false
-    : empty$1(thing)
-}
-
-/**
- * @param {string} value
- * @returns {boolean}
- */
-function empty$1(value) {
-  return value.replace(re, '') === ''
-}
-
-/**
- * @import {Schema as SchemaType, Space} from 'property-information'
- */
-
-/** @type {SchemaType} */
-class Schema {
-  /**
-   * @param {SchemaType['property']} property
-   *   Property.
-   * @param {SchemaType['normal']} normal
-   *   Normal.
-   * @param {Space | undefined} [space]
-   *   Space.
-   * @returns
-   *   Schema.
-   */
-  constructor(property, normal, space) {
-    this.normal = normal;
-    this.property = property;
-
-    if (space) {
-      this.space = space;
-    }
-  }
-}
-
-Schema.prototype.normal = {};
-Schema.prototype.property = {};
-Schema.prototype.space = undefined;
-
-/**
- * @import {Info, Space} from 'property-information'
- */
-
-
-/**
- * @param {ReadonlyArray<Schema>} definitions
- *   Definitions.
- * @param {Space | undefined} [space]
- *   Space.
- * @returns {Schema}
- *   Schema.
- */
-function merge(definitions, space) {
-  /** @type {Record<string, Info>} */
-  const property = {};
-  /** @type {Record<string, string>} */
-  const normal = {};
-
-  for (const definition of definitions) {
-    Object.assign(property, definition.property);
-    Object.assign(normal, definition.normal);
-  }
-
-  return new Schema(property, normal, space)
-}
-
-/**
- * Get the cleaned case insensitive form of an attribute or property.
- *
- * @param {string} value
- *   An attribute-like or property-like name.
- * @returns {string}
- *   Value that can be used to look up the properly cased property on a
- *   `Schema`.
- */
-function normalize$1(value) {
-  return value.toLowerCase()
-}
-
-/**
- * @import {Info as InfoType} from 'property-information'
- */
-
-/** @type {InfoType} */
-class Info {
-  /**
-   * @param {string} property
-   *   Property.
-   * @param {string} attribute
-   *   Attribute.
-   * @returns
-   *   Info.
-   */
-  constructor(property, attribute) {
-    this.attribute = attribute;
-    this.property = property;
+
+/**
+ * @import {Info as InfoType} from 'property-information'
+ */
+
+/** @type {InfoType} */
+class Info {
+  /**
+   * @param {string} property
+   *   Property.
+   * @param {string} attribute
+   *   Attribute.
+   * @returns
+   *   Info.
+   */
+  constructor(property, attribute) {
+    this.attribute = attribute;
+    this.property = property;
   }
 }
 
@@ -1027,14 +242,14 @@ function increment() {
 }
 
 var types = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	boolean: boolean,
-	booleanish: booleanish,
-	commaOrSpaceSeparated: commaOrSpaceSeparated,
-	commaSeparated: commaSeparated,
-	number: number,
-	overloadedBoolean: overloadedBoolean,
-	spaceSeparated: spaceSeparated
+    __proto__: null,
+    boolean: boolean,
+    booleanish: booleanish,
+    commaOrSpaceSeparated: commaOrSpaceSeparated,
+    commaSeparated: commaSeparated,
+    number: number,
+    overloadedBoolean: overloadedBoolean,
+    spaceSeparated: spaceSeparated
 });
 
 /**
@@ -2274,6 +1489,10 @@ function stringify(values) {
   return values.join(' ').trim()
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 var cjs$2 = {};
 
 var cjs$1;
@@ -4038,12 +3257,12 @@ function one(value, includeImageAlt, includeHtml) {
     }
 
     if ('children' in value) {
-      return all(value.children, includeImageAlt, includeHtml)
+      return all$1(value.children, includeImageAlt, includeHtml)
     }
   }
 
   if (Array.isArray(value)) {
-    return all(value, includeImageAlt, includeHtml)
+    return all$1(value, includeImageAlt, includeHtml)
   }
 
   return ''
@@ -4061,7 +3280,7 @@ function one(value, includeImageAlt, includeHtml) {
  * @returns {string}
  *   Serialized nodes.
  */
-function all(values, includeImageAlt, includeHtml) {
+function all$1(values, includeImageAlt, includeHtml) {
   /** @type {Array<string>} */
   const result = [];
   let index = -1;
@@ -14013,16 +13232,16 @@ const disable = {
 };
 
 var defaultConstructs = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	attentionMarkers: attentionMarkers,
-	contentInitial: contentInitial,
-	disable: disable,
-	document: document$1,
-	flow: flow,
-	flowInitial: flowInitial,
-	insideSpan: insideSpan,
-	string: string,
-	text: text$1
+    __proto__: null,
+    attentionMarkers: attentionMarkers,
+    contentInitial: contentInitial,
+    disable: disable,
+    document: document$1,
+    flow: flow,
+    flowInitial: flowInitial,
+    insideSpan: insideSpan,
+    string: string,
+    text: text$1
 });
 
 /**
@@ -20725,985 +19944,1623 @@ class Processor extends CallableInstance {
     assertNode(tree);
     this.freeze();
 
-    const transformers = this.transformers;
+    const transformers = this.transformers;
+
+    if (!done && typeof file === 'function') {
+      done = file;
+      file = undefined;
+    }
+
+    return done ? executor(undefined, done) : new Promise(executor)
+
+    // Note: `void`s needed for TS.
+    /**
+     * @param {(
+     *   ((tree: TailTree extends undefined ? Node : TailTree) => undefined | void) |
+     *   undefined
+     * )} resolve
+     * @param {(error: Error) => undefined | void} reject
+     * @returns {undefined}
+     */
+    function executor(resolve, reject) {
+      const realFile = vfile(file);
+      transformers.run(tree, realFile, realDone);
+
+      /**
+       * @param {Error | undefined} error
+       * @param {Node} outputTree
+       * @param {VFile} file
+       * @returns {undefined}
+       */
+      function realDone(error, outputTree, file) {
+        const resultingTree =
+          /** @type {TailTree extends undefined ? Node : TailTree} */ (
+            outputTree || tree
+          );
+
+        if (error) {
+          reject(error);
+        } else if (resolve) {
+          resolve(resultingTree);
+        } else {
+          done(undefined, resultingTree, file);
+        }
+      }
+    }
+  }
+
+  /**
+   * Run *transformers* on a syntax tree.
+   *
+   * An error is thrown if asynchronous transforms are configured.
+   *
+   * > **Note**: `runSync` freezes the processor if not already *frozen*.
+   *
+   * > **Note**: `runSync` performs the run phase, not other phases.
+   *
+   * @param {HeadTree extends undefined ? Node : HeadTree} tree
+   *   Tree to transform and inspect.
+   * @param {Compatible | undefined} [file]
+   *   File associated with `node` (optional); any value accepted as `x` in
+   *   `new VFile(x)`.
+   * @returns {TailTree extends undefined ? Node : TailTree}
+   *   Transformed tree.
+   */
+  runSync(tree, file) {
+    /** @type {boolean} */
+    let complete = false;
+    /** @type {(TailTree extends undefined ? Node : TailTree) | undefined} */
+    let result;
+
+    this.run(tree, file, realDone);
+
+    assertDone('runSync', 'run', complete);
+    return result
+
+    /**
+     * @type {RunCallback<TailTree extends undefined ? Node : TailTree>}
+     */
+    function realDone(error, tree) {
+      bail(error);
+      result = tree;
+      complete = true;
+    }
+  }
+
+  /**
+   * Compile a syntax tree.
+   *
+   * > **Note**: `stringify` freezes the processor if not already *frozen*.
+   *
+   * > **Note**: `stringify` performs the stringify phase, not the run phase
+   * > or other phases.
+   *
+   * @param {CompileTree extends undefined ? Node : CompileTree} tree
+   *   Tree to compile.
+   * @param {Compatible | undefined} [file]
+   *   File associated with `node` (optional); any value accepted as `x` in
+   *   `new VFile(x)`.
+   * @returns {CompileResult extends undefined ? Value : CompileResult}
+   *   Textual representation of the tree (see note).
+   *
+   *   > **Note**: unified typically compiles by serializing: most compilers
+   *   > return `string` (or `Uint8Array`).
+   *   > Some compilers, such as the one configured with
+   *   > [`rehype-react`][rehype-react], return other values (in this case, a
+   *   > React tree).
+   *   > If you’re using a compiler that doesn’t serialize, expect different
+   *   > result values.
+   *   >
+   *   > To register custom results in TypeScript, add them to
+   *   > {@linkcode CompileResultMap}.
+   *
+   *   [rehype-react]: https://github.com/rehypejs/rehype-react
+   */
+  stringify(tree, file) {
+    this.freeze();
+    const realFile = vfile(file);
+    const compiler = this.compiler || this.Compiler;
+    assertCompiler('stringify', compiler);
+    assertNode(tree);
+
+    return compiler(tree, realFile)
+  }
+
+  /**
+   * Configure the processor to use a plugin, a list of usable values, or a
+   * preset.
+   *
+   * If the processor is already using a plugin, the previous plugin
+   * configuration is changed based on the options that are passed in.
+   * In other words, the plugin is not added a second time.
+   *
+   * > **Note**: `use` cannot be called on *frozen* processors.
+   * > Call the processor first to create a new unfrozen processor.
+   *
+   * @example
+   *   There are many ways to pass plugins to `.use()`.
+   *   This example gives an overview:
+   *
+   *   ```js
+   *   import {unified} from 'unified'
+   *
+   *   unified()
+   *     // Plugin with options:
+   *     .use(pluginA, {x: true, y: true})
+   *     // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`):
+   *     .use(pluginA, {y: false, z: true})
+   *     // Plugins:
+   *     .use([pluginB, pluginC])
+   *     // Two plugins, the second with options:
+   *     .use([pluginD, [pluginE, {}]])
+   *     // Preset with plugins and settings:
+   *     .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}})
+   *     // Settings only:
+   *     .use({settings: {position: false}})
+   *   ```
+   *
+   * @template {Array<unknown>} [Parameters=[]]
+   * @template {Node | string | undefined} [Input=undefined]
+   * @template [Output=Input]
+   *
+   * @overload
+   * @param {Preset | null | undefined} [preset]
+   * @returns {Processor<ParseTree, HeadTree, TailTree, CompileTree, CompileResult>}
+   *
+   * @overload
+   * @param {PluggableList} list
+   * @returns {Processor<ParseTree, HeadTree, TailTree, CompileTree, CompileResult>}
+   *
+   * @overload
+   * @param {Plugin<Parameters, Input, Output>} plugin
+   * @param {...(Parameters | [boolean])} parameters
+   * @returns {UsePlugin<ParseTree, HeadTree, TailTree, CompileTree, CompileResult, Input, Output>}
+   *
+   * @param {PluggableList | Plugin | Preset | null | undefined} value
+   *   Usable value.
+   * @param {...unknown} parameters
+   *   Parameters, when a plugin is given as a usable value.
+   * @returns {Processor<ParseTree, HeadTree, TailTree, CompileTree, CompileResult>}
+   *   Current processor.
+   */
+  use(value, ...parameters) {
+    const attachers = this.attachers;
+    const namespace = this.namespace;
+
+    assertUnfrozen('use', this.frozen);
+
+    if (value === null || value === undefined) ; else if (typeof value === 'function') {
+      addPlugin(value, parameters);
+    } else if (typeof value === 'object') {
+      if (Array.isArray(value)) {
+        addList(value);
+      } else {
+        addPreset(value);
+      }
+    } else {
+      throw new TypeError('Expected usable value, not `' + value + '`')
+    }
+
+    return this
+
+    /**
+     * @param {Pluggable} value
+     * @returns {undefined}
+     */
+    function add(value) {
+      if (typeof value === 'function') {
+        addPlugin(value, []);
+      } else if (typeof value === 'object') {
+        if (Array.isArray(value)) {
+          const [plugin, ...parameters] =
+            /** @type {PluginTuple<Array<unknown>>} */ (value);
+          addPlugin(plugin, parameters);
+        } else {
+          addPreset(value);
+        }
+      } else {
+        throw new TypeError('Expected usable value, not `' + value + '`')
+      }
+    }
+
+    /**
+     * @param {Preset} result
+     * @returns {undefined}
+     */
+    function addPreset(result) {
+      if (!('plugins' in result) && !('settings' in result)) {
+        throw new Error(
+          'Expected usable value but received an empty preset, which is probably a mistake: presets typically come with `plugins` and sometimes with `settings`, but this has neither'
+        )
+      }
+
+      addList(result.plugins);
+
+      if (result.settings) {
+        namespace.settings = extend(true, namespace.settings, result.settings);
+      }
+    }
+
+    /**
+     * @param {PluggableList | null | undefined} plugins
+     * @returns {undefined}
+     */
+    function addList(plugins) {
+      let index = -1;
 
-    if (!done && typeof file === 'function') {
-      done = file;
-      file = undefined;
+      if (plugins === null || plugins === undefined) ; else if (Array.isArray(plugins)) {
+        while (++index < plugins.length) {
+          const thing = plugins[index];
+          add(thing);
+        }
+      } else {
+        throw new TypeError('Expected a list of plugins, not `' + plugins + '`')
+      }
     }
 
-    return done ? executor(undefined, done) : new Promise(executor)
-
-    // Note: `void`s needed for TS.
     /**
-     * @param {(
-     *   ((tree: TailTree extends undefined ? Node : TailTree) => undefined | void) |
-     *   undefined
-     * )} resolve
-     * @param {(error: Error) => undefined | void} reject
+     * @param {Plugin} plugin
+     * @param {Array<unknown>} parameters
      * @returns {undefined}
      */
-    function executor(resolve, reject) {
-      const realFile = vfile(file);
-      transformers.run(tree, realFile, realDone);
+    function addPlugin(plugin, parameters) {
+      let index = -1;
+      let entryIndex = -1;
 
-      /**
-       * @param {Error | undefined} error
-       * @param {Node} outputTree
-       * @param {VFile} file
-       * @returns {undefined}
-       */
-      function realDone(error, outputTree, file) {
-        const resultingTree =
-          /** @type {TailTree extends undefined ? Node : TailTree} */ (
-            outputTree || tree
-          );
+      while (++index < attachers.length) {
+        if (attachers[index][0] === plugin) {
+          entryIndex = index;
+          break
+        }
+      }
 
-        if (error) {
-          reject(error);
-        } else if (resolve) {
-          resolve(resultingTree);
-        } else {
-          done(undefined, resultingTree, file);
+      if (entryIndex === -1) {
+        attachers.push([plugin, ...parameters]);
+      }
+      // Only set if there was at least a `primary` value, otherwise we’d change
+      // `arguments.length`.
+      else if (parameters.length > 0) {
+        let [primary, ...rest] = parameters;
+        const currentPrimary = attachers[entryIndex][1];
+        if (isPlainObject(currentPrimary) && isPlainObject(primary)) {
+          primary = extend(true, currentPrimary, primary);
         }
+
+        attachers[entryIndex] = [plugin, primary, ...rest];
       }
     }
   }
+}
 
-  /**
-   * Run *transformers* on a syntax tree.
-   *
-   * An error is thrown if asynchronous transforms are configured.
-   *
-   * > **Note**: `runSync` freezes the processor if not already *frozen*.
-   *
-   * > **Note**: `runSync` performs the run phase, not other phases.
-   *
-   * @param {HeadTree extends undefined ? Node : HeadTree} tree
-   *   Tree to transform and inspect.
-   * @param {Compatible | undefined} [file]
-   *   File associated with `node` (optional); any value accepted as `x` in
-   *   `new VFile(x)`.
-   * @returns {TailTree extends undefined ? Node : TailTree}
-   *   Transformed tree.
-   */
-  runSync(tree, file) {
-    /** @type {boolean} */
-    let complete = false;
-    /** @type {(TailTree extends undefined ? Node : TailTree) | undefined} */
-    let result;
+// Note: this returns a *callable* instance.
+// That’s why it’s documented as a function.
+/**
+ * Create a new processor.
+ *
+ * @example
+ *   This example shows how a new processor can be created (from `remark`) and linked
+ *   to **stdin**(4) and **stdout**(4).
+ *
+ *   ```js
+ *   import process from 'node:process'
+ *   import concatStream from 'concat-stream'
+ *   import {remark} from 'remark'
+ *
+ *   process.stdin.pipe(
+ *     concatStream(function (buf) {
+ *       process.stdout.write(String(remark().processSync(buf)))
+ *     })
+ *   )
+ *   ```
+ *
+ * @returns
+ *   New *unfrozen* processor (`processor`).
+ *
+ *   This processor is configured to work the same as its ancestor.
+ *   When the descendant processor is configured in the future it does not
+ *   affect the ancestral processor.
+ */
+const unified = new Processor().freeze();
+
+/**
+ * Assert a parser is available.
+ *
+ * @param {string} name
+ * @param {unknown} value
+ * @returns {asserts value is Parser}
+ */
+function assertParser(name, value) {
+  if (typeof value !== 'function') {
+    throw new TypeError('Cannot `' + name + '` without `parser`')
+  }
+}
+
+/**
+ * Assert a compiler is available.
+ *
+ * @param {string} name
+ * @param {unknown} value
+ * @returns {asserts value is Compiler}
+ */
+function assertCompiler(name, value) {
+  if (typeof value !== 'function') {
+    throw new TypeError('Cannot `' + name + '` without `compiler`')
+  }
+}
+
+/**
+ * Assert the processor is not frozen.
+ *
+ * @param {string} name
+ * @param {unknown} frozen
+ * @returns {asserts frozen is false}
+ */
+function assertUnfrozen(name, frozen) {
+  if (frozen) {
+    throw new Error(
+      'Cannot call `' +
+        name +
+        '` on a frozen processor.\nCreate a new processor first, by calling it: use `processor()` instead of `processor`.'
+    )
+  }
+}
+
+/**
+ * Assert `node` is a unist node.
+ *
+ * @param {unknown} node
+ * @returns {asserts node is Node}
+ */
+function assertNode(node) {
+  // `isPlainObj` unfortunately uses `any` instead of `unknown`.
+  // type-coverage:ignore-next-line
+  if (!isPlainObject(node) || typeof node.type !== 'string') {
+    throw new TypeError('Expected node, got `' + node + '`')
+    // Fine.
+  }
+}
+
+/**
+ * Assert that `complete` is `true`.
+ *
+ * @param {string} name
+ * @param {string} asyncName
+ * @param {unknown} complete
+ * @returns {asserts complete is true}
+ */
+function assertDone(name, asyncName, complete) {
+  if (!complete) {
+    throw new Error(
+      '`' + name + '` finished async. Use `' + asyncName + '` instead'
+    )
+  }
+}
+
+/**
+ * @param {Compatible | undefined} [value]
+ * @returns {VFile}
+ */
+function vfile(value) {
+  return looksLikeAVFile(value) ? value : new VFile(value)
+}
+
+/**
+ * @param {Compatible | undefined} [value]
+ * @returns {value is VFile}
+ */
+function looksLikeAVFile(value) {
+  return Boolean(
+    value &&
+      typeof value === 'object' &&
+      'message' in value &&
+      'messages' in value
+  )
+}
+
+/**
+ * @param {unknown} [value]
+ * @returns {value is Value}
+ */
+function looksLikeAValue(value) {
+  return typeof value === 'string' || isUint8Array(value)
+}
+
+/**
+ * Assert `value` is an `Uint8Array`.
+ *
+ * @param {unknown} value
+ *   thing.
+ * @returns {value is Uint8Array}
+ *   Whether `value` is an `Uint8Array`.
+ */
+function isUint8Array(value) {
+  return Boolean(
+    value &&
+      typeof value === 'object' &&
+      'byteLength' in value &&
+      'byteOffset' in value
+  )
+}
+
+/**
+ * @import {Element, Nodes, Parents, Root} from 'hast'
+ * @import {Root as MdastRoot} from 'mdast'
+ * @import {ComponentType, JSX, ReactElement, ReactNode} from 'react'
+ * @import {Options as RemarkRehypeOptions} from 'remark-rehype'
+ * @import {BuildVisitor} from 'unist-util-visit'
+ * @import {PluggableList, Processor} from 'unified'
+ */
+
+
+const changelog =
+  'https://github.com/remarkjs/react-markdown/blob/main/changelog.md';
 
-    this.run(tree, file, realDone);
+/** @type {PluggableList} */
+const emptyPlugins = [];
+/** @type {Readonly<RemarkRehypeOptions>} */
+const emptyRemarkRehypeOptions = {allowDangerousHtml: true};
+const safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i;
 
-    assertDone('runSync', 'run', complete);
-    return result
+// Mutable because we `delete` any time it’s used and a message is sent.
+/** @type {ReadonlyArray<Readonly<Deprecation>>} */
+const deprecations = [
+  {from: 'astPlugins', id: 'remove-buggy-html-in-markdown-parser'},
+  {from: 'allowDangerousHtml', id: 'remove-buggy-html-in-markdown-parser'},
+  {
+    from: 'allowNode',
+    id: 'replace-allownode-allowedtypes-and-disallowedtypes',
+    to: 'allowElement'
+  },
+  {
+    from: 'allowedTypes',
+    id: 'replace-allownode-allowedtypes-and-disallowedtypes',
+    to: 'allowedElements'
+  },
+  {from: 'className', id: 'remove-classname'},
+  {
+    from: 'disallowedTypes',
+    id: 'replace-allownode-allowedtypes-and-disallowedtypes',
+    to: 'disallowedElements'
+  },
+  {from: 'escapeHtml', id: 'remove-buggy-html-in-markdown-parser'},
+  {from: 'includeElementIndex', id: '#remove-includeelementindex'},
+  {
+    from: 'includeNodeIndex',
+    id: 'change-includenodeindex-to-includeelementindex'
+  },
+  {from: 'linkTarget', id: 'remove-linktarget'},
+  {from: 'plugins', id: 'change-plugins-to-remarkplugins', to: 'remarkPlugins'},
+  {from: 'rawSourcePos', id: '#remove-rawsourcepos'},
+  {from: 'renderers', id: 'change-renderers-to-components', to: 'components'},
+  {from: 'source', id: 'change-source-to-children', to: 'children'},
+  {from: 'sourcePos', id: '#remove-sourcepos'},
+  {from: 'transformImageUri', id: '#add-urltransform', to: 'urlTransform'},
+  {from: 'transformLinkUri', id: '#add-urltransform', to: 'urlTransform'}
+];
 
-    /**
-     * @type {RunCallback<TailTree extends undefined ? Node : TailTree>}
-     */
-    function realDone(error, tree) {
-      bail(error);
-      result = tree;
-      complete = true;
-    }
-  }
+/**
+ * Component to render markdown.
+ *
+ * This is a synchronous component.
+ * When using async plugins,
+ * see {@linkcode MarkdownAsync} or {@linkcode MarkdownHooks}.
+ *
+ * @param {Readonly<Options>} options
+ *   Props.
+ * @returns {ReactElement}
+ *   React element.
+ */
+function Markdown(options) {
+  const processor = createProcessor(options);
+  const file = createFile(options);
+  return post(processor.runSync(processor.parse(file), file), options)
+}
 
-  /**
-   * Compile a syntax tree.
-   *
-   * > **Note**: `stringify` freezes the processor if not already *frozen*.
-   *
-   * > **Note**: `stringify` performs the stringify phase, not the run phase
-   * > or other phases.
-   *
-   * @param {CompileTree extends undefined ? Node : CompileTree} tree
-   *   Tree to compile.
-   * @param {Compatible | undefined} [file]
-   *   File associated with `node` (optional); any value accepted as `x` in
-   *   `new VFile(x)`.
-   * @returns {CompileResult extends undefined ? Value : CompileResult}
-   *   Textual representation of the tree (see note).
-   *
-   *   > **Note**: unified typically compiles by serializing: most compilers
-   *   > return `string` (or `Uint8Array`).
-   *   > Some compilers, such as the one configured with
-   *   > [`rehype-react`][rehype-react], return other values (in this case, a
-   *   > React tree).
-   *   > If you’re using a compiler that doesn’t serialize, expect different
-   *   > result values.
-   *   >
-   *   > To register custom results in TypeScript, add them to
-   *   > {@linkcode CompileResultMap}.
-   *
-   *   [rehype-react]: https://github.com/rehypejs/rehype-react
-   */
-  stringify(tree, file) {
-    this.freeze();
-    const realFile = vfile(file);
-    const compiler = this.compiler || this.Compiler;
-    assertCompiler('stringify', compiler);
-    assertNode(tree);
+/**
+ * Set up the `unified` processor.
+ *
+ * @param {Readonly<Options>} options
+ *   Props.
+ * @returns {Processor<MdastRoot, MdastRoot, Root, undefined, undefined>}
+ *   Result.
+ */
+function createProcessor(options) {
+  const rehypePlugins = options.rehypePlugins || emptyPlugins;
+  const remarkPlugins = options.remarkPlugins || emptyPlugins;
+  const remarkRehypeOptions = options.remarkRehypeOptions
+    ? {...options.remarkRehypeOptions, ...emptyRemarkRehypeOptions}
+    : emptyRemarkRehypeOptions;
 
-    return compiler(tree, realFile)
-  }
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkPlugins)
+    .use(remarkRehype, remarkRehypeOptions)
+    .use(rehypePlugins);
 
-  /**
-   * Configure the processor to use a plugin, a list of usable values, or a
-   * preset.
-   *
-   * If the processor is already using a plugin, the previous plugin
-   * configuration is changed based on the options that are passed in.
-   * In other words, the plugin is not added a second time.
-   *
-   * > **Note**: `use` cannot be called on *frozen* processors.
-   * > Call the processor first to create a new unfrozen processor.
-   *
-   * @example
-   *   There are many ways to pass plugins to `.use()`.
-   *   This example gives an overview:
-   *
-   *   ```js
-   *   import {unified} from 'unified'
-   *
-   *   unified()
-   *     // Plugin with options:
-   *     .use(pluginA, {x: true, y: true})
-   *     // Passing the same plugin again merges configuration (to `{x: true, y: false, z: true}`):
-   *     .use(pluginA, {y: false, z: true})
-   *     // Plugins:
-   *     .use([pluginB, pluginC])
-   *     // Two plugins, the second with options:
-   *     .use([pluginD, [pluginE, {}]])
-   *     // Preset with plugins and settings:
-   *     .use({plugins: [pluginF, [pluginG, {}]], settings: {position: false}})
-   *     // Settings only:
-   *     .use({settings: {position: false}})
-   *   ```
-   *
-   * @template {Array<unknown>} [Parameters=[]]
-   * @template {Node | string | undefined} [Input=undefined]
-   * @template [Output=Input]
-   *
-   * @overload
-   * @param {Preset | null | undefined} [preset]
-   * @returns {Processor<ParseTree, HeadTree, TailTree, CompileTree, CompileResult>}
-   *
-   * @overload
-   * @param {PluggableList} list
-   * @returns {Processor<ParseTree, HeadTree, TailTree, CompileTree, CompileResult>}
-   *
-   * @overload
-   * @param {Plugin<Parameters, Input, Output>} plugin
-   * @param {...(Parameters | [boolean])} parameters
-   * @returns {UsePlugin<ParseTree, HeadTree, TailTree, CompileTree, CompileResult, Input, Output>}
-   *
-   * @param {PluggableList | Plugin | Preset | null | undefined} value
-   *   Usable value.
-   * @param {...unknown} parameters
-   *   Parameters, when a plugin is given as a usable value.
-   * @returns {Processor<ParseTree, HeadTree, TailTree, CompileTree, CompileResult>}
-   *   Current processor.
-   */
-  use(value, ...parameters) {
-    const attachers = this.attachers;
-    const namespace = this.namespace;
+  return processor
+}
 
-    assertUnfrozen('use', this.frozen);
+/**
+ * Set up the virtual file.
+ *
+ * @param {Readonly<Options>} options
+ *   Props.
+ * @returns {VFile}
+ *   Result.
+ */
+function createFile(options) {
+  const children = options.children || '';
+  const file = new VFile();
 
-    if (value === null || value === undefined) ; else if (typeof value === 'function') {
-      addPlugin(value, parameters);
-    } else if (typeof value === 'object') {
-      if (Array.isArray(value)) {
-        addList(value);
-      } else {
-        addPreset(value);
-      }
-    } else {
-      throw new TypeError('Expected usable value, not `' + value + '`')
-    }
+  if (typeof children === 'string') {
+    file.value = children;
+  }
 
-    return this
+  return file
+}
 
-    /**
-     * @param {Pluggable} value
-     * @returns {undefined}
-     */
-    function add(value) {
-      if (typeof value === 'function') {
-        addPlugin(value, []);
-      } else if (typeof value === 'object') {
-        if (Array.isArray(value)) {
-          const [plugin, ...parameters] =
-            /** @type {PluginTuple<Array<unknown>>} */ (value);
-          addPlugin(plugin, parameters);
-        } else {
-          addPreset(value);
-        }
-      } else {
-        throw new TypeError('Expected usable value, not `' + value + '`')
-      }
+/**
+ * Process the result from unified some more.
+ *
+ * @param {Nodes} tree
+ *   Tree.
+ * @param {Readonly<Options>} options
+ *   Props.
+ * @returns {ReactElement}
+ *   React element.
+ */
+function post(tree, options) {
+  const allowedElements = options.allowedElements;
+  const allowElement = options.allowElement;
+  const components = options.components;
+  const disallowedElements = options.disallowedElements;
+  const skipHtml = options.skipHtml;
+  const unwrapDisallowed = options.unwrapDisallowed;
+  const urlTransform = options.urlTransform || defaultUrlTransform;
+
+  for (const deprecation of deprecations) {
+    if (Object.hasOwn(options, deprecation.from)) {
+      unreachable(
+        'Unexpected `' +
+          deprecation.from +
+          '` prop, ' +
+          (deprecation.to
+            ? 'use `' + deprecation.to + '` instead'
+            : 'remove it') +
+          ' (see <' +
+          changelog +
+          '#' +
+          deprecation.id +
+          '> for more info)'
+      );
     }
+  }
 
-    /**
-     * @param {Preset} result
-     * @returns {undefined}
-     */
-    function addPreset(result) {
-      if (!('plugins' in result) && !('settings' in result)) {
-        throw new Error(
-          'Expected usable value but received an empty preset, which is probably a mistake: presets typically come with `plugins` and sometimes with `settings`, but this has neither'
-        )
-      }
+  visit(tree, transform);
 
-      addList(result.plugins);
+  return toJsxRuntime(tree, {
+    Fragment,
+    components,
+    ignoreInvalidStyle: true,
+    jsx,
+    jsxs,
+    passKeys: true,
+    passNode: true
+  })
 
-      if (result.settings) {
-        namespace.settings = extend(true, namespace.settings, result.settings);
+  /** @type {BuildVisitor<Root>} */
+  function transform(node, index, parent) {
+    if (node.type === 'raw' && parent && typeof index === 'number') {
+      if (skipHtml) {
+        parent.children.splice(index, 1);
+      } else {
+        parent.children[index] = {type: 'text', value: node.value};
       }
+
+      return index
     }
 
-    /**
-     * @param {PluggableList | null | undefined} plugins
-     * @returns {undefined}
-     */
-    function addList(plugins) {
-      let index = -1;
+    if (node.type === 'element') {
+      /** @type {string} */
+      let key;
 
-      if (plugins === null || plugins === undefined) ; else if (Array.isArray(plugins)) {
-        while (++index < plugins.length) {
-          const thing = plugins[index];
-          add(thing);
+      for (key in urlAttributes) {
+        if (
+          Object.hasOwn(urlAttributes, key) &&
+          Object.hasOwn(node.properties, key)
+        ) {
+          const value = node.properties[key];
+          const test = urlAttributes[key];
+          if (test === null || test.includes(node.tagName)) {
+            node.properties[key] = urlTransform(String(value || ''), key, node);
+          }
         }
-      } else {
-        throw new TypeError('Expected a list of plugins, not `' + plugins + '`')
       }
     }
 
-    /**
-     * @param {Plugin} plugin
-     * @param {Array<unknown>} parameters
-     * @returns {undefined}
-     */
-    function addPlugin(plugin, parameters) {
-      let index = -1;
-      let entryIndex = -1;
+    if (node.type === 'element') {
+      let remove = allowedElements
+        ? !allowedElements.includes(node.tagName)
+        : disallowedElements
+          ? disallowedElements.includes(node.tagName)
+          : false;
 
-      while (++index < attachers.length) {
-        if (attachers[index][0] === plugin) {
-          entryIndex = index;
-          break
-        }
+      if (!remove && allowElement && typeof index === 'number') {
+        remove = !allowElement(node, index, parent);
       }
 
-      if (entryIndex === -1) {
-        attachers.push([plugin, ...parameters]);
-      }
-      // Only set if there was at least a `primary` value, otherwise we’d change
-      // `arguments.length`.
-      else if (parameters.length > 0) {
-        let [primary, ...rest] = parameters;
-        const currentPrimary = attachers[entryIndex][1];
-        if (isPlainObject(currentPrimary) && isPlainObject(primary)) {
-          primary = extend(true, currentPrimary, primary);
+      if (remove && parent && typeof index === 'number') {
+        if (unwrapDisallowed && node.children) {
+          parent.children.splice(index, 1, ...node.children);
+        } else {
+          parent.children.splice(index, 1);
         }
 
-        attachers[entryIndex] = [plugin, primary, ...rest];
+        return index
       }
     }
   }
 }
 
-// Note: this returns a *callable* instance.
-// That’s why it’s documented as a function.
 /**
- * Create a new processor.
- *
- * @example
- *   This example shows how a new processor can be created (from `remark`) and linked
- *   to **stdin**(4) and **stdout**(4).
- *
- *   ```js
- *   import process from 'node:process'
- *   import concatStream from 'concat-stream'
- *   import {remark} from 'remark'
- *
- *   process.stdin.pipe(
- *     concatStream(function (buf) {
- *       process.stdout.write(String(remark().processSync(buf)))
- *     })
- *   )
- *   ```
- *
- * @returns
- *   New *unfrozen* processor (`processor`).
+ * Make a URL safe.
  *
- *   This processor is configured to work the same as its ancestor.
- *   When the descendant processor is configured in the future it does not
- *   affect the ancestral processor.
+ * @satisfies {UrlTransform}
+ * @param {string} value
+ *   URL.
+ * @returns {string}
+ *   Safe URL.
  */
-const unified = new Processor().freeze();
+function defaultUrlTransform(value) {
+  // Same as:
+  // <https://github.com/micromark/micromark/blob/929275e/packages/micromark-util-sanitize-uri/dev/index.js#L34>
+  // But without the `encode` part.
+  const colon = value.indexOf(':');
+  const questionMark = value.indexOf('?');
+  const numberSign = value.indexOf('#');
+  const slash = value.indexOf('/');
 
-/**
- * Assert a parser is available.
- *
- * @param {string} name
- * @param {unknown} value
- * @returns {asserts value is Parser}
- */
-function assertParser(name, value) {
-  if (typeof value !== 'function') {
-    throw new TypeError('Cannot `' + name + '` without `parser`')
+  if (
+    // If there is no protocol, it’s relative.
+    colon === -1 ||
+    // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
+    (slash !== -1 && colon > slash) ||
+    (questionMark !== -1 && colon > questionMark) ||
+    (numberSign !== -1 && colon > numberSign) ||
+    // It is a protocol, it should be allowed.
+    safeProtocol.test(value.slice(0, colon))
+  ) {
+    return value
   }
+
+  return ''
 }
 
-/**
- * Assert a compiler is available.
- *
- * @param {string} name
- * @param {unknown} value
- * @returns {asserts value is Compiler}
- */
-function assertCompiler(name, value) {
-  if (typeof value !== 'function') {
-    throw new TypeError('Cannot `' + name + '` without `compiler`')
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
   }
-}
 
-/**
- * Assert the processor is not frozen.
- *
- * @param {string} name
- * @param {unknown} frozen
- * @returns {asserts frozen is false}
- */
-function assertUnfrozen(name, frozen) {
-  if (frozen) {
-    throw new Error(
-      'Cannot call `' +
-        name +
-        '` on a frozen processor.\nCreate a new processor first, by calling it: use `processor()` instead of `processor`.'
-    )
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
   }
 }
 
-/**
- * Assert `node` is a unist node.
- *
- * @param {unknown} node
- * @returns {asserts node is Node}
- */
-function assertNode(node) {
-  // `isPlainObj` unfortunately uses `any` instead of `unknown`.
-  // type-coverage:ignore-next-line
-  if (!isPlainObject(node) || typeof node.type !== 'string') {
-    throw new TypeError('Expected node, got `' + node + '`')
-    // Fine.
-  }
-}
+var css_248z = ".markdown-content{word-wrap:break-word;line-height:1.6;white-space:normal}.markdown-content p{margin:0 0 .75rem}.markdown-content p:last-child{margin-bottom:0}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{font-weight:600;line-height:1.3;margin:1rem 0 .5rem}.markdown-content h1:first-child,.markdown-content h2:first-child,.markdown-content h3:first-child{margin-top:0}.markdown-content h1{font-size:1.5em}.markdown-content h2{font-size:1.3em}.markdown-content h3{font-size:1.15em}.markdown-content h4{font-size:1.05em}.markdown-content ol,.markdown-content ul{margin:.5rem 0;padding-left:1.5rem}.markdown-content li{margin:.25rem 0}.markdown-content code{background:rgba(0,0,0,.05);border-radius:.25rem;font-family:Courier New,monospace;font-size:.9em;padding:.15rem .3rem}.message.user .markdown-content code{background:hsla(0,0%,100%,.2)}.markdown-content pre{background:rgba(0,0,0,.05);border-radius:.375rem;margin:.5rem 0;overflow-x:auto;padding:.75rem}.markdown-content pre code{background:transparent;padding:0}.message.user .markdown-content pre{background:hsla(0,0%,100%,.15)}.markdown-content strong{font-weight:700}.markdown-content em{font-style:italic}.markdown-content a{color:#667eea;text-decoration:underline}.message.user .markdown-content a{color:hsla(0,0%,100%,.95)}.markdown-content blockquote{border-left:3px solid #667eea;color:#666;margin:.75rem 0;padding-left:1rem}.message.user .markdown-content blockquote{border-left-color:hsla(0,0%,100%,.5);color:hsla(0,0%,100%,.9)}.markdown-content hr{border:none;border-top:1px solid #e5e7eb;margin:1rem 0}.message.user .markdown-content hr{border-top-color:hsla(0,0%,100%,.3)}.markdown-content table{border-collapse:collapse;margin:.75rem 0;width:100%}.markdown-content td,.markdown-content th{border:1px solid #e5e7eb;padding:.5rem;text-align:left}.markdown-content th{background:rgba(0,0,0,.05);font-weight:600}.message.user .markdown-content td,.message.user .markdown-content th{border-color:hsla(0,0%,100%,.3)}.message.user .markdown-content th{background:hsla(0,0%,100%,.15)}";
+styleInject(css_248z);
+
+function MarkdownContent({
+  content
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "markdown-content"
+  }, /*#__PURE__*/React.createElement(Markdown, null, content));
+}
+
+const ToolContext = /*#__PURE__*/createContext();
+function ToolContextProvider({
+  message,
+  children
+}) {
+  const kinds = useMemo(() => message.kinds ?? [], [message]);
+  const tools = useMemo(() => message.content.filter(c => c.type === 'tool'), [message]);
+  const configMap = useMemo(() => makeTaskConfigs(tools), [tools]);
+  return /*#__PURE__*/React.createElement(ToolContext.Provider, {
+    value: {
+      kinds: kinds,
+      tools,
+      configMap
+    }
+  }, children);
+}
+function useToolContext() {
+  return useContext(ToolContext);
+}
+function makeTaskConfigs(tools) {
+  const map = new Map();
+  tools.filter(t => t.name === 'search-task-by-keyword').forEach(tool => {
+    tool.result?.result?.forEach(item => {
+      map.set(item.taskId, item.name);
+    });
+  });
+  return map;
+}
+
+var dayjs_min$1 = {exports: {}};
 
-/**
- * Assert that `complete` is `true`.
- *
- * @param {string} name
- * @param {string} asyncName
- * @param {unknown} complete
- * @returns {asserts complete is true}
- */
-function assertDone(name, asyncName, complete) {
-  if (!complete) {
-    throw new Error(
-      '`' + name + '` finished async. Use `' + asyncName + '` instead'
-    )
-  }
-}
+var dayjs_min = dayjs_min$1.exports;
 
-/**
- * @param {Compatible | undefined} [value]
- * @returns {VFile}
- */
-function vfile(value) {
-  return looksLikeAVFile(value) ? value : new VFile(value)
+var hasRequiredDayjs_min;
+
+function requireDayjs_min () {
+	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+	hasRequiredDayjs_min = 1;
+	(function (module, exports$1) {
+		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+	} (dayjs_min$1));
+	return dayjs_min$1.exports;
 }
 
-/**
- * @param {Compatible | undefined} [value]
- * @returns {value is VFile}
- */
-function looksLikeAVFile(value) {
-  return Boolean(
-    value &&
-      typeof value === 'object' &&
-      'message' in value &&
-      'messages' in value
-  )
+var dayjs_minExports = requireDayjs_min();
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
+var isoWeek$2 = {exports: {}};
+
+var isoWeek$1 = isoWeek$2.exports;
+
+var hasRequiredIsoWeek;
+
+function requireIsoWeek () {
+	if (hasRequiredIsoWeek) return isoWeek$2.exports;
+	hasRequiredIsoWeek = 1;
+	(function (module, exports$1) {
+		!function(e,t){module.exports=t();}(isoWeek$1,(function(){var e="day";return function(t,i,s){var a=function(t){return t.add(4-t.isoWeekday(),e)},d=i.prototype;d.isoWeekYear=function(){return a(this).year()},d.isoWeek=function(t){if(!this.$utils().u(t))return this.add(7*(t-this.isoWeek()),e);var i,d,n,o,r=a(this),u=(i=this.isoWeekYear(),d=this.$u,n=(d?s.utc:s)().year(i).startOf("year"),o=4-n.isoWeekday(),n.isoWeekday()>4&&(o+=7),n.add(o,e));return r.diff(u,"week")+1},d.isoWeekday=function(e){return this.$utils().u(e)?this.day()||7:this.day(this.day()%7?e:e-7)};var n=d.startOf;d.startOf=function(e,t){var i=this.$utils(),s=!!i.u(t)||t;return "isoweek"===i.p(e)?s?this.date(this.date()-(this.isoWeekday()-1)).startOf("day"):this.date(this.date()-1-(this.isoWeekday()-1)+7).endOf("day"):n.bind(this)(e,t)};}})); 
+	} (isoWeek$2));
+	return isoWeek$2.exports;
 }
 
-/**
- * @param {unknown} [value]
- * @returns {value is Value}
- */
-function looksLikeAValue(value) {
-  return typeof value === 'string' || isUint8Array(value)
+var isoWeekExports = requireIsoWeek();
+var isoWeek = /*@__PURE__*/getDefaultExportFromCjs(isoWeekExports);
+
+var relativeTime$2 = {exports: {}};
+
+var relativeTime$1 = relativeTime$2.exports;
+
+var hasRequiredRelativeTime;
+
+function requireRelativeTime () {
+	if (hasRequiredRelativeTime) return relativeTime$2.exports;
+	hasRequiredRelativeTime = 1;
+	(function (module, exports$1) {
+		!function(r,e){module.exports=e();}(relativeTime$1,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,true):i.diff(e,y.d,true));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,true)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}})); 
+	} (relativeTime$2));
+	return relativeTime$2.exports;
 }
 
-/**
- * Assert `value` is an `Uint8Array`.
- *
- * @param {unknown} value
- *   thing.
- * @returns {value is Uint8Array}
- *   Whether `value` is an `Uint8Array`.
- */
-function isUint8Array(value) {
-  return Boolean(
-    value &&
-      typeof value === 'object' &&
-      'byteLength' in value &&
-      'byteOffset' in value
-  )
+var relativeTimeExports = requireRelativeTime();
+var relativeTime = /*@__PURE__*/getDefaultExportFromCjs(relativeTimeExports);
+
+var isSameOrBefore$2 = {exports: {}};
+
+var isSameOrBefore$1 = isSameOrBefore$2.exports;
+
+var hasRequiredIsSameOrBefore;
+
+function requireIsSameOrBefore () {
+	if (hasRequiredIsSameOrBefore) return isSameOrBefore$2.exports;
+	hasRequiredIsSameOrBefore = 1;
+	(function (module, exports$1) {
+		!function(e,i){module.exports=i();}(isSameOrBefore$1,(function(){return function(e,i){i.prototype.isSameOrBefore=function(e,i){return this.isSame(e,i)||this.isBefore(e,i)};}})); 
+	} (isSameOrBefore$2));
+	return isSameOrBefore$2.exports;
 }
 
-/**
- * @import {Element, Nodes, Parents, Root} from 'hast'
- * @import {Root as MdastRoot} from 'mdast'
- * @import {ComponentType, JSX, ReactElement, ReactNode} from 'react'
- * @import {Options as RemarkRehypeOptions} from 'remark-rehype'
- * @import {BuildVisitor} from 'unist-util-visit'
- * @import {PluggableList, Processor} from 'unified'
- */
+var isSameOrBeforeExports = requireIsSameOrBefore();
+var isSameOrBefore = /*@__PURE__*/getDefaultExportFromCjs(isSameOrBeforeExports);
 
+var isSameOrAfter$2 = {exports: {}};
 
-const changelog =
-  'https://github.com/remarkjs/react-markdown/blob/main/changelog.md';
+var isSameOrAfter$1 = isSameOrAfter$2.exports;
 
-/** @type {PluggableList} */
-const emptyPlugins = [];
-/** @type {Readonly<RemarkRehypeOptions>} */
-const emptyRemarkRehypeOptions = {allowDangerousHtml: true};
-const safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i;
+var hasRequiredIsSameOrAfter;
 
-// Mutable because we `delete` any time it’s used and a message is sent.
-/** @type {ReadonlyArray<Readonly<Deprecation>>} */
-const deprecations = [
-  {from: 'astPlugins', id: 'remove-buggy-html-in-markdown-parser'},
-  {from: 'allowDangerousHtml', id: 'remove-buggy-html-in-markdown-parser'},
-  {
-    from: 'allowNode',
-    id: 'replace-allownode-allowedtypes-and-disallowedtypes',
-    to: 'allowElement'
-  },
-  {
-    from: 'allowedTypes',
-    id: 'replace-allownode-allowedtypes-and-disallowedtypes',
-    to: 'allowedElements'
-  },
-  {from: 'className', id: 'remove-classname'},
-  {
-    from: 'disallowedTypes',
-    id: 'replace-allownode-allowedtypes-and-disallowedtypes',
-    to: 'disallowedElements'
-  },
-  {from: 'escapeHtml', id: 'remove-buggy-html-in-markdown-parser'},
-  {from: 'includeElementIndex', id: '#remove-includeelementindex'},
-  {
-    from: 'includeNodeIndex',
-    id: 'change-includenodeindex-to-includeelementindex'
-  },
-  {from: 'linkTarget', id: 'remove-linktarget'},
-  {from: 'plugins', id: 'change-plugins-to-remarkplugins', to: 'remarkPlugins'},
-  {from: 'rawSourcePos', id: '#remove-rawsourcepos'},
-  {from: 'renderers', id: 'change-renderers-to-components', to: 'components'},
-  {from: 'source', id: 'change-source-to-children', to: 'children'},
-  {from: 'sourcePos', id: '#remove-sourcepos'},
-  {from: 'transformImageUri', id: '#add-urltransform', to: 'urlTransform'},
-  {from: 'transformLinkUri', id: '#add-urltransform', to: 'urlTransform'}
-];
+function requireIsSameOrAfter () {
+	if (hasRequiredIsSameOrAfter) return isSameOrAfter$2.exports;
+	hasRequiredIsSameOrAfter = 1;
+	(function (module, exports$1) {
+		!function(e,t){module.exports=t();}(isSameOrAfter$1,(function(){return function(e,t){t.prototype.isSameOrAfter=function(e,t){return this.isSame(e,t)||this.isAfter(e,t)};}})); 
+	} (isSameOrAfter$2));
+	return isSameOrAfter$2.exports;
+}
+
+var isSameOrAfterExports = requireIsSameOrAfter();
+var isSameOrAfter = /*@__PURE__*/getDefaultExportFromCjs(isSameOrAfterExports);
+
+dayjs.extend(relativeTime);
+dayjs.extend(isoWeek);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(isSameOrAfter);
+dayjs.locale('ko');
+const isToday = (from, to) => {
+  const now = new Date();
+  const date = new Date(now.toLocaleString('en-US', {
+    timeZone: 'Asia/Seoul'
+  }));
+  const today = date.getFullYear() + String(date.getMonth() + 1).padStart(2, '0') + String(date.getDate()).padStart(2, '0');
+  return from === today && to === today;
+};
+const isOneDay = (from, to) => {
+  return from === to;
+};
+const formatDateRange = (from, to) => {
+  const fromDate = dayjs(from, 'YYYYMMDD');
+  const toDate = dayjs(to, 'YYYYMMDD');
+  const today = dayjs().startOf('day');
+  if (from === to) return formatSingleDate(fromDate, today);
+  return formatRange(fromDate, toDate, today);
+};
+const formatSingleDate = (date, today) => {
+  const diffDays = today.diff(date, 'day');
+  if (diffDays === 0) return '오늘';
+  if (diffDays === 1) return '어제';
+  if (diffDays === 2) return '그제';
+  return date.format('YYYY년 M월 D일');
+};
+const formatRange = (fromDate, toDate, today) => {
+  const thisWeekStart = today.startOf('week'); // 일요일
+  const thisWeekEnd = today.endOf('week'); // 토요일
+
+  if (fromDate.isSame(thisWeekStart, 'day') && (toDate.isSame(today, 'day') || toDate.isSame(thisWeekEnd, 'day'))) {
+    return '이번주';
+  }
+  const lastWeekStart = today.subtract(1, 'week').startOf('week');
+  const lastWeekEnd = today.subtract(1, 'week').endOf('week');
+  if (fromDate.isSame(lastWeekStart, 'day') && toDate.isSame(lastWeekEnd, 'day')) {
+    return '지난주';
+  }
+  const twoWeeksAgoStart = today.subtract(2, 'week').startOf('week');
+  const twoWeeksAgoEnd = today.subtract(2, 'week').endOf('week');
+  if (fromDate.isSame(twoWeeksAgoStart, 'day') && toDate.isSame(twoWeeksAgoEnd, 'day')) {
+    return '지지난주';
+  }
+  const thisMonthStart = today.startOf('month');
+  const thisMonthEnd = today.endOf('month');
+  if (fromDate.isSame(thisMonthStart, 'day') && (toDate.isSame(today, 'day') || toDate.isSame(thisMonthEnd, 'day'))) {
+    return '이번달';
+  }
+  const lastMonthStart = today.subtract(1, 'month').startOf('month');
+  const lastMonthEnd = today.subtract(1, 'month').endOf('month');
+  if (fromDate.isSame(lastMonthStart, 'day') && toDate.isSame(lastMonthEnd, 'day')) {
+    return '지난달';
+  }
+  const twoMonthsAgoStart = today.subtract(2, 'month').startOf('month');
+  const twoMonthsAgoEnd = today.subtract(2, 'month').endOf('month');
+  if (fromDate.isSame(twoMonthsAgoStart, 'day') && toDate.isSame(twoMonthsAgoEnd, 'day')) {
+    return '지지난달';
+  }
+  const fromFormatted = formatDateInRange(fromDate, today);
+  const toFormatted = formatDateInRange(toDate, today);
+  return `${fromFormatted} ~ ${toFormatted}`;
+};
+const formatDateInRange = (date, today) => {
+  const diffDays = today.diff(date, 'day');
+  if (diffDays === 0) return '오늘';
+  if (diffDays === 1) return '어제';
+  if (diffDays === 2) return '그제';
+  return date.format('YYYY년 M월 D일');
+};
+
+var patternFill = {exports: {}};
 
 /**
- * Component to render markdown.
+ * Highcharts JS v11.3.0 (2024-01-10)
  *
- * This is a synchronous component.
- * When using async plugins,
- * see {@linkcode MarkdownAsync} or {@linkcode MarkdownHooks}.
+ * Module for adding patterns and images as point fills.
  *
- * @param {Readonly<Options>} options
- *   Props.
- * @returns {ReactElement}
- *   React element.
- */
-function Markdown(options) {
-  const processor = createProcessor(options);
-  const file = createFile(options);
-  return post(processor.runSync(processor.parse(file), file), options)
-}
-
-/**
- * Set up the `unified` processor.
+ * (c) 2010-2024 Highsoft AS
+ * Author: Torstein Hønsi, Øystein Moseng
  *
- * @param {Readonly<Options>} options
- *   Props.
- * @returns {Processor<MdastRoot, MdastRoot, Root, undefined, undefined>}
- *   Result.
+ * License: www.highcharts.com/license
  */
-function createProcessor(options) {
-  const rehypePlugins = options.rehypePlugins || emptyPlugins;
-  const remarkPlugins = options.remarkPlugins || emptyPlugins;
-  const remarkRehypeOptions = options.remarkRehypeOptions
-    ? {...options.remarkRehypeOptions, ...emptyRemarkRehypeOptions}
-    : emptyRemarkRehypeOptions;
 
-  const processor = unified()
-    .use(remarkParse)
-    .use(remarkPlugins)
-    .use(remarkRehype, remarkRehypeOptions)
-    .use(rehypePlugins);
+var hasRequiredPatternFill;
 
-  return processor
+function requirePatternFill () {
+	if (hasRequiredPatternFill) return patternFill.exports;
+	hasRequiredPatternFill = 1;
+	(function (module) {
+		!function(t){module.exports?(t.default=t,module.exports=t):t("undefined"!=typeof Highcharts?Highcharts:void 0);}(function(t){var e=t?t._modules:{};function r(t,e,r,i){t.hasOwnProperty(e)||(t[e]=i.apply(null,r),"function"==typeof CustomEvent&&window.dispatchEvent(new CustomEvent("HighchartsModuleLoaded",{detail:{path:e,module:t[e]}})));}r(e,"Extensions/PatternFill.js",[e["Core/Animation/AnimationUtilities.js"],e["Core/Defaults.js"],e["Core/Globals.js"],e["Core/Utilities.js"]],function(t,e,r,i){let{animObject:a}=t,{getOptions:o}=e,{composed:n}=r,{addEvent:s,defined:h,erase:l,extend:p,merge:c,pick:d,pushUnique:f,removeEvent:u,wrap:g}=i,m=function(){let t=[],e=o().colors,r=0;for(let i of ["M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5","M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5","M 2 0 L 2 5 M 4 0 L 4 5","M 0 2 L 5 2 M 0 4 L 5 4","M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5"])t.push({path:i,color:e[r++],width:5,height:5,patternTransform:"scale(1.4 1.4)"});for(let i of(r=5,["M 0 0 L 5 10 L 10 0","M 3 3 L 8 3 L 8 8 L 3 8 Z","M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0","M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11","M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9"]))t.push({path:i,color:e[r],width:10,height:10}),r+=5;return t}();function y(t,e){let r=JSON.stringify(t),i=r.length||0,a=0,o=0,n;if(e){n=Math.max(Math.floor(i/500),1);for(let t=0;t<i;t+=n)a+=r.charCodeAt(t);a&=a;}for(;o<i;++o)a=(a<<5)-a+r.charCodeAt(o),a&=a;return a.toString(16).replace("-","1")}function x(){if(this.renderer&&(this.renderer.defIds||[]).filter(t=>t&&t.indexOf&&0===t.indexOf("highcharts-pattern-")).length){for(let t of this.series)if(t.visible)for(let e of t.points){let t=e.options&&e.options.color;t&&t.pattern&&(t.pattern._width="defer",t.pattern._height="defer");}this.redraw(false);}}function w(){let t={},e=this.renderer,r=(e.defIds||[]).filter(t=>t.indexOf&&0===t.indexOf("highcharts-pattern-"));if(r.length)for(let i of([].forEach.call(this.renderTo.querySelectorAll('[color^="url("], [fill^="url("], [stroke^="url("]'),r=>{let i=r.getAttribute("fill")||r.getAttribute("color")||r.getAttribute("stroke");if(i){let r=i.replace(e.url,"").replace("url(#","").replace(")","");t[r]=true;}}),r))!t[i]&&(l(e.defIds,i),e.patternElements[i]&&(e.patternElements[i].destroy(),delete e.patternElements[i]));}function M(){let t=this.options.color;t&&t.pattern&&("string"==typeof t.pattern.path&&(t.pattern.path={d:t.pattern.path}),this.color=this.options.color=c(this.series.options.color,t));}function L(t){let e=t.args[0],r=t.args[1],i=t.args[2],a=this.chartIndex||0,o=e.pattern,n="#333333";if(void 0!==e.patternIndex&&m&&(o=m[e.patternIndex]),!o)return  true;if(o.image||"string"==typeof o.path||o.path&&o.path.d){let t=i.parentNode&&i.parentNode.getAttribute("class");t=t&&t.indexOf("highcharts-legend")>-1,("defer"===o._width||"defer"===o._height)&&_.call({graphic:{element:i}},o),(t||!o.id)&&((o=c({},o)).id="highcharts-pattern-"+a+"-"+y(o)+y(o,true)),this.addPattern(o,!this.forExport&&d(o.animation,this.globalAnimation,{duration:100})),n=`url(${this.url}#${o.id+(this.forExport?"-export":"")})`;}else n=o.color||n;return i.setAttribute(r,n),e.toString=function(){return n},false}function b(){let t=this.chart.isResizing;if(this.isDirtyData||t||!this.chart.hasRendered)for(let e of this.points){let r=e.options&&e.options.color;r&&r.pattern&&(t&&!(e.shapeArgs&&e.shapeArgs.width&&e.shapeArgs.height)?(r.pattern._width="defer",r.pattern._height="defer"):e.calculatePatternDimensions(r.pattern));}}function _(t){if(t.width&&t.height)return;let e=this.graphic&&(this.graphic.getBBox&&this.graphic.getBBox(true)||this.graphic.element&&this.graphic.element.getBBox())||{},r=this.shapeArgs;if(r&&(e.width=r.width||e.width,e.height=r.height||e.height,e.x=r.x||e.x,e.y=r.y||e.y),t.image){if(!e.width||!e.height){t._width="defer",t._height="defer";let e=this.series.chart.mapView&&this.series.chart.mapView.getSVGTransform().scaleY;h(e)&&e<0&&(t._inverted=true);return}t.aspectRatio&&(e.aspectRatio=e.width/e.height,t.aspectRatio>e.aspectRatio?e.aspectWidth=e.height*t.aspectRatio:e.aspectHeight=e.width/t.aspectRatio),t._width=t.width||Math.ceil(e.aspectWidth||e.width),t._height=t.height||Math.ceil(e.aspectHeight||e.height);}t.width||(t._x=t.x||0,t._x+=e.x-Math.round(e.aspectWidth?Math.abs(e.aspectWidth-e.width)/2:0)),t.height||(t._y=t.y||0,t._y+=e.y-Math.round(e.aspectHeight?Math.abs(e.aspectHeight-e.height)/2:0));}function A(t,e){let r=d(e,true),o=a(r),n=t.color||"#333333",s=t.height||("number"==typeof t._height?t._height:0)||32,h=t.width||("number"==typeof t._width?t._width:0)||32,l,p=t.id,c;if(!p&&(this.idCounter=this.idCounter||0,p="highcharts-pattern-"+this.idCounter+"-"+(this.chartIndex||0),++this.idCounter),this.forExport&&(p+="-export"),this.defIds=this.defIds||[],this.defIds.indexOf(p)>-1)return;this.defIds.push(p);let f={id:p,patternUnits:"userSpaceOnUse",patternContentUnits:t.patternContentUnits||"userSpaceOnUse",width:h,height:s,x:t._x||t.x||0,y:t._y||t.y||0};t._inverted&&(f.patternTransform="scale(1, -1)",t.patternTransform&&(t.patternTransform+=" scale(1, -1)")),t.patternTransform&&(f.patternTransform=t.patternTransform);let g=this.createElement("pattern").attr(f).add(this.defs);if(g.id=p,t.path){if(c=i.isObject(t.path)?t.path:{d:t.path},t.backgroundColor){var m;m=t.backgroundColor,this.rect(0,0,h,s).attr({fill:m}).add(g);}l={d:c.d},this.styledMode||(l.stroke=c.stroke||n,l["stroke-width"]=d(c.strokeWidth,2),l.fill=c.fill||"none"),c.transform&&(l.transform=c.transform),this.createElement("path").attr(l).add(g),g.color=n;}else t.image&&(r?this.image(t.image,0,0,h,s,function(){this.animate({opacity:d(t.opacity,1)},o),u(this.element,"load");}).attr({opacity:0}).add(g):this.image(t.image,0,0,h,s).add(g));return t.image&&r||void 0===t.opacity||[].forEach.call(g.element.childNodes,e=>{e.setAttribute("opacity",t.opacity);}),this.patternElements=this.patternElements||{},this.patternElements[p]=g,g}function C(t){let e=this.options.color;e&&e.pattern&&!e.pattern.color?(delete this.options.color,t.apply(this,[].slice.call(arguments,1)),e.pattern.color=this.color,this.color=this.options.color=e):t.apply(this,[].slice.call(arguments,1));}function E(){if(!this.chart?.mapView)return;let t=this.chart,e=t.renderer,r=e.patternElements;e.defIds?.length&&r&&this.points.filter(function(t){return !!t.graphic&&(t.graphic.element.hasAttribute("fill")||t.graphic.element.hasAttribute("color")||t.graphic.element.hasAttribute("stroke"))&&!t.options.color?.pattern?.image&&!!t.group?.scaleX&&!!t.group?.scaleY}).map(function(t){let r=(t.graphic?.element.getAttribute("fill")||t.graphic?.element.getAttribute("color")||t.graphic?.element.getAttribute("stroke")||"").replace(e.url,"").replace("url(#","").replace(")","");return [r,{x:t.group?.scaleX||1,y:t.group?.scaleY||1}]}).filter(function([t,e],r,i){return ""!==t&&-1!==t.indexOf("highcharts-pattern-")&&!i.some(function([e,i],a){return e===t&&a<r})}).forEach(function([t,e]){r[t].scaleX=1/e.x,r[t].scaleY=1/e.y,r[t].updateTransform("patternTransform");});}return {compose:function t(e,r,i){let a=r.prototype.pointClass;f(n,t)&&(s(e,"endResize",x),s(e,"redraw",w),p(a.prototype,{calculatePatternDimensions:_}),s(a,"afterInit",M),s(r,"render",b),g(r.prototype,"getColor",C),s(r,"afterRender",E),s(r,"mapZoomComplete",E),p(i.prototype,{addPattern:A}),s(i,"complexColor",L));},patterns:m}}),r(e,"masters/modules/pattern-fill.src.js",[e["Core/Globals.js"],e["Extensions/PatternFill.js"]],function(t,e){t.patterns=e.patterns,e.compose(t.Chart,t.Series,t.SVGRenderer);});}); 
+	} (patternFill));
+	return patternFill.exports;
 }
 
-/**
- * Set up the virtual file.
- *
- * @param {Readonly<Options>} options
- *   Props.
- * @returns {VFile}
- *   Result.
- */
-function createFile(options) {
-  const children = options.children || '';
-  const file = new VFile();
+requirePatternFill();
 
-  if (typeof children === 'string') {
-    file.value = children;
+const ColumnChart = ({
+  data,
+  width,
+  height = 230
+}) => {
+  const series = useMemo(() => {
+    return data.series.map((item, sindex) => ({
+      ...item,
+      data: item.data.map((value, index) => ({
+        y: value,
+        color: data.colors[index % data.colors.length] + alphas[sindex % alphas.length]
+      }))
+    }));
+  }, [data]);
+  const colors = useMemo(() => {
+    return data.series.map((_, index) => data.colors[0] + alphas[index % alphas.length]);
+  }, [data]);
+  const options = useMemo(() => {
+    return {
+      chart: {
+        type: 'column',
+        backgroundColor: 'transparent',
+        width: width,
+        height: height,
+        style: {
+          fontFamily: fontFamily$1
+        }
+      },
+      title: {
+        text: undefined
+      },
+      tooltip: {
+        pointFormat: '<span><b>{point.y}</b></span>',
+        style: {
+          fontFamily: fontFamily$1,
+          fontSize: '13px',
+          fontWeight: '100'
+        },
+        useHTML: true
+      },
+      plotOptions: {
+        column: {
+          //size: size
+        }
+      },
+      xAxis: {
+        categories: data.categories,
+        crosshair: true,
+        labels: {
+          style: {
+            color: '#777',
+            fontFamily: fontFamily$1,
+            fontWeight: '400'
+          }
+        },
+        lineColor: '#aaa'
+      },
+      yAxis: {
+        title: {
+          text: undefined
+        },
+        labels: {
+          style: {
+            fontFamily: fontFamily$1,
+            fontSize: '12px',
+            fontWeight: '100'
+          }
+        },
+        gridLineColor: '#f9f9f9'
+      },
+      legend: {
+        layout: 'vertical',
+        itemStyle: {
+          fontFamily: fontFamily$1,
+          fontSize: '12px',
+          fontWeight: '100'
+        },
+        useHTML: true
+      },
+      series: series,
+      colors: colors,
+      credits: {
+        enabled: false
+      },
+      accessibility: {
+        enabled: false
+      }
+    };
+  }, [data, width, height, series, colors]);
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: styles$7.chartWrapper
+  }, /*#__PURE__*/React$1.createElement(HighchartsReact, {
+    highcharts: Highcharts$1,
+    options: options
+  }));
+};
+const fontFamily$1 = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
+const styles$7 = {
+  chartWrapper: {
+    background: 'transparent',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
   }
+};
+const alphas = ['ff', 'bb', '77', '33'];
 
-  return file
+const ColumnChartContent = ({
+  tools = []
+}) => {
+  const {
+    configMap
+  } = useToolContext();
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, tools.length > 0 && /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginBottom: '30px'
+    }
+  }, /*#__PURE__*/React$1.createElement(ColumnChart, {
+    data: toData$1(tools, configMap)
+  })));
+};
+function toData$1(tools, configMap) {
+  const items = [];
+  const hasConvert = tools.some(content => content.result?.result[0]?.metric?.filter !== undefined);
+  tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(content => {
+    const {
+      taskId,
+      from,
+      to
+    } = content.arguments;
+    const item = {
+      name: `<b>${configMap.get(taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
+      data: []
+    };
+    const result = reduce(content.result.result);
+    item.data.push(result.input);
+    item.data.push(result.output);
+    if (hasConvert) item.data.push(result.filter);
+    item.data.push(result.error);
+    items.push(item);
+  });
+  return {
+    colors: hasConvert ? ['#333333', '#2652a8', '#b47813', '#aa1a32'] : ['#333333', '#2652a8', '#aa1a32'],
+    categories: hasConvert ? ['입력', '처리', '필터', '에러'] : ['입력', '처리', '에러'],
+    series: items
+  };
+}
+function reduce(data) {
+  return data.reduce((acc, item) => {
+    acc.input += item.metric.input;
+    acc.output += item.metric.output;
+    acc.filter += item.metric.filter;
+    acc.error += item.metric.error;
+    return acc;
+  }, {
+    input: 0,
+    output: 0,
+    filter: 0,
+    error: 0
+  });
 }
 
-/**
- * Process the result from unified some more.
- *
- * @param {Nodes} tree
- *   Tree.
- * @param {Readonly<Options>} options
- *   Props.
- * @returns {ReactElement}
- *   React element.
- */
-function post(tree, options) {
-  const allowedElements = options.allowedElements;
-  const allowElement = options.allowElement;
-  const components = options.components;
-  const disallowedElements = options.disallowedElements;
-  const skipHtml = options.skipHtml;
-  const unwrapDisallowed = options.unwrapDisallowed;
-  const urlTransform = options.urlTransform || defaultUrlTransform;
-
-  for (const deprecation of deprecations) {
-    if (Object.hasOwn(options, deprecation.from)) {
-      unreachable(
-        'Unexpected `' +
-          deprecation.from +
-          '` prop, ' +
-          (deprecation.to
-            ? 'use `' + deprecation.to + '` instead'
-            : 'remove it') +
-          ' (see <' +
-          changelog +
-          '#' +
-          deprecation.id +
-          '> for more info)'
-      );
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-  }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 
-  visit(tree, transform);
+function toValue(value) {
+  return value && typeof value === 'object' ? value.value : value;
+}
+function toPercent(value) {
+  return Math.round(value * 100 * 100) / 100;
+}
+function formatNumber(value) {
+  return value !== undefined ? value.toLocaleString() : '-';
+}
+function formatToPercent(value) {
+  return formatPercent(toPercent(value));
+}
+function formatPercent(value) {
+  return value !== undefined ? `${value.toLocaleString()}%` : '-';
+}
+function formatDuration(value) {
+  value = toValue(value);
+  if (!value) return '-';
+  let day = Math.floor(value / (60 * 60 * 24));
+  let hour = Math.floor(value / (60 * 60)) - day * 24;
+  let minute = Math.floor(value / 60) - (day * 24 + hour) * 60;
+  let second = Math.round(value % 60);
+  day = day > 0 ? `${day.toLocaleString()}일 ` : '';
+  hour = hour > 0 ? `${hour >= 10 ? hour : '0' + hour}시간 ` : '';
+  minute = `${minute >= 10 ? minute : '0' + minute}분 `;
+  second = `${second >= 10 ? second : '0' + second}초`;
+  return `${day}${hour}${minute}${second}`;
+}
+function formatBytes(value) {
+  return value !== undefined ? `${value.toLocaleString()} bytes` : '-';
+}
+function format(value, type) {
+  switch (type) {
+    case 'TO_PERCENT':
+      return formatToPercent(value);
+    case 'DURATION':
+      return formatDuration(value);
+    case 'BYTES':
+      return formatBytes(value);
+    case 'PERCENT':
+      return formatPercent(value);
+    default:
+      return formatNumber(value);
+  }
+}
 
-  return toJsxRuntime(tree, {
-    Fragment,
-    components,
-    ignoreInvalidStyle: true,
-    jsx,
-    jsxs,
-    passKeys: true,
-    passNode: true
-  })
+const all = [[blue[500]], [purple[500], '#4168a6', '#81a7e1'], [green[500], '#debb7f', '#ecdbbe'], [yellow[500], '#1b8286', '#4ab3b6'], [red[500]], [orange[500]], [lime[500]], ['#54AAF9'], ['#BB4ECD'], ['#6DDBBA'], ['#FFE81C'], ['#FA7EBA'], ['#F55713'], ['#51B304'], ['#1559B2'], ['#733FAB'], ['#1C7B5F'], ['#D87500'], ['#C91E48'], ['#2F862F']];
+[[blue[400], blue[500]], [purple[400], purple[500]], [green[400], green[500]], [yellow[400], yellow[500]], [red[400], red[500]], [orange[400], orange[500]], [lime[400], lime[500]]];
+[[alpha(blue[500], 0.2), 'transparent', blue[300]], [alpha(purple[500], 0.2), 'transparent', purple[500]], [alpha(green[500], 0.2), 'transparent', green[500]], [alpha(yellow[500], 0.2), 'transparent', yellow[500]], [alpha(red[500], 0.2), 'transparent', red[500]], [alpha(orange[500], 0.2), 'transparent', orange[500]], [alpha(lime[500], 0.2), 'transparent', lime[500]]];
+const preset = ['#003f5c', '#a05195', '#665191', '#2f4b7c', '#d45087', '#f95d6a', '#ff7c43', '#ffa600'];
+all.map(color => color[0]);
 
-  /** @type {BuildVisitor<Root>} */
-  function transform(node, index, parent) {
-    if (node.type === 'raw' && parent && typeof index === 'number') {
-      if (skipHtml) {
-        parent.children.splice(index, 1);
-      } else {
-        parent.children[index] = {type: 'text', value: node.value};
+highchartsAccessibility(Highcharts$1);
+highchartsAnnotations(Highcharts$1);
+function Chart(props) {
+  const [legendLimitEnabled, setLegendLimitEnabled] = useState(props.legendLimit > 0);
+  const [options, setOptions] = useState(toOptions(props, legendLimitEnabled));
+  useEffect(() => {
+    if (props.delay) setTimeout(() => setOptions(toOptions(props, legendLimitEnabled, handleLegendItemClick)), props.delay);else setOptions(toOptions(props, legendLimitEnabled, handleLegendItemClick));
+    // eslint-disable-next-line
+  }, [props]);
+  const handleLegendItemClick = useCallback(() => setLegendLimitEnabled(false), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options && /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts$1,
+    options: options
+  }));
+}
+function toOptions(props, legendLimitEnabled, handleLegendItemClick) {
+  const {
+    title = '',
+    type,
+    categorize,
+    stacking,
+    showLegend = true,
+    showDataLabel,
+    xAxisType,
+    xAxisLabel = true,
+    xAxisLabelFormat,
+    xAxisTickInterval,
+    yAxisLabelEnabled = true,
+    yAxisLabelFormat,
+    yAxisTickInterval = null,
+    yAxisPlotLines = [],
+    opacity = 1,
+    innerSize = 0,
+    colors: customColors,
+    backgroundColor = undefined,
+    xPlotIndex,
+    dimension,
+    metrics,
+    records = [],
+    metas,
+    height = 200,
+    legendLimit,
+    legendAlign = 'center',
+    tooltip = {},
+    secondaryXAxis = []
+  } = props;
+  const {
+    outside
+  } = tooltip;
+  const pie = type === 'pie';
+  const centers = pieCenters(metrics.length);
+  const size = pieSize(metrics.length);
+  const colors = customColors ? customColors : preset;
+  const categories = records.map(record => record[dimension]);
+  const mainXAxis = records.map(r => r.time);
+  const chartColorHandlers = {
+    line: (colors, index) => ({
+      color: colors[index],
+      mainColor: colors[index]
+    }),
+    area: (colors, index) => ({
+      color: colors[index][0],
+      mainColor: colors[index][1]
+    }),
+    gradient: (colors, index) => ({
+      color: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1
+        },
+        stops: [[0, `${colors[index][0]}`], [0.95, `${colors[index][1]}`]]
+      },
+      mainColor: colors[index][2]
+    })
+  };
+  const series = metrics.map(({
+    chartType,
+    metric
+  }, index) => {
+    const type = chartType === 'gradient' ? 'area' : chartType;
+    const {
+      color,
+      mainColor
+    } = chartColorHandlers[chartType](colors, index);
+    const meta = metas[metric];
+    let option = {
+      type: type,
+      name: meta ? meta.name : '',
+      data: records.map(record => {
+        const data = record.metric[metric] ?? null;
+        return pie ? {
+          name: record[dimension],
+          y: data
+        } : data;
+      }),
+      custom: {
+        type: meta ? meta.type : '',
+        pointerNames: meta?.pointerNames ?? null
+      },
+      center: centers[index] || [null, null],
+      size: size,
+      point: {
+        events: {
+          render: function () {
+            this.graphic.attr({
+              zIndex: this.y === 0 ? -1 : ZIndex.COMPARE_CHART_BASE - index
+            });
+          }
+        }
+      },
+      showInLegend: pie && index > 0 ? false : true,
+      color: color,
+      lineColor: mainColor,
+      lineWidth: 2,
+      marker: {
+        fillColor: mainColor
+      },
+      metric: metric
+    };
+    if (legendLimitEnabled) option = {
+      ...option,
+      visible: index < legendLimit
+    };
+    return option;
+  });
+  const yPlotLines = yAxisPlotLines.map((line, index) => {
+    return {
+      value: line.value,
+      width: 1,
+      color: line.color,
+      dashStyle: "Dash",
+      zIndex: ZIndex.AVERAGE_LINE_BASE + index,
+      label: {
+        text: line.label,
+        align: line.labelAlign,
+        style: {
+          color: line.labelColor,
+          opacity: 0.7,
+          fontSize: "12px",
+          padding: '1px 5px'
+        },
+        y: -8,
+        useHTML: true
+      }
+    };
+  });
+  const xPlotBands = [{
+    from: xPlotIndex,
+    to: categories.length - 1,
+    color: 'rgba(0, 0, 0, 0.03)',
+    zIndex: ZIndex.NOW_BAND
+  }];
+  const xPlotLines = [{
+    color: "#aaa",
+    width: 1,
+    value: xPlotIndex,
+    zIndex: ZIndex.NOW_BORDER,
+    label: {
+      text: "현재",
+      rotation: 0,
+      x: 5,
+      y: 13,
+      style: {
+        fontWeight: 500,
+        lineHeight: "16.8px",
+        color: "#333",
+        fontSize: "12px"
       }
-
-      return index
     }
-
-    if (node.type === 'element') {
-      /** @type {string} */
-      let key;
-
-      for (key in urlAttributes) {
-        if (
-          Object.hasOwn(urlAttributes, key) &&
-          Object.hasOwn(node.properties, key)
-        ) {
-          const value = node.properties[key];
-          const test = urlAttributes[key];
-          if (test === null || test.includes(node.tagName)) {
-            node.properties[key] = urlTransform(String(value || ''), key, node);
+  }];
+  return {
+    chart: {
+      type: type.toLowerCase(),
+      height: height,
+      backgroundColor,
+      events: {
+        render: secondaryXAxis.length === 0 ? undefined : function () {
+          const chart = this;
+          const visibleSeries = chart.series.filter(s => s.visible);
+          let newCategories = null;
+          if (visibleSeries.length === 1 && visibleSeries[0].options.metric === 'prev') {
+            newCategories = secondaryXAxis;
+          } else {
+            newCategories = mainXAxis;
+          }
+          const isSame = JSON.stringify(chart.xAxis[0].categories) === JSON.stringify(newCategories);
+          if (!isSame) {
+            chart.xAxis[0].setCategories(newCategories);
           }
         }
       }
-    }
-
-    if (node.type === 'element') {
-      let remove = allowedElements
-        ? !allowedElements.includes(node.tagName)
-        : disallowedElements
-          ? disallowedElements.includes(node.tagName)
-          : false;
-
-      if (!remove && allowElement && typeof index === 'number') {
-        remove = !allowElement(node, index, parent);
-      }
-
-      if (remove && parent && typeof index === 'number') {
-        if (unwrapDisallowed && node.children) {
-          parent.children.splice(index, 1, ...node.children);
-        } else {
-          parent.children.splice(index, 1);
+    },
+    title: {
+      text: ''
+    },
+    subtitle: {
+      text: title
+    },
+    colors: colors,
+    xAxis: {
+      type: xAxisType,
+      labels: {
+        enabled: xAxisLabel,
+        autoRotation: false,
+        format: xAxisLabelFormat ? `{value:${xAxisLabelFormat}}` : undefined,
+        style: {
+          color: grey[600]
         }
-
-        return index
+      },
+      categories: categorize ? categories : undefined,
+      tickWidth: 1,
+      tickInterval: xAxisTickInterval ?? (xAxisType === 'datetime' ? records.length / 20 : 1),
+      lineColor: grey[900],
+      tickColor: grey[900],
+      crosshair: true,
+      startOnTick: true,
+      plotBands: xPlotIndex !== undefined ? xPlotBands : undefined,
+      plotLines: xPlotIndex !== undefined ? xPlotLines : undefined
+    },
+    yAxis: {
+      title: {
+        text: ''
+      },
+      labels: {
+        enabled: yAxisLabelEnabled,
+        formatter: yAxisLabelFormat,
+        style: {
+          color: grey[600]
+        }
+      },
+      tickInterval: yAxisTickInterval,
+      gridLineColor: '#f8f8f8',
+      plotLines: yPlotLines
+    },
+    plotOptions: {
+      series: {
+        opacity: opacity,
+        stacking: stackingType(stacking),
+        showInLegend: showLegend,
+        dataLabels: {
+          enabled: showDataLabel
+        },
+        colorByPoint: pie,
+        lineWidth: 2,
+        marker: {
+          enabled: false,
+          symbol: 'circle'
+        },
+        cursor: 'pointer',
+        point: {
+          events: {}
+        },
+        events: {
+          legendItemClick: handleLegendItemClick
+        }
+      },
+      pie: {
+        allowPointSelect: true,
+        innerSize: `${innerSize}%`
       }
+    },
+    legend: {
+      align: legendAlign,
+      verticalAlign: 'top',
+      enabled: showLegend
+    },
+    tooltip: {
+      followPointer: false,
+      shared: true,
+      shadow: false,
+      useHTML: true,
+      formatter: function () {
+        return tooltipFormatter(this, tooltip);
+      },
+      outside: outside,
+      style: {
+        zIndex: 2000
+      }
+    },
+    series: series,
+    time: {
+      useUTC: false,
+      getTimezoneOffset: function () {
+        return new Date().getTimezoneOffset();
+      }
+    },
+    credits: {
+      enabled: false
     }
-  }
-}
-
-/**
- * Make a URL safe.
- *
- * @satisfies {UrlTransform}
- * @param {string} value
- *   URL.
- * @returns {string}
- *   Safe URL.
- */
-function defaultUrlTransform(value) {
-  // Same as:
-  // <https://github.com/micromark/micromark/blob/929275e/packages/micromark-util-sanitize-uri/dev/index.js#L34>
-  // But without the `encode` part.
-  const colon = value.indexOf(':');
-  const questionMark = value.indexOf('?');
-  const numberSign = value.indexOf('#');
-  const slash = value.indexOf('/');
-
-  if (
-    // If there is no protocol, it’s relative.
-    colon === -1 ||
-    // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
-    (slash !== -1 && colon > slash) ||
-    (questionMark !== -1 && colon > questionMark) ||
-    (numberSign !== -1 && colon > numberSign) ||
-    // It is a protocol, it should be allowed.
-    safeProtocol.test(value.slice(0, colon))
-  ) {
-    return value
-  }
-
-  return ''
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".markdown-content{word-wrap:break-word;line-height:1.6;white-space:normal}.markdown-content p{margin:0 0 .75rem}.markdown-content p:last-child{margin-bottom:0}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{font-weight:600;line-height:1.3;margin:1rem 0 .5rem}.markdown-content h1:first-child,.markdown-content h2:first-child,.markdown-content h3:first-child{margin-top:0}.markdown-content h1{font-size:1.5em}.markdown-content h2{font-size:1.3em}.markdown-content h3{font-size:1.15em}.markdown-content h4{font-size:1.05em}.markdown-content ol,.markdown-content ul{margin:.5rem 0;padding-left:1.5rem}.markdown-content li{margin:.25rem 0}.markdown-content code{background:rgba(0,0,0,.05);border-radius:.25rem;font-family:Courier New,monospace;font-size:.9em;padding:.15rem .3rem}.message.user .markdown-content code{background:hsla(0,0%,100%,.2)}.markdown-content pre{background:rgba(0,0,0,.05);border-radius:.375rem;margin:.5rem 0;overflow-x:auto;padding:.75rem}.markdown-content pre code{background:transparent;padding:0}.message.user .markdown-content pre{background:hsla(0,0%,100%,.15)}.markdown-content strong{font-weight:700}.markdown-content em{font-style:italic}.markdown-content a{color:#667eea;text-decoration:underline}.message.user .markdown-content a{color:hsla(0,0%,100%,.95)}.markdown-content blockquote{border-left:3px solid #667eea;color:#666;margin:.75rem 0;padding-left:1rem}.message.user .markdown-content blockquote{border-left-color:hsla(0,0%,100%,.5);color:hsla(0,0%,100%,.9)}.markdown-content hr{border:none;border-top:1px solid #e5e7eb;margin:1rem 0}.message.user .markdown-content hr{border-top-color:hsla(0,0%,100%,.3)}.markdown-content table{border-collapse:collapse;margin:.75rem 0;width:100%}.markdown-content td,.markdown-content th{border:1px solid #e5e7eb;padding:.5rem;text-align:left}.markdown-content th{background:rgba(0,0,0,.05);font-weight:600}.message.user .markdown-content td,.message.user .markdown-content th{border-color:hsla(0,0%,100%,.3)}.message.user .markdown-content th{background:hsla(0,0%,100%,.15)}";
-styleInject(css_248z);
-
-function MarkdownContent({
-  content
-}) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "markdown-content"
-  }, /*#__PURE__*/React.createElement(Markdown, null, content));
+  };
 }
-
-const ToolContext = /*#__PURE__*/createContext();
-function ToolContextProvider({
-  message,
-  children
-}) {
-  const kinds = useMemo(() => message.kinds ?? [], [message]);
-  const tools = useMemo(() => message.content.filter(c => c.type === 'tool'), [message]);
-  const configMap = useMemo(() => makeTaskConfigs(tools), [tools]);
-  return /*#__PURE__*/React.createElement(ToolContext.Provider, {
-    value: {
-      kinds: kinds,
-      tools,
-      configMap
+const tooltipFormatter = (_this, props) => {
+  const {
+    headerVisible = true,
+    dateFormat,
+    headerTime,
+    legendColors = []
+  } = props;
+  let tooltip = '<div style="font-size: 14px;padding: 12px; min-width: 200px;">';
+  if (headerVisible) {
+    const xDate = new Date(_this.x);
+    const date = formatDate(xDate, dateFormat);
+    tooltip += `<div style="display: flex; justify-content: space-between; font-weight: bold; font-size: 12px;">
+                            <span style="font-size: 12px; color: #333;">${date}</span>`;
+    if (headerTime) {
+      const time = formatDate(xDate, '%H:%M');
+      tooltip += `<span style="font-size: 12px; color: #333;">${time}</span>`;
     }
-  }, children);
-}
-function useToolContext() {
-  return useContext(ToolContext);
-}
-function makeTaskConfigs(tools) {
-  const map = new Map();
-  tools.filter(t => t.name === 'search-task-by-keyword').forEach(tool => {
-    tool.result?.result?.forEach(item => {
-      map.set(item.taskId, item.name);
-    });
+    tooltip += '</div>';
+  }
+  _this.points.forEach(point => {
+    const type = point.series.options.custom.type;
+    const value = type !== 'TO_PERCENT' ? format(point.y, type) : formatToPercent(_this.percentage / 100);
+    const name = point.series.name;
+    let color = type !== 'TO_PERCENT' ? point.series.color : point.color;
+    if (legendColors.length !== 0) {
+      color = legendColors[point.series.index];
+    }
+    tooltip += `<div style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
+                  <span style="width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; background-color: ${color}"></span>
+                  <span style="flex-grow: 1; font-size: 14px; padding-right: 20px;">${name}</span>
+                  <span style="font-weight: bold; font-size: 14px;">${value}</span>
+                </div>
+              </div>`;
   });
-  return map;
-}
-
-var dayjs_min$1 = {exports: {}};
-
-var dayjs_min = dayjs_min$1.exports;
-
-var hasRequiredDayjs_min;
-
-function requireDayjs_min () {
-	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
-	hasRequiredDayjs_min = 1;
-	(function (module, exports$1) {
-		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-	} (dayjs_min$1));
-	return dayjs_min$1.exports;
-}
-
-var dayjs_minExports = requireDayjs_min();
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-var isoWeek$2 = {exports: {}};
-
-var isoWeek$1 = isoWeek$2.exports;
-
-var hasRequiredIsoWeek;
-
-function requireIsoWeek () {
-	if (hasRequiredIsoWeek) return isoWeek$2.exports;
-	hasRequiredIsoWeek = 1;
-	(function (module, exports$1) {
-		!function(e,t){module.exports=t();}(isoWeek$1,(function(){var e="day";return function(t,i,s){var a=function(t){return t.add(4-t.isoWeekday(),e)},d=i.prototype;d.isoWeekYear=function(){return a(this).year()},d.isoWeek=function(t){if(!this.$utils().u(t))return this.add(7*(t-this.isoWeek()),e);var i,d,n,o,r=a(this),u=(i=this.isoWeekYear(),d=this.$u,n=(d?s.utc:s)().year(i).startOf("year"),o=4-n.isoWeekday(),n.isoWeekday()>4&&(o+=7),n.add(o,e));return r.diff(u,"week")+1},d.isoWeekday=function(e){return this.$utils().u(e)?this.day()||7:this.day(this.day()%7?e:e-7)};var n=d.startOf;d.startOf=function(e,t){var i=this.$utils(),s=!!i.u(t)||t;return "isoweek"===i.p(e)?s?this.date(this.date()-(this.isoWeekday()-1)).startOf("day"):this.date(this.date()-1-(this.isoWeekday()-1)+7).endOf("day"):n.bind(this)(e,t)};}})); 
-	} (isoWeek$2));
-	return isoWeek$2.exports;
-}
-
-var isoWeekExports = requireIsoWeek();
-var isoWeek = /*@__PURE__*/getDefaultExportFromCjs(isoWeekExports);
-
-var relativeTime$2 = {exports: {}};
-
-var relativeTime$1 = relativeTime$2.exports;
-
-var hasRequiredRelativeTime;
-
-function requireRelativeTime () {
-	if (hasRequiredRelativeTime) return relativeTime$2.exports;
-	hasRequiredRelativeTime = 1;
-	(function (module, exports$1) {
-		!function(r,e){module.exports=e();}(relativeTime$1,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,true):i.diff(e,y.d,true));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,true)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}})); 
-	} (relativeTime$2));
-	return relativeTime$2.exports;
-}
-
-var relativeTimeExports = requireRelativeTime();
-var relativeTime = /*@__PURE__*/getDefaultExportFromCjs(relativeTimeExports);
-
-var isSameOrBefore$2 = {exports: {}};
-
-var isSameOrBefore$1 = isSameOrBefore$2.exports;
-
-var hasRequiredIsSameOrBefore;
-
-function requireIsSameOrBefore () {
-	if (hasRequiredIsSameOrBefore) return isSameOrBefore$2.exports;
-	hasRequiredIsSameOrBefore = 1;
-	(function (module, exports$1) {
-		!function(e,i){module.exports=i();}(isSameOrBefore$1,(function(){return function(e,i){i.prototype.isSameOrBefore=function(e,i){return this.isSame(e,i)||this.isBefore(e,i)};}})); 
-	} (isSameOrBefore$2));
-	return isSameOrBefore$2.exports;
-}
-
-var isSameOrBeforeExports = requireIsSameOrBefore();
-var isSameOrBefore = /*@__PURE__*/getDefaultExportFromCjs(isSameOrBeforeExports);
-
-var isSameOrAfter$2 = {exports: {}};
-
-var isSameOrAfter$1 = isSameOrAfter$2.exports;
-
-var hasRequiredIsSameOrAfter;
-
-function requireIsSameOrAfter () {
-	if (hasRequiredIsSameOrAfter) return isSameOrAfter$2.exports;
-	hasRequiredIsSameOrAfter = 1;
-	(function (module, exports$1) {
-		!function(e,t){module.exports=t();}(isSameOrAfter$1,(function(){return function(e,t){t.prototype.isSameOrAfter=function(e,t){return this.isSame(e,t)||this.isAfter(e,t)};}})); 
-	} (isSameOrAfter$2));
-	return isSameOrAfter$2.exports;
-}
-
-var isSameOrAfterExports = requireIsSameOrAfter();
-var isSameOrAfter = /*@__PURE__*/getDefaultExportFromCjs(isSameOrAfterExports);
-
-dayjs.extend(relativeTime);
-dayjs.extend(isoWeek);
-dayjs.extend(isSameOrBefore);
-dayjs.extend(isSameOrAfter);
-dayjs.locale('ko');
-const isToday = (from, to) => {
-  const now = new Date();
-  const date = new Date(now.toLocaleString('en-US', {
-    timeZone: 'Asia/Seoul'
-  }));
-  const today = date.getFullYear() + String(date.getMonth() + 1).padStart(2, '0') + String(date.getDate()).padStart(2, '0');
-  return from === today && to === today;
-};
-const isOneDay = (from, to) => {
-  return from === to;
-};
-const formatDateRange = (from, to) => {
-  const fromDate = dayjs(from, 'YYYYMMDD');
-  const toDate = dayjs(to, 'YYYYMMDD');
-  const today = dayjs().startOf('day');
-  if (from === to) return formatSingleDate(fromDate, today);
-  return formatRange(fromDate, toDate, today);
+  tooltip += '</div>';
+  return tooltip;
 };
-const formatSingleDate = (date, today) => {
-  const diffDays = today.diff(date, 'day');
-  if (diffDays === 0) return '오늘';
-  if (diffDays === 1) return '어제';
-  if (diffDays === 2) return '그제';
-  return date.format('YYYY년 M월 D일');
+function formatDate(data, format) {
+  return Highcharts$1.dateFormat(format, data.getTime() - data.getTimezoneOffset() * 60000);
+}
+const ZIndex = {
+  AVERAGE_LINE_BASE: 10,
+  COMPARE_CHART_BASE: 5,
+  NOW_BORDER: 2,
+  NOW_BAND: 1
 };
-const formatRange = (fromDate, toDate, today) => {
-  const thisWeekStart = today.startOf('week'); // 일요일
-  const thisWeekEnd = today.endOf('week'); // 토요일
-
-  if (fromDate.isSame(thisWeekStart, 'day') && (toDate.isSame(today, 'day') || toDate.isSame(thisWeekEnd, 'day'))) {
-    return '이번주';
-  }
-  const lastWeekStart = today.subtract(1, 'week').startOf('week');
-  const lastWeekEnd = today.subtract(1, 'week').endOf('week');
-  if (fromDate.isSame(lastWeekStart, 'day') && toDate.isSame(lastWeekEnd, 'day')) {
-    return '지난주';
-  }
-  const twoWeeksAgoStart = today.subtract(2, 'week').startOf('week');
-  const twoWeeksAgoEnd = today.subtract(2, 'week').endOf('week');
-  if (fromDate.isSame(twoWeeksAgoStart, 'day') && toDate.isSame(twoWeeksAgoEnd, 'day')) {
-    return '지지난주';
-  }
-  const thisMonthStart = today.startOf('month');
-  const thisMonthEnd = today.endOf('month');
-  if (fromDate.isSame(thisMonthStart, 'day') && (toDate.isSame(today, 'day') || toDate.isSame(thisMonthEnd, 'day'))) {
-    return '이번달';
-  }
-  const lastMonthStart = today.subtract(1, 'month').startOf('month');
-  const lastMonthEnd = today.subtract(1, 'month').endOf('month');
-  if (fromDate.isSame(lastMonthStart, 'day') && toDate.isSame(lastMonthEnd, 'day')) {
-    return '지난달';
-  }
-  const twoMonthsAgoStart = today.subtract(2, 'month').startOf('month');
-  const twoMonthsAgoEnd = today.subtract(2, 'month').endOf('month');
-  if (fromDate.isSame(twoMonthsAgoStart, 'day') && toDate.isSame(twoMonthsAgoEnd, 'day')) {
-    return '지지난달';
+function stackingType(stacking) {
+  return stacking ? stacking.toLowerCase() : '';
+}
+function pieCenters(count) {
+  switch (count) {
+    case 2:
+      return [['25%', '50%'], ['75%', '50%']];
+    case 3:
+      return [['25%', '25%'], ['75%', '25%'], ['50%', '75%']];
+    case 4:
+      return [['25%', '25%'], ['75%', '25%'], ['25%', '75%'], ['75%', '75%']];
+    default:
+      return [];
   }
-  const fromFormatted = formatDateInRange(fromDate, today);
-  const toFormatted = formatDateInRange(toDate, today);
-  return `${fromFormatted} ~ ${toFormatted}`;
-};
-const formatDateInRange = (date, today) => {
-  const diffDays = today.diff(date, 'day');
-  if (diffDays === 0) return '오늘';
-  if (diffDays === 1) return '어제';
-  if (diffDays === 2) return '그제';
-  return date.format('YYYY년 M월 D일');
-};
-
-const ColumnChartContent = ({
-  tools = []
-}) => {
-  const {
-    configMap
-  } = useToolContext();
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, tools.length > 0 && /*#__PURE__*/React$1.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      marginBottom: '30px'
-    }
-  }, /*#__PURE__*/React$1.createElement(ColumnChart, {
-    data: toData$1(tools, configMap)
-  })));
-};
-function toData$1(tools, configMap) {
-  const items = [];
-  const hasConvert = tools.some(content => content.result?.result[0]?.metric?.filter !== undefined);
-  tools.sort((a, b) => a.arguments.from.localeCompare(b.arguments.from)).forEach(content => {
-    const {
-      taskId,
-      from,
-      to
-    } = content.arguments;
-    const item = {
-      name: `<b>${configMap.get(taskId)}</b> <span style="font-size:10px">(${formatDateRange(from, to)})</span>`,
-      data: []
-    };
-    const result = reduce(content.result.result);
-    item.data.push(result.input);
-    item.data.push(result.output);
-    if (hasConvert) item.data.push(result.filter);
-    item.data.push(result.error);
-    items.push(item);
-  });
-  return {
-    colors: hasConvert ? ['#333333', '#2652a8', '#b47813', '#aa1a32'] : ['#333333', '#2652a8', '#aa1a32'],
-    categories: hasConvert ? ['입력', '처리', '필터', '에러'] : ['입력', '처리', '에러'],
-    series: items
-  };
 }
-function reduce(data) {
-  return data.reduce((acc, item) => {
-    acc.input += item.metric.input;
-    acc.output += item.metric.output;
-    acc.filter += item.metric.filter;
-    acc.error += item.metric.error;
-    return acc;
-  }, {
-    input: 0,
-    output: 0,
-    filter: 0,
-    error: 0
-  });
+function pieSize(count) {
+  switch (count) {
+    case 3:
+      return '50%';
+    case 4:
+      return '25%';
+    default:
+      return null;
+  }
+}
+
+function TrendChart({
+  colorIndex = 0,
+  legendColors,
+  isDaily,
+  isRealtime,
+  ...props
+}) {
+  const colors = useMemo(() => {
+    return all[colorIndex % all.length];
+  }, [colorIndex]);
+  const tooltip = useMemo(() => ({
+    dateFormat: isRealtime ? '%H:%M' : '%Y-%m-%d',
+    headerTime: !isDaily && !isRealtime,
+    outside: props.tooltipOutSide,
+    legendColors
+  }), [isRealtime, isDaily, props.tooltipOutSide, legendColors]);
+  return /*#__PURE__*/React.createElement(Chart, _extends({
+    type: "areaspline",
+    categorize: true,
+    xAxisType: "datetime",
+    xAxisLabelFormat: isDaily ? '%m-%d' : '%H:%M',
+    colors: colors,
+    tooltip: tooltip
+  }, props));
+}
+
+function StackedAreaTrendChart({
+  metrics,
+  records,
+  isDaily = false,
+  xPlotIndex,
+  xAxisTickInterval,
+  yAxisLabelEnabled = false,
+  legendLimit = 3,
+  colors = defaultColors,
+  ...props
+}) {
+  const _metrics = useMemo(() => {
+    return metrics.map(m => ({
+      metric: m.id,
+      chartType: 'area'
+    }));
+  }, [metrics]);
+  const metas = useMemo(() => {
+    const result = {
+      time: {
+        name: "일시",
+        type: "DATE"
+      }
+    };
+    metrics.forEach(m => {
+      result[m.id] = {
+        name: m.name,
+        type: "NUMBER"
+      };
+    });
+    return result;
+  }, [metrics]);
+  return /*#__PURE__*/React.createElement(TrendChart, _extends({
+    dimension: "time",
+    stacking: "normal",
+    metrics: _metrics,
+    metas: metas,
+    records: records,
+    isRealtime: xPlotIndex !== undefined,
+    isDaily: isDaily,
+    xPlotIndex: xPlotIndex,
+    xAxisTickInterval: xAxisTickInterval,
+    yAxisLabelEnabled: yAxisLabelEnabled,
+    legendLimit: legendLimit,
+    colors: colors
+  }, props));
 }
+const defaultColors = [["rgba(54,115,237,0.8)", "#3673ed"], ["rgba(149,77,241,0.8)", "#954df1"], ["#4dc391", "#20b476"], ["#fbba3d", "#faa90c"], ["#f2426d", "#ef1348"]];
 
 function StackedAreaChartContent({
   tools
@@ -21797,6 +21654,162 @@ function xPlotIndex(tools) {
   }
 }
 
+const PieChart = ({
+  data,
+  width = 230,
+  height = 180,
+  size = '60%',
+  colors = ['#2652a8', '#b47813', '#aa1a32']
+}) => {
+  const noData = data.metrics.some(m => m.transparent);
+  const options = useMemo(() => {
+    const chartData = data.metrics.filter(metric => metric.transparent || metric.value > 0).map((metric, index) => ({
+      name: metric.label,
+      y: metric.value,
+      color: metric.transparent ? checkerboardPattern() : colors[index % colors.length]
+    }));
+    return {
+      chart: {
+        type: 'pie',
+        backgroundColor: 'transparent',
+        width: width,
+        height: height,
+        style: {
+          fontFamily: fontFamily
+        }
+      },
+      title: {
+        text: undefined
+      },
+      tooltip: {
+        pointFormat: '<span><b>{point.y}</b> ({point.percentage:.1f}%)</span>',
+        style: {
+          fontFamily: fontFamily,
+          fontSize: '13px'
+        },
+        useHTML: true
+      },
+      plotOptions: {
+        pie: {
+          size: size,
+          allowPointSelect: true,
+          cursor: 'pointer',
+          dataLabels: {
+            enabled: true,
+            format: '{point.name}<br><b>{point.y}</b> ({point.percentage:.1f}%)',
+            distance: 20,
+            style: {
+              fontSize: '13px',
+              fontWeight: '100',
+              textOutline: 'none',
+              fontFamily: fontFamily
+            },
+            connectorColor: '#666',
+            connectorWidth: 1,
+            overflow: 'allow',
+            crop: false
+          },
+          showInLegend: false
+        }
+      },
+      series: [{
+        type: 'pie',
+        name: '',
+        colorByPoint: true,
+        data: chartData
+      }],
+      credits: {
+        enabled: false
+      },
+      accessibility: {
+        enabled: false
+      }
+    };
+  }, [data, width, height, size, colors]);
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: styles$6.chartWrapper
+  }, /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      ...styles$6.chartContainer,
+      width,
+      height,
+      position: 'relative'
+    }
+  }, noData && /*#__PURE__*/React$1.createElement(CheckerboardBackground, {
+    width: width,
+    height: height
+  }), /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      position: 'relative',
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React$1.createElement(HighchartsReact, {
+    highcharts: Highcharts$1,
+    options: options
+  }))), /*#__PURE__*/React$1.createElement("div", {
+    style: styles$6.agentName
+  }, data.name));
+};
+const fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, sans-serif';
+const styles$6 = {
+  chartWrapper: {
+    background: 'transparent',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  chartContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  agentName: {
+    fontSize: '12px',
+    fontWeight: '100',
+    marginTop: '-30px',
+    color: '#333'
+  }
+};
+const CheckerboardBackground = ({
+  width,
+  height
+}) => {
+  const circleSize = Math.min(width, height) * 0.47;
+  return /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      position: 'absolute',
+      width: circleSize,
+      height: circleSize,
+      borderRadius: '50%',
+      backgroundImage: `
+                linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+                linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+                linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)
+              `,
+      backgroundSize: '10px 10px',
+      backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
+      backgroundColor: '#ffffff',
+      zIndex: 0
+    }
+  });
+};
+const checkerboardPattern = () => ({
+  pattern: {
+    path: {
+      d: 'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
+      stroke: '#d0d0d0',
+      strokeWidth: 1
+    },
+    width: 5,
+    height: 5,
+    backgroundColor: '#ffffff',
+    opacity: 1
+  }
+});
+
 const PieChartContent = ({
   tool
 }) => {
@@ -22196,13 +22209,6 @@ const styles$1 = {
   }
 };
 
-let globalConfig = {
-  apiUrl: ''
-};
-function getConfig() {
-  return globalConfig;
-}
-
 const {
   apiUrl
 } = getConfig();
@@ -22327,4 +22333,4 @@ const styles = {
   }
 };
 
-export { AiChat, ColumnChart, PieChart, StackedAreaTrendChart };
+export { AiChat, ColumnChart, PieChart, StackedAreaTrendChart, configure$1 as configure, getConfig };