@cloudscape-design/components 3.0.328 → 3.0.330

package/app-layout/visual-refresh/styles.selectors.js

@@ -2,74 +2,74 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "background": "awsui_background_hyvsj_2btyy_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_2btyy_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_2btyy_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_2btyy_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_2btyy_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_2btyy_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_2btyy_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_2btyy_157",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_2btyy_191",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_2btyy_196",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_2btyy_214",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_2btyy_246",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_2btyy_246",
-  "drawer": "awsui_drawer_hyvsj_2btyy_145",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_2btyy_295",
-  "drawer-content": "awsui_drawer-content_hyvsj_2btyy_300",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_2btyy_305",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_2btyy_312",
-  "content": "awsui_content_hyvsj_2btyy_337",
-  "layout": "awsui_layout_hyvsj_2btyy_358",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_2btyy_441",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_2btyy_456",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_2btyy_473",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_2btyy_505",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_2btyy_508",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_2btyy_518",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_2btyy_521",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_2btyy_524",
-  "has-header": "awsui_has-header_hyvsj_2btyy_524",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_2btyy_545",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_2btyy_545",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_2btyy_588",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_2btyy_588",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_2btyy_604",
-  "unfocusable": "awsui_unfocusable_hyvsj_2btyy_609",
-  "container": "awsui_container_hyvsj_2btyy_619",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_2btyy_644",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_2btyy_647",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_2btyy_647",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_2btyy_647",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_2btyy_656",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_2btyy_672",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_2btyy_676",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_2btyy_680",
-  "navigation-container": "awsui_navigation-container_hyvsj_2btyy_689",
-  "show-navigation": "awsui_show-navigation_hyvsj_2btyy_733",
-  "animating": "awsui_animating_hyvsj_2btyy_755",
-  "showButtons": "awsui_showButtons_hyvsj_2btyy_1",
-  "navigation": "awsui_navigation_hyvsj_2btyy_689",
-  "openNavigation": "awsui_openNavigation_hyvsj_2btyy_1",
-  "animated-content": "awsui_animated-content_hyvsj_2btyy_816",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_2btyy_825",
-  "notifications": "awsui_notifications_hyvsj_2btyy_835",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_2btyy_841",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_2btyy_858",
-  "position-bottom": "awsui_position-bottom_hyvsj_2btyy_904",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_2btyy_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_2btyy_933",
-  "position-side": "awsui_position-side_hyvsj_2btyy_961",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_2btyy_1",
-  "tools-container": "awsui_tools-container_hyvsj_2btyy_998",
-  "tools": "awsui_tools_hyvsj_2btyy_998",
-  "openTools": "awsui_openTools_hyvsj_2btyy_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_2btyy_1092",
-  "hide-tools": "awsui_hide-tools_hyvsj_2btyy_1102",
-  "show-tools": "awsui_show-tools_hyvsj_2btyy_1114",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_2btyy_1092",
-  "trigger": "awsui_trigger_hyvsj_2btyy_1181",
-  "selected": "awsui_selected_hyvsj_2btyy_1220"
+  "background": "awsui_background_hyvsj_42qar_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_42qar_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_42qar_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_42qar_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_42qar_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_42qar_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_42qar_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_42qar_157",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_42qar_191",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_42qar_196",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_42qar_214",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_42qar_246",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_42qar_246",
+  "drawer": "awsui_drawer_hyvsj_42qar_145",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_42qar_295",
+  "drawer-content": "awsui_drawer-content_hyvsj_42qar_300",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_42qar_305",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_42qar_312",
+  "content": "awsui_content_hyvsj_42qar_337",
+  "layout": "awsui_layout_hyvsj_42qar_358",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_42qar_441",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_42qar_456",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_42qar_473",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_42qar_505",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_42qar_508",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_42qar_518",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_42qar_521",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_42qar_524",
+  "has-header": "awsui_has-header_hyvsj_42qar_524",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_42qar_545",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_42qar_545",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_42qar_588",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_42qar_588",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_42qar_604",
+  "unfocusable": "awsui_unfocusable_hyvsj_42qar_609",
+  "container": "awsui_container_hyvsj_42qar_619",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_42qar_644",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_42qar_647",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_42qar_647",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_42qar_647",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_42qar_656",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_42qar_672",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_42qar_676",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_42qar_680",
+  "navigation-container": "awsui_navigation-container_hyvsj_42qar_689",
+  "show-navigation": "awsui_show-navigation_hyvsj_42qar_733",
+  "animating": "awsui_animating_hyvsj_42qar_755",
+  "showButtons": "awsui_showButtons_hyvsj_42qar_1",
+  "navigation": "awsui_navigation_hyvsj_42qar_689",
+  "openNavigation": "awsui_openNavigation_hyvsj_42qar_1",
+  "animated-content": "awsui_animated-content_hyvsj_42qar_816",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_42qar_825",
+  "notifications": "awsui_notifications_hyvsj_42qar_835",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_42qar_841",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_42qar_858",
+  "position-bottom": "awsui_position-bottom_hyvsj_42qar_904",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_42qar_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_42qar_933",
+  "position-side": "awsui_position-side_hyvsj_42qar_961",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_42qar_1",
+  "tools-container": "awsui_tools-container_hyvsj_42qar_998",
+  "tools": "awsui_tools_hyvsj_42qar_998",
+  "openTools": "awsui_openTools_hyvsj_42qar_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_42qar_1092",
+  "hide-tools": "awsui_hide-tools_hyvsj_42qar_1102",
+  "show-tools": "awsui_show-tools_hyvsj_42qar_1114",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_42qar_1092",
+  "trigger": "awsui_trigger_hyvsj_42qar_1181",
+  "selected": "awsui_selected_hyvsj_42qar_1220"
 };
   

package/area-chart/chart-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["area-chart/chart-container.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACf,QAAQ,GACR,QAAQ,GACR,mBAAmB,GACnB,qBAAqB,GACrB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,GACjB,aAAa,CAChB;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;;AAED,wBAA6D;AAE7D,iBAAS,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAAE,EACX,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,GACzB,GACP,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA8GxB"}
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["area-chart/chart-container.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACf,QAAQ,GACR,QAAQ,GACR,mBAAmB,GACnB,qBAAqB,GACrB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,GACjB,aAAa,CAChB;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;;AAED,wBAA6D;AAE7D,iBAAS,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAAE,EACX,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,GACzB,GACP,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA6GxB"}

package/area-chart/chart-container.js

@@ -12,10 +12,10 @@ import AreaDataSeries from './elements/data-series';
 import AreaChartPopover from './elements/chart-popover';
 import AreaHighlightedPoint from './elements/highlighted-point';
 import AreaVerticalMarker from './elements/vertical-marker';
-import styles from './styles.css.js';
 import useHighlightDetails from './elements/use-highlight-details';
 import useContainerWidth from '../internal/utils/use-container-width';
 import { useSelector } from './async-store';
+import { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';
 const DEFAULT_CHART_WIDTH = 500;
 const LEFT_LABELS_MARGIN = 16;
 const BOTTOM_LABELS_OFFSET = 12;
@@ -41,19 +41,12 @@ function ChartContainer({ model, autoWidth, xTitle, yTitle, detailPopoverSize, d
     const isPointHighlighted = model.interactions.get().highlightedPoint !== null;
     const highlightedX = useSelector(model.interactions, state => state.highlightedX);
     const detailPopoverFooterContent = useMemo(() => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null), [detailPopoverFooter, highlightedX]);
-    return (React.createElement("div", { className: styles['chart-container'], ref: mergedRef },
-        React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }),
-        React.createElement("div", { className: styles['chart-container__horizontal'] },
-            React.createElement(LabelsMeasure, { scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, autoWidth: setLeftLabelsWidth }),
-            React.createElement("div", { className: styles['chart-container__vertical'] },
-                React.createElement(ChartPlot, { ref: model.refs.plot, width: model.width, height: model.height, offsetBottom: bottomLabelsHeight, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker, activeElementFocusOffset: isPointHighlighted ? 3 : { x: 8, y: 0 }, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onMouseDown: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onFocus: model.handlers.onSVGFocus, onBlur: model.handlers.onSVGBlur },
-                    React.createElement(LeftLabels, { width: model.width, height: model.height, scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, title: yTitle, ariaRoleDescription: yAxisAriaRoleDescription }),
-                    React.createElement(AreaDataSeries, { model: model }),
-                    React.createElement(BottomLabels, { width: model.width, height: model.height, scale: model.computed.xScale, ticks: model.computed.xTicks, tickFormatter: xTickFormatter, title: xTitle, ariaRoleDescription: xAxisAriaRoleDescription, autoHeight: setBottomLabelsHeight, offsetLeft: leftLabelsWidth + BOTTOM_LABELS_OFFSET, offsetRight: BOTTOM_LABELS_OFFSET }),
-                    React.createElement(EmphasizedBaseline, { width: model.width, height: model.height, scale: model.computed.yScale }),
-                    React.createElement(AreaVerticalMarker, { model: model }),
-                    React.createElement(AreaHighlightedPoint, { ref: highlightedPointRef, model: model, ariaLabel: highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel })),
-                React.createElement(AxisLabel, { axis: "x", position: "bottom", title: xTitle })),
-            React.createElement(AreaChartPopover, { model: model, highlightDetails: highlightDetails, dismissAriaLabel: detailPopoverDismissAriaLabel, size: detailPopoverSize, footer: detailPopoverFooterContent }))));
+    return (React.createElement(CartesianChartContainer, { ref: mergedRef, leftAxisLabel: React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }), leftAxisLabelMeasure: React.createElement(LabelsMeasure, { scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, autoWidth: setLeftLabelsWidth }), bottomAxisLabel: React.createElement(AxisLabel, { axis: "x", position: "bottom", title: xTitle }), chartPlot: React.createElement(ChartPlot, { ref: model.refs.plot, width: model.width, height: model.height, offsetBottom: bottomLabelsHeight, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker, activeElementFocusOffset: isPointHighlighted ? 3 : { x: 8, y: 0 }, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onMouseDown: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onFocus: model.handlers.onSVGFocus, onBlur: model.handlers.onSVGBlur },
+            React.createElement(LeftLabels, { width: model.width, height: model.height, scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, title: yTitle, ariaRoleDescription: yAxisAriaRoleDescription }),
+            React.createElement(AreaDataSeries, { model: model }),
+            React.createElement(BottomLabels, { width: model.width, height: model.height, scale: model.computed.xScale, ticks: model.computed.xTicks, tickFormatter: xTickFormatter, title: xTitle, ariaRoleDescription: xAxisAriaRoleDescription, autoHeight: setBottomLabelsHeight, offsetLeft: leftLabelsWidth + BOTTOM_LABELS_OFFSET, offsetRight: BOTTOM_LABELS_OFFSET }),
+            React.createElement(EmphasizedBaseline, { width: model.width, height: model.height, scale: model.computed.yScale }),
+            React.createElement(AreaVerticalMarker, { model: model }),
+            React.createElement(AreaHighlightedPoint, { ref: highlightedPointRef, model: model, ariaLabel: highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel })), popover: React.createElement(AreaChartPopover, { model: model, highlightDetails: highlightDetails, dismissAriaLabel: detailPopoverDismissAriaLabel, size: detailPopoverSize, footer: detailPopoverFooterContent }) }));
 }
 //# sourceMappingURL=chart-container.js.map

package/area-chart/chart-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.js","sourceRoot":"lib/default/","sources":["area-chart/chart-container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, memo, useRef, useMemo } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport styles from './styles.css.js';\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { useSelector } from './async-store';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n  extends Pick<\n    AreaChartProps<T>,\n    | 'xTitle'\n    | 'yTitle'\n    | 'detailPopoverSize'\n    | 'detailPopoverFooter'\n    | 'ariaLabel'\n    | 'ariaLabelledby'\n    | 'ariaDescription'\n    | 'i18nStrings'\n  > {\n  model: ChartModel<T>;\n  autoWidth: (value: number) => void;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n  model,\n  autoWidth,\n  xTitle,\n  yTitle,\n  detailPopoverSize,\n  detailPopoverFooter,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  i18nStrings: {\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n    chartAriaRoleDescription,\n    xAxisAriaRoleDescription,\n    yAxisAriaRoleDescription,\n    detailPopoverDismissAriaLabel,\n  } = {},\n}: ChartContainerProps<T>) {\n  const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);\n  const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n  // Calculate the width of the plot area and tell it to the parent.\n  const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n  useEffect(() => {\n    autoWidth(plotWidth);\n  }, [autoWidth, plotWidth]);\n\n  const highlightDetails = useHighlightDetails({\n    model,\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n  });\n\n  const highlightedPointRef = useRef<SVGGElement>(null);\n\n  const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n  const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n  const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n  const detailPopoverFooterContent = useMemo(\n    () => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null),\n    [detailPopoverFooter, highlightedX]\n  );\n\n  return (\n    <div className={styles['chart-container']} ref={mergedRef}>\n      <AxisLabel axis=\"y\" position=\"left\" title={yTitle} />\n\n      <div className={styles['chart-container__horizontal']}>\n        <LabelsMeasure\n          scale={model.computed.yScale}\n          ticks={model.computed.yTicks}\n          tickFormatter={yTickFormatter as TickFormatter}\n          autoWidth={setLeftLabelsWidth}\n        />\n\n        <div className={styles['chart-container__vertical']}>\n          <ChartPlot\n            ref={model.refs.plot}\n            width={model.width}\n            height={model.height}\n            offsetBottom={bottomLabelsHeight}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            ariaRoleDescription={chartAriaRoleDescription}\n            activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n            activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n            activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n            isClickable={!highlightDetails?.isPopoverPinned}\n            onMouseMove={model.handlers.onSVGMouseMove}\n            onMouseOut={model.handlers.onSVGMouseOut}\n            onMouseDown={model.handlers.onSVGMouseDown}\n            onKeyDown={model.handlers.onSVGKeyDown}\n            onFocus={model.handlers.onSVGFocus}\n            onBlur={model.handlers.onSVGBlur}\n          >\n            <LeftLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.yScale}\n              ticks={model.computed.yTicks}\n              tickFormatter={yTickFormatter}\n              title={yTitle}\n              ariaRoleDescription={yAxisAriaRoleDescription}\n            />\n\n            <AreaDataSeries model={model} />\n\n            <BottomLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.xScale}\n              ticks={model.computed.xTicks}\n              tickFormatter={xTickFormatter as TickFormatter}\n              title={xTitle}\n              ariaRoleDescription={xAxisAriaRoleDescription}\n              autoHeight={setBottomLabelsHeight}\n              offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n              offsetRight={BOTTOM_LABELS_OFFSET}\n            />\n\n            <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n            <AreaVerticalMarker model={model} />\n\n            <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n          </ChartPlot>\n\n          <AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />\n        </div>\n\n        <AreaChartPopover\n          model={model}\n          highlightDetails={highlightDetails}\n          dismissAriaLabel={detailPopoverDismissAriaLabel}\n          size={detailPopoverSize}\n          footer={detailPopoverFooterContent}\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"chart-container.js","sourceRoot":"lib/default/","sources":["area-chart/chart-container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, memo, useRef, useMemo } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { useSelector } from './async-store';\nimport { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n  extends Pick<\n    AreaChartProps<T>,\n    | 'xTitle'\n    | 'yTitle'\n    | 'detailPopoverSize'\n    | 'detailPopoverFooter'\n    | 'ariaLabel'\n    | 'ariaLabelledby'\n    | 'ariaDescription'\n    | 'i18nStrings'\n  > {\n  model: ChartModel<T>;\n  autoWidth: (value: number) => void;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n  model,\n  autoWidth,\n  xTitle,\n  yTitle,\n  detailPopoverSize,\n  detailPopoverFooter,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  i18nStrings: {\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n    chartAriaRoleDescription,\n    xAxisAriaRoleDescription,\n    yAxisAriaRoleDescription,\n    detailPopoverDismissAriaLabel,\n  } = {},\n}: ChartContainerProps<T>) {\n  const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);\n  const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n  // Calculate the width of the plot area and tell it to the parent.\n  const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n  useEffect(() => {\n    autoWidth(plotWidth);\n  }, [autoWidth, plotWidth]);\n\n  const highlightDetails = useHighlightDetails({\n    model,\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n  });\n\n  const highlightedPointRef = useRef<SVGGElement>(null);\n\n  const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n  const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n  const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n  const detailPopoverFooterContent = useMemo(\n    () => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null),\n    [detailPopoverFooter, highlightedX]\n  );\n\n  return (\n    <CartesianChartContainer\n      ref={mergedRef}\n      leftAxisLabel={<AxisLabel axis=\"y\" position=\"left\" title={yTitle} />}\n      leftAxisLabelMeasure={\n        <LabelsMeasure\n          scale={model.computed.yScale}\n          ticks={model.computed.yTicks}\n          tickFormatter={yTickFormatter as TickFormatter}\n          autoWidth={setLeftLabelsWidth}\n        />\n      }\n      bottomAxisLabel={<AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />}\n      chartPlot={\n        <ChartPlot\n          ref={model.refs.plot}\n          width={model.width}\n          height={model.height}\n          offsetBottom={bottomLabelsHeight}\n          ariaLabel={ariaLabel}\n          ariaLabelledby={ariaLabelledby}\n          ariaDescription={ariaDescription}\n          ariaRoleDescription={chartAriaRoleDescription}\n          activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n          activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n          activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n          isClickable={!highlightDetails?.isPopoverPinned}\n          onMouseMove={model.handlers.onSVGMouseMove}\n          onMouseOut={model.handlers.onSVGMouseOut}\n          onMouseDown={model.handlers.onSVGMouseDown}\n          onKeyDown={model.handlers.onSVGKeyDown}\n          onFocus={model.handlers.onSVGFocus}\n          onBlur={model.handlers.onSVGBlur}\n        >\n          <LeftLabels\n            width={model.width}\n            height={model.height}\n            scale={model.computed.yScale}\n            ticks={model.computed.yTicks}\n            tickFormatter={yTickFormatter}\n            title={yTitle}\n            ariaRoleDescription={yAxisAriaRoleDescription}\n          />\n\n          <AreaDataSeries model={model} />\n\n          <BottomLabels\n            width={model.width}\n            height={model.height}\n            scale={model.computed.xScale}\n            ticks={model.computed.xTicks}\n            tickFormatter={xTickFormatter as TickFormatter}\n            title={xTitle}\n            ariaRoleDescription={xAxisAriaRoleDescription}\n            autoHeight={setBottomLabelsHeight}\n            offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n            offsetRight={BOTTOM_LABELS_OFFSET}\n          />\n\n          <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n          <AreaVerticalMarker model={model} />\n\n          <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n        </ChartPlot>\n      }\n      popover={\n        <AreaChartPopover\n          model={model}\n          highlightDetails={highlightDetails}\n          dismissAriaLabel={detailPopoverDismissAriaLabel}\n          size={detailPopoverSize}\n          footer={detailPopoverFooterContent}\n        />\n      }\n    />\n  );\n}\n"]}

package/area-chart/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["area-chart/internal.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,KAAK,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,IAAI,YAAY,CAC5E,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,aAAa,CAC5F,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC5E,MAAM,EACN,UAAU,EACV,UAAU,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EAAE,2BAA2B,EAC9C,aAAa,EAAE,uBAAuB,EACtC,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,yBAAyB,EACzC,iBAAiB,EAAE,2BAA2B,EAC9C,WAAW,EACX,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,eAyI3B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["area-chart/internal.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,KAAK,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,IAAI,YAAY,CAC5E,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,aAAa,CAC5F,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC5E,MAAM,EACN,UAAU,EACV,UAAU,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EAAE,2BAA2B,EAC9C,aAAa,EAAE,uBAAuB,EACtC,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,yBAAyB,EACzC,iBAAiB,EAAE,2BAA2B,EAC9C,WAAW,EACX,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,eAkI3B"}

package/area-chart/internal.js

@@ -5,13 +5,10 @@ import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { isDevelopment } from '../internal/is-development';
 import { getBaseProps } from '../internal/base-component';
-import InternalBox from '../box/internal';
 import ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';
 import AreaChartFilter from './elements/area-chart-filter';
 import AreaChartLegend from './elements/area-chart-legend';
-import InternalSpaceBetween from '../space-between/internal';
 import ChartContainer from './chart-container';
-import cartesianStyles from '../internal/components/cartesian-chart/styles.css.js';
 import styles from './styles.css.js';
 import useChartModel from './model/use-chart-model';
 import useFilterProps from './model/use-filter-props';
@@ -20,6 +17,7 @@ import { isSeriesValid } from './model/utils';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { nodeBelongs } from '../internal/utils/node-belongs';
+import { ChartWrapper } from '../internal/components/chart-wrapper';
 export default function InternalAreaChart(_a) {
     var { height, xScaleType, yScaleType, xDomain, yDomain, highlightedSeries: controlledHighlightedSeries, visibleSeries: controlledVisibleSeries, series: externalSeries, onFilterChange: controlledOnVisibleChange, onHighlightChange: controlledOnHighlightChange, i18nStrings, ariaLabel, ariaLabelledby, ariaDescription, xTitle, yTitle, hideFilter, additionalFilters, hideLegend, legendTitle, statusType, detailPopoverSize, detailPopoverFooter, empty, noMatch, errorText, loadingText, recoveryText, onRecoveryClick, __internalRootRef = null } = _a, props = __rest(_a, ["height", "xScaleType", "yScaleType", "xDomain", "yDomain", "highlightedSeries", "visibleSeries", "series", "onFilterChange", "onHighlightChange", "i18nStrings", "ariaLabel", "ariaLabelledby", "ariaDescription", "xTitle", "yTitle", "hideFilter", "additionalFilters", "hideLegend", "legendTitle", "statusType", "detailPopoverSize", "detailPopoverFooter", "empty", "noMatch", "errorText", "loadingText", "recoveryText", "onRecoveryClick", "__internalRootRef"]);
     const baseProps = getBaseProps(props);
@@ -71,18 +69,6 @@ export default function InternalAreaChart(_a) {
         }
     };
     const mergedRef = useMergeRefs(containerRef, __internalRootRef);
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef, onBlur: onBlur }),
-        showFilters && (React.createElement(InternalBox, { className: cartesianStyles['filter-container'], margin: { bottom: 'l' } },
-            React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx({ [styles['has-default-filter']]: !hideFilter }) },
-                !hideFilter && (React.createElement(AreaChartFilter, { model: model, filterLabel: i18nStrings.filterLabel, filterPlaceholder: i18nStrings.filterPlaceholder, filterSelectedAriaLabel: i18nStrings.filterSelectedAriaLabel })),
-                additionalFilters))),
-        React.createElement("div", { className: clsx(styles.content, {
-                [styles['content--reserve-filter']]: reserveFilterSpace,
-                [styles['content--reserve-legend']]: reserveLegendSpace,
-            }), style: { minHeight: height } },
-            React.createElement(ChartStatusContainer, { isEmpty: isEmpty, isNoMatch: isNoMatch, showChart: showChart, statusType: statusType, empty: empty, noMatch: noMatch, loadingText: loadingText, errorText: errorText, recoveryText: recoveryText, onRecoveryClick: onRecoveryClick }),
-            showChart && (React.createElement(ChartContainer, { model: model, autoWidth: setWidth, detailPopoverSize: detailPopoverSize, detailPopoverFooter: detailPopoverFooter, xTitle: xTitle, yTitle: yTitle, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, i18nStrings: i18nStrings }))),
-        showLegend && (React.createElement(InternalBox, { margin: { top: 'm' } },
-            React.createElement(AreaChartLegend, { plotContainerRef: containerRef, model: model, legendTitle: legendTitle, ariaLabel: i18nStrings.legendAriaLabel })))));
+    return (React.createElement(ChartWrapper, Object.assign({ ref: mergedRef }, baseProps, { className: clsx(baseProps.className, styles.root), contentMinHeight: height, defaultFilter: showFilters && !hideFilter ? (React.createElement(AreaChartFilter, { model: model, filterLabel: i18nStrings.filterLabel, filterPlaceholder: i18nStrings.filterPlaceholder, filterSelectedAriaLabel: i18nStrings.filterSelectedAriaLabel })) : null, additionalFilters: showFilters ? additionalFilters : null, reserveFilterSpace: !!reserveFilterSpace, reserveLegendSpace: !!reserveLegendSpace, chartStatus: React.createElement(ChartStatusContainer, { isEmpty: isEmpty, isNoMatch: isNoMatch, showChart: showChart, statusType: statusType, empty: empty, noMatch: noMatch, loadingText: loadingText, errorText: errorText, recoveryText: recoveryText, onRecoveryClick: onRecoveryClick }), chart: showChart ? (React.createElement(ChartContainer, { model: model, autoWidth: setWidth, detailPopoverSize: detailPopoverSize, detailPopoverFooter: detailPopoverFooter, xTitle: xTitle, yTitle: yTitle, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, i18nStrings: i18nStrings })) : null, legend: showLegend ? (React.createElement(AreaChartLegend, { plotContainerRef: containerRef, model: model, legendTitle: legendTitle, ariaLabel: i18nStrings.legendAriaLabel })) : null, onBlur: onBlur })));
 }
 //# sourceMappingURL=internal.js.map

package/area-chart/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["area-chart/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { isDevelopment } from '../internal/is-development';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\n\nimport AreaChartFilter from './elements/area-chart-filter';\nimport AreaChartLegend from './elements/area-chart-legend';\nimport { AreaChartProps } from './interfaces';\nimport InternalSpaceBetween from '../space-between/internal';\nimport ChartContainer from './chart-container';\nimport cartesianStyles from '../internal/components/cartesian-chart/styles.css.js';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useChartModel from './model/use-chart-model';\nimport useFilterProps from './model/use-filter-props';\nimport useHighlightProps from './model/use-highlight-props';\nimport { isSeriesValid } from './model/utils';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\n\ntype InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<\n  AreaChartProps<T>,\n  'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'\n> &\n  InternalBaseComponentProps;\n\nexport default function InternalAreaChart<T extends AreaChartProps.DataTypes>({\n  height,\n  xScaleType,\n  yScaleType,\n  xDomain,\n  yDomain,\n  highlightedSeries: controlledHighlightedSeries,\n  visibleSeries: controlledVisibleSeries,\n  series: externalSeries,\n  onFilterChange: controlledOnVisibleChange,\n  onHighlightChange: controlledOnHighlightChange,\n  i18nStrings,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  xTitle,\n  yTitle,\n  hideFilter,\n  additionalFilters,\n  hideLegend,\n  legendTitle,\n  statusType,\n  detailPopoverSize,\n  detailPopoverFooter,\n  empty,\n  noMatch,\n  errorText,\n  loadingText,\n  recoveryText,\n  onRecoveryClick,\n  __internalRootRef = null,\n  ...props\n}: InternalAreaChartProps<T>) {\n  const baseProps = getBaseProps(props);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  if (isDevelopment) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      if (!isSeriesValid(externalSeries)) {\n        warnOnce(\n          'AreaChart',\n          \"The `series` property violates the component's constraints: all `area` \" +\n            'series must have `data` arrays of the same length and with the same x-values.'\n        );\n      }\n    }, [externalSeries]);\n  }\n\n  const [width, setWidth] = useState(0);\n  const [visibleSeries, setVisibleSeries] = useFilterProps(\n    externalSeries,\n    controlledVisibleSeries,\n    controlledOnVisibleChange\n  );\n  const [highlightedSeries, setHighlightedSeries] = useHighlightProps(\n    externalSeries,\n    controlledHighlightedSeries,\n    controlledOnHighlightChange\n  );\n  const model = useChartModel({\n    externalSeries,\n    visibleSeries,\n    setVisibleSeries,\n    highlightedSeries,\n    setHighlightedSeries,\n    xDomain,\n    yDomain,\n    xScaleType,\n    yScaleType,\n    height,\n    width,\n    popoverRef,\n  });\n\n  const { isEmpty, isNoMatch, showChart } = getChartStatus({\n    externalData: externalSeries,\n    visibleData: visibleSeries,\n    statusType,\n  });\n  const showFilters = statusType === 'finished' && (!isEmpty || isNoMatch) && (additionalFilters || !hideFilter);\n  const showLegend = !hideLegend && !isEmpty && statusType === 'finished';\n  const reserveLegendSpace = !showChart && !hideLegend;\n  const reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);\n\n  useEffect(() => {\n    const onKeyDown = model.handlers.onDocumentKeyDown;\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [model.handlers.onDocumentKeyDown]);\n\n  const onBlur = (event: React.FocusEvent) => {\n    if (event.relatedTarget && !nodeBelongs(containerRef.current, event.relatedTarget)) {\n      model.handlers.onContainerBlur();\n    }\n  };\n\n  const mergedRef = useMergeRefs(containerRef, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef} onBlur={onBlur}>\n      {showFilters && (\n        <InternalBox className={cartesianStyles['filter-container']} margin={{ bottom: 'l' }}>\n          <InternalSpaceBetween\n            size=\"l\"\n            direction=\"horizontal\"\n            className={clsx({ [styles['has-default-filter']]: !hideFilter })}\n          >\n            {!hideFilter && (\n              <AreaChartFilter\n                model={model}\n                filterLabel={i18nStrings.filterLabel}\n                filterPlaceholder={i18nStrings.filterPlaceholder}\n                filterSelectedAriaLabel={i18nStrings.filterSelectedAriaLabel}\n              />\n            )}\n            {additionalFilters}\n          </InternalSpaceBetween>\n        </InternalBox>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['content--reserve-filter']]: reserveFilterSpace,\n          [styles['content--reserve-legend']]: reserveLegendSpace,\n        })}\n        style={{ minHeight: height }}\n      >\n        <ChartStatusContainer\n          isEmpty={isEmpty}\n          isNoMatch={isNoMatch}\n          showChart={showChart}\n          statusType={statusType}\n          empty={empty}\n          noMatch={noMatch}\n          loadingText={loadingText}\n          errorText={errorText}\n          recoveryText={recoveryText}\n          onRecoveryClick={onRecoveryClick}\n        />\n        {showChart && (\n          <ChartContainer\n            model={model}\n            autoWidth={setWidth}\n            detailPopoverSize={detailPopoverSize}\n            detailPopoverFooter={detailPopoverFooter}\n            xTitle={xTitle}\n            yTitle={yTitle}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            i18nStrings={i18nStrings}\n          />\n        )}\n      </div>\n\n      {showLegend && (\n        <InternalBox margin={{ top: 'm' }}>\n          <AreaChartLegend\n            plotContainerRef={containerRef}\n            model={model}\n            legendTitle={legendTitle}\n            ariaLabel={i18nStrings.legendAriaLabel}\n          />\n        </InternalBox>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["area-chart/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,oBAAoB,EAAE,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAErG,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,iBAAiB,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAQpE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAqC,EAgClD;QAhCkD,EAC5E,MAAM,EACN,UAAU,EACV,UAAU,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EAAE,2BAA2B,EAC9C,aAAa,EAAE,uBAAuB,EACtC,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,yBAAyB,EACzC,iBAAiB,EAAE,2BAA2B,EAC9C,WAAW,EACX,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAiB,GAAG,IAAI,OAEE,EADvB,KAAK,cA/BoE,0cAgC7E,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,IAAI,aAAa,EAAE;QACjB,sDAAsD;QACtD,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;gBAClC,QAAQ,CACN,WAAW,EACX,yEAAyE;oBACvE,+EAA+E,CAClF,CAAC;aACH;QACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;KACtB;IAED,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,cAAc,CACtD,cAAc,EACd,uBAAuB,EACvB,yBAAyB,CAC1B,CAAC;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,iBAAiB,CACjE,cAAc,EACd,2BAA2B,EAC3B,2BAA2B,CAC5B,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,cAAc;QACd,aAAa;QACb,gBAAgB;QAChB,iBAAiB;QACjB,oBAAoB;QACpB,OAAO;QACP,OAAO;QACP,UAAU;QACV,UAAU;QACV,MAAM;QACN,KAAK;QACL,UAAU;KACX,CAAC,CAAC;IAEH,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC;QACvD,YAAY,EAAE,cAAc;QAC5B,WAAW,EAAE,aAAa;QAC1B,UAAU;KACX,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,UAAU,KAAK,UAAU,IAAI,CAAC,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,UAAU,CAAC,CAAC;IAC/G,MAAM,UAAU,GAAG,CAAC,UAAU,IAAI,CAAC,OAAO,IAAI,UAAU,KAAK,UAAU,CAAC;IACxE,MAAM,kBAAkB,GAAG,CAAC,SAAS,IAAI,CAAC,UAAU,CAAC;IACrD,MAAM,kBAAkB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,UAAU,IAAI,iBAAiB,CAAC,CAAC;IAE1F,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEvC,MAAM,MAAM,GAAG,CAAC,KAAuB,EAAE,EAAE;QACzC,IAAI,KAAK,CAAC,aAAa,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE;YAClF,KAAK,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC;SAClC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,YAAY,kBACX,GAAG,EAAE,SAAS,IACV,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,gBAAgB,EAAE,MAAM,EACxB,aAAa,EACX,WAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3B,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,iBAAiB,EAAE,WAAW,CAAC,iBAAiB,EAChD,uBAAuB,EAAE,WAAW,CAAC,uBAAuB,GAC5D,CACH,CAAC,CAAC,CAAC,IAAI,EAEV,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EACzD,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EACxC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EACxC,WAAW,EACT,oBAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,GAChC,EAEJ,KAAK,EACH,SAAS,CAAC,CAAC,CAAC,CACV,oBAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EACnB,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB,EACxC,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,IAAI,EAEV,MAAM,EACJ,UAAU,CAAC,CAAC,CAAC,CACX,oBAAC,eAAe,IACd,gBAAgB,EAAE,YAAY,EAC9B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,eAAe,GACtC,CACH,CAAC,CAAC,CAAC,IAAI,EAEV,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { isDevelopment } from '../internal/is-development';\nimport { getBaseProps } from '../internal/base-component';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\n\nimport AreaChartFilter from './elements/area-chart-filter';\nimport AreaChartLegend from './elements/area-chart-legend';\nimport { AreaChartProps } from './interfaces';\nimport ChartContainer from './chart-container';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useChartModel from './model/use-chart-model';\nimport useFilterProps from './model/use-filter-props';\nimport useHighlightProps from './model/use-highlight-props';\nimport { isSeriesValid } from './model/utils';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport { ChartWrapper } from '../internal/components/chart-wrapper';\n\ntype InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<\n  AreaChartProps<T>,\n  'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'\n> &\n  InternalBaseComponentProps;\n\nexport default function InternalAreaChart<T extends AreaChartProps.DataTypes>({\n  height,\n  xScaleType,\n  yScaleType,\n  xDomain,\n  yDomain,\n  highlightedSeries: controlledHighlightedSeries,\n  visibleSeries: controlledVisibleSeries,\n  series: externalSeries,\n  onFilterChange: controlledOnVisibleChange,\n  onHighlightChange: controlledOnHighlightChange,\n  i18nStrings,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  xTitle,\n  yTitle,\n  hideFilter,\n  additionalFilters,\n  hideLegend,\n  legendTitle,\n  statusType,\n  detailPopoverSize,\n  detailPopoverFooter,\n  empty,\n  noMatch,\n  errorText,\n  loadingText,\n  recoveryText,\n  onRecoveryClick,\n  __internalRootRef = null,\n  ...props\n}: InternalAreaChartProps<T>) {\n  const baseProps = getBaseProps(props);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  if (isDevelopment) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      if (!isSeriesValid(externalSeries)) {\n        warnOnce(\n          'AreaChart',\n          \"The `series` property violates the component's constraints: all `area` \" +\n            'series must have `data` arrays of the same length and with the same x-values.'\n        );\n      }\n    }, [externalSeries]);\n  }\n\n  const [width, setWidth] = useState(0);\n  const [visibleSeries, setVisibleSeries] = useFilterProps(\n    externalSeries,\n    controlledVisibleSeries,\n    controlledOnVisibleChange\n  );\n  const [highlightedSeries, setHighlightedSeries] = useHighlightProps(\n    externalSeries,\n    controlledHighlightedSeries,\n    controlledOnHighlightChange\n  );\n  const model = useChartModel({\n    externalSeries,\n    visibleSeries,\n    setVisibleSeries,\n    highlightedSeries,\n    setHighlightedSeries,\n    xDomain,\n    yDomain,\n    xScaleType,\n    yScaleType,\n    height,\n    width,\n    popoverRef,\n  });\n\n  const { isEmpty, isNoMatch, showChart } = getChartStatus({\n    externalData: externalSeries,\n    visibleData: visibleSeries,\n    statusType,\n  });\n  const showFilters = statusType === 'finished' && (!isEmpty || isNoMatch) && (additionalFilters || !hideFilter);\n  const showLegend = !hideLegend && !isEmpty && statusType === 'finished';\n  const reserveLegendSpace = !showChart && !hideLegend;\n  const reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);\n\n  useEffect(() => {\n    const onKeyDown = model.handlers.onDocumentKeyDown;\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [model.handlers.onDocumentKeyDown]);\n\n  const onBlur = (event: React.FocusEvent) => {\n    if (event.relatedTarget && !nodeBelongs(containerRef.current, event.relatedTarget)) {\n      model.handlers.onContainerBlur();\n    }\n  };\n\n  const mergedRef = useMergeRefs(containerRef, __internalRootRef);\n\n  return (\n    <ChartWrapper\n      ref={mergedRef}\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root)}\n      contentMinHeight={height}\n      defaultFilter={\n        showFilters && !hideFilter ? (\n          <AreaChartFilter\n            model={model}\n            filterLabel={i18nStrings.filterLabel}\n            filterPlaceholder={i18nStrings.filterPlaceholder}\n            filterSelectedAriaLabel={i18nStrings.filterSelectedAriaLabel}\n          />\n        ) : null\n      }\n      additionalFilters={showFilters ? additionalFilters : null}\n      reserveFilterSpace={!!reserveFilterSpace}\n      reserveLegendSpace={!!reserveLegendSpace}\n      chartStatus={\n        <ChartStatusContainer\n          isEmpty={isEmpty}\n          isNoMatch={isNoMatch}\n          showChart={showChart}\n          statusType={statusType}\n          empty={empty}\n          noMatch={noMatch}\n          loadingText={loadingText}\n          errorText={errorText}\n          recoveryText={recoveryText}\n          onRecoveryClick={onRecoveryClick}\n        />\n      }\n      chart={\n        showChart ? (\n          <ChartContainer\n            model={model}\n            autoWidth={setWidth}\n            detailPopoverSize={detailPopoverSize}\n            detailPopoverFooter={detailPopoverFooter}\n            xTitle={xTitle}\n            yTitle={yTitle}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            i18nStrings={i18nStrings}\n          />\n        ) : null\n      }\n      legend={\n        showLegend ? (\n          <AreaChartLegend\n            plotContainerRef={containerRef}\n            model={model}\n            legendTitle={legendTitle}\n            ariaLabel={i18nStrings.legendAriaLabel}\n          />\n        ) : null\n      }\n      onBlur={onBlur}\n    />\n  );\n}\n"]}

package/area-chart/styles.css.js

@@ -1,18 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "series": "awsui_series_y1yrh_191sa_93",
-  "root": "awsui_root_y1yrh_191sa_111",
-  "has-default-filter": "awsui_has-default-filter_y1yrh_191sa_126",
-  "chart-container": "awsui_chart-container_y1yrh_191sa_130",
-  "chart-container__vertical": "awsui_chart-container__vertical_y1yrh_191sa_136",
-  "chart-container__horizontal": "awsui_chart-container__horizontal_y1yrh_191sa_142",
-  "content": "awsui_content_y1yrh_191sa_146",
-  "content--reserve-filter": "awsui_content--reserve-filter_y1yrh_191sa_153",
-  "content--reserve-legend": "awsui_content--reserve-legend_y1yrh_191sa_157",
-  "series--highlighted": "awsui_series--highlighted_y1yrh_191sa_169",
-  "series--dimmed": "awsui_series--dimmed_y1yrh_191sa_173",
-  "series--threshold": "awsui_series--threshold_y1yrh_191sa_177",
-  "popover-divider": "awsui_popover-divider_y1yrh_191sa_182"
+  "series": "awsui_series_y1yrh_1hj0b_93",
+  "root": "awsui_root_y1yrh_1hj0b_111",
+  "series--highlighted": "awsui_series--highlighted_y1yrh_1hj0b_123",
+  "series--dimmed": "awsui_series--dimmed_y1yrh_1hj0b_127",
+  "series--threshold": "awsui_series--threshold_y1yrh_1hj0b_131",
+  "popover-divider": "awsui_popover-divider_y1yrh_1hj0b_136"
 };
   

package/area-chart/styles.scoped.css

@@ -90,16 +90,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_series_y1yrh_191sa_93 > rect:not(#\9) {
+.awsui_series_y1yrh_1hj0b_93 > rect:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-0viajb, 90ms) var(--motion-easing-transition-quick-191occ, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_series_y1yrh_191sa_93 > rect:not(#\9) {
+  .awsui_series_y1yrh_1hj0b_93 > rect:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_series_y1yrh_191sa_93 > rect:not(#\9), .awsui-mode-entering .awsui_series_y1yrh_191sa_93 > rect:not(#\9) {
+.awsui-motion-disabled .awsui_series_y1yrh_1hj0b_93 > rect:not(#\9), .awsui-mode-entering .awsui_series_y1yrh_1hj0b_93 > rect:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -108,83 +108,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_y1yrh_191sa_111:not(#\9) {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  border-collapse: separate;
-  border-spacing: 0;
-  caption-side: top;
-  cursor: auto;
-  direction: ltr;
-  empty-cells: show;
-  font-family: serif;
-  font-size: medium;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-hyphens: none;
-          hyphens: none;
-  letter-spacing: normal;
-  list-style: disc outside none;
-  tab-size: 8;
-  text-align: left;
-  text-align-last: auto;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  widows: 2;
-  word-spacing: normal;
-  box-sizing: border-box;
-  font-size: var(--font-body-m-size-7dign1, 14px);
-  line-height: var(--font-body-m-line-height-rfgrp9, 22px);
-  color: var(--color-text-body-default-su7kuo, #000716);
-  font-weight: 400;
-  font-family: var(--font-family-base-wn913o, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-  position: relative;
-  display: block;
-}
-
-.awsui_has-default-filter_y1yrh_191sa_126 > :not(#\9):first-child {
-  flex: 280px 0 1;
-}
-
-.awsui_chart-container_y1yrh_191sa_130:not(#\9) {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
-
-.awsui_chart-container__vertical_y1yrh_191sa_136:not(#\9) {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.awsui_chart-container__horizontal_y1yrh_191sa_142:not(#\9) {
-  display: flex;
-}
-
-.awsui_content_y1yrh_191sa_146:not(#\9) {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-}
-
-.awsui_content--reserve-filter_y1yrh_191sa_153:not(#\9) {
-  margin-top: calc(2 * var(--font-body-m-line-height-rfgrp9, 22px));
-}
-
-.awsui_content--reserve-legend_y1yrh_191sa_157:not(#\9) {
-  margin-bottom: calc(2 * var(--font-body-m-line-height-rfgrp9, 22px));
+.awsui_root_y1yrh_1hj0b_111:not(#\9) {
+  /* used in test-utils */
 }
 
-.awsui_series_y1yrh_191sa_93:not(#\9) {
+.awsui_series_y1yrh_1hj0b_93:not(#\9) {
   display: block;
   stroke-width: var(--border-line-chart-width-qfyiov, 2px);
   fill: none;
@@ -192,20 +120,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   stroke-linejoin: var(--border-line-chart-line-join-toe9lv, round);
 }
 
-.awsui_series--highlighted_y1yrh_191sa_169:not(#\9) {
+.awsui_series--highlighted_y1yrh_1hj0b_123:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_series--dimmed_y1yrh_191sa_173:not(#\9) {
+.awsui_series--dimmed_y1yrh_1hj0b_127:not(#\9) {
   opacity: 0.3;
 }
 
-.awsui_series--threshold_y1yrh_191sa_177:not(#\9) {
+.awsui_series--threshold_y1yrh_1hj0b_131:not(#\9) {
   stroke-dasharray: var(--border-line-chart-dash-array-ry3ko4, 3 5);
   stroke-width: var(--border-line-chart-width-qfyiov, 2px);
 }
 
-.awsui_popover-divider_y1yrh_191sa_182:not(#\9) {
+.awsui_popover-divider_y1yrh_1hj0b_136:not(#\9) {
   margin: var(--space-xxs-ja5cp8, 4px) 0;
   border-bottom: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
 }

package/area-chart/styles.selectors.js

@@ -2,18 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "series": "awsui_series_y1yrh_191sa_93",
-  "root": "awsui_root_y1yrh_191sa_111",
-  "has-default-filter": "awsui_has-default-filter_y1yrh_191sa_126",
-  "chart-container": "awsui_chart-container_y1yrh_191sa_130",
-  "chart-container__vertical": "awsui_chart-container__vertical_y1yrh_191sa_136",
-  "chart-container__horizontal": "awsui_chart-container__horizontal_y1yrh_191sa_142",
-  "content": "awsui_content_y1yrh_191sa_146",
-  "content--reserve-filter": "awsui_content--reserve-filter_y1yrh_191sa_153",
-  "content--reserve-legend": "awsui_content--reserve-legend_y1yrh_191sa_157",
-  "series--highlighted": "awsui_series--highlighted_y1yrh_191sa_169",
-  "series--dimmed": "awsui_series--dimmed_y1yrh_191sa_173",
-  "series--threshold": "awsui_series--threshold_y1yrh_191sa_177",
-  "popover-divider": "awsui_popover-divider_y1yrh_191sa_182"
+  "series": "awsui_series_y1yrh_1hj0b_93",
+  "root": "awsui_root_y1yrh_1hj0b_111",
+  "series--highlighted": "awsui_series--highlighted_y1yrh_1hj0b_123",
+  "series--dimmed": "awsui_series--dimmed_y1yrh_1hj0b_127",
+  "series--threshold": "awsui_series--threshold_y1yrh_1hj0b_131",
+  "popover-divider": "awsui_popover-divider_y1yrh_1hj0b_136"
 };