@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/charts/xy-chart-adoption/histogram/transformer-data-to-xy.js

@@ -1,25 +1,34 @@
 function transformHistogramDataToXYChart(data) {
-  const xyData = [];
+  const seriesColors = [];
+  const units = /* @__PURE__ */ new Set();
+  const barSeriesProps = [];
   data.forEach((series, index) => {
-    const {
-      bins,
-      name
-      /*unit, color*/
-    } = series;
+    const xyData = [];
+    const { bins, name, color, unit, ...extraSeriesProps } = series;
+    if (color) {
+      seriesColors.push({ name, color });
+    }
     bins.forEach((bin) => {
       const datapoint = {
+        ...extraSeriesProps,
         x0: bin.from,
         x1: bin.to,
         y1: bin.value,
         name,
-        seriesId: index
+        seriesId: index.toString()
       };
       xyData.push(datapoint);
     });
+    barSeriesProps.push({
+      data: xyData,
+      unit
+    });
+    units.add(unit);
   });
   return {
-    XYChartData: xyData
-    /*ChartUnits: units, Colors: colors*/
+    barSeriesProps,
+    units,
+    seriesColors
   };
 }
 export {

package/esm/charts/xy-chart-adoption/histogram/transformer-data-to-xy.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/transformer-data-to-xy.ts"],
-  "sourcesContent": ["// import type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { HistogramSeries } from '../../histogram/types/histogram.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\n\ninterface transformHistogramDataToXYChart {\n  XYChartData: XYChartData[];\n  // ChartUnits: ChartUnit[]; Commented for the moment bc they are not needed (and may not have the final shape we want)\n  // Colors: string[]; Commented for the moment bc they are not needed (and may not have the final shape we want)\n}\n\nexport function transformHistogramDataToXYChart(\n  data: HistogramSeries[],\n): transformHistogramDataToXYChart {\n  const xyData: XYChartData[] = [];\n  // const colors: string[] = [];\n  // const units: ChartUnit[] = [];\n\n  data.forEach((series, index) => {\n    const { bins, name /*unit, color*/ } = series;\n\n    // if (unit) {\n    //   units.push(unit);\n    // }\n\n    // if (color) {\n    //   colors.push(color);\n    // }\n\n    bins.forEach((bin) => {\n      const datapoint: XYChartData = {\n        x0: bin.from,\n        x1: bin.to,\n        y1: bin.value,\n        name,\n        seriesId: index,\n      };\n\n      xyData.push(datapoint);\n    });\n  });\n\n  return { XYChartData: xyData /*ChartUnits: units, Colors: colors*/ };\n}\n"],
-  "mappings": "AAUO,SAAS,gCACd,MACiC;AACjC,QAAM,SAAwB,CAAC;AAI/B,OAAK,QAAQ,CAAC,QAAQ,UAAU;AAC9B,UAAM;AAAA,MAAE;AAAA,MAAM;AAAA;AAAA,IAAqB,IAAI;AAUvC,SAAK,QAAQ,CAAC,QAAQ;AACpB,YAAM,YAAyB;AAAA,QAC7B,IAAI,IAAI;AAAA,QACR,IAAI,IAAI;AAAA,QACR,IAAI,IAAI;AAAA,QACR;AAAA,QACA,UAAU;AAAA,MACZ;AAEA,aAAO,KAAK,SAAS;AAAA,IACvB,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AAAA,IAAE,aAAa;AAAA;AAAA,EAA6C;AACrE;",
+  "sourcesContent": ["import type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { HistogramSeries } from '../../histogram/types/histogram.js';\nimport type { XYChartData } from '../../xy-chart/types/xy-chart.js';\nexport interface SeriesColor {\n  name: string;\n  color: string;\n}\ninterface TransformHistogramDataResult {\n  barSeriesProps: BarSeriesProps[];\n  units: Set<ChartUnit>;\n  seriesColors: SeriesColor[];\n}\n\ntype BarSeriesProps = {\n  data: XYChartData[];\n  unit: ChartUnit;\n};\n\nexport function transformHistogramDataToXYChart(\n  data: HistogramSeries[],\n): TransformHistogramDataResult {\n  const seriesColors: SeriesColor[] = [];\n  const units: Set<ChartUnit> = new Set();\n\n  const barSeriesProps: BarSeriesProps[] = [];\n\n  data.forEach((series, index) => {\n    const xyData: XYChartData[] = [];\n    const { bins, name, color, unit, ...extraSeriesProps } =\n      series as HistogramSeries & Record<string, unknown>;\n\n    if (color) {\n      seriesColors.push({ name, color });\n    }\n\n    bins.forEach((bin) => {\n      const datapoint: XYChartData = {\n        ...extraSeriesProps,\n        x0: bin.from,\n        x1: bin.to,\n        y1: bin.value,\n        name,\n        seriesId: index.toString(),\n      };\n\n      xyData.push(datapoint);\n    });\n\n    barSeriesProps.push({\n      data: xyData,\n      unit,\n    });\n\n    units.add(unit);\n  });\n  return {\n    barSeriesProps,\n    units,\n    seriesColors,\n  };\n}\n"],
+  "mappings": "AAkBO,SAAS,gCACd,MAC8B;AAC9B,QAAM,eAA8B,CAAC;AACrC,QAAM,QAAwB,oBAAI,IAAI;AAEtC,QAAM,iBAAmC,CAAC;AAE1C,OAAK,QAAQ,CAAC,QAAQ,UAAU;AAC9B,UAAM,SAAwB,CAAC;AAC/B,UAAM,EAAE,MAAM,MAAM,OAAO,MAAM,GAAG,iBAAiB,IACnD;AAEF,QAAI,OAAO;AACT,mBAAa,KAAK,EAAE,MAAM,MAAM,CAAC;AAAA,IACnC;AAEA,SAAK,QAAQ,CAAC,QAAQ;AACpB,YAAM,YAAyB;AAAA,QAC7B,GAAG;AAAA,QACH,IAAI,IAAI;AAAA,QACR,IAAI,IAAI;AAAA,QACR,IAAI,IAAI;AAAA,QACR;AAAA,QACA,UAAU,MAAM,SAAS;AAAA,MAC3B;AAEA,aAAO,KAAK,SAAS;AAAA,IACvB,CAAC;AAED,mBAAe,KAAK;AAAA,MAClB,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAED,UAAM,IAAI,IAAI;AAAA,EAChB,CAAC;AACD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/xy-chart-adoption/histogram/transformer-selection-to-histogram.js

@@ -0,0 +1,36 @@
+import { parseDateNumberToNumber } from "../../core/components/annotations/utils/parse-date-number-to-number.js";
+const toNumber = (value) => typeof value === "string" ? Number(value) : parseDateNumberToNumber(value);
+const mapDatapointToHistogramBin = (datapoint) => {
+  const barData = "datapoint" in datapoint ? datapoint.datapoint : datapoint;
+  const { x0, x1, y1 } = barData;
+  return {
+    from: x0,
+    to: x1,
+    value: y1
+  };
+};
+const mapSelectedSeriesToHistogram = (selectedSeries) => {
+  return selectedSeries.flatMap(
+    (series) => Object.entries(series).map(([name, datapoints]) => {
+      const bins = datapoints.map(
+        (datapoint) => mapDatapointToHistogramBin(datapoint)
+      );
+      if (!bins.length) {
+        return null;
+      }
+      return {
+        name,
+        bins
+      };
+    }).filter((series2) => series2 !== null)
+  );
+};
+const mapSelectionDomainToHistogramDomains = (selectionDomain) => {
+  const [[, firstDomain]] = Object.entries(selectionDomain[0]);
+  return [toNumber(firstDomain[0]), toNumber(firstDomain[1])];
+};
+export {
+  mapSelectedSeriesToHistogram,
+  mapSelectionDomainToHistogramDomains
+};
+//# sourceMappingURL=transformer-selection-to-histogram.js.map

package/esm/charts/xy-chart-adoption/histogram/transformer-selection-to-histogram.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/xy-chart-adoption/histogram/transformer-selection-to-histogram.ts"],
+  "sourcesContent": ["import { parseDateNumberToNumber } from '../../core/components/annotations/utils/parse-date-number-to-number.js';\nimport type { HistogramSeries } from '../../histogram/types/histogram.js';\nimport type {\n  XYChartAreaSeriesActionItem,\n  XYChartBarSeriesActionItem,\n  XYChartDotSeriesActionItem,\n  XYChartLineSeriesActionItem,\n  XYChartRectSeriesActionItem,\n  XYChartSelectedDomains,\n  XYChartSelectedSeries,\n} from '../../xy-chart/types/xy-chart.js';\n\ntype XYSelectableValue = number | string | Date | undefined;\n\nconst toNumber = (value: XYSelectableValue): number =>\n  typeof value === 'string' ? Number(value) : parseDateNumberToNumber(value);\n\ntype XYSelectedDatapoint =\n  | XYChartRectSeriesActionItem\n  | XYChartDotSeriesActionItem\n  | XYChartLineSeriesActionItem\n  | XYChartBarSeriesActionItem\n  | XYChartAreaSeriesActionItem;\n\nconst mapDatapointToHistogramBin = (datapoint: XYSelectedDatapoint) => {\n  // Handle both bar (nested in .datapoint) and other types (direct properties)\n  const barData = 'datapoint' in datapoint ? datapoint.datapoint : datapoint;\n  const { x0, x1, y1 } = barData as {\n    x0: XYSelectableValue;\n    x1: XYSelectableValue;\n    y1: XYSelectableValue;\n  };\n\n  return {\n    from: x0,\n    to: x1,\n    value: y1,\n  };\n};\n\nexport const mapSelectedSeriesToHistogram = (\n  selectedSeries: XYChartSelectedSeries,\n): HistogramSeries[] => {\n  return selectedSeries.flatMap((series) =>\n    Object.entries(series)\n      .map(([name, datapoints]) => {\n        const bins = datapoints.map((datapoint) =>\n          mapDatapointToHistogramBin(datapoint),\n        );\n\n        if (!bins.length) {\n          return null;\n        }\n\n        return {\n          name,\n          bins,\n        };\n      })\n      .filter((series): series is HistogramSeries => series !== null),\n  );\n};\n\nexport const mapSelectionDomainToHistogramDomains = (\n  selectionDomain: XYChartSelectedDomains,\n): [number, number] => {\n  const [[, firstDomain]] = Object.entries(selectionDomain[0]);\n  return [toNumber(firstDomain[0]), toNumber(firstDomain[1])];\n};\n"],
+  "mappings": "AAAA,SAAS,+BAA+B;AAcxC,MAAM,WAAW,CAAC,UAChB,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI,wBAAwB,KAAK;AAS3E,MAAM,6BAA6B,CAAC,cAAmC;AAErE,QAAM,UAAU,eAAe,YAAY,UAAU,YAAY;AACjE,QAAM,EAAE,IAAI,IAAI,GAAG,IAAI;AAMvB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,+BAA+B,CAC1C,mBACsB;AACtB,SAAO,eAAe;AAAA,IAAQ,CAAC,WAC7B,OAAO,QAAQ,MAAM,EAClB,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AAC3B,YAAM,OAAO,WAAW;AAAA,QAAI,CAAC,cAC3B,2BAA2B,SAAS;AAAA,MACtC;AAEA,UAAI,CAAC,KAAK,QAAQ;AAChB,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC,EACA,OAAO,CAACA,YAAsCA,YAAW,IAAI;AAAA,EAClE;AACF;AAEO,MAAM,uCAAuC,CAClD,oBACqB;AACrB,QAAM,CAAC,CAAC,EAAE,WAAW,CAAC,IAAI,OAAO,QAAQ,gBAAgB,CAAC,CAAC;AAC3D,SAAO,CAAC,SAAS,YAAY,CAAC,CAAC,GAAG,SAAS,YAAY,CAAC,CAAC,CAAC;AAC5D;",
+  "names": ["series"]
+}

package/esm/charts/xy-chart-adoption/histogram/types/slots.js

@@ -0,0 +1 @@
+//# sourceMappingURL=slots.js.map

package/esm/charts/xy-chart-adoption/histogram/types/slots.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/histogram/utils/axis-config-mapping.js

@@ -0,0 +1,15 @@
+function yAxisConfigMapping(axes) {
+  return axes.reduce((result, { position, ...rest }) => {
+    const axisPosition = position === "right" ? "right" : "left";
+    return {
+      ...result,
+      [axisPosition]: {
+        ...rest
+      }
+    };
+  }, {});
+}
+export {
+  yAxisConfigMapping
+};
+//# sourceMappingURL=axis-config-mapping.js.map

package/esm/charts/xy-chart-adoption/histogram/utils/axis-config-mapping.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart-adoption/histogram/utils/axis-config-mapping.ts"],
+  "sourcesContent": ["import type {\n  MappedPositionedAxes,\n  TemporaryHistogramChartYAxisProps,\n} from '../types/slots.js';\n\n/* Only last configuration from each position will be taken, so if there are multiple YAxis with the same position, only the last one will be used.\n */\nexport function yAxisConfigMapping(\n  axes: TemporaryHistogramChartYAxisProps[],\n): MappedPositionedAxes {\n  return axes.reduce<MappedPositionedAxes>((result, { position, ...rest }) => {\n    //Axis position can be undefined. In that case, we treat it as left (the same way is done in Histogram)\n    const axisPosition = position === 'right' ? 'right' : 'left';\n\n    return {\n      ...result,\n      [axisPosition]: {\n        ...rest,\n      },\n    };\n  }, {});\n}\n"],
+  "mappings": "AAOO,SAAS,mBACd,MACsB;AACtB,SAAO,KAAK,OAA6B,CAAC,QAAQ,EAAE,UAAU,GAAG,KAAK,MAAM;AAE1E,UAAM,eAAe,aAAa,UAAU,UAAU;AAEtD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,CAAC,YAAY,GAAG;AAAA,QACd,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/histogram/utils/axis-props-mapping.js

@@ -0,0 +1,11 @@
+import { defineAxisId } from "./define-axis-id.js";
+const buildYAxisProps = (index, unit, axesConfig) => ({
+  ...axesConfig[index % 2 === 0 ? "left" : "right"],
+  position: index % 2 === 0 ? "left" : "right",
+  id: defineAxisId(unit),
+  unit
+});
+export {
+  buildYAxisProps
+};
+//# sourceMappingURL=axis-props-mapping.js.map

package/esm/charts/xy-chart-adoption/histogram/utils/axis-props-mapping.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart-adoption/histogram/utils/axis-props-mapping.ts"],
+  "sourcesContent": ["import { defineAxisId } from './define-axis-id.js';\nimport type { ChartUnit } from '../../../core/types/chart-unit.js';\nimport type { MappedPositionedAxes, YAxisProps } from '../types/slots.js';\n\nexport const buildYAxisProps = (\n  index: number,\n  unit: ChartUnit,\n  axesConfig: MappedPositionedAxes,\n): YAxisProps => ({\n  ...axesConfig[index % 2 === 0 ? 'left' : 'right'],\n  position: index % 2 === 0 ? 'left' : 'right',\n  id: defineAxisId(unit),\n  unit,\n});\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAItB,MAAM,kBAAkB,CAC7B,OACA,MACA,gBACgB;AAAA,EAChB,GAAG,WAAW,QAAQ,MAAM,IAAI,SAAS,OAAO;AAAA,EAChD,UAAU,QAAQ,MAAM,IAAI,SAAS;AAAA,EACrC,IAAI,aAAa,IAAI;AAAA,EACrB;AACF;",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/histogram/utils/define-axis-id.js

@@ -0,0 +1,6 @@
+import { getUnitAsString } from "../../../core/utils/get-unit-as-string.js";
+const defineAxisId = (unit) => `y-axis-${getUnitAsString(unit)}`;
+export {
+  defineAxisId
+};
+//# sourceMappingURL=define-axis-id.js.map

package/esm/charts/xy-chart-adoption/histogram/utils/define-axis-id.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart-adoption/histogram/utils/define-axis-id.ts"],
+  "sourcesContent": ["import type { ChartUnit } from '../../../core/types/chart-unit.js';\nimport { getUnitAsString } from '../../../core/utils/get-unit-as-string.js';\n\n// This function generates a unique ID for each Y-axis based on the unit of measurement.\n// This is crucial for the XY chart adoption in the histogram, as it allows us to correctly associate each data series with its corresponding axis, especially when multiple units are involved.\nexport const defineAxisId = (unit: ChartUnit) =>\n  `y-axis-${getUnitAsString(unit)}`;\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAIzB,MAAM,eAAe,CAAC,SAC3B,UAAU,gBAAgB,IAAI,CAAC;",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/histogram/utils/get-subject-for-series.js

@@ -0,0 +1,23 @@
+import { get, isNil } from "lodash-es";
+import { getAccessor } from "../../../core/utils/getAccessor.js";
+const HISTOGRAM_DEFAULT_VALUE_ACCESSOR = "name";
+const FORBIDDEN_ACCESSORS = /^name$/;
+function getSubjectForSeries(rule, series) {
+  const { valueAccessor } = rule;
+  if (!valueAccessor || FORBIDDEN_ACCESSORS.test(valueAccessor)) {
+    return series.name;
+  }
+  const accessor = getAccessor(valueAccessor);
+  if (accessor) {
+    const value = get(series, accessor);
+    if (!isNil(value)) {
+      return value;
+    }
+  }
+  return null;
+}
+export {
+  HISTOGRAM_DEFAULT_VALUE_ACCESSOR,
+  getSubjectForSeries
+};
+//# sourceMappingURL=get-subject-for-series.js.map

package/esm/charts/xy-chart-adoption/histogram/utils/get-subject-for-series.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart-adoption/histogram/utils/get-subject-for-series.ts"],
+  "sourcesContent": ["import { get, isNil } from 'lodash-es';\n\nimport type { ColorRuleProps } from '../../../core/types/color-rule.js';\nimport { getAccessor } from '../../../core/utils/getAccessor.js';\nimport type { HistogramSeries } from '../../../histogram/types/histogram.js';\n\n// The histogram color rule matching defaults to the series name.\nexport const HISTOGRAM_DEFAULT_VALUE_ACCESSOR = 'name';\n\n// Accessors that must be treated as 'name' (we read .name from the HistogramSeries directly).\nconst FORBIDDEN_ACCESSORS = /^name$/;\n\n/**\n * Extracts the subject value from a HistogramSeries for color rule matching,\n * replicating the histogram's strategy.getSubject behavior.\n *\n * When no valueAccessor is provided (or when it equals \"name\"),\n * the subject defaults to the series name.\n */\nexport function getSubjectForSeries(\n  rule: ColorRuleProps,\n  series: HistogramSeries,\n): unknown {\n  const { valueAccessor } = rule;\n  if (!valueAccessor || FORBIDDEN_ACCESSORS.test(valueAccessor)) {\n    return series.name;\n  }\n\n  const accessor = getAccessor(valueAccessor);\n  if (accessor) {\n    const value = get(series, accessor);\n    if (!isNil(value)) {\n      return value;\n    }\n  }\n  return null;\n}\n"],
+  "mappings": "AAAA,SAAS,KAAK,aAAa;AAG3B,SAAS,mBAAmB;AAIrB,MAAM,mCAAmC;AAGhD,MAAM,sBAAsB;AASrB,SAAS,oBACd,MACA,QACS;AACT,QAAM,EAAE,cAAc,IAAI;AAC1B,MAAI,CAAC,iBAAiB,oBAAoB,KAAK,aAAa,GAAG;AAC7D,WAAO,OAAO;AAAA,EAChB;AAEA,QAAM,WAAW,YAAY,aAAa;AAC1C,MAAI,UAAU;AACZ,UAAM,QAAQ,IAAI,QAAQ,QAAQ;AAClC,QAAI,CAAC,MAAM,KAAK,GAAG;AACjB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/esm/charts/xy-chart-adoption/histogram/utils/resolve-histogram-color-rules.js

@@ -0,0 +1,49 @@
+import { isNil } from "lodash-es";
+import {
+  getSubjectForSeries,
+  HISTOGRAM_DEFAULT_VALUE_ACCESSOR
+} from "./get-subject-for-series.js";
+import { getColorPalette } from "../../../core/utils/get-color-palette.js";
+import {
+  buildValidator,
+  VALUE_MATCHERS
+} from "../../../core/utils/validators.js";
+function resolveHistogramColorRules(seriesData, colorRules) {
+  const isValid = buildValidator(VALUE_MATCHERS);
+  const resolved = [];
+  for (const rule of colorRules) {
+    if (!rule.colorPalette) {
+      resolved.push({
+        ...rule,
+        valueAccessor: rule.valueAccessor ?? HISTOGRAM_DEFAULT_VALUE_ACCESSOR
+      });
+      continue;
+    }
+    let paletteIndex = 0;
+    for (const series of seriesData) {
+      const subject = getSubjectForSeries(rule, series);
+      if (!isNil(subject) && isValid(subject, rule.comparator, rule.matchValue)) {
+        try {
+          const colorToken = getColorPalette(
+            series.name,
+            paletteIndex,
+            rule.colorPalette
+          );
+          resolved.push({
+            comparator: "equals",
+            matchValue: series.name,
+            color: colorToken.Default,
+            valueAccessor: HISTOGRAM_DEFAULT_VALUE_ACCESSOR
+          });
+        } catch {
+        }
+        paletteIndex++;
+      }
+    }
+  }
+  return resolved;
+}
+export {
+  resolveHistogramColorRules
+};
+//# sourceMappingURL=resolve-histogram-color-rules.js.map

package/esm/charts/xy-chart-adoption/histogram/utils/resolve-histogram-color-rules.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart-adoption/histogram/utils/resolve-histogram-color-rules.ts"],
+  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport {\n  getSubjectForSeries,\n  HISTOGRAM_DEFAULT_VALUE_ACCESSOR,\n} from './get-subject-for-series.js';\nimport type {\n  ColorRuleProps,\n  MatchValue,\n} from '../../../core/types/color-rule.js';\nimport { getColorPalette } from '../../../core/utils/get-color-palette.js';\nimport {\n  buildValidator,\n  VALUE_MATCHERS,\n} from '../../../core/utils/validators.js';\nimport type { HistogramSeries } from '../../../histogram/types/histogram.js';\n\n/**\n * Pre-resolves histogram color rules to XY-compatible color-only rules.\n *\n * The histogram assigns palette colors per-series with an incrementing index\n * (each matching series gets the next color from the palette).\n * The XY chart's bar series always picks index 0 for colorPalette rules,\n * so we resolve palettes here to match histogram behavior.\n *\n * Rules with a direct `color` value are passed through unchanged (with the\n * default valueAccessor applied). Rules with `colorPalette` are expanded into\n * one per-series `equals` rule with the resolved color string.\n *\n * Invalid palette names are silently skipped so that partially-typed values\n * in a CodeEditor do not crash the chart.\n */\nexport function resolveHistogramColorRules(\n  seriesData: HistogramSeries[],\n  colorRules: ColorRuleProps[],\n): ColorRuleProps[] {\n  const isValid = buildValidator(VALUE_MATCHERS);\n  const resolved: ColorRuleProps[] = [];\n\n  for (const rule of colorRules) {\n    if (!rule.colorPalette) {\n      resolved.push({\n        ...rule,\n        valueAccessor: rule.valueAccessor ?? HISTOGRAM_DEFAULT_VALUE_ACCESSOR,\n      });\n      continue;\n    }\n\n    // Resolve colorPalette rule: iterate series with incrementing index\n    // to assign different palette colors to each matching series.\n    let paletteIndex = 0;\n    for (const series of seriesData) {\n      const subject = getSubjectForSeries(rule, series);\n      if (\n        !isNil(subject) &&\n        isValid(subject as MatchValue, rule.comparator, rule.matchValue)\n      ) {\n        try {\n          const colorToken = getColorPalette(\n            series.name,\n            paletteIndex,\n            rule.colorPalette,\n          );\n          resolved.push({\n            comparator: 'equals' as const,\n            matchValue: series.name,\n            color: colorToken.Default,\n            valueAccessor: HISTOGRAM_DEFAULT_VALUE_ACCESSOR,\n          });\n        } catch {\n          // Invalid palette name \u2014 skip this rule for this series\n        }\n        paletteIndex++;\n      }\n    }\n  }\n\n  return resolved;\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAKP,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAkBA,SAAS,2BACd,YACA,YACkB;AAClB,QAAM,UAAU,eAAe,cAAc;AAC7C,QAAM,WAA6B,CAAC;AAEpC,aAAW,QAAQ,YAAY;AAC7B,QAAI,CAAC,KAAK,cAAc;AACtB,eAAS,KAAK;AAAA,QACZ,GAAG;AAAA,QACH,eAAe,KAAK,iBAAiB;AAAA,MACvC,CAAC;AACD;AAAA,IACF;AAIA,QAAI,eAAe;AACnB,eAAW,UAAU,YAAY;AAC/B,YAAM,UAAU,oBAAoB,MAAM,MAAM;AAChD,UACE,CAAC,MAAM,OAAO,KACd,QAAQ,SAAuB,KAAK,YAAY,KAAK,UAAU,GAC/D;AACA,YAAI;AACF,gBAAM,aAAa;AAAA,YACjB,OAAO;AAAA,YACP;AAAA,YACA,KAAK;AAAA,UACP;AACA,mBAAS,KAAK;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY,OAAO;AAAA,YACnB,OAAO,WAAW;AAAA,YAClB,eAAe;AAAA,UACjB,CAAC;AAAA,QACH,QAAQ;AAAA,QAER;AACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/content/accordion/Accordion.css

@@ -1,45 +1,45 @@
-._12zc70k0-3-2-1 {
+._12zc70k0-3-3-0 {
   width: 100%;
-  color: var(--_bx32h0-3-2-1);
+  color: var(--_bx32h0-3-3-0);
 }
-._12zc70k1-3-2-1 {
+._12zc70k1-3-3-0 {
   margin: var(--dt-spacings-size-8, 8px) 0;
 }
-._12zc70k2-3-2-1 {
+._12zc70k2-3-3-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }
-._12zc70k3-3-2-1 {
+._12zc70k3-3-3-0 {
   transition-duration: var(--dt-animations-expand-collapse-duration-fast, 250ms);
   transition-timing-function: var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._12zc70k4-3-2-1 {
+._12zc70k4-3-3-0 {
   transform: rotate(-90deg);
 }
-._12zc70k5-3-2-1 {
+._12zc70k5-3-3-0 {
   transform: rotate(90deg);
 }
-._12zc70k6-3-2-1 {
+._12zc70k6-3-3-0 {
   transform: rotate(0);
 }
-._12zc70k7-3-2-1 {
+._12zc70k7-3-3-0 {
   box-sizing: border-box;
   transform-origin: top center;
   display: flex;
 }
-._12zc70k8-3-2-1 {
+._12zc70k8-3-3-0 {
   width: 100%;
   box-sizing: border-box;
-  color: var(--_bx32h0-3-2-1);
+  color: var(--_bx32h0-3-3-0);
 }
-._12zc70k9-3-2-1 {
+._12zc70k9-3-3-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
 }
-._12zc70ka-3-2-1 {
+._12zc70ka-3-3-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
 }
 @media (prefers-reduced-motion) {
-  ._12zc70k3-3-2-1 {
+  ._12zc70k3-3-3-0 {
     transition-duration: 0s;
   }
 }

package/esm/content/accordion/Accordion.sty.js

@@ -1,14 +1,14 @@
 import "../../styles/field.css";
 import "./Accordion.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var accordionContentCSS = _7a468({ defaultClassName: "_12zc70k8-3-2-1", variantClassNames: { size: { "default": "_12zc70k9-3-2-1", condensed: "_12zc70ka-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var accordionContentWrapperCSS = "_12zc70k7-3-2-1";
-var accordionDividerMarginCSS = { "default": "_12zc70k1-3-2-1", condensed: "_12zc70k2-3-2-1" };
-var accordionLabelCSS = "_12zc70k0-3-2-1";
-var accordionTriggerIconCSS = "_12zc70k3-3-2-1";
-var accordionTriggerIconEndCSS = "_12zc70k5-3-2-1";
-var accordionTriggerIconExpandedCSS = "_12zc70k6-3-2-1";
-var accordionTriggerIconStartCSS = "_12zc70k4-3-2-1";
+var accordionContentCSS = _7a468({ defaultClassName: "_12zc70k8-3-3-0", variantClassNames: { size: { "default": "_12zc70k9-3-3-0", condensed: "_12zc70ka-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var accordionContentWrapperCSS = "_12zc70k7-3-3-0";
+var accordionDividerMarginCSS = { "default": "_12zc70k1-3-3-0", condensed: "_12zc70k2-3-3-0" };
+var accordionLabelCSS = "_12zc70k0-3-3-0";
+var accordionTriggerIconCSS = "_12zc70k3-3-3-0";
+var accordionTriggerIconEndCSS = "_12zc70k5-3-3-0";
+var accordionTriggerIconExpandedCSS = "_12zc70k6-3-3-0";
+var accordionTriggerIconStartCSS = "_12zc70k4-3-3-0";
 export {
   accordionContentCSS,
   accordionContentWrapperCSS,

package/esm/content/accordion/Accordion.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/accordion/Accordion.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './Accordion.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var accordionContentCSS = _7a468({defaultClassName:'_12zc70k8-3-2-1',variantClassNames:{size:{'default':'_12zc70k9-3-2-1',condensed:'_12zc70ka-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var accordionContentWrapperCSS = '_12zc70k7-3-2-1';\nexport var accordionDividerMarginCSS = {'default':'_12zc70k1-3-2-1',condensed:'_12zc70k2-3-2-1'};\nexport var accordionLabelCSS = '_12zc70k0-3-2-1';\nexport var accordionTriggerIconCSS = '_12zc70k3-3-2-1';\nexport var accordionTriggerIconEndCSS = '_12zc70k5-3-2-1';\nexport var accordionTriggerIconExpandedCSS = '_12zc70k6-3-2-1';\nexport var accordionTriggerIconStartCSS = '_12zc70k4-3-2-1';"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './Accordion.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var accordionContentCSS = _7a468({defaultClassName:'_12zc70k8-3-3-0',variantClassNames:{size:{'default':'_12zc70k9-3-3-0',condensed:'_12zc70ka-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var accordionContentWrapperCSS = '_12zc70k7-3-3-0';\nexport var accordionDividerMarginCSS = {'default':'_12zc70k1-3-3-0',condensed:'_12zc70k2-3-3-0'};\nexport var accordionLabelCSS = '_12zc70k0-3-3-0';\nexport var accordionTriggerIconCSS = '_12zc70k3-3-3-0';\nexport var accordionTriggerIconEndCSS = '_12zc70k5-3-3-0';\nexport var accordionTriggerIconExpandedCSS = '_12zc70k6-3-3-0';\nexport var accordionTriggerIconStartCSS = '_12zc70k4-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/L,IAAI,6BAA6B;AACjC,IAAI,4BAA4B,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;AACxF,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,6BAA6B;AACjC,IAAI,kCAAkC;AACtC,IAAI,+BAA+B;",
   "names": []
 }

package/esm/content/accordion/AccordionSection.js

@@ -61,6 +61,7 @@ const AccordionSection = /* @__PURE__ */ forwardRef(
         );
       }
     }, []);
+    const dataDtProperties = `state:${isExpanded ? "collapse" : "expand"}`;
     useLayoutEffect(() => {
       updateOverflowWidth();
     }, [updateOverflowWidth, width]);
@@ -79,7 +80,8 @@ const AccordionSection = /* @__PURE__ */ forwardRef(
         "aria-labelledby": labelId,
         "aria-expanded": isExpanded,
         "aria-controls": isExpanded || keepMounted ? contentId : void 0,
-        "data-dt-name": isExpanded ? "SectionCollapseTrigger" : "SectionExpandTrigger",
+        "data-dt-name": "ExpandCollapse",
+        "data-dt-properties": dataDtProperties,
         children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(
           ChevronDownSmallIcon,
           {
@@ -136,7 +138,8 @@ const AccordionSection = /* @__PURE__ */ forwardRef(
                     cursor: interactive && !disabled ? "pointer" : void 0,
                     width: `calc(100% - ${offsetWidth}px)`
                   },
-                  "data-dt-name": isExpanded ? "SectionCollapseHeader" : "SectionExpandHeader",
+                  "data-dt-name": "ExpandCollapseHeader",
+                  "data-dt-properties": dataDtProperties,
                   children: [
                     triggerIsStart && trigger,
                     slots.label,

package/esm/content/accordion/AccordionSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/accordion/AccordionSection.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n  useRef,\n  useState,\n  useCallback,\n  useLayoutEffect,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { AccordionActions } from './accordion-state.js';\nimport {\n  accordionTriggerIconCSS,\n  accordionTriggerIconEndCSS,\n  accordionTriggerIconExpandedCSS,\n  accordionTriggerIconStartCSS,\n} from './Accordion.sty.js';\nimport { AccordionSectionContent } from './AccordionSectionContent.js';\nimport { AccordionSectionLabel } from './AccordionSectionLabel.js';\nimport { useAccordionContext } from './contexts/AccordionContext.js';\nimport { AccordionSectionContext } from './contexts/AccordionSectionContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\n\n// #region Typings\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AccordionSectionProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, AccordionSectionOwnProps>,\n  'id'\n> &\n  Pick<AccordionSectionOwnProps, 'id'>;\n\n/** @public */\nexport interface AccordionSectionOwnProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Determines whether the section is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Unique identifier of a section within an accordion.\n   * This type will be reduced to string in version 2.0.0 and its value will be reflected in the\n   * dom.\n   */\n  id: string | number;\n\n  /**\n   * Unique identifier of a section within an accordion. This will be used as an override and will function\n   * as the sole identifier in version 2.0.0.\n   */\n  sectionId?: string | number;\n\n  /**\n   * Defines if the sections content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n\n  /**\n   * The color of the accordion section.\n   * Setting the color affects the button, label and content.\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n}\n\n//#endregion Typings\n\n/**\n * Accordion Section component\n * @public\n */\nexport const AccordionSection: <E extends ElementType = 'div'>(\n  props: AccordionSectionProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: AccordionSectionProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      disabled = false,\n      id: idProp,\n      sectionId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      keepMounted = false,\n      'data-testid': dataTestId,\n      as,\n      ...remainingProps\n    }: AccordionSectionProps<E> = props;\n\n    const [slots] = useSlots(children, {\n      label: AccordionSectionLabel,\n      content: AccordionSectionContent,\n    });\n    const { triggerPosition, interactive, color, size, state, dispatch } =\n      useAccordionContext();\n\n    const sectionColor = props.color ?? color;\n\n    const triggerId = useId();\n    const contentId = useId();\n    const triggerIsStart = triggerPosition === 'start';\n    const id = sectionId ?? idProp;\n\n    const isExpanded = state.expanded.has(id);\n\n    const labelId = useId();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { width } = useResizeObserver({ ref: containerRef.current });\n    const [offsetWidth, setOffsetWidth] = useState(0);\n\n    const updateOverflowWidth = useCallback(() => {\n      if (containerRef.current) {\n        setOffsetWidth(\n          containerRef.current.scrollWidth - containerRef.current.offsetWidth,\n        );\n      }\n    }, []);\n\n    useLayoutEffect(() => {\n      updateOverflowWidth();\n    }, [updateOverflowWidth, width]);\n\n    const trigger = (\n      <Button\n        id={triggerId}\n        onClick={() => {\n          if (!interactive) {\n            dispatch({ type: AccordionActions.TOGGLE_SECTION, payload: id });\n          }\n        }}\n        color={sectionColor}\n        size={size}\n        disabled={disabled}\n        aria-labelledby={labelId}\n        aria-expanded={isExpanded}\n        aria-controls={isExpanded || keepMounted ? contentId : undefined}\n        data-dt-name={\n          isExpanded ? 'SectionCollapseTrigger' : 'SectionExpandTrigger'\n        }\n      >\n        <Button.Prefix>\n          <ChevronDownSmallIcon\n            className={clsx(accordionTriggerIconCSS, {\n              [accordionTriggerIconStartCSS]: triggerIsStart,\n              [accordionTriggerIconEndCSS]: !triggerIsStart,\n              [accordionTriggerIconExpandedCSS]: isExpanded,\n            })}\n          />\n        </Button.Prefix>\n      </Button>\n    );\n\n    const Section: ElementType = as ?? 'div';\n\n    return (\n      <Section\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={clsx(\n          fieldColorsCSS({ color: sectionColor }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {(slots.label || slots.content) && (\n          <AccordionSectionContext.Provider\n            value={{\n              labelId,\n              contentId,\n              isExpanded,\n              keepMounted,\n              size,\n            }}\n          >\n            <Flex\n              ref={containerRef}\n              flexDirection=\"row\"\n              alignItems=\"center\"\n              justifyContent={triggerIsStart ? undefined : 'space-between'}\n              gap={size === 'default' ? 8 : 4}\n              id={labelId}\n              onClick={() => {\n                if (interactive && !disabled) {\n                  dispatch({\n                    type: AccordionActions.TOGGLE_SECTION,\n                    payload: id,\n                  });\n                }\n              }}\n              style={{\n                cursor: interactive && !disabled ? 'pointer' : undefined,\n                width: `calc(100% - ${offsetWidth}px)`,\n              }}\n              data-dt-name={\n                isExpanded ? 'SectionCollapseHeader' : 'SectionExpandHeader'\n              }\n            >\n              {triggerIsStart && trigger}\n              {slots.label}\n              {!triggerIsStart && trigger}\n            </Flex>\n            {slots.content}\n          </AccordionSectionContext.Provider>\n        )}\n      </Section>\n    );\n  },\n);\n\n(\n  AccordionSection as typeof AccordionSection & { displayName: string }\n).displayName = 'Accordion.Section';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n  useRef,\n  useState,\n  useCallback,\n  useLayoutEffect,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { AccordionActions } from './accordion-state.js';\nimport {\n  accordionTriggerIconCSS,\n  accordionTriggerIconEndCSS,\n  accordionTriggerIconExpandedCSS,\n  accordionTriggerIconStartCSS,\n} from './Accordion.sty.js';\nimport { AccordionSectionContent } from './AccordionSectionContent.js';\nimport { AccordionSectionLabel } from './AccordionSectionLabel.js';\nimport { useAccordionContext } from './contexts/AccordionContext.js';\nimport { AccordionSectionContext } from './contexts/AccordionSectionContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\n\n// #region Typings\n// Merge own props with others inherited from the underlying element type\n/** @public */\nexport type AccordionSectionProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, AccordionSectionOwnProps>,\n  'id'\n> &\n  Pick<AccordionSectionOwnProps, 'id'>;\n\n/** @public */\nexport interface AccordionSectionOwnProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Determines whether the section is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Unique identifier of a section within an accordion.\n   * This type will be reduced to string in version 2.0.0 and its value will be reflected in the\n   * dom.\n   */\n  id: string | number;\n\n  /**\n   * Unique identifier of a section within an accordion. This will be used as an override and will function\n   * as the sole identifier in version 2.0.0.\n   */\n  sectionId?: string | number;\n\n  /**\n   * Defines if the sections content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n\n  /**\n   * The color of the accordion section.\n   * Setting the color affects the button, label and content.\n   */\n  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n}\n\n//#endregion Typings\n\n/**\n * Accordion Section component\n * @public\n */\nexport const AccordionSection: <E extends ElementType = 'div'>(\n  props: AccordionSectionProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: AccordionSectionProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      disabled = false,\n      id: idProp,\n      sectionId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      keepMounted = false,\n      'data-testid': dataTestId,\n      as,\n      ...remainingProps\n    }: AccordionSectionProps<E> = props;\n\n    const [slots] = useSlots(children, {\n      label: AccordionSectionLabel,\n      content: AccordionSectionContent,\n    });\n    const { triggerPosition, interactive, color, size, state, dispatch } =\n      useAccordionContext();\n\n    const sectionColor = props.color ?? color;\n\n    const triggerId = useId();\n    const contentId = useId();\n    const triggerIsStart = triggerPosition === 'start';\n    const id = sectionId ?? idProp;\n\n    const isExpanded = state.expanded.has(id);\n\n    const labelId = useId();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { width } = useResizeObserver({ ref: containerRef.current });\n    const [offsetWidth, setOffsetWidth] = useState(0);\n\n    const updateOverflowWidth = useCallback(() => {\n      if (containerRef.current) {\n        setOffsetWidth(\n          containerRef.current.scrollWidth - containerRef.current.offsetWidth,\n        );\n      }\n    }, []);\n\n    const dataDtProperties = `state:${isExpanded ? 'collapse' : 'expand'}`;\n\n    useLayoutEffect(() => {\n      updateOverflowWidth();\n    }, [updateOverflowWidth, width]);\n\n    const trigger = (\n      <Button\n        id={triggerId}\n        onClick={() => {\n          if (!interactive) {\n            dispatch({ type: AccordionActions.TOGGLE_SECTION, payload: id });\n          }\n        }}\n        color={sectionColor}\n        size={size}\n        disabled={disabled}\n        aria-labelledby={labelId}\n        aria-expanded={isExpanded}\n        aria-controls={isExpanded || keepMounted ? contentId : undefined}\n        data-dt-name=\"ExpandCollapse\"\n        data-dt-properties={dataDtProperties}\n      >\n        <Button.Prefix>\n          <ChevronDownSmallIcon\n            className={clsx(accordionTriggerIconCSS, {\n              [accordionTriggerIconStartCSS]: triggerIsStart,\n              [accordionTriggerIconEndCSS]: !triggerIsStart,\n              [accordionTriggerIconExpandedCSS]: isExpanded,\n            })}\n          />\n        </Button.Prefix>\n      </Button>\n    );\n\n    const Section: ElementType = as ?? 'div';\n\n    return (\n      <Section\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        className={clsx(\n          fieldColorsCSS({ color: sectionColor }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {(slots.label || slots.content) && (\n          <AccordionSectionContext.Provider\n            value={{\n              labelId,\n              contentId,\n              isExpanded,\n              keepMounted,\n              size,\n            }}\n          >\n            <Flex\n              ref={containerRef}\n              flexDirection=\"row\"\n              alignItems=\"center\"\n              justifyContent={triggerIsStart ? undefined : 'space-between'}\n              gap={size === 'default' ? 8 : 4}\n              id={labelId}\n              onClick={() => {\n                if (interactive && !disabled) {\n                  dispatch({\n                    type: AccordionActions.TOGGLE_SECTION,\n                    payload: id,\n                  });\n                }\n              }}\n              style={{\n                cursor: interactive && !disabled ? 'pointer' : undefined,\n                width: `calc(100% - ${offsetWidth}px)`,\n              }}\n              data-dt-name=\"ExpandCollapseHeader\"\n              data-dt-properties={dataDtProperties}\n            >\n              {triggerIsStart && trigger}\n              {slots.label}\n              {!triggerIsStart && trigger}\n            </Flex>\n            {slots.content}\n          </AccordionSectionContext.Provider>\n        )}\n      </Section>\n    );\n  },\n);\n\n(\n  AccordionSection as typeof AccordionSection & { displayName: string }\n).displayName = 'Accordion.Section';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/ai-loading-indicator/AiLoadingIndicator.css

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-2-1 {
+@keyframes _1te6oqj4-3-3-0 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-2-1 {
-  --_1te6oqj0-3-2-1: #CB53F6;
-  --_1te6oqj1-3-2-1: #7FF8F9;
-  --_1te6oqj2-3-2-1: 15%;
-  --_1te6oqj3-3-2-1: 5%;
+._1te6oqj5-3-3-0 {
+  --_1te6oqj0-3-3-0: #CB53F6;
+  --_1te6oqj1-3-3-0: #7FF8F9;
+  --_1te6oqj2-3-3-0: 15%;
+  --_1te6oqj3-3-3-0: 5%;
   position: relative;
-  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-2-1) 0%, var(--_1te6oqj1-3-2-1) 100%);
+  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-3-0) 0%, var(--_1te6oqj1-3-3-0) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-2-1;
+  animation-name: _1te6oqj4-3-3-0;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-iteration-count: infinite;
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1te6oqj6-3-2-1 {
+._1te6oqj6-3-3-0 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-2-1 {
+._1te6oqj7-3-3-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,12 +34,12 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-2-1 svg {
+._1te6oqj7-3-3-0 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-2-1 {
+._1te6oqj8-3-3-0 {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;

package/esm/content/ai-loading-indicator/AiLoadingIndicator.sty.js

@@ -1,8 +1,8 @@
 import "./AiLoadingIndicator.css";
-var container = "_1te6oqj8-3-2-1";
-var iconWrapper = "_1te6oqj7-3-2-1";
-var label = "_1te6oqj6-3-2-1";
-var labelAnimation = "_1te6oqj5-3-2-1";
+var container = "_1te6oqj8-3-3-0";
+var iconWrapper = "_1te6oqj7-3-3-0";
+var label = "_1te6oqj6-3-3-0";
+var labelAnimation = "_1te6oqj5-3-3-0";
 export {
   container,
   iconWrapper,

package/esm/content/ai-loading-indicator/AiLoadingIndicator.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-loading-indicator/AiLoadingIndicator.css.ts"],
-  "sourcesContent": ["import './AiLoadingIndicator.css';\nexport var container = '_1te6oqj8-3-2-1';\nexport var iconWrapper = '_1te6oqj7-3-2-1';\nexport var label = '_1te6oqj6-3-2-1';\nexport var labelAnimation = '_1te6oqj5-3-2-1';"],
+  "sourcesContent": ["import './AiLoadingIndicator.css';\nexport var container = '_1te6oqj8-3-3-0';\nexport var iconWrapper = '_1te6oqj7-3-3-0';\nexport var label = '_1te6oqj6-3-3-0';\nexport var labelAnimation = '_1te6oqj5-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,cAAc;AAClB,IAAI,QAAQ;AACZ,IAAI,iBAAiB;",
   "names": []
 }

package/esm/content/ai-response/AiResponse.css

@@ -6,20 +6,20 @@
     opacity: 1;
   }
 }
-._jdyvf80-3-2-1 {
+._jdyvf80-3-3-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-2-1 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-3-0 [data-sd-animate]:not(table [data-sd-animate]) {
   animation: var(--sd-animation, sd-aiResponseAnimation) var(--sd-duration, 200ms) var(--sd-easing, ease) both;
 }
-._jdyvf80-3-2-1 ._17pa72a0-3-2-1 {
+._jdyvf80-3-3-0 ._17pa72a0-3-3-0 {
   margin-bottom: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
   margin-top: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
 }
-._jdyvf81-3-2-1 > :first-child {
+._jdyvf81-3-3-0 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-2-1 > :last-child {
+._jdyvf81-3-3-0 > :last-child {
   margin-bottom: 0;
 }

package/esm/content/ai-response/AiResponse.sty.js

@@ -1,7 +1,7 @@
 import "../code-snippet/CodeSnippet.css";
 import "./AiResponse.css";
-var streamdown = "_jdyvf81-3-2-1";
-var wrapper = "_jdyvf80-3-2-1";
+var streamdown = "_jdyvf81-3-3-0";
+var wrapper = "_jdyvf80-3-3-0";
 export {
   streamdown,
   wrapper

package/esm/content/ai-response/AiResponse.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/ai-response/AiResponse.css.ts"],
-  "sourcesContent": ["import '../code-snippet/CodeSnippet.css';\nimport './AiResponse.css';\nexport var streamdown = '_jdyvf81-3-2-1';\nexport var wrapper = '_jdyvf80-3-2-1';"],
+  "sourcesContent": ["import '../code-snippet/CodeSnippet.css';\nimport './AiResponse.css';\nexport var streamdown = '_jdyvf81-3-3-0';\nexport var wrapper = '_jdyvf80-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,UAAU;",
   "names": []
 }