@dynatrace/strato-components 3.13.2 → 3.14.0

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

@@ -1,8 +1,8 @@
 import "./BubbleShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var bubble = "_hctkb34-3-13-2";
-var bubbleBorder = "_hctkb33-3-13-2";
-var bubbleOutline = _7a468({ defaultClassName: "_hctkb30-3-13-2", variantClassNames: { active: { true: "_hctkb31-3-13-2", false: "_hctkb32-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
+var bubble = "_hctkb34-3-14-0";
+var bubbleBorder = "_hctkb33-3-14-0";
+var bubbleOutline = _7a468({ defaultClassName: "_hctkb30-3-14-0", variantClassNames: { active: { true: "_hctkb31-3-14-0", false: "_hctkb32-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bubble,
   bubbleBorder,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/BubbleShape/BubbleShape.css.ts"],
-  "sourcesContent": ["import './BubbleShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bubble = '_hctkb34-3-13-2';\nexport var bubbleBorder = '_hctkb33-3-13-2';\nexport var bubbleOutline = _7a468({defaultClassName:'_hctkb30-3-13-2',variantClassNames:{active:{true:'_hctkb31-3-13-2',false:'_hctkb32-3-13-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './BubbleShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bubble = '_hctkb34-3-14-0';\nexport var bubbleBorder = '_hctkb33-3-14-0';\nexport var bubbleOutline = _7a468({defaultClassName:'_hctkb30-3-14-0',variantClassNames:{active:{true:'_hctkb31-3-14-0',false:'_hctkb32-3-14-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,gBAAgB,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/EmojiShape/EmojiShape.css

@@ -1,4 +1,4 @@
-._s37yxn0-3-13-2 {
+._s37yxn0-3-14-0 {
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._s37yxn1-3-13-2 {
+._s37yxn1-3-14-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._s37yxn2-3-13-2 {
+._s37yxn2-3-14-0 {
   border: none;
 }

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

@@ -1,6 +1,6 @@
 import "./EmojiShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var emojiShape = _7a468({ defaultClassName: "_s37yxn0-3-13-2", variantClassNames: { active: { true: "_s37yxn1-3-13-2", false: "_s37yxn2-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
+var emojiShape = _7a468({ defaultClassName: "_s37yxn0-3-14-0", variantClassNames: { active: { true: "_s37yxn1-3-14-0", false: "_s37yxn2-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   emojiShape
 };

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-13-2',variantClassNames:{active:{true:'_s37yxn1-3-13-2',false:'_s37yxn2-3-13-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './EmojiShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emojiShape = _7a468({defaultClassName:'_s37yxn0-3-14-0',variantClassNames:{active:{true:'_s37yxn1-3-14-0',false:'_s37yxn2-3-14-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,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/IconShape/IconShape.css

@@ -1,4 +1,4 @@
-._1jwo1lm0-3-13-2 {
+._1jwo1lm0-3-14-0 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._1jwo1lm1-3-13-2 {
+._1jwo1lm1-3-14-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jwo1lm2-3-13-2 {
+._1jwo1lm2-3-14-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-13-2", variantClassNames: { active: { true: "_1jwo1lm1-3-13-2", false: "_1jwo1lm2-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
+var iconShape = _7a468({ defaultClassName: "_1jwo1lm0-3-14-0", variantClassNames: { active: { true: "_1jwo1lm1-3-14-0", false: "_1jwo1lm2-3-14-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-13-2',variantClassNames:{active:{true:'_1jwo1lm1-3-13-2',false:'_1jwo1lm2-3-13-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './IconShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconShape = _7a468({defaultClassName:'_1jwo1lm0-3-14-0',variantClassNames:{active:{true:'_1jwo1lm1-3-14-0',false:'_1jwo1lm2-3-14-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,QAAO,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,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-13-2 {
+._ihihf60-3-14-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-13-2 {
+._ihihf61-3-14-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-13-2 {
+._ihihf62-3-14-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-13-2 {
+._ihihf63-3-14-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-13-2 {
+._ihihf64-3-14-0 {
   margin-top: inherit;
   width: var(--dt-spacings-size-6, 6px);
   height: 72%;
 }
-._ihihf65-3-13-2 {
+._ihihf65-3-14-0 {
   margin: auto auto;
   border-radius: var(--dt-spacings-size-64, 64px);
 }
-._ihihf66-3-13-2 {
+._ihihf66-3-14-0 {
   width: var(--dt-spacings-size-6, 6px);
   height: var(--dt-spacings-size-6, 6px);
 }
-._ihihf67-3-13-2 {
+._ihihf67-3-14-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-13-2", variantClassNames: { singleLine: { true: "_ihihf66-3-13-2", false: "_ihihf67-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var multiDimensionIcon = "_ihihf61-3-13-2";
-var outerHighlightedIcon = _7a468({ defaultClassName: "_ihihf62-3-13-2", variantClassNames: { singleLine: { true: "_ihihf63-3-13-2", false: "_ihihf64-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var singleDimensionIcon = "_ihihf60-3-13-2";
+var innerHighlightedIcon = _7a468({ defaultClassName: "_ihihf65-3-14-0", variantClassNames: { singleLine: { true: "_ihihf66-3-14-0", false: "_ihihf67-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var multiDimensionIcon = "_ihihf61-3-14-0";
+var outerHighlightedIcon = _7a468({ defaultClassName: "_ihihf62-3-14-0", variantClassNames: { singleLine: { true: "_ihihf63-3-14-0", false: "_ihihf64-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var singleDimensionIcon = "_ihihf60-3-14-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-13-2',variantClassNames:{singleLine:{true:'_ihihf66-3-13-2',false:'_ihihf67-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var multiDimensionIcon = '_ihihf61-3-13-2';\nexport var outerHighlightedIcon = _7a468({defaultClassName:'_ihihf62-3-13-2',variantClassNames:{singleLine:{true:'_ihihf63-3-13-2',false:'_ihihf64-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var singleDimensionIcon = '_ihihf60-3-13-2';"],
+  "sourcesContent": ["import './DataPointShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var innerHighlightedIcon = _7a468({defaultClassName:'_ihihf65-3-14-0',variantClassNames:{singleLine:{true:'_ihihf66-3-14-0',false:'_ihihf67-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var multiDimensionIcon = '_ihihf61-3-14-0';\nexport var outerHighlightedIcon = _7a468({defaultClassName:'_ihihf62-3-14-0',variantClassNames:{singleLine:{true:'_ihihf63-3-14-0',false:'_ihihf64-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var singleDimensionIcon = '_ihihf60-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7L,IAAI,qBAAqB;AACzB,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7L,IAAI,sBAAsB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._14qoaxs0-3-13-2 {
+._14qoaxs0-3-14-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-13-2";
+var containerSVG = "_14qoaxs0-3-14-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-13-2';"],
+  "sourcesContent": ["import './SharedChartInteractions.css';\nexport var containerSVG = '_14qoaxs0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

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

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

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 {\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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",
+  "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\n      ? contentColor\n      : (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-13-2";
-var singleValueContainer = "_utn1m50-3-13-2";
-var singleValueInnerContainer = "_utn1m51-3-13-2";
-var sparklineArea = "_utn1m53-3-13-2";
-var trendArea = "_utn1m54-3-13-2";
+var chartStateHandler = "_utn1m52-3-14-0";
+var singleValueContainer = "_utn1m50-3-14-0";
+var singleValueInnerContainer = "_utn1m51-3-14-0";
+var sparklineArea = "_utn1m53-3-14-0";
+var trendArea = "_utn1m54-3-14-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-13-2';\nexport var singleValueContainer = '_utn1m50-3-13-2';\nexport var singleValueInnerContainer = '_utn1m51-3-13-2';\nexport var sparklineArea = '_utn1m53-3-13-2';\nexport var trendArea = '_utn1m54-3-13-2';"],
+  "sourcesContent": ["import './SingleValueRenderer.css';\nexport var chartStateHandler = '_utn1m52-3-14-0';\nexport var singleValueContainer = '_utn1m50-3-14-0';\nexport var singleValueInnerContainer = '_utn1m51-3-14-0';\nexport var sparklineArea = '_utn1m53-3-14-0';\nexport var trendArea = '_utn1m54-3-14-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-13-2 {
+._zdpx4o0-3-14-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-13-2";
+var contentGridStaticStyles = "_zdpx4o0-3-14-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-13-2';"],
+  "sourcesContent": ["import './ContentGrid.css';\nexport var contentGridStaticStyles = '_zdpx4o0-3-14-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-13-2 > svg {
+._84hyuy0-3-14-0 > svg {
   position: absolute;
   width: 2ch;
   height: 2ch;
   top: 50%;
   transform: translateY(-50%);
 }
-._84hyuy1-3-13-2 {
+._84hyuy1-3-14-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-13-2 {
+._84hyuy2-3-14-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-13-2", variantClassNames: { isString: { true: "_84hyuy2-3-13-2", false: "_84hyuy0-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var parentSvgStyle = "_84hyuy0-3-13-2";
+var iconStyle = _7a468({ defaultClassName: "_84hyuy1-3-14-0", variantClassNames: { isString: { true: "_84hyuy2-3-14-0", false: "_84hyuy0-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var parentSvgStyle = "_84hyuy0-3-14-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-13-2',variantClassNames:{isString:{true:'_84hyuy2-3-13-2',false:'_84hyuy0-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var parentSvgStyle = '_84hyuy0-3-13-2';"],
+  "sourcesContent": ["import './Icon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconStyle = _7a468({defaultClassName:'_84hyuy1-3-14-0',variantClassNames:{isString:{true:'_84hyuy2-3-14-0',false:'_84hyuy0-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var parentSvgStyle = '_84hyuy0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChL,IAAI,iBAAiB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._nuwbzs0-3-13-2 {
+._nuwbzs0-3-14-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-13-2";
+var labelAreaStaticStyles = "_nuwbzs0-3-14-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-13-2';"],
+  "sourcesContent": ["import './Label.css';\nexport var labelAreaStaticStyles = '_nuwbzs0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;",
   "names": []
 }

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

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

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

@@ -1,7 +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      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;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;",
+  "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 extends Omit<\n  ChartToolbarConfig,\n  'downloadData'\n> {\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      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": "AAgEI;AAhEJ,SAAS,6BAA6B;AAEtC,SAAS,8BAA8B;AAMvC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAwBA,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;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

@@ -1,5 +1,5 @@
 import "./SingleValueToolbar.css";
-var toolbarOverlayPadding = "_xtlx2j0-3-13-2";
+var toolbarOverlayPadding = "_xtlx2j0-3-14-0";
 export {
   toolbarOverlayPadding
 };

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

@@ -1,7 +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-13-2';"],
+  "sourcesContent": ["import './SingleValueToolbar.css';\nexport var toolbarOverlayPadding = '_xtlx2j0-3-14-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-13-2 {
+._eff5no0-3-14-0 {
   grid-area: value;
   width: 100%;
   height: 100%;
@@ -6,20 +6,20 @@
   align-items: center;
   gap: 0;
 }
-._eff5no1-3-13-2 {
+._eff5no1-3-14-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-13-2 {
+._eff5no2-3-14-0 {
   padding-left: 2ch;
 }
-._eff5no3-3-13-2 {
+._eff5no3-3-14-0 {
   padding-left: 0;
 }
-._eff5no4-3-13-2 {
+._eff5no4-3-14-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.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Value.tsx"],
-  "sourcesContent": ["import { useContext } from 'react';\n\n\nimport { Icon } from './Icon.js';\nimport { unitStyle, valueArea, valueStyle } from './Value.sty.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { replaceSlashedZero } from '../../../typographyStyles.sty.js';\nimport { isReactNode } from '../../../utils/is-react-node.js';\nimport { FontSizeContext } from '../contexts/font-size.context.js';\nimport { SingleValueContext } from '../contexts/single-value.context.js';\n\nexport const Value = () => {\n  const { prefixIcon, value, unit, alignment } = useContext(SingleValueContext);\n\n  const { refCallback } = useContext(FontSizeContext);\n\n  return (\n    <Flex className={valueArea} ref={refCallback} justifyContent={alignment}>\n      <Icon />\n      <span\n        className={valueStyle({ isReactNode: isReactNode(prefixIcon) })}\n        data-testid=\"single-value-chart-value\"\n        ref={refCallback}\n      >\n        <span className={replaceSlashedZero}>{value}</span>\n        {unit.length > 0 ? <small className={unitStyle}>{unit}</small> : null}\n      </span>\n    </Flex>\n  );\n};\n\nValue['displayName'] = 'SingleValue.Value';\n"],
-  "mappings": "AAkBM,cACA,YADA;AAlBN,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,WAAW,WAAW,kBAAkB;AACjD,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,QAAQ,MAAM;AACzB,QAAM,EAAE,YAAY,OAAO,MAAM,UAAU,IAAI,WAAW,kBAAkB;AAE5E,QAAM,EAAE,YAAY,IAAI,WAAW,eAAe;AAElD,SACE,qBAAC,QAAK,WAAW,WAAW,KAAK,aAAa,gBAAgB,WAC5D;AAAA,wBAAC,QAAK;AAAA,IACN;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW,EAAE,aAAa,YAAY,UAAU,EAAE,CAAC;AAAA,QAC9D,eAAY;AAAA,QACZ,KAAK;AAAA,QAEL;AAAA,8BAAC,UAAK,WAAW,oBAAqB,iBAAM;AAAA,UAC3C,KAAK,SAAS,IAAI,oBAAC,WAAM,WAAW,WAAY,gBAAK,IAAW;AAAA;AAAA;AAAA,IACnE;AAAA,KACF;AAEJ;AAEA,MAAM,aAAa,IAAI;",
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { Icon } from './Icon.js';\nimport { unitStyle, valueArea, valueStyle } from './Value.sty.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { replaceSlashedZero } from '../../../typographyStyles.sty.js';\nimport { isReactNode } from '../../../utils/is-react-node.js';\nimport { FontSizeContext } from '../contexts/font-size.context.js';\nimport { SingleValueContext } from '../contexts/single-value.context.js';\n\nexport const Value = () => {\n  const { prefixIcon, value, unit, alignment } = useContext(SingleValueContext);\n\n  const { refCallback } = useContext(FontSizeContext);\n\n  return (\n    <Flex className={valueArea} ref={refCallback} justifyContent={alignment}>\n      <Icon />\n      <span\n        className={valueStyle({ isReactNode: isReactNode(prefixIcon) })}\n        data-testid=\"single-value-chart-value\"\n        ref={refCallback}\n      >\n        <span className={replaceSlashedZero}>{value}</span>\n        {unit.length > 0 ? <small className={unitStyle}>{unit}</small> : null}\n      </span>\n    </Flex>\n  );\n};\n\nValue['displayName'] = 'SingleValue.Value';\n"],
+  "mappings": "AAiBM,cACA,YADA;AAjBN,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,WAAW,WAAW,kBAAkB;AACjD,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,QAAQ,MAAM;AACzB,QAAM,EAAE,YAAY,OAAO,MAAM,UAAU,IAAI,WAAW,kBAAkB;AAE5E,QAAM,EAAE,YAAY,IAAI,WAAW,eAAe;AAElD,SACE,qBAAC,QAAK,WAAW,WAAW,KAAK,aAAa,gBAAgB,WAC5D;AAAA,wBAAC,QAAK;AAAA,IACN;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW,EAAE,aAAa,YAAY,UAAU,EAAE,CAAC;AAAA,QAC9D,eAAY;AAAA,QACZ,KAAK;AAAA,QAEL;AAAA,8BAAC,UAAK,WAAW,oBAAqB,iBAAM;AAAA,UAC3C,KAAK,SAAS,IAAI,oBAAC,WAAM,WAAW,WAAY,gBAAK,IAAW;AAAA;AAAA;AAAA,IACnE;AAAA,KACF;AAEJ;AAEA,MAAM,aAAa,IAAI;",
   "names": []
 }

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-13-2";
-var valueArea = "_eff5no0-3-13-2";
-var valueStyle = _7a468({ defaultClassName: "_eff5no1-3-13-2", variantClassNames: { isReactNode: { true: "_eff5no2-3-13-2", false: "_eff5no3-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
+var unitStyle = "_eff5no4-3-14-0";
+var valueArea = "_eff5no0-3-14-0";
+var valueStyle = _7a468({ defaultClassName: "_eff5no1-3-14-0", variantClassNames: { isReactNode: { true: "_eff5no2-3-14-0", false: "_eff5no3-3-14-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-13-2';\nexport var valueArea = '_eff5no0-3-13-2';\nexport var valueStyle = _7a468({defaultClassName:'_eff5no1-3-13-2',variantClassNames:{isReactNode:{true:'_eff5no2-3-13-2',false:'_eff5no3-3-13-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Value.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var unitStyle = '_eff5no4-3-14-0';\nexport var valueArea = '_eff5no0-3-14-0';\nexport var valueStyle = _7a468({defaultClassName:'_eff5no1-3-14-0',variantClassNames:{isReactNode:{true:'_eff5no2-3-14-0',false:'_eff5no3-3-14-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,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-13-2 {
+._i0i2v10-3-14-0 {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-._i0i2v11-3-13-2 {
+._i0i2v11-3-14-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-13-2 {
+._i0i2v12-3-14-0 {
   margin-left: min(10px, 1ch);
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/single-value-renderer/components/trend/Trend.tsx"],
-  "sourcesContent": ["import { isEmpty, isNil } from 'lodash-es';\nimport { type CSSProperties, useContext, useLayoutEffect, useRef } from 'react';\n\n\nimport { Icon } from './components/Icon.js';\nimport {\n  trendContainer,\n  trendLabel,\n  valueLabelContainer,\n} from './Trend.sty.js';\nimport type { TrendProps } from './types/trend-props.js';\nimport { defineTrendColors } from './utils/define-trend-colors.js';\nimport { defineTrendDirection } from './utils/define-trend-direction.js';\nimport { useId } from '../../../../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../../layouts/flex/Flex.js';\nimport { useFontSizeForContainer } from '../../../../hooks/useFontSizeForContainer.js';\nimport { useThrottledResizeObserver } from '../../../../hooks/useThrottledResizeObserver.js';\nimport { replaceSlashedZero } from '../../../../typographyStyles.sty.js';\nimport { getFormatter } from '../../../../utils/get-formatter.js';\nimport {\n  FONT_HEIGHT_RATIO,\n  TREND_FONT_CSS_TOKEN,\n  TREND_LABEL_DEFAULT_COLOR,\n} from '../../constants.js';\nimport { SingleValueContext } from '../../contexts/single-value.context.js';\nimport { useGlobalFontSize } from '../../hooks/use-global-font-size.js';\n\ntype InternalTrendProps = TrendProps & {\n  contrastColor?: string;\n};\n\nexport const Trend = (props: InternalTrendProps) => {\n  const {\n    direction: directionProp,\n    showIcon = true,\n    value: valueProp,\n    label,\n    inverseTrend = 'none',\n    colorsOverride,\n    formatter: formatterProp,\n    contrastColor,\n  } = props;\n\n  const { alignment } = useContext(SingleValueContext);\n\n  const direction = defineTrendDirection(directionProp, valueProp);\n\n  const [iconColor, valueColor] = defineTrendColors(\n    direction,\n    inverseTrend,\n    colorsOverride,\n  );\n\n  const formatter = getFormatter(formatterProp);\n\n  const formattedValue = !isNil(valueProp) ? formatter(valueProp) : '';\n\n  const value = formattedValue.replace(' ', '');\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { refCallback, width = 0, height = 0 } = useThrottledResizeObserver();\n\n  const mergedRef = useMergeRefs<HTMLDivElement>([refCallback, ref]);\n\n  const showTrendArrow = showIcon && (!isEmpty(value) || !isEmpty(label));\n\n  const preferredFontSize = useFontSizeForContainer({\n    container: { width, height: height * FONT_HEIGHT_RATIO },\n    text: showIcon ? `00${value}0${label}` : `${value}0${label}`,\n    element: ref.current,\n  });\n\n  const id = useId();\n  const { updateTrendFontSize } = useGlobalFontSize();\n\n  useLayoutEffect(() => {\n    if (height && width) {\n      updateTrendFontSize?.(id, preferredFontSize);\n    }\n  }, [height, width, preferredFontSize]);\n\n  return (\n    <Flex\n      className={trendContainer}\n      style={\n        {\n          [TREND_FONT_CSS_TOKEN]: preferredFontSize,\n        } as CSSProperties\n      }\n      ref={mergedRef}\n      data-testid=\"single-value-trend\"\n      alignItems=\"center\"\n      justifyContent={alignment}\n      gap={0}\n    >\n      {showTrendArrow && (\n        <Icon direction={direction} color={contrastColor ?? iconColor} />\n      )}\n      <div className={valueLabelContainer}>\n        <span\n          className={replaceSlashedZero}\n          style={{\n            color: contrastColor ?? valueColor,\n            paddingLeft: showTrendArrow ? '2ch' : '0',\n          }}\n        >\n          {value}\n        </span>\n        <span\n          className={trendLabel}\n          style={{\n            color: contrastColor ?? TREND_LABEL_DEFAULT_COLOR,\n          }}\n        >\n          {label}\n        </span>\n      </div>\n    </Flex>\n  );\n};\n\nTrend['displayName'] = 'SingleValue.Trend';\n"],
-  "mappings": "AAkGQ,cAEF,YAFE;AAlGR,SAAS,SAAS,aAAa;AAC/B,SAA6B,YAAY,iBAAiB,cAAc;AAGxE,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAM3B,MAAM,QAAQ,CAAC,UAA8B;AAClD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,UAAU,IAAI,WAAW,kBAAkB;AAEnD,QAAM,YAAY,qBAAqB,eAAe,SAAS;AAE/D,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY,aAAa,aAAa;AAE5C,QAAM,iBAAiB,CAAC,MAAM,SAAS,IAAI,UAAU,SAAS,IAAI;AAElE,QAAM,QAAQ,eAAe,QAAQ,KAAK,EAAE;AAE5C,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,EAAE,aAAa,QAAQ,GAAG,SAAS,EAAE,IAAI,2BAA2B;AAE1E,QAAM,YAAY,aAA6B,CAAC,aAAa,GAAG,CAAC;AAEjE,QAAM,iBAAiB,aAAa,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,KAAK;AAErE,QAAM,oBAAoB,wBAAwB;AAAA,IAChD,WAAW,EAAE,OAAO,QAAQ,SAAS,kBAAkB;AAAA,IACvD,MAAM,WAAW,KAAK,KAAK,IAAI,KAAK,KAAK,GAAG,KAAK,IAAI,KAAK;AAAA,IAC1D,SAAS,IAAI;AAAA,EACf,CAAC;AAED,QAAM,KAAK,MAAM;AACjB,QAAM,EAAE,oBAAoB,IAAI,kBAAkB;AAElD,kBAAgB,MAAM;AACpB,QAAI,UAAU,OAAO;AACnB,4BAAsB,IAAI,iBAAiB;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,iBAAiB,CAAC;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OACE;AAAA,QACE,CAAC,oBAAoB,GAAG;AAAA,MAC1B;AAAA,MAEF,KAAK;AAAA,MACL,eAAY;AAAA,MACZ,YAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,KAAK;AAAA,MAEJ;AAAA,0BACC,oBAAC,QAAK,WAAsB,OAAO,iBAAiB,WAAW;AAAA,QAEjE,qBAAC,SAAI,WAAW,qBACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,gBACL,OAAO,iBAAiB;AAAA,gBACxB,aAAa,iBAAiB,QAAQ;AAAA,cACxC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,gBACL,OAAO,iBAAiB;AAAA,cAC1B;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,aAAa,IAAI;",
+  "sourcesContent": ["import { isEmpty, isNil } from 'lodash-es';\nimport { type CSSProperties, useContext, useLayoutEffect, useRef } from 'react';\n\nimport { Icon } from './components/Icon.js';\nimport {\n  trendContainer,\n  trendLabel,\n  valueLabelContainer,\n} from './Trend.sty.js';\nimport type { TrendProps } from './types/trend-props.js';\nimport { defineTrendColors } from './utils/define-trend-colors.js';\nimport { defineTrendDirection } from './utils/define-trend-direction.js';\nimport { useId } from '../../../../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../../layouts/flex/Flex.js';\nimport { useFontSizeForContainer } from '../../../../hooks/useFontSizeForContainer.js';\nimport { useThrottledResizeObserver } from '../../../../hooks/useThrottledResizeObserver.js';\nimport { replaceSlashedZero } from '../../../../typographyStyles.sty.js';\nimport { getFormatter } from '../../../../utils/get-formatter.js';\nimport {\n  FONT_HEIGHT_RATIO,\n  TREND_FONT_CSS_TOKEN,\n  TREND_LABEL_DEFAULT_COLOR,\n} from '../../constants.js';\nimport { SingleValueContext } from '../../contexts/single-value.context.js';\nimport { useGlobalFontSize } from '../../hooks/use-global-font-size.js';\n\ntype InternalTrendProps = TrendProps & {\n  contrastColor?: string;\n};\n\nexport const Trend = (props: InternalTrendProps) => {\n  const {\n    direction: directionProp,\n    showIcon = true,\n    value: valueProp,\n    label,\n    inverseTrend = 'none',\n    colorsOverride,\n    formatter: formatterProp,\n    contrastColor,\n  } = props;\n\n  const { alignment } = useContext(SingleValueContext);\n\n  const direction = defineTrendDirection(directionProp, valueProp);\n\n  const [iconColor, valueColor] = defineTrendColors(\n    direction,\n    inverseTrend,\n    colorsOverride,\n  );\n\n  const formatter = getFormatter(formatterProp);\n\n  const formattedValue = !isNil(valueProp) ? formatter(valueProp) : '';\n\n  const value = formattedValue.replace(' ', '');\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { refCallback, width = 0, height = 0 } = useThrottledResizeObserver();\n\n  const mergedRef = useMergeRefs<HTMLDivElement>([refCallback, ref]);\n\n  const showTrendArrow = showIcon && (!isEmpty(value) || !isEmpty(label));\n\n  const preferredFontSize = useFontSizeForContainer({\n    container: { width, height: height * FONT_HEIGHT_RATIO },\n    text: showIcon ? `00${value}0${label}` : `${value}0${label}`,\n    element: ref.current,\n  });\n\n  const id = useId();\n  const { updateTrendFontSize } = useGlobalFontSize();\n\n  useLayoutEffect(() => {\n    if (height && width) {\n      updateTrendFontSize?.(id, preferredFontSize);\n    }\n  }, [height, width, preferredFontSize]);\n\n  return (\n    <Flex\n      className={trendContainer}\n      style={\n        {\n          [TREND_FONT_CSS_TOKEN]: preferredFontSize,\n        } as CSSProperties\n      }\n      ref={mergedRef}\n      data-testid=\"single-value-trend\"\n      alignItems=\"center\"\n      justifyContent={alignment}\n      gap={0}\n    >\n      {showTrendArrow && (\n        <Icon direction={direction} color={contrastColor ?? iconColor} />\n      )}\n      <div className={valueLabelContainer}>\n        <span\n          className={replaceSlashedZero}\n          style={{\n            color: contrastColor ?? valueColor,\n            paddingLeft: showTrendArrow ? '2ch' : '0',\n          }}\n        >\n          {value}\n        </span>\n        <span\n          className={trendLabel}\n          style={{\n            color: contrastColor ?? TREND_LABEL_DEFAULT_COLOR,\n          }}\n        >\n          {label}\n        </span>\n      </div>\n    </Flex>\n  );\n};\n\nTrend['displayName'] = 'SingleValue.Trend';\n"],
+  "mappings": "AAiGQ,cAEF,YAFE;AAjGR,SAAS,SAAS,aAAa;AAC/B,SAA6B,YAAY,iBAAiB,cAAc;AAExE,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAM3B,MAAM,QAAQ,CAAC,UAA8B;AAClD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,UAAU,IAAI,WAAW,kBAAkB;AAEnD,QAAM,YAAY,qBAAqB,eAAe,SAAS;AAE/D,QAAM,CAAC,WAAW,UAAU,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY,aAAa,aAAa;AAE5C,QAAM,iBAAiB,CAAC,MAAM,SAAS,IAAI,UAAU,SAAS,IAAI;AAElE,QAAM,QAAQ,eAAe,QAAQ,KAAK,EAAE;AAE5C,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,EAAE,aAAa,QAAQ,GAAG,SAAS,EAAE,IAAI,2BAA2B;AAE1E,QAAM,YAAY,aAA6B,CAAC,aAAa,GAAG,CAAC;AAEjE,QAAM,iBAAiB,aAAa,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,KAAK;AAErE,QAAM,oBAAoB,wBAAwB;AAAA,IAChD,WAAW,EAAE,OAAO,QAAQ,SAAS,kBAAkB;AAAA,IACvD,MAAM,WAAW,KAAK,KAAK,IAAI,KAAK,KAAK,GAAG,KAAK,IAAI,KAAK;AAAA,IAC1D,SAAS,IAAI;AAAA,EACf,CAAC;AAED,QAAM,KAAK,MAAM;AACjB,QAAM,EAAE,oBAAoB,IAAI,kBAAkB;AAElD,kBAAgB,MAAM;AACpB,QAAI,UAAU,OAAO;AACnB,4BAAsB,IAAI,iBAAiB;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,iBAAiB,CAAC;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OACE;AAAA,QACE,CAAC,oBAAoB,GAAG;AAAA,MAC1B;AAAA,MAEF,KAAK;AAAA,MACL,eAAY;AAAA,MACZ,YAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,KAAK;AAAA,MAEJ;AAAA,0BACC,oBAAC,QAAK,WAAsB,OAAO,iBAAiB,WAAW;AAAA,QAEjE,qBAAC,SAAI,WAAW,qBACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,gBACL,OAAO,iBAAiB;AAAA,gBACxB,aAAa,iBAAiB,QAAQ;AAAA,cACxC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,gBACL,OAAO,iBAAiB;AAAA,cAC1B;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,aAAa,IAAI;",
   "names": []
 }