@cloudscape-design/components 3.0.0

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

@@ -0,0 +1,65 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "appbar": "awsui_appbar_hyvsj_n9r5c_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_n9r5c_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_n9r5c_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_n9r5c_125",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_n9r5c_160",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_n9r5c_167",
+  "has-header": "awsui_has-header_hyvsj_n9r5c_173",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_n9r5c_173",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_n9r5c_174",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_n9r5c_177",
+  "content-type-table": "awsui_content-type-table_hyvsj_n9r5c_178",
+  "background": "awsui_background_hyvsj_n9r5c_213",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_n9r5c_216",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_n9r5c_228",
+  "overlap": "awsui_overlap_hyvsj_n9r5c_234",
+  "content": "awsui_content_hyvsj_n9r5c_174",
+  "layout": "awsui_layout_hyvsj_n9r5c_322",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_n9r5c_404",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_n9r5c_431",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_n9r5c_434",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_n9r5c_438",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_n9r5c_452",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_n9r5c_452",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_n9r5c_464",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_n9r5c_467",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_n9r5c_482",
+  "container": "awsui_container_hyvsj_n9r5c_490",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_n9r5c_507",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_n9r5c_512",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_n9r5c_515",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_n9r5c_515",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_n9r5c_515",
+  "content-type-default": "awsui_content-type-default_hyvsj_n9r5c_535",
+  "content-type-form": "awsui_content-type-form_hyvsj_n9r5c_535",
+  "unfocusable": "awsui_unfocusable_hyvsj_n9r5c_576",
+  "navigation-container": "awsui_navigation-container_hyvsj_n9r5c_584",
+  "show-navigation": "awsui_show-navigation_hyvsj_n9r5c_608",
+  "animating": "awsui_animating_hyvsj_n9r5c_630",
+  "showButtons": "awsui_showButtons_hyvsj_n9r5c_1",
+  "navigation": "awsui_navigation_hyvsj_n9r5c_584",
+  "openNavigation": "awsui_openNavigation_hyvsj_n9r5c_1",
+  "animated-content": "awsui_animated-content_hyvsj_n9r5c_690",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_n9r5c_699",
+  "notifications": "awsui_notifications_hyvsj_n9r5c_216",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_n9r5c_766",
+  "position-bottom": "awsui_position-bottom_hyvsj_n9r5c_801",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_n9r5c_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_n9r5c_830",
+  "position-side": "awsui_position-side_hyvsj_n9r5c_857",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_n9r5c_1",
+  "tools-container": "awsui_tools-container_hyvsj_n9r5c_894",
+  "tools": "awsui_tools_hyvsj_n9r5c_894",
+  "openTools": "awsui_openTools_hyvsj_n9r5c_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_n9r5c_977",
+  "hide-tools": "awsui_hide-tools_hyvsj_n9r5c_987",
+  "show-tools": "awsui_show-tools_hyvsj_n9r5c_999",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_n9r5c_977",
+  "trigger": "awsui_trigger_hyvsj_n9r5c_1056",
+  "selected": "awsui_selected_hyvsj_n9r5c_1094"
+};
+  

package/app-layout/visual-refresh/tools.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface ToolsProps {
+    children: React.ReactNode;
+}
+/**
+ * The Tools component consists of the following elements:
+ * the container, or root element, that sits as a direct child to the Layout grid definition;
+ * the split panel, which exists only if there is a split panel in side position;
+ * the tools, or drawer, that contains the hide tools form and the children passed through the API;
+ * the show tools form that contains the triggers for both the drawer and the
+ * split panel in large viewports;
+ */
+export default function Tools({ children }: ToolsProps): JSX.Element | null;
+/**
+ * Determine the default state of the Tools component. Mobile viewports should be
+ * closed by default under all circumstances. If the toolsOpen prop has not been
+ * set then it should be closed as well. Otherwise, default to the toolsOpen prop.
+ */
+export declare function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean): boolean;
+export {};
+//# sourceMappingURL=tools.d.ts.map

package/app-layout/visual-refresh/tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAa1C,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,sBA2HrD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,OAAO,WAU/E"}

package/app-layout/visual-refresh/tools.js

@@ -0,0 +1,127 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+import clsx from 'clsx';
+import { InternalButton } from '../../button/internal';
+import { AppLayoutContext } from './context';
+import { SplitPanelContext } from '../../internal/context/split-panel-context';
+import TriggerButton from './trigger-button';
+import styles from './styles.css.js';
+import splitPanelStyles from '../../split-panel/styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+import { useFocusControl } from '../utils/use-focus-control';
+import { Transition } from '../../internal/components/transition';
+import customCssProps from '../../internal/generated/custom-css-properties';
+/**
+ * The Tools component consists of the following elements:
+ * the container, or root element, that sits as a direct child to the Layout grid definition;
+ * the split panel, which exists only if there is a split panel in side position;
+ * the tools, or drawer, that contains the hide tools form and the children passed through the API;
+ * the show tools form that contains the triggers for both the drawer and the
+ * split panel in large viewports;
+ */
+export default function Tools(_a) {
+    var children = _a.children;
+    var _b = useContext(AppLayoutContext), ariaLabels = _b.ariaLabels, handleSplitPanelClick = _b.handleSplitPanelClick, handleToolsClick = _b.handleToolsClick, hasDefaultToolsWidth = _b.hasDefaultToolsWidth, isNavigationOpen = _b.isNavigationOpen, isMobile = _b.isMobile, isSplitPanelOpen = _b.isSplitPanelOpen, isToolsOpen = _b.isToolsOpen, splitPanel = _b.splitPanel, tools = _b.tools, toolsHide = _b.toolsHide, toolsWidth = _b.toolsWidth, isAnyPanelOpen = _b.isAnyPanelOpen, navigationHide = _b.navigationHide;
+    var _c = useContext(SplitPanelContext), splitPanelPosition = _c.position, openButtonAriaLabel = _c.openButtonAriaLabel;
+    var hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);
+    var hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
+    var hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);
+    var focusRefs = useFocusControl(isToolsOpen);
+    if (toolsHide && !hasSplitPanel) {
+        return null;
+    }
+    var isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;
+    return (React.createElement(Transition, { "in": isToolsOpen !== null && isToolsOpen !== void 0 ? isToolsOpen : false }, function (state, transitionEventsRef) {
+        var _a, _b, _c, _d;
+        var _e, _f, _g;
+        return (React.createElement("div", { className: clsx(styles['tools-container'], (_a = {},
+                _a[testutilStyles['drawer-closed']] = !isToolsOpen,
+                _a[styles.unfocusable] = isUnfocusable,
+                _a)), style: (_b = {},
+                _b[customCssProps.toolsAnimationStartingOpacity] = "".concat(hasSplitPanel && isSplitPanelOpen ? 1 : 0),
+                // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.
+                _b[customCssProps.toolsWidth] = hasDefaultToolsWidth ? '' : "".concat(toolsWidth, "px"),
+                _b) },
+            children,
+            !toolsHide && (React.createElement("aside", { "aria-hidden": !isToolsOpen ? true : false, "aria-label": (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _e !== void 0 ? _e : undefined, className: clsx(styles.tools, (_c = {},
+                    _c[styles.animating] = state === 'entering',
+                    _c[styles['has-tools-form-persistence']] = hasToolsFormPersistence,
+                    _c[styles['is-tools-open']] = isToolsOpen,
+                    _c), testutilStyles.tools), ref: state !== 'exiting' ? transitionEventsRef : undefined },
+                React.createElement("div", { className: clsx(styles['animated-content']) },
+                    React.createElement("div", { className: clsx(styles['hide-tools']) },
+                        React.createElement(InternalButton, { ariaLabel: (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose) !== null && _f !== void 0 ? _f : undefined, iconName: isMobile ? 'close' : 'angle-right', onClick: function () { return handleToolsClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['tools-close'], ref: focusRefs.close })),
+                    tools))),
+            !isMobile && (React.createElement("aside", { "aria-hidden": !hasToolsForm ? true : false, "aria-label": (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _g !== void 0 ? _g : undefined, className: clsx(styles['show-tools'], (_d = {},
+                    _d[styles.animating] = state === 'exiting',
+                    _d[styles['has-tools-form']] = hasToolsForm,
+                    _d[styles['has-tools-form-persistence']] = hasToolsFormPersistence,
+                    _d), splitPanelStyles.root), ref: state === 'exiting' ? transitionEventsRef : undefined },
+                !toolsHide && (React.createElement(TriggerButton, { ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle, iconName: "status-info", onClick: function () { return handleToolsClick(!isToolsOpen); }, selected: hasSplitPanel && isToolsOpen, className: testutilStyles['tools-toggle'], ref: focusRefs.toggle })),
+                hasSplitPanel && (React.createElement(TriggerButton, { ariaLabel: openButtonAriaLabel, iconName: "view-vertical", onClick: function () { return handleSplitPanelClick(); }, selected: hasSplitPanel && isSplitPanelOpen, className: splitPanelStyles['open-button'] }))))));
+    }));
+}
+/**
+ * Determine the default state of the Tools component. Mobile viewports should be
+ * closed by default under all circumstances. If the toolsOpen prop has not been
+ * set then it should be closed as well. Otherwise, default to the toolsOpen prop.
+ */
+export function getToolsDefaultState(isMobile, stateFromProps) {
+    var isToolsOpen;
+    if (isMobile || stateFromProps === undefined) {
+        isToolsOpen = false;
+    }
+    else {
+        isToolsOpen = stateFromProps;
+    }
+    return isToolsOpen;
+}
+/**
+ * This simple function returns the presence of the split panel as a child of the
+ * Tools component. It must exist and be in side position.
+ */
+function getSplitPanelStatus(splitPanel, splitPanelPosition) {
+    return splitPanel && splitPanelPosition === 'side' ? true : false;
+}
+/**
+ * By default the Tools form is styled as display: none; This behavior should
+ * be unchanged in mobile viewports where the Tools form is always suppressed.
+ * In large viewports, however the Tools form and its corresponding buttons
+ * should be present in the UI under the below circumstances.
+ */
+function getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide) {
+    var hasToolsForm = false;
+    if (!isMobile) {
+        // Both the Split Panel and Tools button are needed
+        if (hasSplitPanel && !toolsHide) {
+            hasToolsForm = true;
+        }
+        // The Split Panel button is needed
+        if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {
+            hasToolsForm = true;
+        }
+        // The Tools button is needed
+        if (!hasSplitPanel && !toolsHide && !isToolsOpen) {
+            hasToolsForm = true;
+        }
+    }
+    return hasToolsForm;
+}
+/**
+ * Under two scenarios the Tools form that contains the triggers
+ * for the Tools content and the Split Panel may be persistent
+ * in the UI (as opposed to disappearing when one of the drawers
+ * is open). This will also add a white background as opposed to the
+ * default transparent background. The buttons will present and in a
+ * selected / not selected state.
+ */
+function getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide) {
+    var hasToolsFormPersistence = false;
+    // Both Tools and Split Panel exist and one or both is open
+    if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {
+        hasToolsFormPersistence = true;
+    }
+    return hasToolsFormPersistence;
+}
+//# sourceMappingURL=tools.js.map

package/app-layout/visual-refresh/tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutContext } from './context';\nimport { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n  } = useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, openButtonAriaLabel } = useContext(SplitPanelContext);\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const focusRefs = useFocusControl(isToolsOpen);\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && (\n                <TriggerButton\n                  ariaLabel={openButtonAriaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanel: React.ReactNode, splitPanelPosition: string) {\n  return splitPanel && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}

package/app-layout/visual-refresh/trigger-button.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonProps } from '../../button/interfaces';
+import { IconProps } from '../../icon/interfaces';
+interface TriggerButtonProps {
+    ariaLabel?: string;
+    iconName: IconProps.Name;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    selected?: boolean;
+    className?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<TriggerButtonProps & React.RefAttributes<ButtonProps.Ref>>;
+export default _default;
+//# sourceMappingURL=trigger-button.d.ts.map

package/app-layout/visual-refresh/trigger-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger-button.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;AA6BD,wBAA+C"}

package/app-layout/visual-refresh/trigger-button.js

@@ -0,0 +1,19 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import useFocusVisible from '../../internal/hooks/focus-visible';
+import Icon from '../../icon/internal';
+import styles from './styles.css.js';
+function TriggerButton(_a, ref) {
+    var _b;
+    var ariaLabel = _a.ariaLabel, iconName = _a.iconName, onClick = _a.onClick, _c = _a.selected, selected = _c === void 0 ? false : _c, className = _a.className;
+    var focusVisible = useFocusVisible();
+    return (React.createElement("button", __assign({ "aria-label": ariaLabel, "aria-expanded": false, className: clsx(styles.trigger, (_b = {},
+            _b[styles.selected] = selected,
+            _b), className), onClick: onClick, type: "button", ref: ref }, focusVisible),
+        React.createElement(Icon, { name: iconName })));
+}
+export default React.forwardRef(TriggerButton);
+//# sourceMappingURL=trigger-button.js.map

package/app-layout/visual-refresh/trigger-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,SAAS,aAAa,CACpB,EAAiF,EACjF,GAA+B;;QAD7B,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA;IAG3D,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,uDACc,SAAS,mBACN,KAAK,EACpB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO;YAEZ,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;iBAE7B,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAmC,IACpC,YAAY;QAEhB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\ninterface TriggerButtonProps {\n  ariaLabel?: string;\n  iconName: IconProps.Name;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  className?: string;\n}\n\nfunction TriggerButton(\n  { ariaLabel, iconName, onClick, selected = false, className }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const focusVisible = useFocusVisible();\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      aria-expanded={false}\n      className={clsx(\n        styles.trigger,\n        {\n          [styles.selected]: selected,\n        },\n        className\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref as React.Ref<HTMLButtonElement>}\n      {...focusVisible}\n    >\n      <Icon name={iconName} />\n    </button>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

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

@@ -0,0 +1,10 @@
+import { AreaChartProps } from './interfaces';
+import { ChartModel } from './model';
+interface ChartContainerProps<T extends AreaChartProps.DataTypes> extends Pick<AreaChartProps<T>, 'xTitle' | 'yTitle' | 'detailPopoverSize' | 'ariaLabel' | 'ariaLabelledby' | 'ariaDescription' | 'i18nStrings'> {
+    model: ChartModel<T>;
+    autoWidth: (value: number) => void;
+}
+declare const _default: typeof ChartContainer;
+export default _default;
+declare function ChartContainer<T extends AreaChartProps.DataTypes>({ model, autoWidth, xTitle, yTitle, detailPopoverSize, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings: { xTickFormatter, yTickFormatter, detailTotalFormatter, detailTotalLabel, chartAriaRoleDescription, xAxisAriaRoleDescription, yAxisAriaRoleDescription, detailPopoverDismissAriaLabel, }, }: ChartContainerProps<T>): JSX.Element;
+//# sourceMappingURL=chart-container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/area-chart/chart-container.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAgBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,QAAQ,GAAG,mBAAmB,GAAG,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,aAAa,CAC/G;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,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,eAmGxB"}

package/area-chart/chart-container.js

@@ -0,0 +1,56 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState, useEffect, memo, useRef } from 'react';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import ChartPlot from '../internal/components/chart-plot';
+import AxisLabel from '../internal/components/cartesian-chart/axis-label';
+import LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';
+import LeftLabels from '../internal/components/cartesian-chart/left-labels';
+import BottomLabels from '../internal/components/cartesian-chart/bottom-labels';
+import EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';
+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';
+var DEFAULT_CHART_WIDTH = 500;
+var LEFT_LABELS_MARGIN = 16;
+var BOTTOM_LABELS_OFFSET = 12;
+export default memo(ChartContainer);
+function ChartContainer(_a) {
+    var model = _a.model, autoWidth = _a.autoWidth, xTitle = _a.xTitle, yTitle = _a.yTitle, detailPopoverSize = _a.detailPopoverSize, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescription = _a.ariaDescription, _b = _a.i18nStrings, _c = _b === void 0 ? {} : _b, xTickFormatter = _c.xTickFormatter, yTickFormatter = _c.yTickFormatter, detailTotalFormatter = _c.detailTotalFormatter, detailTotalLabel = _c.detailTotalLabel, chartAriaRoleDescription = _c.chartAriaRoleDescription, xAxisAriaRoleDescription = _c.xAxisAriaRoleDescription, yAxisAriaRoleDescription = _c.yAxisAriaRoleDescription, detailPopoverDismissAriaLabel = _c.detailPopoverDismissAriaLabel;
+    var _d = useState(0), leftLabelsWidth = _d[0], setLeftLabelsWidth = _d[1];
+    var _e = useState(0), bottomLabelsHeight = _e[0], setBottomLabelsHeight = _e[1];
+    var _f = useContainerWidth(DEFAULT_CHART_WIDTH), containerWidth = _f[0], containerWidthRef = _f[1];
+    // Calculate the width of the plot area and tell it to the parent.
+    var plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);
+    useEffect(function () {
+        autoWidth(plotWidth);
+    }, [autoWidth, plotWidth]);
+    var highlightDetails = useHighlightDetails({
+        model: model,
+        xTickFormatter: xTickFormatter,
+        yTickFormatter: yTickFormatter,
+        detailTotalFormatter: detailTotalFormatter,
+        detailTotalLabel: detailTotalLabel
+    });
+    var highlightedPointRef = useRef(null);
+    var mergedRef = useMergeRefs(containerWidthRef, model.refs.container);
+    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: highlightedPointRef, 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 }))));
+}
+//# sourceMappingURL=chart-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.js","sourceRoot":"","sources":["../../../src/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 } 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';\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' | 'yTitle' | 'detailPopoverSize' | 'ariaLabel' | 'ariaLabelledby' | 'ariaDescription' | '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  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  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={highlightedPointRef}\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        />\n      </div>\n    </div>\n  );\n}\n"]}

package/area-chart/elements/area-chart-filter.d.ts

@@ -0,0 +1,11 @@
+import { AreaChartProps } from '../interfaces';
+import { ChartModel } from '../model';
+declare const _default: typeof AreaChartFilter;
+export default _default;
+declare function AreaChartFilter<T extends AreaChartProps.DataTypes>({ model, filterLabel, filterPlaceholder, filterSelectedAriaLabel, }: {
+    model: ChartModel<T>;
+    filterLabel?: string;
+    filterPlaceholder?: string;
+    filterSelectedAriaLabel?: string;
+}): JSX.Element;
+//# sourceMappingURL=area-chart-filter.d.ts.map

package/area-chart/elements/area-chart-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart-filter.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-filter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;;AAGtC,wBAA+D;AAE/D,iBAAS,eAAe,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC3D,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,uBAAuB,GACxB,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,eAkBA"}

package/area-chart/elements/area-chart-filter.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo } from 'react';
+import ChartFilter from '../../internal/components/chart-filter';
+export default memo(AreaChartFilter);
+function AreaChartFilter(_a) {
+    var model = _a.model, filterLabel = _a.filterLabel, filterPlaceholder = _a.filterPlaceholder, filterSelectedAriaLabel = _a.filterSelectedAriaLabel;
+    var filterItems = model.allSeries.map(function (s) {
+        var _a = model.getInternalSeries(s), title = _a.title, color = _a.color, markerType = _a.markerType;
+        return { label: title, color: color, type: markerType, datum: s };
+    });
+    return (React.createElement(ChartFilter, { series: filterItems, onChange: model.handlers.onFilterSeries, selectedSeries: model.series, i18nStrings: {
+            filterLabel: filterLabel,
+            filterPlaceholder: filterPlaceholder,
+            filterSelectedAriaLabel: filterSelectedAriaLabel
+        } }));
+}
+//# sourceMappingURL=area-chart-filter.js.map

package/area-chart/elements/area-chart-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart-filter.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-filter.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAqC,EAU5D;QATC,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,iBAAiB,uBAAA,EACjB,uBAAuB,6BAAA;IAOvB,IAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAA,CAAC;QACjC,IAAA,KAA+B,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAvD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAA+B,CAAC;QAChE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,OAAA,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,EACvC,cAAc,EAAE,KAAK,CAAC,MAAM,EAC5B,WAAW,EAAE;YACX,WAAW,aAAA;YACX,iBAAiB,mBAAA;YACjB,uBAAuB,yBAAA;SACxB,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport ChartFilter from '../../internal/components/chart-filter';\n\nexport default memo(AreaChartFilter) as typeof AreaChartFilter;\n\nfunction AreaChartFilter<T extends AreaChartProps.DataTypes>({\n  model,\n  filterLabel,\n  filterPlaceholder,\n  filterSelectedAriaLabel,\n}: {\n  model: ChartModel<T>;\n  filterLabel?: string;\n  filterPlaceholder?: string;\n  filterSelectedAriaLabel?: string;\n}) {\n  const filterItems = model.allSeries.map(s => {\n    const { title, color, markerType } = model.getInternalSeries(s);\n    return { label: title, color, type: markerType, datum: s };\n  });\n\n  return (\n    <ChartFilter\n      series={filterItems}\n      onChange={model.handlers.onFilterSeries}\n      selectedSeries={model.series}\n      i18nStrings={{\n        filterLabel,\n        filterPlaceholder,\n        filterSelectedAriaLabel,\n      }}\n    />\n  );\n}\n"]}

package/area-chart/elements/area-chart-legend.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AreaChartProps } from '../interfaces';
+import { ChartModel } from '../model';
+declare const _default: typeof AreaChartLegend;
+export default _default;
+declare function AreaChartLegend<T extends AreaChartProps.DataTypes>({ model, legendTitle, ariaLabel, plotContainerRef, }: {
+    model: ChartModel<T>;
+    plotContainerRef: React.RefObject<HTMLDivElement>;
+    legendTitle?: string;
+    ariaLabel?: string;
+}): JSX.Element;
+//# sourceMappingURL=area-chart-legend.d.ts.map

package/area-chart/elements/area-chart-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart-legend.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-legend.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;;AAEtC,wBAA+D;AAE/D,iBAAS,eAAe,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC3D,KAAK,EACL,WAAW,EACX,SAAS,EACT,gBAAgB,GACjB,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,eAsBA"}

package/area-chart/elements/area-chart-legend.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo, useMemo } from 'react';
+import ChartLegend from '../../internal/components/chart-legend';
+import { useSelector } from '../model/async-store';
+export default memo(AreaChartLegend);
+function AreaChartLegend(_a) {
+    var model = _a.model, legendTitle = _a.legendTitle, ariaLabel = _a.ariaLabel, plotContainerRef = _a.plotContainerRef;
+    var legendItems = useMemo(function () {
+        return model.series.map(function (s) {
+            var _a = model.getInternalSeries(s), title = _a.title, color = _a.color, markerType = _a.markerType;
+            return { label: title, color: color, type: markerType, datum: s };
+        });
+    }, [model]);
+    var legendSeries = useSelector(model.interactions, function (state) { return state.legendSeries; });
+    return (React.createElement(ChartLegend, { series: legendItems, highlightedSeries: legendSeries, onHighlightChange: model.handlers.onLegendHighlight, legendTitle: legendTitle, ariaLabel: ariaLabel, plotContainerRef: plotContainerRef }));
+}
+//# sourceMappingURL=area-chart-legend.js.map

package/area-chart/elements/area-chart-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-chart-legend.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-legend.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAqC,EAU5D;QATC,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,gBAAgB,sBAAA;IAOhB,IAAM,WAAW,GAAG,OAAO,CACzB;QACE,OAAA,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,CAAC;YACV,IAAA,KAA+B,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAvD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAA+B,CAAC;YAChE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,OAAA,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAC7D,CAAC,CAAC;IAHF,CAGE,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,YAAY,EAAlB,CAAkB,CAAC,CAAC;IAElF,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,iBAAiB,EAAE,YAAY,EAC/B,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,iBAAiB,EACnD,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useMemo } from 'react';\n\nimport { AreaChartProps } from '../interfaces';\nimport ChartLegend from '../../internal/components/chart-legend';\nimport { useSelector } from '../model/async-store';\nimport { ChartModel } from '../model';\n\nexport default memo(AreaChartLegend) as typeof AreaChartLegend;\n\nfunction AreaChartLegend<T extends AreaChartProps.DataTypes>({\n  model,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: {\n  model: ChartModel<T>;\n  plotContainerRef: React.RefObject<HTMLDivElement>;\n  legendTitle?: string;\n  ariaLabel?: string;\n}) {\n  const legendItems = useMemo(\n    () =>\n      model.series.map(s => {\n        const { title, color, markerType } = model.getInternalSeries(s);\n        return { label: title, color, type: markerType, datum: s };\n      }),\n    [model]\n  );\n\n  const legendSeries = useSelector(model.interactions, state => state.legendSeries);\n\n  return (\n    <ChartLegend\n      series={legendItems}\n      highlightedSeries={legendSeries}\n      onHighlightChange={model.handlers.onLegendHighlight}\n      legendTitle={legendTitle}\n      ariaLabel={ariaLabel}\n      plotContainerRef={plotContainerRef}\n    />\n  );\n}\n"]}

package/area-chart/elements/area-series.d.ts

@@ -0,0 +1,10 @@
+import { ChartModel } from '../model';
+export interface AreaSeriesProps<T> {
+    data: readonly ChartModel.PlotPoint<T>[];
+    color: string;
+    chartAreaClipPath: string;
+}
+declare const _default: typeof AreaSeries;
+export default _default;
+declare function AreaSeries<T>({ data, color, chartAreaClipPath }: AreaSeriesProps<T>): JSX.Element;
+//# sourceMappingURL=area-series.d.ts.map

package/area-chart/elements/area-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-series.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-series.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,IAAI,EAAE,SAAS,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;CAC3B;;AAED,wBAAqD;AAErD,iBAAS,UAAU,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,eAyB5E"}

package/area-chart/elements/area-series.js

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo } from 'react';
+import { line, area } from 'd3-shape';
+export default memo(AreaSeries);
+function AreaSeries(_a) {
+    var data = _a.data, color = _a.color, chartAreaClipPath = _a.chartAreaClipPath;
+    var areaGenerator = area()
+        .x(function (p) { return p.scaled.x; })
+        .y0(function (p) { return p.scaled.y0; })
+        .y1(function (p) { return p.scaled.y1; });
+    var areaPath = areaGenerator(data) || '';
+    var lineGenerator = line()
+        .x(function (p) { return p.scaled.x; })
+        .y(function (p) { return p.scaled.y1; });
+    var linePath = lineGenerator(data) || '';
+    return (React.createElement(React.Fragment, null,
+        React.createElement("path", { "aria-hidden": true, fill: color, stroke: color, style: { opacity: 0.4 }, clipPath: "url(#".concat(chartAreaClipPath, ")"), d: areaPath }),
+        React.createElement("path", { "aria-hidden": true, stroke: color, clipPath: "url(#".concat(chartAreaClipPath, ")"), d: linePath })));
+}
+//# sourceMappingURL=area-series.js.map

package/area-chart/elements/area-series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-series.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAStC,eAAe,IAAI,CAAC,UAAU,CAAsB,CAAC;AAErD,SAAS,UAAU,CAAI,EAAsD;QAApD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,iBAAiB,uBAAA;IACrD,IAAM,aAAa,GAAG,IAAI,EAA2B;SAClD,CAAC,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,CAAC,EAAV,CAAU,CAAC;SAC7C,EAAE,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,EAAX,CAAW,CAAC;SAC/C,EAAE,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,EAAX,CAAW,CAAC,CAAC;IACnD,IAAM,QAAQ,GAAG,aAAa,CAAC,IAAiC,CAAC,IAAI,EAAE,CAAC;IAExE,IAAM,aAAa,GAAG,IAAI,EAA2B;SAClD,CAAC,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,CAAC,EAAV,CAAU,CAAC;SAC7C,CAAC,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,EAAX,CAAW,CAAC,CAAC;IAClD,IAAM,QAAQ,GAAG,aAAa,CAAC,IAAiC,CAAC,IAAI,EAAE,CAAC;IAExE,OAAO,CACL;QACE,6CACe,IAAI,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,QAAQ,EAAE,eAAQ,iBAAiB,MAAG,EACtC,CAAC,EAAE,QAAQ,GACX;QACF,6CAAmB,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAQ,iBAAiB,MAAG,EAAE,CAAC,EAAE,QAAQ,GAAI,CAC9F,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport { line, area } from 'd3-shape';\nimport { ChartModel } from '../model';\n\nexport interface AreaSeriesProps<T> {\n  data: readonly ChartModel.PlotPoint<T>[];\n  color: string;\n  chartAreaClipPath: string;\n}\n\nexport default memo(AreaSeries) as typeof AreaSeries;\n\nfunction AreaSeries<T>({ data, color, chartAreaClipPath }: AreaSeriesProps<T>) {\n  const areaGenerator = area<ChartModel.PlotPoint<T>>()\n    .x((p: ChartModel.PlotPoint<T>) => p.scaled.x)\n    .y0((p: ChartModel.PlotPoint<T>) => p.scaled.y0)\n    .y1((p: ChartModel.PlotPoint<T>) => p.scaled.y1);\n  const areaPath = areaGenerator(data as ChartModel.PlotPoint<T>[]) || '';\n\n  const lineGenerator = line<ChartModel.PlotPoint<T>>()\n    .x((p: ChartModel.PlotPoint<T>) => p.scaled.x)\n    .y((p: ChartModel.PlotPoint<T>) => p.scaled.y1);\n  const linePath = lineGenerator(data as ChartModel.PlotPoint<T>[]) || '';\n\n  return (\n    <>\n      <path\n        aria-hidden={true}\n        fill={color}\n        stroke={color}\n        style={{ opacity: 0.4 }}\n        clipPath={`url(#${chartAreaClipPath})`}\n        d={areaPath}\n      />\n      <path aria-hidden={true} stroke={color} clipPath={`url(#${chartAreaClipPath})`} d={linePath} />\n    </>\n  );\n}\n"]}

package/area-chart/elements/chart-popover.d.ts

@@ -0,0 +1,10 @@
+import { AreaChartProps } from '../interfaces';
+import { ChartModel } from '../model';
+import { HighlightDetails } from './use-highlight-details';
+export default function AreaChartPopover<T extends AreaChartProps.DataTypes>({ model, highlightDetails, dismissAriaLabel, size, }: {
+    model: ChartModel<T>;
+    highlightDetails: null | HighlightDetails;
+    dismissAriaLabel?: string;
+    size?: 'small' | 'medium' | 'large';
+}): JSX.Element | null;
+//# sourceMappingURL=chart-popover.d.ts.map

package/area-chart/elements/chart-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-popover.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC3E,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,IAAI,GACL,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,gBAAgB,EAAE,IAAI,GAAG,gBAAgB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,sBAyBA"}

package/area-chart/elements/chart-popover.js

@@ -0,0 +1,25 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import ChartPopover from '../../internal/components/chart-popover';
+import ChartSeriesDetails from '../../internal/components/chart-series-details';
+import styles from '../styles.css.js';
+export default function AreaChartPopover(_a) {
+    var model = _a.model, highlightDetails = _a.highlightDetails, dismissAriaLabel = _a.dismissAriaLabel, size = _a.size;
+    if (!highlightDetails) {
+        return null;
+    }
+    var popoverProps = {
+        title: highlightDetails.formattedX,
+        trackRef: model.refs.verticalMarker,
+        trackKey: highlightDetails.highlightIndex,
+        dismissButton: highlightDetails.isPopoverPinned,
+        onDismiss: model.handlers.onPopoverDismiss
+    };
+    return (React.createElement(ChartPopover, __assign({}, popoverProps, { container: model.refs.container.current, dismissAriaLabel: dismissAriaLabel, size: size }),
+        React.createElement(ChartSeriesDetails, { details: highlightDetails.seriesDetails }),
+        React.createElement("div", { className: styles['popover-divider'] }),
+        React.createElement(ChartSeriesDetails, { details: highlightDetails.totalDetails })));
+}
+//# sourceMappingURL=chart-popover.js.map

package/area-chart/elements/chart-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-popover.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAIhF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAqC,EAU5E;QATC,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,IAAI,UAAA;IAOJ,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG;QACnB,KAAK,EAAE,gBAAgB,CAAC,UAAU;QAClC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,gBAAgB,CAAC,cAAc;QACzC,aAAa,EAAE,gBAAgB,CAAC,eAAe;QAC/C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,gBAAgB;KAC3C,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,eACP,YAAY,IAChB,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EACvC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI;QAEV,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,aAAa,GAAI;QAC/D,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,GAAI;QAC7C,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,GAAI,CACjD,CAChB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport ChartPopover from '../../internal/components/chart-popover';\nimport ChartSeriesDetails from '../../internal/components/chart-series-details';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport styles from '../styles.css.js';\nimport { HighlightDetails } from './use-highlight-details';\n\nexport default function AreaChartPopover<T extends AreaChartProps.DataTypes>({\n  model,\n  highlightDetails,\n  dismissAriaLabel,\n  size,\n}: {\n  model: ChartModel<T>;\n  highlightDetails: null | HighlightDetails;\n  dismissAriaLabel?: string;\n  size?: 'small' | 'medium' | 'large';\n}) {\n  if (!highlightDetails) {\n    return null;\n  }\n\n  const popoverProps = {\n    title: highlightDetails.formattedX,\n    trackRef: model.refs.verticalMarker,\n    trackKey: highlightDetails.highlightIndex,\n    dismissButton: highlightDetails.isPopoverPinned,\n    onDismiss: model.handlers.onPopoverDismiss,\n  };\n\n  return (\n    <ChartPopover\n      {...popoverProps}\n      container={model.refs.container.current}\n      dismissAriaLabel={dismissAriaLabel}\n      size={size}\n    >\n      <ChartSeriesDetails details={highlightDetails.seriesDetails} />\n      <div className={styles['popover-divider']} />\n      <ChartSeriesDetails details={highlightDetails.totalDetails} />\n    </ChartPopover>\n  );\n}\n"]}

package/area-chart/elements/data-series.d.ts

@@ -0,0 +1,8 @@
+import { AreaChartProps } from '../interfaces';
+import { ChartModel } from '../model';
+declare const _default: typeof DataSeries;
+export default _default;
+declare function DataSeries<T extends AreaChartProps.DataTypes>({ model }: {
+    model: ChartModel<T>;
+}): JSX.Element;
+//# sourceMappingURL=data-series.d.ts.map

package/area-chart/elements/data-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-series.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/data-series.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;;AAKtC,wBAAqD;AAErD,iBAAS,UAAU,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;CAAE,eAyD1F"}