@dynatrace/strato-components 3.3.2 → 3.4.0

package/charts/xy-chart-adoption/histogram/HistogramToXY.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -27,10 +26,14 @@ var import_use_histogram_to_xy_color_rules = require("./hooks/use-histogram-to-x
 var import_iterate_histogram_slots = require("./iterate-histogram-slots.js");
 var import_transformer_data_to_xy = require("./transformer-data-to-xy.js");
 var import_transformer_selection_to_histogram = require("./transformer-selection-to-histogram.js");
+var import_transformer_series_actions_to_xy = require("./transformer-series-actions-to-xy.js");
 var import_axis_config_mapping = require("./utils/axis-config-mapping.js");
 var import_axis_props_mapping = require("./utils/axis-props-mapping.js");
 var import_define_axis_id = require("./utils/define-axis-id.js");
+var import_format_csv = require("./utils/format-csv.js");
+var import_download = require("../../../core/utils/download.js");
 var import_get_chart_states_template = require("../../core/components/chart-states/utils/get-chart-states-template.js");
+var import_constants = require("../../core/constants.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
 const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -44,18 +47,20 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
     colorPalette,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
-    truncationMode
+    truncationMode,
+    seriesActions
   } = props;
   const {
     yAxis,
     xAxis,
     disableZoom,
     disablePan,
-    hideLegend,
+    legend,
     selectActions,
     colorRules,
     toolbar,
-    deprecatedToolbar
+    deprecatedToolbar,
+    intents
   } = (0, import_iterate_histogram_slots.iterateHistogramSlots)(children);
   const { barSeriesProps, units, seriesColors } = (0, import_transformer_data_to_xy.transformHistogramDataToXYChart)(propsData);
   const allColorRules = (0, import_use_histogram_to_xy_color_rules.useHistogramToXYColorRules)({
@@ -65,6 +70,14 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
   });
   const yAxesConfig = (0, import_axis_config_mapping.yAxisConfigMapping)(yAxis);
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(children);
+  const downloadDataCallback = (0, import_react.useCallback)(() => {
+    const csvString = (0, import_format_csv.formatCSV)(propsData);
+    (0, import_download.downloadCSV)(csvString, import_constants.CSS_DOWNLOAD_FILENAME);
+  }, [propsData]);
+  const mappedSeriesActions = (0, import_react.useMemo)(
+    () => seriesActions ? (0, import_transformer_series_actions_to_xy.mapHistogramSeriesActionsToXY)(seriesActions, propsData) : void 0,
+    [seriesActions, propsData]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_XYChartRoot.XYChart,
     {
@@ -79,6 +92,7 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       truncationMode,
+      __downloadDataCallback: downloadDataCallback,
       children: [
         errorState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ErrorState, { children: errorState }),
         emptyState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.EmptyState, { children: emptyState }),
@@ -102,7 +116,8 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
             y1Accessor: "y1",
             variant: "stack",
             seriesIdAccessor: "seriesId",
-            nameAccessor: "name"
+            nameAccessor: "name",
+            actions: mappedSeriesActions
           },
           index
         )),
@@ -110,7 +125,7 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
           import_XYChartRoot.XYChart.XAxis,
           {
             id: "x-axis",
-            type: "numerical",
+            type: xAxis.scale === "log" ? "log" : "numerical",
             position: "bottom",
             disableZoom,
             disablePan,
@@ -125,13 +140,12 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_XYChartRoot.XYChart.YAxis,
             {
-              type: "numerical",
               ...(0, import_axis_props_mapping.buildYAxisProps)(index, unit, yAxesConfig)
             },
             (0, import_define_axis_id.defineAxisId)(unit)
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: hideLegend }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { ...legend }),
         allColorRules.map((rule) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_XYChartRoot.XYChart.ColorRule,
           {
@@ -140,7 +154,8 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
           `${rule.comparator}-${rule.matchValue}-${rule.valueAccessor}`
         )),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: toolbar.hidden, placement: toolbar.placement }),
-        deprecatedToolbar.enabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { placement: deprecatedToolbar.placement })
+        deprecatedToolbar.enabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { placement: deprecatedToolbar.placement }),
+        intents?.map((intentProps, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Intent, { ...intentProps }, index))
       ]
     }
   );

package/charts/xy-chart-adoption/histogram/hooks/use-histogram-to-xy-color-rules.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/charts/xy-chart-adoption/histogram/iterate-histogram-slots.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,6 +21,7 @@ __export(iterate_histogram_slots_exports, {
 });
 module.exports = __toCommonJS(iterate_histogram_slots_exports);
 var import_react = require("react");
+var import_Intent = require("../../../core/slots/Intent/Intent.js");
 var import_is_slot = require("../../../core/utils/is-slot.js");
 var import_ColorRule = require("../../core/slots/ColorRule.js");
 var import_ChartToolbar = require("../../core/slots/toolbar/ChartToolbar.js");
@@ -35,8 +35,9 @@ var import_Zoom = require("../../histogram/slots/Zoom.js");
 const iterateHistogramSlots = (children) => {
   let disableZoom = false;
   let disablePan = false;
-  let hideLegend = false;
+  let legend = {};
   let selectActions;
+  let intents;
   const colorRules = [];
   const yAxis = [];
   let xAxis = {};
@@ -48,7 +49,7 @@ const iterateHistogramSlots = (children) => {
     } else if ((0, import_is_slot.isSlot)(child, import_Pan.Pan)) {
       disablePan = child.props.disabled === true;
     } else if ((0, import_is_slot.isSlot)(child, import_Legend.Legend)) {
-      hideLegend = child.props.hidden === true;
+      legend = { ...child.props };
     } else if ((0, import_is_slot.isSlot)(child, import_YAxis.YAxis)) {
       yAxis.push({
         ...child.props
@@ -63,6 +64,8 @@ const iterateHistogramSlots = (children) => {
       if ((0, import_ColorRule.isValidColorRule)(child.props)) {
         colorRules.push(child.props);
       }
+    } else if ((0, import_is_slot.isSlot)(child, import_Intent.Intent)) {
+      intents = intents ? [...intents, child.props] : [child.props];
     } else if ((0, import_is_slot.isSlot)(child, import_Toolbar.Toolbar)) {
       toolbar = child.props;
     } else if ((0, import_is_slot.isSlot)(child, import_ChartToolbar.ChartToolbar)) {
@@ -75,7 +78,7 @@ const iterateHistogramSlots = (children) => {
   const interactionSlots = {
     disableZoom,
     disablePan,
-    hideLegend,
+    legend,
     yAxis,
     xAxis,
     colorRules,
@@ -85,5 +88,8 @@ const iterateHistogramSlots = (children) => {
   if (selectActions) {
     interactionSlots.selectActions = selectActions;
   }
+  if (intents) {
+    interactionSlots.intents = intents;
+  }
   return interactionSlots;
 };

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/charts/xy-chart-adoption/histogram/transformer-series-actions-to-xy.d.ts

@@ -0,0 +1,11 @@
+import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
+import type { HistogramChartProps } from '../../histogram/types/histogram-props.js';
+import type { HistogramSeries } from '../../histogram/types/histogram.js';
+import type { XYChartBarSeries, XYChartBarSeriesActionItem } from '../../xy-chart/types/xy-chart.js';
+/**
+ * Maps the Histogram `seriesActions` callback to the XYChart BarSeries `actions` callback.
+ *
+ * Translates XYChart bar datapoint and series information back into
+ * HistogramSeries and HistogramBin types before invoking the original callback.
+ */
+export declare function mapHistogramSeriesActionsToXY(seriesActions: NonNullable<HistogramChartProps['seriesActions']>, originalData: HistogramSeries[]): (datapoint: XYChartBarSeriesActionItem, series?: XYChartBarSeries) => SeriesActionsTemplate;

package/charts/{categorical-bar/hooks/useCategoricalBarChartLoading.js → xy-chart-adoption/histogram/transformer-series-actions-to-xy.js}

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -16,11 +15,24 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useCategoricalBarChartLoading_exports = {};
-__export(useCategoricalBarChartLoading_exports, {
-  useCategoricalBarChartLoading: () => useCategoricalBarChartLoading
+var transformer_series_actions_to_xy_exports = {};
+__export(transformer_series_actions_to_xy_exports, {
+  mapHistogramSeriesActionsToXY: () => mapHistogramSeriesActionsToXY
 });
-module.exports = __toCommonJS(useCategoricalBarChartLoading_exports);
-var import_react = require("react");
-var import_CategoricalBarChartLoading = require("../contexts/CategoricalBarChartLoading.js");
-const useCategoricalBarChartLoading = () => (0, import_react.useContext)(import_CategoricalBarChartLoading.CategoricalBarChartLoading);
+module.exports = __toCommonJS(transformer_series_actions_to_xy_exports);
+function mapHistogramSeriesActionsToXY(seriesActions, originalData) {
+  return (datapoint, _series) => {
+    const bin = {
+      from: datapoint.datapoint.x0,
+      to: datapoint.datapoint.x1,
+      value: datapoint.datapoint.y1
+    };
+    const histogramSeries = originalData.find(
+      (s) => s.name === datapoint.name
+    ) ?? {
+      name: datapoint.name,
+      bins: [bin]
+    };
+    return seriesActions(histogramSeries, bin);
+  };
+}

package/charts/xy-chart-adoption/histogram/types/histogram.d.ts

@@ -0,0 +1,33 @@
+import type { ChartUnit } from '../../../core/types/chart-unit.js';
+export interface HistogramBin {
+    /**
+     * The start of the bin or bucket
+     */
+    from: number;
+    /**
+     * The end of the bin or bucket
+     */
+    to: number;
+    /**
+     * The value, better known as "frequency"
+     */
+    value: number;
+}
+export interface HistogramSeries {
+    /**
+     * The histogram series data to be graphed by the component
+     */
+    bins: HistogramBin[];
+    /**
+     * The name for the histogram series
+     */
+    name: string;
+    /**
+     * Unit token for the values in the y-axis of the histogram series
+     */
+    unit?: ChartUnit;
+    /**
+     * The color to be applied to the series
+     */
+    color?: string;
+}

package/charts/{pie/components/PieChartTooltip/components/PieChartTooltipBody.sty.js → xy-chart-adoption/histogram/types/histogram.js}

@@ -1,12 +1,7 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,10 +11,5 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var PieChartTooltipBody_css_exports = {};
-__export(PieChartTooltipBody_css_exports, {
-  container: () => container
-});
-module.exports = __toCommonJS(PieChartTooltipBody_css_exports);
-var import_PieChartTooltipBody_css_ts_vanilla = require("./PieChartTooltipBody.css");
-var container = "_spoth0-3-3-2";
+var histogram_exports = {};
+module.exports = __toCommonJS(histogram_exports);

package/charts/xy-chart-adoption/histogram/types/slots.d.ts

@@ -1,28 +1,29 @@
+import type { IntentProps } from '../../../../core/slots/Intent/Intent.js';
 import type { ColorRuleProps } from '../../../core/types/color-rule.js';
+import type { LegendProps } from '../../../core/types/legend.js';
 import type { SelectProps } from '../../../histogram/slots/Select.js';
 import type { HistogramChartToolbarProps, HistogramChartXAxisProps, HistogramChartYAxisProps } from '../../../histogram/types/histogram-props.js';
 import type { HistogramToolbarSlotProps } from '../../../histogram/types/toolbar.js';
-import type { XYChartNumericalAxisProps } from '../../../xy-chart/types/xy-chart-props.js';
+import type { XYChartLogAxisProps, XYChartNumericalAxisProps } from '../../../xy-chart/types/xy-chart-props.js';
 import type { LEFT_POSITION, RIGHT_POSITION } from '../../../xy-chart/types/xy-chart.js';
 export interface HistogramSlots {
     disableZoom: boolean;
     disablePan: boolean;
-    hideLegend: boolean;
+    legend: LegendProps;
     selectActions?: SelectProps['actions'];
     colorRules: ColorRuleProps[];
-    yAxis: TemporaryHistogramChartYAxisProps[];
-    xAxis: TemporaryHistogramChartXAxisProps;
+    yAxis: HistogramChartYAxisProps[];
+    xAxis: HistogramChartXAxisProps;
     toolbar: HistogramToolbarSlotProps;
     deprecatedToolbar: HistogramChartToolbarProps;
+    intents?: IntentProps[];
 }
 export type MappedPositionedAxes = {
     left?: Omit<YAxisProps, 'id'>;
     right?: Omit<YAxisProps, 'id'>;
 };
-export type TemporaryHistogramChartYAxisProps = Pick<HistogramChartYAxisProps, 'min' | 'max' | 'position' | 'formatter'>;
-export type TemporaryHistogramChartXAxisProps = Pick<HistogramChartXAxisProps, 'min' | 'max' | 'formatter' | 'unit'>;
 export type YAxisPosition = typeof LEFT_POSITION | typeof RIGHT_POSITION;
-export type YAxisProps = Pick<XYChartNumericalAxisProps, 'id' | 'min' | 'max' | 'formatter' | 'unit'> & {
+export type YAxisProps = Pick<XYChartNumericalAxisProps | XYChartLogAxisProps, 'id' | 'min' | 'max' | 'formatter' | 'unit' | 'type' | 'label'> & {
     position: YAxisPosition;
 };
-export type XAxisProps = Pick<XYChartNumericalAxisProps, 'min' | 'max' | 'unit'>;
+export type XAxisProps = Pick<XYChartNumericalAxisProps | XYChartLogAxisProps, 'min' | 'max' | 'unit' | 'type' | 'label'>;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/charts/xy-chart-adoption/histogram/utils/axis-config-mapping.d.ts

@@ -1,2 +1,3 @@
-import type { MappedPositionedAxes, TemporaryHistogramChartYAxisProps } from '../types/slots.js';
-export declare function yAxisConfigMapping(axes: TemporaryHistogramChartYAxisProps[]): MappedPositionedAxes;
+import type { HistogramChartYAxisProps } from '../../../histogram/types/histogram-props.js';
+import type { MappedPositionedAxes } from '../types/slots.js';
+export declare function yAxisConfigMapping(axes: HistogramChartYAxisProps[]): MappedPositionedAxes;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -27,7 +26,8 @@ function yAxisConfigMapping(axes) {
     return {
       ...result,
       [axisPosition]: {
-        ...rest
+        ...rest,
+        type: rest.scale === "log" ? "log" : "numerical"
       }
     };
   }, {});

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,9 +21,14 @@ __export(axis_props_mapping_exports, {
 });
 module.exports = __toCommonJS(axis_props_mapping_exports);
 var import_define_axis_id = require("./define-axis-id.js");
-const buildYAxisProps = (index, unit, axesConfig) => ({
-  ...axesConfig[index % 2 === 0 ? "left" : "right"],
-  position: index % 2 === 0 ? "left" : "right",
-  id: (0, import_define_axis_id.defineAxisId)(unit),
-  unit
-});
+const buildYAxisProps = (index, unit, axesConfig) => {
+  const position = index % 2 === 0 ? "left" : "right";
+  const axisConfig = axesConfig[position];
+  return {
+    ...axisConfig,
+    type: axisConfig?.type ?? "numerical",
+    position,
+    id: (0, import_define_axis_id.defineAxisId)(unit),
+    unit
+  };
+};

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/charts/xy-chart-adoption/histogram/utils/format-csv.d.ts

@@ -0,0 +1,2 @@
+import type { HistogramSeries } from '../types/histogram.js';
+export declare function formatCSV(rawData: HistogramSeries[]): string;

package/charts/xy-chart-adoption/histogram/utils/format-csv.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var format_csv_exports = {};
+__export(format_csv_exports, {
+  formatCSV: () => formatCSV
+});
+module.exports = __toCommonJS(format_csv_exports);
+var import_download = require("../../../../core/utils/download.js");
+var import_get_unit_as_string = require("../../../core/utils/get-unit-as-string.js");
+function formatCSV(rawData) {
+  const columns = ["name", "unit", "from", "to", "value"];
+  const binsColumns = columns.slice(columns.indexOf("from"));
+  let csv = `${columns.join(",")}
+`;
+  for (const series of rawData) {
+    const sanitizedSeriesName = (0, import_download.escapeForCSV)(series.name);
+    const seriesRow = [sanitizedSeriesName, (0, import_get_unit_as_string.getUnitAsString)(series.unit)];
+    for (const bins of series.bins) {
+      const binsRow = [];
+      for (const column of binsColumns) {
+        const value = bins[column];
+        const parsedValue = value?.toString() ?? "";
+        binsRow.push(parsedValue);
+      }
+      csv += `${seriesRow.concat(binsRow).join(",")}
+`;
+    }
+  }
+  return csv;
+}

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/charts/xy-chart-adoption/types/props.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/content/accordion/Accordion.css

@@ -1,45 +1,45 @@
-._12zc70k0-3-3-2 {
+._12zc70k0-3-4-0 {
   width: 100%;
-  color: var(--_bx32h0-3-3-2);
+  color: var(--_bx32h0-3-4-0);
 }
-._12zc70k1-3-3-2 {
+._12zc70k1-3-4-0 {
   margin: var(--dt-spacings-size-8, 8px) 0;
 }
-._12zc70k2-3-3-2 {
+._12zc70k2-3-4-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }
-._12zc70k3-3-3-2 {
+._12zc70k3-3-4-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-3-2 {
+._12zc70k4-3-4-0 {
   transform: rotate(-90deg);
 }
-._12zc70k5-3-3-2 {
+._12zc70k5-3-4-0 {
   transform: rotate(90deg);
 }
-._12zc70k6-3-3-2 {
+._12zc70k6-3-4-0 {
   transform: rotate(0);
 }
-._12zc70k7-3-3-2 {
+._12zc70k7-3-4-0 {
   box-sizing: border-box;
   transform-origin: top center;
   display: flex;
 }
-._12zc70k8-3-3-2 {
+._12zc70k8-3-4-0 {
   width: 100%;
   box-sizing: border-box;
-  color: var(--_bx32h0-3-3-2);
+  color: var(--_bx32h0-3-4-0);
 }
-._12zc70k9-3-3-2 {
+._12zc70k9-3-4-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
 }
-._12zc70ka-3-3-2 {
+._12zc70ka-3-4-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
 }
 @media (prefers-reduced-motion) {
-  ._12zc70k3-3-3-2 {
+  ._12zc70k3-3-4-0 {
     transition-duration: 0s;
   }
 }

package/content/accordion/Accordion.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/content/accordion/Accordion.sty.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -28,14 +27,15 @@ __export(Accordion_css_exports, {
   accordionTriggerIconStartCSS: () => accordionTriggerIconStartCSS
 });
 module.exports = __toCommonJS(Accordion_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Accordion_css_ts_vanilla = require("./Accordion.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-3-2", variantClassNames: { size: { "default": "_12zc70k9-3-3-2", condensed: "_12zc70ka-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
-var accordionContentWrapperCSS = "_12zc70k7-3-3-2";
-var accordionDividerMarginCSS = { "default": "_12zc70k1-3-3-2", condensed: "_12zc70k2-3-3-2" };
-var accordionLabelCSS = "_12zc70k0-3-3-2";
-var accordionTriggerIconCSS = "_12zc70k3-3-3-2";
-var accordionTriggerIconEndCSS = "_12zc70k5-3-3-2";
-var accordionTriggerIconExpandedCSS = "_12zc70k6-3-3-2";
-var accordionTriggerIconStartCSS = "_12zc70k4-3-3-2";
+var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-4-0", variantClassNames: { size: { "default": "_12zc70k9-3-4-0", condensed: "_12zc70ka-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var accordionContentWrapperCSS = "_12zc70k7-3-4-0";
+var accordionDividerMarginCSS = { "default": "_12zc70k1-3-4-0", condensed: "_12zc70k2-3-4-0" };
+var accordionLabelCSS = "_12zc70k0-3-4-0";
+var accordionTriggerIconCSS = "_12zc70k3-3-4-0";
+var accordionTriggerIconEndCSS = "_12zc70k5-3-4-0";
+var accordionTriggerIconExpandedCSS = "_12zc70k6-3-4-0";
+var accordionTriggerIconStartCSS = "_12zc70k4-3-4-0";

package/content/accordion/AccordionSection.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -123,7 +122,7 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         ref: forwardedRef,
         className: (0, import_clsx.default)(
-          (0, import_field_css.fieldColors)({ color: sectionColor }),
+          (0, import_field_css.fieldTokens)({ color: sectionColor }),
           consumerClassName
         ),
         style: consumerStyle,

package/content/accordion/AccordionSectionContent.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/content/accordion/AccordionSectionLabel.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/content/accordion/accordion-state.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/content/accordion/accordion-types.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/content/accordion/contexts/AccordionContext.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/content/accordion/contexts/AccordionSectionContext.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;