@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/charts/core/components/shape/EmojiShape/EmojiShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/EmojiShape/EmojiShape.css.ts"],
-  "sourcesContent": ["import './EmojiShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emojiShape = _7a468({defaultClassName:'_s37yxn0-3-1-1',variantClassNames:{active:{true:'_s37yxn1-3-1-1',false:'_s37yxn2-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './EmojiShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emojiShape = _7a468({defaultClassName:'_s37yxn0-3-2-0',variantClassNames:{active:{true:'_s37yxn1-3-2-0',false:'_s37yxn2-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/shape/IconShape/IconShape.css

@@ -1,4 +1,4 @@
-._1jwo1lm0-3-1-1 {
+._1jwo1lm0-3-2-0 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._1jwo1lm1-3-1-1 {
+._1jwo1lm1-3-2-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jwo1lm2-3-1-1 {
+._1jwo1lm2-3-2-0 {
   border: none;
 }

package/esm/charts/core/components/shape/IconShape/IconShape.sty.js

@@ -1,6 +1,6 @@
 import "./IconShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var iconShape = _7a468({ defaultClassName: "_1jwo1lm0-3-1-1", variantClassNames: { active: { true: "_1jwo1lm1-3-1-1", false: "_1jwo1lm2-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var iconShape = _7a468({ defaultClassName: "_1jwo1lm0-3-2-0", variantClassNames: { active: { true: "_1jwo1lm1-3-2-0", false: "_1jwo1lm2-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   iconShape
 };

package/esm/charts/core/components/shape/IconShape/IconShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/IconShape/IconShape.css.ts"],
-  "sourcesContent": ["import './IconShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconShape = _7a468({defaultClassName:'_1jwo1lm0-3-1-1',variantClassNames:{active:{true:'_1jwo1lm1-3-1-1',false:'_1jwo1lm2-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './IconShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconShape = _7a468({defaultClassName:'_1jwo1lm0-3-2-0',variantClassNames:{active:{true:'_1jwo1lm1-3-2-0',false:'_1jwo1lm2-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/shape/styles/DataPointShape.css

@@ -1,4 +1,4 @@
-._ihihf60-3-1-1 {
+._ihihf60-3-2-0 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: var(--dt-spacings-size-64, 64px);
@@ -7,39 +7,39 @@
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf61-3-1-1 {
+._ihihf61-3-2-0 {
   width: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-spacings-size-64, 64px);
   height: 72%;
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf62-3-1-1 {
+._ihihf62-3-2-0 {
   display: flex;
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-spacings-size-20, 20px);
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf63-3-1-1 {
+._ihihf63-3-2-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
 }
-._ihihf64-3-1-1 {
+._ihihf64-3-2-0 {
   margin-top: inherit;
   width: var(--dt-spacings-size-6, 6px);
   height: 72%;
 }
-._ihihf65-3-1-1 {
+._ihihf65-3-2-0 {
   margin: auto auto;
   border-radius: var(--dt-spacings-size-64, 64px);
 }
-._ihihf66-3-1-1 {
+._ihihf66-3-2-0 {
   width: var(--dt-spacings-size-6, 6px);
   height: var(--dt-spacings-size-6, 6px);
 }
-._ihihf67-3-1-1 {
+._ihihf67-3-2-0 {
   width: var(--dt-spacings-size-4, 4px);
   height: 94%;
 }

package/esm/charts/core/components/shape/styles/DataPointShape.sty.js

@@ -1,9 +1,9 @@
 import "./DataPointShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var innerHighlightedIcon = _7a468({ defaultClassName: "_ihihf65-3-1-1", variantClassNames: { singleLine: { true: "_ihihf66-3-1-1", false: "_ihihf67-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var multiDimensionIcon = "_ihihf61-3-1-1";
-var outerHighlightedIcon = _7a468({ defaultClassName: "_ihihf62-3-1-1", variantClassNames: { singleLine: { true: "_ihihf63-3-1-1", false: "_ihihf64-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var singleDimensionIcon = "_ihihf60-3-1-1";
+var innerHighlightedIcon = _7a468({ defaultClassName: "_ihihf65-3-2-0", variantClassNames: { singleLine: { true: "_ihihf66-3-2-0", false: "_ihihf67-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var multiDimensionIcon = "_ihihf61-3-2-0";
+var outerHighlightedIcon = _7a468({ defaultClassName: "_ihihf62-3-2-0", variantClassNames: { singleLine: { true: "_ihihf63-3-2-0", false: "_ihihf64-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var singleDimensionIcon = "_ihihf60-3-2-0";
 export {
   innerHighlightedIcon,
   multiDimensionIcon,

package/esm/charts/core/components/shape/styles/DataPointShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/styles/DataPointShape.css.ts"],
-  "sourcesContent": ["import './DataPointShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var innerHighlightedIcon = _7a468({defaultClassName:'_ihihf65-3-1-1',variantClassNames:{singleLine:{true:'_ihihf66-3-1-1',false:'_ihihf67-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var multiDimensionIcon = '_ihihf61-3-1-1';\nexport var outerHighlightedIcon = _7a468({defaultClassName:'_ihihf62-3-1-1',variantClassNames:{singleLine:{true:'_ihihf63-3-1-1',false:'_ihihf64-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var singleDimensionIcon = '_ihihf60-3-1-1';"],
+  "sourcesContent": ["import './DataPointShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var innerHighlightedIcon = _7a468({defaultClassName:'_ihihf65-3-2-0',variantClassNames:{singleLine:{true:'_ihihf66-3-2-0',false:'_ihihf67-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var multiDimensionIcon = '_ihihf61-3-2-0';\nexport var outerHighlightedIcon = _7a468({defaultClassName:'_ihihf62-3-2-0',variantClassNames:{singleLine:{true:'_ihihf63-3-2-0',false:'_ihihf64-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var singleDimensionIcon = '_ihihf60-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,qBAAqB;AACzB,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/core/components/shared-chart-interactions/SharedChartInteractions.css

@@ -1,4 +1,4 @@
-._14qoaxs0-3-1-1 {
+._14qoaxs0-3-2-0 {
   position: absolute;
   width: 100%;
   height: 100%;

package/esm/charts/core/components/shared-chart-interactions/SharedChartInteractions.sty.js

@@ -1,5 +1,5 @@
 import "./SharedChartInteractions.css";
-var containerSVG = "_14qoaxs0-3-1-1";
+var containerSVG = "_14qoaxs0-3-2-0";
 export {
   containerSVG
 };

package/esm/charts/core/components/shared-chart-interactions/SharedChartInteractions.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/shared-chart-interactions/SharedChartInteractions.css.ts"],
-  "sourcesContent": ["import './SharedChartInteractions.css';\nexport var containerSVG = '_14qoaxs0-3-1-1';"],
+  "sourcesContent": ["import './SharedChartInteractions.css';\nexport var containerSVG = '_14qoaxs0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.css

@@ -1,24 +1,24 @@
-._utn1m50-3-1-1 {
+._utn1m50-3-2-0 {
   container-type: size;
   height: 100%;
   width: 100%;
   border-radius: 2px;
   position: relative;
 }
-._utn1m51-3-1-1 {
+._utn1m51-3-2-0 {
   container-type: size;
   grid-area: content;
   padding: 8px;
 }
-._utn1m52-3-1-1 {
+._utn1m52-3-2-0 {
   grid-template-columns: 1fr;
   display: grid;
 }
-._utn1m53-3-1-1 {
+._utn1m53-3-2-0 {
   grid-area: sparkline;
   overflow: visible;
 }
-._utn1m54-3-1-1 {
+._utn1m54-3-2-0 {
   grid-area: trend;
   overflow: hidden;
 }

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.js

@@ -6,6 +6,9 @@ import {
 } from "react";
 import { ContentGrid } from "./components/ContentGrid.js";
 import { Label } from "./components/Label.js";
+import {
+  SingleValueToolbar
+} from "./components/SingleValueToolbar.js";
 import { Trend } from "./components/trend/Trend.js";
 import { Value } from "./components/Value.js";
 import {
@@ -19,7 +22,6 @@ import {
   sparklineArea,
   trendArea
 } from "./SingleValueRenderer.sty.js";
-import { SingleValueToolbar } from "./SingleValueToolbar.js";
 import { buildValueContentGridRows } from "./utils/build-value-content-grid-rows.js";
 import { formatLabel } from "./utils/format-label.js";
 import { formatValue } from "./utils/format-value.js";

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/single-value-renderer/SingleValueRenderer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty, isUndefined } from 'lodash-es';\nimport {\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useRef,\n} from 'react';\n\nimport { ContentGrid } from './components/ContentGrid.js';\nimport { Label } from './components/Label.js';\nimport { Trend } from './components/trend/Trend.js';\nimport type { TrendProps } from './components/trend/types/trend-props.js';\nimport { Value } from './components/Value.js';\nimport {\n  SingleValueContext,\n  type SingleValueContextProps,\n} from './contexts/single-value.context.js';\nimport { FontSizeProvider } from './providers/font-size.provider.js';\nimport {\n  chartStateHandler,\n  singleValueContainer,\n  singleValueInnerContainer,\n  sparklineArea,\n  trendArea,\n} from './SingleValueRenderer.sty.js';\nimport { SingleValueToolbar } from './SingleValueToolbar.js';\nimport type {\n  PropsFromGrid,\n  SingleValueBaseProps,\n} from './types/single-value-base-props.js';\nimport { buildValueContentGridRows } from './utils/build-value-content-grid-rows.js';\nimport { formatLabel } from './utils/format-label.js';\nimport { formatValue } from './utils/format-value.js';\nimport { getCalculatedColor } from './utils/get-calculated-color.js';\nimport { getContentAndBackgroundColor } from './utils/get-content-and-background-color.js';\nimport { useContainerSize } from '../../../../core/hooks/useContainerSize.js';\nimport { defaultChartSize } from '../../../../core/styles/defaultChartValues.sty.js';\nimport { ColorRuleProps } from '../../../core/types/color-rule.js';\nimport { SingleValueToolbarConfig } from '../../../single-value/types/single-value-toolbar.js';\nimport { ChartStateHandler } from '../chart-states/ChartStateHandler.js';\nimport { LoaderOverlay } from '../loader-overlay/LoaderOverlay.js';\nimport { SparklineDisplay } from '../sparkline-display/SparklineDisplay.js';\nimport type { SparklineDisplayProps } from '../sparkline-display/types/sparkline-display-props.js';\n\ntype SingleValueRendererProps = PropsWithChildren<SingleValueBaseProps> & {\n  dataItem?: Record<string, unknown>;\n  sparklineProps?: SparklineDisplayProps;\n  sparklineChildren?: ReactNode;\n  trendProps?: TrendProps;\n  colorRules?: ColorRuleProps[];\n  loading?: boolean;\n  emptyState?: ReactNode;\n  errorState?: ReactNode | ((errorMessage: string) => ReactElement);\n  toolbar?: SingleValueToolbarConfig;\n  propsFromGrid?: PropsFromGrid;\n};\n\nexport const SingleValueRenderer = (props: SingleValueRendererProps) => {\n  const {\n    data,\n    formatter,\n    unit,\n    prefixIcon,\n    alignment,\n    label,\n    color,\n    colorRules = [],\n    emptyState,\n    errorState,\n    loading = false,\n    sparklineProps,\n    sparklineChildren,\n    trendProps,\n    applyThresholdBackground,\n    propsFromGrid,\n    toolbar,\n    dataItem,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { height: containerHeight } = useContainerSize(containerRef);\n  const { color: calculatedColor, ruleApplied } = getCalculatedColor(\n    data,\n    colorRules,\n    color,\n    dataItem,\n  );\n\n  const applyBackgroundColor = applyThresholdBackground && ruleApplied;\n\n  const { contentColor, backgroundColor } = getContentAndBackgroundColor(\n    calculatedColor,\n    applyBackgroundColor,\n  );\n\n  const { value, unit: formatterUnit } = formatValue(data, unit, formatter);\n\n  const formattedLabel = formatLabel(label);\n\n  const context: SingleValueContextProps = {\n    value,\n    unit: formatterUnit ?? '',\n    label: formattedLabel ?? '',\n    prefixIcon,\n    alignment: alignment,\n  };\n\n  const { innerGrid, outerGrid } = buildValueContentGridRows(\n    !isUndefined(label),\n    !isUndefined(data),\n    !isUndefined(trendProps),\n    !isUndefined(sparklineProps),\n  );\n\n  const getSparklineColor = () =>\n    applyBackgroundColor ? contentColor : sparklineProps?.color ?? contentColor;\n\n  return (\n    <div\n      className={singleValueContainer}\n      style={{ backgroundColor }}\n      ref={containerRef}\n    >\n      <FontSizeProvider\n        text={context.prefixIcon ? `00${context.value}` : `${context.value}`}\n        suffix={context.unit}\n      >\n        <SingleValueContext.Provider value={context}>\n          <ContentGrid color={contentColor} gridTemplate={outerGrid}>\n            {label !== undefined ? (\n              <Label color={applyBackgroundColor ? contentColor : undefined} />\n            ) : null}\n            <div className={clsx(singleValueInnerContainer)}>\n              <ChartStateHandler\n                empty={isEmpty(value)}\n                height=\"100cqh\"\n                emptyState={emptyState}\n                errorState={errorState}\n                isLoading={loading}\n                style={{\n                  gridTemplate: innerGrid,\n                }}\n                className={clsx(defaultChartSize, chartStateHandler)}\n              >\n                <Value />\n\n                {!isUndefined(trendProps) ? (\n                  <div className={trendArea}>\n                    <Trend\n                      {...trendProps}\n                      contrastColor={\n                        applyBackgroundColor ? contentColor : undefined\n                      }\n                    />\n                  </div>\n                ) : null}\n\n                {!isUndefined(sparklineProps) ? (\n                  <div className={sparklineArea}>\n                    <SparklineDisplay\n                      {...sparklineProps}\n                      color={getSparklineColor()}\n                      labelsAlignment=\"right\"\n                      labelsFixedWidth={undefined}\n                      ticksColor={\n                        applyBackgroundColor ? contentColor : undefined\n                      }\n                      style={{\n                        display: 'flex',\n                        flexDirection: 'column',\n                        justifyContent: 'flex-end',\n                      }}\n                    >\n                      {sparklineChildren}\n                    </SparklineDisplay>\n                  </div>\n                ) : null}\n\n                {loading && <LoaderOverlay />}\n              </ChartStateHandler>\n            </div>\n          </ContentGrid>\n          <SingleValueToolbar\n            {...(propsFromGrid?.toolbar\n              ? propsFromGrid?.toolbar\n              : (toolbar as SingleValueToolbarConfig))}\n            parentHeight={containerHeight}\n            intentsAsyncTemplate={propsFromGrid?.intentsAsyncTemplate}\n          />\n        </SingleValueContext.Provider>\n      </FontSizeProvider>\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty, isUndefined } from 'lodash-es';\nimport {\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useRef,\n} from 'react';\n\nimport { ContentGrid } from './components/ContentGrid.js';\nimport { Label } from './components/Label.js';\nimport {\n  SingleValueToolbar,\n  type SingleValueToolbarConfig,\n} from './components/SingleValueToolbar.js';\nimport { Trend } from './components/trend/Trend.js';\nimport type { TrendProps } from './components/trend/types/trend-props.js';\nimport { Value } from './components/Value.js';\nimport {\n  SingleValueContext,\n  type SingleValueContextProps,\n} from './contexts/single-value.context.js';\nimport { FontSizeProvider } from './providers/font-size.provider.js';\nimport {\n  chartStateHandler,\n  singleValueContainer,\n  singleValueInnerContainer,\n  sparklineArea,\n  trendArea,\n} from './SingleValueRenderer.sty.js';\nimport type {\n  PropsFromGrid,\n  SingleValueBaseProps,\n} from './types/single-value-base-props.js';\nimport { buildValueContentGridRows } from './utils/build-value-content-grid-rows.js';\nimport { formatLabel } from './utils/format-label.js';\nimport { formatValue } from './utils/format-value.js';\nimport { getCalculatedColor } from './utils/get-calculated-color.js';\nimport { getContentAndBackgroundColor } from './utils/get-content-and-background-color.js';\nimport { useContainerSize } from '../../../../core/hooks/useContainerSize.js';\nimport { defaultChartSize } from '../../../../core/styles/defaultChartValues.sty.js';\nimport { ColorRuleProps } from '../../../core/types/color-rule.js';\nimport { ChartStateHandler } from '../chart-states/ChartStateHandler.js';\nimport { LoaderOverlay } from '../loader-overlay/LoaderOverlay.js';\nimport { SparklineDisplay } from '../sparkline-display/SparklineDisplay.js';\nimport type { SparklineDisplayProps } from '../sparkline-display/types/sparkline-display-props.js';\n\ntype SingleValueRendererProps = PropsWithChildren<SingleValueBaseProps> & {\n  dataItem?: Record<string, unknown>;\n  sparklineProps?: SparklineDisplayProps;\n  sparklineChildren?: ReactNode;\n  trendProps?: TrendProps;\n  colorRules?: ColorRuleProps[];\n  loading?: boolean;\n  emptyState?: ReactNode;\n  errorState?: ReactNode | ((errorMessage: string) => ReactElement);\n  toolbar?: SingleValueToolbarConfig;\n  propsFromGrid?: PropsFromGrid;\n};\n\nexport const SingleValueRenderer = (props: SingleValueRendererProps) => {\n  const {\n    data,\n    formatter,\n    unit,\n    prefixIcon,\n    alignment,\n    label,\n    color,\n    colorRules = [],\n    emptyState,\n    errorState,\n    loading = false,\n    sparklineProps,\n    sparklineChildren,\n    trendProps,\n    applyThresholdBackground,\n    propsFromGrid,\n    toolbar,\n    dataItem,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { height: containerHeight } = useContainerSize(containerRef);\n  const { color: calculatedColor, ruleApplied } = getCalculatedColor(\n    data,\n    colorRules,\n    color,\n    dataItem,\n  );\n\n  const applyBackgroundColor = applyThresholdBackground && ruleApplied;\n\n  const { contentColor, backgroundColor } = getContentAndBackgroundColor(\n    calculatedColor,\n    applyBackgroundColor,\n  );\n\n  const { value, unit: formatterUnit } = formatValue(data, unit, formatter);\n\n  const formattedLabel = formatLabel(label);\n\n  const context: SingleValueContextProps = {\n    value,\n    unit: formatterUnit ?? '',\n    label: formattedLabel ?? '',\n    prefixIcon,\n    alignment: alignment,\n  };\n\n  const { innerGrid, outerGrid } = buildValueContentGridRows(\n    !isUndefined(label),\n    !isUndefined(data),\n    !isUndefined(trendProps),\n    !isUndefined(sparklineProps),\n  );\n\n  const getSparklineColor = () =>\n    applyBackgroundColor ? contentColor : sparklineProps?.color ?? contentColor;\n\n  return (\n    <div\n      className={singleValueContainer}\n      style={{ backgroundColor }}\n      ref={containerRef}\n    >\n      <FontSizeProvider\n        text={context.prefixIcon ? `00${context.value}` : `${context.value}`}\n        suffix={context.unit}\n      >\n        <SingleValueContext.Provider value={context}>\n          <ContentGrid color={contentColor} gridTemplate={outerGrid}>\n            {label !== undefined ? (\n              <Label color={applyBackgroundColor ? contentColor : undefined} />\n            ) : null}\n            <div className={clsx(singleValueInnerContainer)}>\n              <ChartStateHandler\n                empty={isEmpty(value)}\n                height=\"100cqh\"\n                emptyState={emptyState}\n                errorState={errorState}\n                isLoading={loading}\n                style={{\n                  gridTemplate: innerGrid,\n                }}\n                className={clsx(defaultChartSize, chartStateHandler)}\n              >\n                <Value />\n\n                {!isUndefined(trendProps) ? (\n                  <div className={trendArea}>\n                    <Trend\n                      {...trendProps}\n                      contrastColor={\n                        applyBackgroundColor ? contentColor : undefined\n                      }\n                    />\n                  </div>\n                ) : null}\n\n                {!isUndefined(sparklineProps) ? (\n                  <div className={sparklineArea}>\n                    <SparklineDisplay\n                      {...sparklineProps}\n                      color={getSparklineColor()}\n                      labelsAlignment=\"right\"\n                      labelsFixedWidth={undefined}\n                      ticksColor={\n                        applyBackgroundColor ? contentColor : undefined\n                      }\n                      style={{\n                        display: 'flex',\n                        flexDirection: 'column',\n                        justifyContent: 'flex-end',\n                      }}\n                    >\n                      {sparklineChildren}\n                    </SparklineDisplay>\n                  </div>\n                ) : null}\n\n                {loading && <LoaderOverlay />}\n              </ChartStateHandler>\n            </div>\n          </ContentGrid>\n          <SingleValueToolbar\n            {...(propsFromGrid?.toolbar\n              ? propsFromGrid?.toolbar\n              : (toolbar as SingleValueToolbarConfig))}\n            parentHeight={containerHeight}\n            intentsAsyncTemplate={propsFromGrid?.intentsAsyncTemplate}\n          />\n        </SingleValueContext.Provider>\n      </FontSizeProvider>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.sty.js

@@ -1,9 +1,9 @@
 import "./SingleValueRenderer.css";
-var chartStateHandler = "_utn1m52-3-1-1";
-var singleValueContainer = "_utn1m50-3-1-1";
-var singleValueInnerContainer = "_utn1m51-3-1-1";
-var sparklineArea = "_utn1m53-3-1-1";
-var trendArea = "_utn1m54-3-1-1";
+var chartStateHandler = "_utn1m52-3-2-0";
+var singleValueContainer = "_utn1m50-3-2-0";
+var singleValueInnerContainer = "_utn1m51-3-2-0";
+var sparklineArea = "_utn1m53-3-2-0";
+var trendArea = "_utn1m54-3-2-0";
 export {
   chartStateHandler,
   singleValueContainer,

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/single-value-renderer/SingleValueRenderer.css.ts"],
-  "sourcesContent": ["import './SingleValueRenderer.css';\nexport var chartStateHandler = '_utn1m52-3-1-1';\nexport var singleValueContainer = '_utn1m50-3-1-1';\nexport var singleValueInnerContainer = '_utn1m51-3-1-1';\nexport var sparklineArea = '_utn1m53-3-1-1';\nexport var trendArea = '_utn1m54-3-1-1';"],
+  "sourcesContent": ["import './SingleValueRenderer.css';\nexport var chartStateHandler = '_utn1m52-3-2-0';\nexport var singleValueContainer = '_utn1m50-3-2-0';\nexport var singleValueInnerContainer = '_utn1m51-3-2-0';\nexport var sparklineArea = '_utn1m53-3-2-0';\nexport var trendArea = '_utn1m54-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,uBAAuB;AAC3B,IAAI,4BAA4B;AAChC,IAAI,gBAAgB;AACpB,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/ContentGrid.css

@@ -1,4 +1,4 @@
-._zdpx4o0-3-1-1 {
+._zdpx4o0-3-2-0 {
   display: grid;
   width: 100%;
   height: 100%;

package/esm/charts/core/components/single-value-renderer/components/ContentGrid.sty.js

@@ -1,5 +1,5 @@
 import "./ContentGrid.css";
-var contentGridStaticStyles = "_zdpx4o0-3-1-1";
+var contentGridStaticStyles = "_zdpx4o0-3-2-0";
 export {
   contentGridStaticStyles
 };

package/esm/charts/core/components/single-value-renderer/components/ContentGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/ContentGrid.css.ts"],
-  "sourcesContent": ["import './ContentGrid.css';\nexport var contentGridStaticStyles = '_zdpx4o0-3-1-1';"],
+  "sourcesContent": ["import './ContentGrid.css';\nexport var contentGridStaticStyles = '_zdpx4o0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,0BAA0B;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/Icon.css

@@ -1,16 +1,16 @@
-._84hyuy0-3-1-1 > svg {
+._84hyuy0-3-2-0 > svg {
   position: absolute;
   width: 2ch;
   height: 2ch;
   top: 50%;
   transform: translateY(-50%);
 }
-._84hyuy1-3-1-1 {
+._84hyuy1-3-2-0 {
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 1px);
   position: relative;
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._84hyuy2-3-1-1 {
+._84hyuy2-3-2-0 {
   display: flex;
   justify-content: center;
   align-items: center;

package/esm/charts/core/components/single-value-renderer/components/Icon.sty.js

@@ -1,7 +1,7 @@
 import "./Icon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var iconStyle = _7a468({ defaultClassName: "_84hyuy1-3-1-1", variantClassNames: { isString: { true: "_84hyuy2-3-1-1", false: "_84hyuy0-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var parentSvgStyle = "_84hyuy0-3-1-1";
+var iconStyle = _7a468({ defaultClassName: "_84hyuy1-3-2-0", variantClassNames: { isString: { true: "_84hyuy2-3-2-0", false: "_84hyuy0-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var parentSvgStyle = "_84hyuy0-3-2-0";
 export {
   iconStyle,
   parentSvgStyle

package/esm/charts/core/components/single-value-renderer/components/Icon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Icon.css.ts"],
-  "sourcesContent": ["import './Icon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconStyle = _7a468({defaultClassName:'_84hyuy1-3-1-1',variantClassNames:{isString:{true:'_84hyuy2-3-1-1',false:'_84hyuy0-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var parentSvgStyle = '_84hyuy0-3-1-1';"],
+  "sourcesContent": ["import './Icon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconStyle = _7a468({defaultClassName:'_84hyuy1-3-2-0',variantClassNames:{isString:{true:'_84hyuy2-3-2-0',false:'_84hyuy0-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var parentSvgStyle = '_84hyuy0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7K,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/Label.css

@@ -1,4 +1,4 @@
-._nuwbzs0-3-1-1 {
+._nuwbzs0-3-2-0 {
   grid-area: label;
   white-space: nowrap;
   overflow: hidden;

package/esm/charts/core/components/single-value-renderer/components/Label.sty.js

@@ -1,5 +1,5 @@
 import "./Label.css";
-var labelAreaStaticStyles = "_nuwbzs0-3-1-1";
+var labelAreaStaticStyles = "_nuwbzs0-3-2-0";
 export {
   labelAreaStaticStyles
 };

package/esm/charts/core/components/single-value-renderer/components/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nexport var labelAreaStaticStyles = '_nuwbzs0-3-1-1';"],
+  "sourcesContent": ["import './Label.css';\nexport var labelAreaStaticStyles = '_nuwbzs0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/{toolbar.css → components/SingleValueToolbar.css}

@@ -1,4 +1,4 @@
-._3nk49l0-3-1-1 {
+._xtlx2j0-3-2-0 {
   width: 100%;
   height: 100%;
 }

package/esm/charts/core/components/single-value-renderer/{SingleValueToolbar.js → components/SingleValueToolbar.js}

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
+import { toolbarOverlayPadding } from "./SingleValueToolbar.sty.js";
+import { ChartOverlaysElevation } from "../../../constants.js";
+import { getA11yToolbarConfig } from "../../../utils/zoom.js";
+import { ChartToolbarRenderer } from "../../toolbar/ChartToolbarRenderer.js";
 import {
   MINIMUM_HEIGHT_FOR_TOOLBAR,
   MINIMUM_HEIGHT_FOR_TOOLBAR_WITH_PADDING
-} from "./constants.js";
-import { toolbarOverlayPadding } from "./toolbar.sty.js";
-import { ChartOverlaysElevation } from "../../constants.js";
-import { getA11yToolbarConfig } from "../../utils/zoom.js";
-import { ChartToolbarRenderer } from "../toolbar/ChartToolbarRenderer.js";
+} from "../constants.js";
 const SingleValueToolbar = (props) => {
   const {
     parentHeight,

package/esm/charts/core/components/single-value-renderer/components/SingleValueToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/SingleValueToolbar.tsx"],
+  "sourcesContent": ["import { toolbarOverlayPadding } from './SingleValueToolbar.sty.js';\nimport { IntentProps } from '../../../../../core/slots/Intent/Intent.js';\nimport { ChartOverlaysElevation } from '../../../constants.js';\nimport {\n  InternalChartToolbarConfig,\n  type ChartToolbarConfig,\n  type ToolbarPlacement,\n} from '../../../types/toolbar.js';\nimport { getA11yToolbarConfig } from '../../../utils/zoom.js';\nimport { ChartToolbarRenderer } from '../../toolbar/ChartToolbarRenderer.js';\nimport type { IntentsAsyncTemplate } from '../../toolbar/types.js';\nimport {\n  MINIMUM_HEIGHT_FOR_TOOLBAR,\n  MINIMUM_HEIGHT_FOR_TOOLBAR_WITH_PADDING,\n} from '../constants.js';\n\n/** Configuration properties for the ChartToolbar in SingleValue\n * @public\n */\nexport interface SingleValueToolbarConfig\n  extends Omit<ChartToolbarConfig, 'downloadData'> {\n  /** Decides the placement of the toolbar */\n  placement: ToolbarPlacement;\n  /** Decides if the toolbar is hidden */\n  hidden: boolean;\n}\n\ninterface SingleValueToolbarProps extends InternalChartToolbarConfig {\n  /** Intents to show in the toolbar */\n  intents?: Array<IntentProps>;\n  /** Decides if the toolbar is hidden */\n  hidden: boolean;\n  parentHeight: number;\n  intentsAsyncTemplate?: IntentsAsyncTemplate;\n}\n\nexport const SingleValueToolbar = (props: SingleValueToolbarProps) => {\n  const {\n    parentHeight,\n    hidden,\n    intents,\n    intentsAsyncTemplate,\n    placement = 'top-right',\n    draggable,\n  } = props;\n\n  const hasEnoughHeightForToolbar = parentHeight > MINIMUM_HEIGHT_FOR_TOOLBAR;\n  const isToolbarEnabled =\n    hasEnoughHeightForToolbar &&\n    !hidden &&\n    !!(intents?.length ?? intentsAsyncTemplate);\n\n  if (!isToolbarEnabled) {\n    return null;\n  }\n\n  const overlayClassName =\n    parentHeight > MINIMUM_HEIGHT_FOR_TOOLBAR_WITH_PADDING\n      ? undefined\n      : toolbarOverlayPadding;\n\n  return (\n    <ChartToolbarRenderer\n      visible={false}\n      placement={placement}\n      initialA11yState={getA11yToolbarConfig({\n        intent: !!intents,\n      })}\n      menuDisplayMode=\"never\"\n      intents={intents}\n      overlayClassName={overlayClassName}\n      visibleWhenMouseInBounds\n      intentsAsyncTemplate={intentsAsyncTemplate}\n      zIndex={ChartOverlaysElevation.toolbar}\n      draggable={draggable}\n      removeDragHandle\n    />\n  );\n};\n\nSingleValueToolbar['displayName'] = 'SingleValueToolbar';\n"],
+  "mappings": "AA8DI;AA9DJ,SAAS,6BAA6B;AAEtC,SAAS,8BAA8B;AAMvC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAsBA,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AAEJ,QAAM,4BAA4B,eAAe;AACjD,QAAM,mBACJ,6BACA,CAAC,UACD,CAAC,EAAE,SAAS,UAAU;AAExB,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,mBACJ,eAAe,0CACX,SACA;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA,kBAAkB,qBAAqB;AAAA,QACrC,QAAQ,CAAC,CAAC;AAAA,MACZ,CAAC;AAAA,MACD,iBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,0BAAwB;AAAA,MACxB;AAAA,MACA,QAAQ,uBAAuB;AAAA,MAC/B;AAAA,MACA,kBAAgB;AAAA;AAAA,EAClB;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/core/components/single-value-renderer/components/SingleValueToolbar.sty.js

@@ -0,0 +1,6 @@
+import "./SingleValueToolbar.css";
+var toolbarOverlayPadding = "_xtlx2j0-3-2-0";
+export {
+  toolbarOverlayPadding
+};
+//# sourceMappingURL=SingleValueToolbar.sty.js.map

package/esm/charts/core/components/single-value-renderer/components/SingleValueToolbar.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/SingleValueToolbar.css.ts"],
+  "sourcesContent": ["import './SingleValueToolbar.css';\nexport var toolbarOverlayPadding = '_xtlx2j0-3-2-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;",
+  "names": []
+}

package/esm/charts/core/components/single-value-renderer/components/Value.css

@@ -1,4 +1,4 @@
-._eff5no0-3-1-1 {
+._eff5no0-3-2-0 {
   grid-area: value;
   width: 100%;
   height: 100%;
@@ -6,20 +6,20 @@
   align-items: center;
   gap: 0;
 }
-._eff5no1-3-1-1 {
+._eff5no1-3-2-0 {
   white-space: nowrap;
   position: relative;
   font-size: min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))px;
   font-weight: 500;
   overflow: hidden;
 }
-._eff5no2-3-1-1 {
+._eff5no2-3-2-0 {
   padding-left: 2ch;
 }
-._eff5no3-3-1-1 {
+._eff5no3-3-2-0 {
   padding-left: 0;
 }
-._eff5no4-3-1-1 {
+._eff5no4-3-2-0 {
   white-space: nowrap;
   overflow: hidden;
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 0.66px);

package/esm/charts/core/components/single-value-renderer/components/Value.sty.js

@@ -1,8 +1,8 @@
 import "./Value.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var unitStyle = "_eff5no4-3-1-1";
-var valueArea = "_eff5no0-3-1-1";
-var valueStyle = _7a468({ defaultClassName: "_eff5no1-3-1-1", variantClassNames: { isReactNode: { true: "_eff5no2-3-1-1", false: "_eff5no3-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var unitStyle = "_eff5no4-3-2-0";
+var valueArea = "_eff5no0-3-2-0";
+var valueStyle = _7a468({ defaultClassName: "_eff5no1-3-2-0", variantClassNames: { isReactNode: { true: "_eff5no2-3-2-0", false: "_eff5no3-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   unitStyle,
   valueArea,

package/esm/charts/core/components/single-value-renderer/components/Value.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Value.css.ts"],
-  "sourcesContent": ["import './Value.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var unitStyle = '_eff5no4-3-1-1';\nexport var valueArea = '_eff5no0-3-1-1';\nexport var valueStyle = _7a468({defaultClassName:'_eff5no1-3-1-1',variantClassNames:{isReactNode:{true:'_eff5no2-3-1-1',false:'_eff5no3-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Value.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var unitStyle = '_eff5no4-3-2-0';\nexport var valueArea = '_eff5no0-3-2-0';\nexport var valueStyle = _7a468({defaultClassName:'_eff5no1-3-2-0',variantClassNames:{isReactNode:{true:'_eff5no2-3-2-0',false:'_eff5no3-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/trend/Trend.css

@@ -1,13 +1,13 @@
-._i0i2v10-3-1-1 {
+._i0i2v10-3-2-0 {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-._i0i2v11-3-1-1 {
+._i0i2v11-3-2-0 {
   white-space: nowrap;
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))), min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))) * 1px);
   overflow: hidden;
 }
-._i0i2v12-3-1-1 {
+._i0i2v12-3-2-0 {
   margin-left: min(10px, 1ch);
 }

package/esm/charts/core/components/single-value-renderer/components/trend/Trend.sty.js

@@ -1,7 +1,7 @@
 import "./Trend.css";
-var trendContainer = "_i0i2v10-3-1-1";
-var trendLabel = "_i0i2v12-3-1-1";
-var valueLabelContainer = "_i0i2v11-3-1-1";
+var trendContainer = "_i0i2v10-3-2-0";
+var trendLabel = "_i0i2v12-3-2-0";
+var valueLabelContainer = "_i0i2v11-3-2-0";
 export {
   trendContainer,
   trendLabel,

package/esm/charts/core/components/single-value-renderer/components/trend/Trend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/single-value-renderer/components/trend/Trend.css.ts"],
-  "sourcesContent": ["import './Trend.css';\nexport var trendContainer = '_i0i2v10-3-1-1';\nexport var trendLabel = '_i0i2v12-3-1-1';\nexport var valueLabelContainer = '_i0i2v11-3-1-1';"],
+  "sourcesContent": ["import './Trend.css';\nexport var trendContainer = '_i0i2v10-3-2-0';\nexport var trendLabel = '_i0i2v12-3-2-0';\nexport var valueLabelContainer = '_i0i2v11-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/trend/components/Icon.css

@@ -1,8 +1,8 @@
-._160ezq60-3-1-1 {
+._160ezq60-3-2-0 {
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))), min(var(--dt-charts-single-value-global-trend-font-size, min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240))), min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)))) * 1px);
   position: relative;
 }
-._160ezq60-3-1-1 svg {
+._160ezq60-3-2-0 svg {
   position: absolute;
   width: 2ch;
   height: 2ch;

package/esm/charts/core/components/single-value-renderer/components/trend/components/Icon.sty.js

@@ -1,5 +1,5 @@
 import "./Icon.css";
-var iconStyles = "_160ezq60-3-1-1";
+var iconStyles = "_160ezq60-3-2-0";
 export {
   iconStyles
 };

package/esm/charts/core/components/single-value-renderer/components/trend/components/Icon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/single-value-renderer/components/trend/components/Icon.css.ts"],
-  "sourcesContent": ["import './Icon.css';\nexport var iconStyles = '_160ezq60-3-1-1';"],
+  "sourcesContent": ["import './Icon.css';\nexport var iconStyles = '_160ezq60-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/sparkline-display/Sparkline.css

@@ -1,21 +1,21 @@
-._8d5rf80-3-1-1 {
+._8d5rf80-3-2-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._8d5rf81-3-1-1 {
+._8d5rf81-3-2-0 {
   font-size: 9px;
   line-height: 12px;
 }
-._8d5rf82-3-1-1 {
+._8d5rf82-3-2-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._8d5rf83-3-1-1 {
+._8d5rf83-3-2-0 {
   position: absolute;
 }
-._8d5rf84-3-1-1 {
+._8d5rf84-3-2-0 {
   width: 4px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._8d5rf85-3-1-1 {
+._8d5rf85-3-2-0 {
   width: 6px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }