@backstage-community/plugin-cost-insights 0.15.2 → 0.17.0

package/dist/components/AlertInsights/AlertStatusSummary.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertStatusSummary.esm.js","sources":["../../../src/components/AlertInsights/AlertStatusSummary.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { Fragment } from 'react';\nimport Avatar from '@material-ui/core/Avatar';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport Divider from '@material-ui/core/Divider';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { default as AcceptIcon } from '@material-ui/icons/Check';\nimport { default as DismissIcon } from '@material-ui/icons/Delete';\nimport { default as SnoozeIcon } from '@material-ui/icons/AccessTime';\nimport { ActionItemCard } from '../ActionItems';\nimport { Alert, AlertStatus } from '../../types';\nimport { useActionItemCardStyles as useStyles } from '../../utils/styles';\n\ntype AlertGroupProps = {\n  alerts: Alert[];\n  status: AlertStatus;\n  title: string;\n  icon: JSX.Element;\n};\n\nconst AlertGroup = ({ alerts, status, title, icon }: AlertGroupProps) => {\n  const classes = useStyles();\n  return (\n    <Box p={1}>\n      {alerts.map((alert, index) => (\n        <Fragment key={`alert-${status}-${index}`}>\n          <ActionItemCard\n            disableScroll\n            alert={alert}\n            avatar={\n              <Tooltip title={title}>\n                <Avatar className={classes.avatar}>{icon}</Avatar>\n              </Tooltip>\n            }\n          />\n          {index < alerts.length - 1 && <Divider />}\n        </Fragment>\n      ))}\n    </Box>\n  );\n};\n\ntype AlertStatusSummaryProps = {\n  open: boolean;\n  snoozed: Alert[];\n  accepted: Alert[];\n  dismissed: Alert[];\n};\n\nexport const AlertStatusSummary = ({\n  open,\n  snoozed,\n  accepted,\n  dismissed,\n}: AlertStatusSummaryProps) => {\n  const isSnoozedListDisplayed = !!snoozed.length;\n  const isAcceptedListDisplayed = !!accepted.length;\n  const isDismissedListDisplayed = !!dismissed.length;\n\n  return (\n    <Collapse in={open}>\n      {isAcceptedListDisplayed && (\n        <AlertGroup\n          title=\"Accepted\"\n          alerts={accepted}\n          status={AlertStatus.Accepted}\n          icon={\n            <AcceptIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Accepted}\n            />\n          }\n        />\n      )}\n      {isSnoozedListDisplayed && (\n        <AlertGroup\n          title=\"Snoozed\"\n          alerts={snoozed}\n          status={AlertStatus.Snoozed}\n          icon={\n            <SnoozeIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Snoozed}\n            />\n          }\n        />\n      )}\n      {isDismissedListDisplayed && (\n        <AlertGroup\n          title=\"Dismissed\"\n          alerts={dismissed}\n          status={AlertStatus.Dismissed}\n          icon={\n            <DismissIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Dismissed}\n            />\n          }\n        />\n      )}\n    </Collapse>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,aAAa,CAAC,EAAE,QAAQ,MAAQ,EAAA,KAAA,EAAO,MAA4B,KAAA;AACvE,EAAA,MAAM,UAAUA,uBAAU,EAAA;AAC1B,EAAA,2CACG,GAAI,EAAA,EAAA,CAAA,EAAG,CACL,EAAA,EAAA,MAAA,CAAO,IAAI,CAAC,KAAA,EAAO,KAClB,qBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,GAAK,EAAA,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,EAAI,KAAK,CACrC,CAAA,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,KAAA;AAAA,MACA,MAAA,kBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,SAAW,EAAA,OAAA,CAAQ,MAAS,EAAA,EAAA,IAAK,CAC3C;AAAA;AAAA,GAEJ,EACC,QAAQ,MAAO,CAAA,MAAA,GAAS,qBAAM,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAQ,CACzC,CACD,CACH,CAAA;AAEJ,CAAA;AASO,MAAM,qBAAqB,CAAC;AAAA,EACjC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,sBAAA,GAAyB,CAAC,CAAC,OAAQ,CAAA,MAAA;AACzC,EAAM,MAAA,uBAAA,GAA0B,CAAC,CAAC,QAAS,CAAA,MAAA;AAC3C,EAAM,MAAA,wBAAA,GAA2B,CAAC,CAAC,SAAU,CAAA,MAAA;AAE7C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,EAAI,EAAA,IAAA,EAAA,EACX,uBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,UAAA;AAAA,MACN,MAAQ,EAAA,QAAA;AAAA,MACR,QAAQ,WAAY,CAAA,QAAA;AAAA,MACpB,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,KAAA;AAAA,UACL,aAAa,EAAA,KAAA;AAAA,UACb,cAAY,WAAY,CAAA;AAAA;AAAA;AAC1B;AAAA,KAIL,sBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,MAAQ,EAAA,OAAA;AAAA,MACR,QAAQ,WAAY,CAAA,OAAA;AAAA,MACpB,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,KAAA;AAAA,UACL,aAAa,EAAA,KAAA;AAAA,UACb,cAAY,WAAY,CAAA;AAAA;AAAA;AAC1B;AAAA,KAIL,wBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,MAAQ,EAAA,SAAA;AAAA,MACR,QAAQ,WAAY,CAAA,SAAA;AAAA,MACpB,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,KAAA;AAAA,UACL,aAAa,EAAA,KAAA;AAAA,UACb,cAAY,WAAY,CAAA;AAAA;AAAA;AAC1B;AAAA,GAIR,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AlertStatusSummary.esm.js","sources":["../../../src/components/AlertInsights/AlertStatusSummary.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Fragment } from 'react';\nimport Avatar from '@material-ui/core/Avatar';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport Divider from '@material-ui/core/Divider';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { default as AcceptIcon } from '@material-ui/icons/Check';\nimport { default as DismissIcon } from '@material-ui/icons/Delete';\nimport { default as SnoozeIcon } from '@material-ui/icons/AccessTime';\nimport { ActionItemCard } from '../ActionItems';\nimport { Alert, AlertStatus } from '../../types';\nimport { useActionItemCardStyles as useStyles } from '../../utils/styles';\n\ntype AlertGroupProps = {\n  alerts: Alert[];\n  status: AlertStatus;\n  title: string;\n  icon: JSX.Element;\n};\n\nconst AlertGroup = ({ alerts, status, title, icon }: AlertGroupProps) => {\n  const classes = useStyles();\n  return (\n    <Box p={1}>\n      {alerts.map((alert, index) => (\n        <Fragment key={`alert-${status}-${index}`}>\n          <ActionItemCard\n            disableScroll\n            alert={alert}\n            avatar={\n              <Tooltip title={title}>\n                <Avatar className={classes.avatar}>{icon}</Avatar>\n              </Tooltip>\n            }\n          />\n          {index < alerts.length - 1 && <Divider />}\n        </Fragment>\n      ))}\n    </Box>\n  );\n};\n\ntype AlertStatusSummaryProps = {\n  open: boolean;\n  snoozed: Alert[];\n  accepted: Alert[];\n  dismissed: Alert[];\n};\n\nexport const AlertStatusSummary = ({\n  open,\n  snoozed,\n  accepted,\n  dismissed,\n}: AlertStatusSummaryProps) => {\n  const isSnoozedListDisplayed = !!snoozed.length;\n  const isAcceptedListDisplayed = !!accepted.length;\n  const isDismissedListDisplayed = !!dismissed.length;\n\n  return (\n    <Collapse in={open}>\n      {isAcceptedListDisplayed && (\n        <AlertGroup\n          title=\"Accepted\"\n          alerts={accepted}\n          status={AlertStatus.Accepted}\n          icon={\n            <AcceptIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Accepted}\n            />\n          }\n        />\n      )}\n      {isSnoozedListDisplayed && (\n        <AlertGroup\n          title=\"Snoozed\"\n          alerts={snoozed}\n          status={AlertStatus.Snoozed}\n          icon={\n            <SnoozeIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Snoozed}\n            />\n          }\n        />\n      )}\n      {isDismissedListDisplayed && (\n        <AlertGroup\n          title=\"Dismissed\"\n          alerts={dismissed}\n          status={AlertStatus.Dismissed}\n          icon={\n            <DismissIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Dismissed}\n            />\n          }\n        />\n      )}\n    </Collapse>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,aAAa,CAAC,EAAE,QAAQ,MAAQ,EAAA,KAAA,EAAO,MAA4B,KAAA;AACvE,EAAA,MAAM,UAAUA,uBAAU,EAAA;AAC1B,EACE,uBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,CAAA,EAAG,CACL,EAAA,QAAA,EAAA,MAAA,CAAO,IAAI,CAAC,KAAA,EAAO,KAClB,qBAAA,IAAA,CAAC,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,aAAa,EAAA,IAAA;AAAA,QACb,KAAA;AAAA,QACA,MAAA,kBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KACP,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,OAAA,CAAQ,MAAS,EAAA,QAAA,EAAA,IAAA,EAAK,CAC3C,EAAA;AAAA;AAAA,KAEJ;AAAA,IACC,KAAQ,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,wBAAM,OAAQ,EAAA,EAAA;AAAA,GAAA,EAAA,EAV1B,SAAS,MAAM,CAAA,CAAA,EAAI,KAAK,CAAA,CAWvC,CACD,CACH,EAAA,CAAA;AAEJ,CAAA;AASO,MAAM,qBAAqB,CAAC;AAAA,EACjC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,sBAAA,GAAyB,CAAC,CAAC,OAAQ,CAAA,MAAA;AACzC,EAAM,MAAA,uBAAA,GAA0B,CAAC,CAAC,QAAS,CAAA,MAAA;AAC3C,EAAM,MAAA,wBAAA,GAA2B,CAAC,CAAC,SAAU,CAAA,MAAA;AAE7C,EACE,uBAAA,IAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,IACX,EAAA,QAAA,EAAA;AAAA,IACC,uBAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,UAAA;AAAA,QACN,MAAQ,EAAA,QAAA;AAAA,QACR,QAAQ,WAAY,CAAA,QAAA;AAAA,QACpB,IACE,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,KAAA;AAAA,YACL,aAAa,EAAA,KAAA;AAAA,YACb,cAAY,WAAY,CAAA;AAAA;AAAA;AAC1B;AAAA,KAEJ;AAAA,IAED,sBACC,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,MAAQ,EAAA,OAAA;AAAA,QACR,QAAQ,WAAY,CAAA,OAAA;AAAA,QACpB,IACE,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,KAAA;AAAA,YACL,aAAa,EAAA,KAAA;AAAA,YACb,cAAY,WAAY,CAAA;AAAA;AAAA;AAC1B;AAAA,KAEJ;AAAA,IAED,wBACC,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,WAAA;AAAA,QACN,MAAQ,EAAA,SAAA;AAAA,QACR,QAAQ,WAAY,CAAA,SAAA;AAAA,QACpB,IACE,kBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,KAAA;AAAA,YACL,aAAa,EAAA,KAAA;AAAA,YACb,cAAY,WAAY,CAAA;AAAA;AAAA;AAC1B;AAAA;AAEJ,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/AlertInsights/AlertStatusSummaryButton.esm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import classnames from 'classnames';
 import Button from '@material-ui/core/Button';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -17,17 +18,17 @@ const AlertStatusSummaryButton = ({
     setClicked((prevClicked) => !prevClicked);
     onClick(e);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       variant: "text",
       color: "primary",
       disableElevation: true,
       "aria-label": "expand",
-      endIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { className: iconClassName }),
-      onClick: handleOnClick
-    },
-    children
+      endIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { className: iconClassName }),
+      onClick: handleOnClick,
+      children
+    }
   );
 };
 

package/dist/components/AlertInsights/AlertStatusSummaryButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertStatusSummaryButton.esm.js","sources":["../../../src/components/AlertInsights/AlertStatusSummaryButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState, MouseEventHandler, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport { default as ExpandMoreIcon } from '@material-ui/icons/ExpandMore';\nimport { useAlertStatusSummaryButtonStyles as useStyles } from '../../utils/styles';\n\ntype AlertStatusSummaryButtonProps = {\n  onClick: MouseEventHandler;\n};\n\nexport const AlertStatusSummaryButton = ({\n  children,\n  onClick,\n}: PropsWithChildren<AlertStatusSummaryButtonProps>) => {\n  const classes = useStyles();\n  const [clicked, setClicked] = useState(false);\n  const iconClassName = classnames(classes.icon, {\n    [classes.clicked]: clicked,\n  });\n\n  const handleOnClick: MouseEventHandler = e => {\n    setClicked(prevClicked => !prevClicked);\n    onClick(e);\n  };\n\n  return (\n    <Button\n      variant=\"text\"\n      color=\"primary\"\n      disableElevation\n      aria-label=\"expand\"\n      endIcon={<ExpandMoreIcon className={iconClassName} />}\n      onClick={handleOnClick}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AA0BO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA;AACF,CAAwD,KAAA;AACtD,EAAA,MAAM,UAAUA,iCAAU,EAAA;AAC1B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,aAAA,GAAgB,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,IAC7C,CAAC,OAAQ,CAAA,OAAO,GAAG;AAAA,GACpB,CAAA;AAED,EAAA,MAAM,gBAAmC,CAAK,CAAA,KAAA;AAC5C,IAAW,UAAA,CAAA,CAAA,WAAA,KAAe,CAAC,WAAW,CAAA;AACtC,IAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,gBAAgB,EAAA,IAAA;AAAA,MAChB,YAAW,EAAA,QAAA;AAAA,MACX,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,SAAA,EAAW,aAAe,EAAA,CAAA;AAAA,MACnD,OAAS,EAAA;AAAA,KAAA;AAAA,IAER;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"AlertStatusSummaryButton.esm.js","sources":["../../../src/components/AlertInsights/AlertStatusSummaryButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useState, MouseEventHandler, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport { default as ExpandMoreIcon } from '@material-ui/icons/ExpandMore';\nimport { useAlertStatusSummaryButtonStyles as useStyles } from '../../utils/styles';\n\ntype AlertStatusSummaryButtonProps = {\n  onClick: MouseEventHandler;\n};\n\nexport const AlertStatusSummaryButton = ({\n  children,\n  onClick,\n}: PropsWithChildren<AlertStatusSummaryButtonProps>) => {\n  const classes = useStyles();\n  const [clicked, setClicked] = useState(false);\n  const iconClassName = classnames(classes.icon, {\n    [classes.clicked]: clicked,\n  });\n\n  const handleOnClick: MouseEventHandler = e => {\n    setClicked(prevClicked => !prevClicked);\n    onClick(e);\n  };\n\n  return (\n    <Button\n      variant=\"text\"\n      color=\"primary\"\n      disableElevation\n      aria-label=\"expand\"\n      endIcon={<ExpandMoreIcon className={iconClassName} />}\n      onClick={handleOnClick}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AA0BO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA;AACF,CAAwD,KAAA;AACtD,EAAA,MAAM,UAAUA,iCAAU,EAAA;AAC1B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,aAAA,GAAgB,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,IAC7C,CAAC,OAAQ,CAAA,OAAO,GAAG;AAAA,GACpB,CAAA;AAED,EAAA,MAAM,gBAAmC,CAAK,CAAA,KAAA;AAC5C,IAAW,UAAA,CAAA,CAAA,WAAA,KAAe,CAAC,WAAW,CAAA;AACtC,IAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACX;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,gBAAgB,EAAA,IAAA;AAAA,MAChB,YAAW,EAAA,QAAA;AAAA,MACX,OAAS,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,SAAA,EAAW,aAAe,EAAA,CAAA;AAAA,MACnD,OAAS,EAAA,aAAA;AAAA,MAER;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/AlertInstructionsLayout/AlertInstructionsLayout.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
@@ -25,22 +25,28 @@ const AlertInstructionsLayout = ({
   children
 }) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(CostInsightsThemeProvider, null, /* @__PURE__ */ React.createElement(ConfigProvider, null, /* @__PURE__ */ React.createElement(CurrencyProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      title: "Cost Insights",
-      pageTitleOverride: title,
-      type: "Tool"
-    }
-  ), /* @__PURE__ */ React.createElement(Container, { maxWidth: "md", disableGutters: true, className: classes.root }, /* @__PURE__ */ React.createElement(Box, { mb: 3 }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "outlined",
-      startIcon: /* @__PURE__ */ React.createElement(ChevronLeftIcon, null),
-      href: "/cost-insights"
-    },
-    "Back to Cost Insights"
-  )), children)))));
+  return /* @__PURE__ */ jsx(CostInsightsThemeProvider, { children: /* @__PURE__ */ jsx(ConfigProvider, { children: /* @__PURE__ */ jsx(CurrencyProvider, { children: /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: "Cost Insights",
+        pageTitleOverride: title,
+        type: "Tool"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Container, { maxWidth: "md", disableGutters: true, className: classes.root, children: [
+      /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+          href: "/cost-insights",
+          children: "Back to Cost Insights"
+        }
+      ) }),
+      children
+    ] })
+  ] }) }) }) });
 };
 
 export { AlertInstructionsLayout };

package/dist/components/AlertInstructionsLayout/AlertInstructionsLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertInstructionsLayout.esm.js","sources":["../../../src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';\nimport { ConfigProvider, CurrencyProvider } from '../../hooks';\nimport { Header, Page } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    padding: theme.spacing(4),\n  },\n}));\n\ntype AlertInstructionsLayoutProps = {\n  title: string;\n};\n\nexport const AlertInstructionsLayout = ({\n  title,\n  children,\n}: PropsWithChildren<AlertInstructionsLayoutProps>) => {\n  const classes = useStyles();\n  return (\n    <CostInsightsThemeProvider>\n      <ConfigProvider>\n        <CurrencyProvider>\n          <Page themeId=\"tool\">\n            <Header\n              title=\"Cost Insights\"\n              pageTitleOverride={title}\n              type=\"Tool\"\n            />\n            <Container maxWidth=\"md\" disableGutters className={classes.root}>\n              <Box mb={3}>\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<ChevronLeftIcon />}\n                  href=\"/cost-insights\"\n                >\n                  Back to Cost Insights\n                </Button>\n              </Box>\n              {children}\n            </Container>\n          </Page>\n        </CurrencyProvider>\n      </ConfigProvider>\n    </CostInsightsThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,aAAA;AAAA,IACV,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAE5B,CAAE,CAAA,CAAA;AAMK,MAAM,0BAA0B,CAAC;AAAA,EACtC,KAAA;AAAA,EACA;AACF,CAAuD,KAAA;AACrD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,iDACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,sCACE,gBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,eAAA;AAAA,MACN,iBAAmB,EAAA,KAAA;AAAA,MACnB,IAAK,EAAA;AAAA;AAAA,GAEP,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,QAAA,EAAS,IAAK,EAAA,cAAA,EAAc,IAAC,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAA,kBACxD,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACR,SAAA,sCAAY,eAAgB,EAAA,IAAA,CAAA;AAAA,MAC5B,IAAK,EAAA;AAAA,KAAA;AAAA,IACN;AAAA,GAGH,CACC,EAAA,QACH,CACF,CACF,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AlertInstructionsLayout.esm.js","sources":["../../../src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';\nimport { ConfigProvider, CurrencyProvider } from '../../hooks';\nimport { Header, Page } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    padding: theme.spacing(4),\n  },\n}));\n\ntype AlertInstructionsLayoutProps = {\n  title: string;\n};\n\nexport const AlertInstructionsLayout = ({\n  title,\n  children,\n}: PropsWithChildren<AlertInstructionsLayoutProps>) => {\n  const classes = useStyles();\n  return (\n    <CostInsightsThemeProvider>\n      <ConfigProvider>\n        <CurrencyProvider>\n          <Page themeId=\"tool\">\n            <Header\n              title=\"Cost Insights\"\n              pageTitleOverride={title}\n              type=\"Tool\"\n            />\n            <Container maxWidth=\"md\" disableGutters className={classes.root}>\n              <Box mb={3}>\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<ChevronLeftIcon />}\n                  href=\"/cost-insights\"\n                >\n                  Back to Cost Insights\n                </Button>\n              </Box>\n              {children}\n            </Container>\n          </Page>\n        </CurrencyProvider>\n      </ConfigProvider>\n    </CostInsightsThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,aAAA;AAAA,IACV,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAE5B,CAAE,CAAA,CAAA;AAMK,MAAM,0BAA0B,CAAC;AAAA,EACtC,KAAA;AAAA,EACA;AACF,CAAuD,KAAA;AACrD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,GAAA,CAAC,6BACC,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EACC,8BAAC,gBACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,eAAA;AAAA,QACN,iBAAmB,EAAA,KAAA;AAAA,QACnB,IAAK,EAAA;AAAA;AAAA,KACP;AAAA,oBACA,IAAA,CAAC,aAAU,QAAS,EAAA,IAAA,EAAK,gBAAc,IAAC,EAAA,SAAA,EAAW,QAAQ,IACzD,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,UAAA;AAAA,UACR,SAAA,sBAAY,eAAgB,EAAA,EAAA,CAAA;AAAA,UAC5B,IAAK,EAAA,gBAAA;AAAA,UACN,QAAA,EAAA;AAAA;AAAA,OAGH,EAAA,CAAA;AAAA,MACC;AAAA,KACH,EAAA;AAAA,GACF,EAAA,CAAA,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChart.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, Tooltip, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
@@ -25,7 +26,7 @@ const defaultTooltip = (baseCurrency) => {
     if (isInvalid({ label, payload })) return null;
     const title = titleOf(label);
     const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);
-    return /* @__PURE__ */ React.createElement(BarChartTooltip, { title }, items.map((item, index) => /* @__PURE__ */ React.createElement(BarChartTooltipItem, { key: `${item.label}-${index}`, item })));
+    return /* @__PURE__ */ jsx(BarChartTooltip, { title, children: items.map((item, index) => /* @__PURE__ */ jsx(BarChartTooltipItem, { item }, `${item.label}-${index}`)) });
   };
   return tooltip;
 };
@@ -73,93 +74,97 @@ const BarChart = (props) => {
     },
     [setStepWindow, resources, displayAmount]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       position: "relative",
       onMouseLeave: () => setActiveChart(false),
       onMouseEnter: () => setActiveChart(true),
-      "data-testid": "bar-chart-wrapper"
-    },
-    /* @__PURE__ */ React.createElement(
-      ResponsiveContainer,
-      {
-        height: styles.container.height,
-        width: responsive ? "100%" : styles.container.width
-      },
-      /* @__PURE__ */ React.createElement(
-        BarChart$1,
-        {
-          style: { cursor: onClick ? "pointer" : null },
-          onClick,
-          onMouseMove,
-          data: sortedResources,
-          margin: styles.barChart.margin,
-          barSize: 45,
-          "data-testid": "bar-chart"
-        },
-        tooltip && /* @__PURE__ */ React.createElement(
-          Tooltip,
-          {
-            filterNull: true,
-            cursor: styles.cursor,
-            animationDuration: 100,
-            content: tooltip
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          CartesianGrid,
-          {
-            vertical: false,
-            stroke: styles.cartesianGrid.stroke
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          XAxis,
+      "data-testid": "bar-chart-wrapper",
+      children: [
+        /* @__PURE__ */ jsx(
+          ResponsiveContainer,
           {
-            dataKey: DataKey.Name,
-            tickLine: false,
-            interval: 0,
-            height: styles.xAxis.height,
-            tick: BarChartTick
+            height: styles.container.height,
+            width: responsive ? "100%" : styles.container.width,
+            children: /* @__PURE__ */ jsxs(
+              BarChart$1,
+              {
+                style: { cursor: onClick ? "pointer" : null },
+                onClick,
+                onMouseMove,
+                data: sortedResources,
+                margin: styles.barChart.margin,
+                barSize: 45,
+                "data-testid": "bar-chart",
+                children: [
+                  tooltip && /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      filterNull: true,
+                      cursor: styles.cursor,
+                      animationDuration: 100,
+                      content: tooltip
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      vertical: false,
+                      stroke: styles.cartesianGrid.stroke
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: DataKey.Name,
+                      tickLine: false,
+                      interval: 0,
+                      height: styles.xAxis.height,
+                      tick: BarChartTick
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      tickFormatter: currencyFormatter(baseCurrency).format,
+                      domain: [() => 0, globalResourcesMax],
+                      tick: styles.axis
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Bar,
+                    {
+                      dataKey: DataKey.Previous,
+                      name: data.previousName,
+                      fill: data.previousFill,
+                      isAnimationActive: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Bar,
+                    {
+                      dataKey: DataKey.Current,
+                      name: data.currentName,
+                      fill: data.currentFill,
+                      isAnimationActive: false
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
-        /* @__PURE__ */ React.createElement(
-          YAxis,
+        !disableStepper && /* @__PURE__ */ jsx(
+          BarChartStepper,
           {
-            tickFormatter: currencyFormatter(baseCurrency).format,
-            domain: [() => 0, globalResourcesMax],
-            tick: styles.axis
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          Bar,
-          {
-            dataKey: DataKey.Previous,
-            name: data.previousName,
-            fill: data.previousFill,
-            isAnimationActive: false
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          Bar,
-          {
-            dataKey: DataKey.Current,
-            name: data.currentName,
-            fill: data.currentFill,
-            isAnimationActive: false
+            steps,
+            disableScroll: !activeChart,
+            onChange: onStepChange
           }
         )
-      )
-    ),
-    !disableStepper && /* @__PURE__ */ React.createElement(
-      BarChartStepper,
-      {
-        steps,
-        disableScroll: !activeChart,
-        onChange: onStepChange
-      }
-    )
+      ]
+    }
   );
 };
 

package/dist/components/BarChart/BarChart.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.esm.js","sources":["../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState, useCallback } from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Tooltip as RechartsTooltip,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { BarChartTick } from './BarChartTick';\nimport { BarChartStepper } from './BarChartStepper';\nimport { BarChartTooltip } from './BarChartTooltip';\nimport { BarChartTooltipItem } from './BarChartTooltipItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport {\n  ResourceData,\n  DataKey,\n  CostInsightsTheme,\n  BarChartOptions,\n} from '../../types';\nimport { notEmpty } from '../../utils/assert';\nimport { useBarChartStyles } from '../../utils/styles';\nimport { resourceSort } from '../../utils/sort';\nimport { isInvalid, titleOf, tooltipItemOf } from '../../utils/graphs';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\nconst defaultTooltip = (baseCurrency: Intl.NumberFormat) => {\n  const tooltip: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const title = titleOf(label);\n    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);\n    return (\n      <BarChartTooltip title={title}>\n        {items.map((item, index) => (\n          <BarChartTooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </BarChartTooltip>\n    );\n  };\n  return tooltip;\n};\n\n/** @public */\nexport type BarChartProps = {\n  resources: ResourceData[];\n  responsive?: boolean;\n  displayAmount?: number;\n  options?: Partial<BarChartOptions>;\n  tooltip?: TooltipRenderer;\n  onClick?: (...args: any[]) => void;\n  onMouseMove?: (...args: any[]) => void;\n};\n\n/** @public */\nexport const BarChart = (props: BarChartProps) => {\n  const { baseCurrency } = useConfig();\n\n  const {\n    resources,\n    responsive = true,\n    displayAmount = 6,\n    options = {},\n    tooltip = defaultTooltip(baseCurrency),\n    onClick,\n    onMouseMove,\n  } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useBarChartStyles(theme);\n  const [activeChart, setActiveChart] = useState(false);\n  const [stepWindow, setStepWindow] = useState(() => [0, displayAmount]);\n\n  const data = Object.assign(\n    {\n      previousFill: theme.palette.lightBlue,\n      currentFill: theme.palette.darkBlue,\n      previousName: 'Previous',\n      currentName: 'Current',\n    },\n    options,\n  );\n\n  const [stepStart, stepEnd] = stepWindow;\n  const steps = Math.ceil(resources.length / displayAmount);\n  const disableStepper = resources.length <= displayAmount;\n\n  const sortedResources = resources\n    .sort(resourceSort)\n    .slice(stepStart, stepEnd);\n\n  // Pin the domain to the largest value in the series.\n  // Intentionally redundant - This could simply be derived from the first element in the already sorted list,\n  // but that may not be the case in the future when custom sorting is implemented.\n  const globalResourcesMax = resources.reduce(\n    (max, r: ResourceData) => Math.max(max, r.current, r.previous),\n    0,\n  );\n\n  const onStepChange = useCallback(\n    (activeStep: number) => {\n      const start = activeStep * displayAmount;\n      const end = start + displayAmount;\n      if (end > resources.length) {\n        setStepWindow([start, resources.length]);\n      } else {\n        setStepWindow([start, end]);\n      }\n    },\n    [setStepWindow, resources, displayAmount],\n  );\n\n  return (\n    <Box\n      position=\"relative\"\n      onMouseLeave={() => setActiveChart(false)}\n      onMouseEnter={() => setActiveChart(true)}\n      data-testid=\"bar-chart-wrapper\"\n    >\n      {/* Setting fixed values for height and width generates a console warning in testing but enables ResponsiveContainer to render its children. */}\n      <ResponsiveContainer\n        height={styles.container.height}\n        width={responsive ? '100%' : styles.container.width}\n      >\n        <RechartsBarChart\n          style={{ cursor: onClick ? 'pointer' : null }}\n          onClick={onClick}\n          onMouseMove={onMouseMove}\n          data={sortedResources}\n          margin={styles.barChart.margin}\n          barSize={45}\n          data-testid=\"bar-chart\"\n        >\n          {tooltip && (\n            <RechartsTooltip\n              filterNull\n              cursor={styles.cursor}\n              animationDuration={100}\n              content={tooltip}\n            />\n          )}\n          <CartesianGrid\n            vertical={false}\n            stroke={styles.cartesianGrid.stroke}\n          />\n          <XAxis\n            dataKey={DataKey.Name}\n            tickLine={false}\n            interval={0}\n            height={styles.xAxis.height}\n            tick={BarChartTick}\n          />\n          <YAxis\n            tickFormatter={currencyFormatter(baseCurrency).format}\n            domain={[() => 0, globalResourcesMax]}\n            tick={styles.axis}\n          />\n          <Bar\n            dataKey={DataKey.Previous}\n            name={data.previousName}\n            fill={data.previousFill}\n            isAnimationActive={false}\n          />\n          <Bar\n            dataKey={DataKey.Current}\n            name={data.currentName}\n            fill={data.currentFill}\n            isAnimationActive={false}\n          />\n        </RechartsBarChart>\n      </ResponsiveContainer>\n      {!disableStepper && (\n        <BarChartStepper\n          steps={steps}\n          disableScroll={!activeChart}\n          onChange={onStepChange}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["RechartsBarChart","RechartsTooltip"],"mappings":"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"}
+{"version":3,"file":"BarChart.esm.js","sources":["../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useState, useCallback } from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Tooltip as RechartsTooltip,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { BarChartTick } from './BarChartTick';\nimport { BarChartStepper } from './BarChartStepper';\nimport { BarChartTooltip } from './BarChartTooltip';\nimport { BarChartTooltipItem } from './BarChartTooltipItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport {\n  ResourceData,\n  DataKey,\n  CostInsightsTheme,\n  BarChartOptions,\n} from '../../types';\nimport { notEmpty } from '../../utils/assert';\nimport { useBarChartStyles } from '../../utils/styles';\nimport { resourceSort } from '../../utils/sort';\nimport { isInvalid, titleOf, tooltipItemOf } from '../../utils/graphs';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\nconst defaultTooltip = (baseCurrency: Intl.NumberFormat) => {\n  const tooltip: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const title = titleOf(label);\n    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);\n    return (\n      <BarChartTooltip title={title}>\n        {items.map((item, index) => (\n          <BarChartTooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </BarChartTooltip>\n    );\n  };\n  return tooltip;\n};\n\n/** @public */\nexport type BarChartProps = {\n  resources: ResourceData[];\n  responsive?: boolean;\n  displayAmount?: number;\n  options?: Partial<BarChartOptions>;\n  tooltip?: TooltipRenderer;\n  onClick?: (...args: any[]) => void;\n  onMouseMove?: (...args: any[]) => void;\n};\n\n/** @public */\nexport const BarChart = (props: BarChartProps) => {\n  const { baseCurrency } = useConfig();\n\n  const {\n    resources,\n    responsive = true,\n    displayAmount = 6,\n    options = {},\n    tooltip = defaultTooltip(baseCurrency),\n    onClick,\n    onMouseMove,\n  } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useBarChartStyles(theme);\n  const [activeChart, setActiveChart] = useState(false);\n  const [stepWindow, setStepWindow] = useState(() => [0, displayAmount]);\n\n  const data = Object.assign(\n    {\n      previousFill: theme.palette.lightBlue,\n      currentFill: theme.palette.darkBlue,\n      previousName: 'Previous',\n      currentName: 'Current',\n    },\n    options,\n  );\n\n  const [stepStart, stepEnd] = stepWindow;\n  const steps = Math.ceil(resources.length / displayAmount);\n  const disableStepper = resources.length <= displayAmount;\n\n  const sortedResources = resources\n    .sort(resourceSort)\n    .slice(stepStart, stepEnd);\n\n  // Pin the domain to the largest value in the series.\n  // Intentionally redundant - This could simply be derived from the first element in the already sorted list,\n  // but that may not be the case in the future when custom sorting is implemented.\n  const globalResourcesMax = resources.reduce(\n    (max, r: ResourceData) => Math.max(max, r.current, r.previous),\n    0,\n  );\n\n  const onStepChange = useCallback(\n    (activeStep: number) => {\n      const start = activeStep * displayAmount;\n      const end = start + displayAmount;\n      if (end > resources.length) {\n        setStepWindow([start, resources.length]);\n      } else {\n        setStepWindow([start, end]);\n      }\n    },\n    [setStepWindow, resources, displayAmount],\n  );\n\n  return (\n    <Box\n      position=\"relative\"\n      onMouseLeave={() => setActiveChart(false)}\n      onMouseEnter={() => setActiveChart(true)}\n      data-testid=\"bar-chart-wrapper\"\n    >\n      {/* Setting fixed values for height and width generates a console warning in testing but enables ResponsiveContainer to render its children. */}\n      <ResponsiveContainer\n        height={styles.container.height}\n        width={responsive ? '100%' : styles.container.width}\n      >\n        <RechartsBarChart\n          style={{ cursor: onClick ? 'pointer' : null }}\n          onClick={onClick}\n          onMouseMove={onMouseMove}\n          data={sortedResources}\n          margin={styles.barChart.margin}\n          barSize={45}\n          data-testid=\"bar-chart\"\n        >\n          {tooltip && (\n            <RechartsTooltip\n              filterNull\n              cursor={styles.cursor}\n              animationDuration={100}\n              content={tooltip}\n            />\n          )}\n          <CartesianGrid\n            vertical={false}\n            stroke={styles.cartesianGrid.stroke}\n          />\n          <XAxis\n            dataKey={DataKey.Name}\n            tickLine={false}\n            interval={0}\n            height={styles.xAxis.height}\n            tick={BarChartTick}\n          />\n          <YAxis\n            tickFormatter={currencyFormatter(baseCurrency).format}\n            domain={[() => 0, globalResourcesMax]}\n            tick={styles.axis}\n          />\n          <Bar\n            dataKey={DataKey.Previous}\n            name={data.previousName}\n            fill={data.previousFill}\n            isAnimationActive={false}\n          />\n          <Bar\n            dataKey={DataKey.Current}\n            name={data.currentName}\n            fill={data.currentFill}\n            isAnimationActive={false}\n          />\n        </RechartsBarChart>\n      </ResponsiveContainer>\n      {!disableStepper && (\n        <BarChartStepper\n          steps={steps}\n          disableScroll={!activeChart}\n          onChange={onStepChange}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["RechartsBarChart","RechartsTooltip"],"mappings":"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"}

package/dist/components/BarChart/BarChartLabel.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import { useBarChartLabelStyles } from '../../utils/styles.esm.js';
@@ -13,7 +13,7 @@ const BarChartLabel = ({
 }) => {
   const classes = useBarChartLabelStyles();
   const translateX = width * -0.5;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "foreignObject",
     {
       className: classes.foreignObject,
@@ -21,9 +21,12 @@ const BarChartLabel = ({
       x,
       y,
       height,
-      width
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, gutterBottom: true }, children), details)
+      width,
+      children: /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.label, gutterBottom: true, children }),
+        details
+      ] })
+    }
   );
 };
 

package/dist/components/BarChart/BarChartLabel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartLabel.esm.js","sources":["../../../src/components/BarChart/BarChartLabel.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { useBarChartLabelStyles } from '../../utils/styles';\n\ntype BarChartLabelProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartLabel = ({\n  x,\n  y,\n  height,\n  width,\n  details,\n  children,\n}: PropsWithChildren<BarChartLabelProps>) => {\n  const classes = useBarChartLabelStyles();\n  const translateX = width * -0.5;\n\n  return (\n    <foreignObject\n      className={classes.foreignObject}\n      style={{ transform: `translateX(${translateX}px)` }}\n      x={x}\n      y={y}\n      height={height}\n      width={width}\n    >\n      <Box display=\"flex\" flexDirection=\"column\" justifyContent=\"center\">\n        <Typography className={classes.label} gutterBottom>\n          {children}\n        </Typography>\n        {details}\n      </Box>\n    </foreignObject>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA;AACvC,EAAA,MAAM,aAAa,KAAQ,GAAA,CAAA,GAAA;AAE3B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,aAAA;AAAA,MACnB,KAAO,EAAA,EAAE,SAAW,EAAA,CAAA,WAAA,EAAc,UAAU,CAAM,GAAA,CAAA,EAAA;AAAA,MAClD,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KAAA;AAAA,wCAEC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,cAAe,EAAA,QAAA,EAAA,kBACvD,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAW,OAAQ,CAAA,KAAA,EAAO,cAAY,IAC/C,EAAA,EAAA,QACH,GACC,OACH;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"BarChartLabel.esm.js","sources":["../../../src/components/BarChart/BarChartLabel.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { useBarChartLabelStyles } from '../../utils/styles';\n\ntype BarChartLabelProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartLabel = ({\n  x,\n  y,\n  height,\n  width,\n  details,\n  children,\n}: PropsWithChildren<BarChartLabelProps>) => {\n  const classes = useBarChartLabelStyles();\n  const translateX = width * -0.5;\n\n  return (\n    <foreignObject\n      className={classes.foreignObject}\n      style={{ transform: `translateX(${translateX}px)` }}\n      x={x}\n      y={y}\n      height={height}\n      width={width}\n    >\n      <Box display=\"flex\" flexDirection=\"column\" justifyContent=\"center\">\n        <Typography className={classes.label} gutterBottom>\n          {children}\n        </Typography>\n        {details}\n      </Box>\n    </foreignObject>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA;AACvC,EAAA,MAAM,aAAa,KAAQ,GAAA,CAAA,GAAA;AAE3B,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,aAAA;AAAA,MACnB,KAAO,EAAA,EAAE,SAAW,EAAA,CAAA,WAAA,EAAc,UAAU,CAAM,GAAA,CAAA,EAAA;AAAA,MAClD,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MAEA,+BAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,QAAO,aAAc,EAAA,QAAA,EAAS,gBAAe,QACxD,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,KAAO,EAAA,YAAA,EAAY,MAC/C,QACH,EAAA,CAAA;AAAA,QACC;AAAA,OACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/BarChart/BarChartLegend.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
 import { LegendItem } from '../LegendItem/LegendItem.esm.js';
@@ -26,21 +26,25 @@ const BarChartLegend = (props) => {
     },
     options
   );
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.legend, display: "flex", flexDirection: "row" }, /* @__PURE__ */ React.createElement(Box, { marginRight: 2 }, /* @__PURE__ */ React.createElement(
-    LegendItem,
-    {
-      title: data.previousName,
-      markerColor: options.hideMarker ? void 0 : data.previousFill
-    },
-    currencyFormatter(baseCurrency).format(costStart)
-  )), /* @__PURE__ */ React.createElement(Box, { marginRight: 2 }, /* @__PURE__ */ React.createElement(
-    LegendItem,
-    {
-      title: data.currentName,
-      markerColor: options.hideMarker ? void 0 : data.currentFill
-    },
-    currencyFormatter(baseCurrency).format(costEnd)
-  )), children);
+  return /* @__PURE__ */ jsxs(Box, { className: classes.legend, display: "flex", flexDirection: "row", children: [
+    /* @__PURE__ */ jsx(Box, { marginRight: 2, children: /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        title: data.previousName,
+        markerColor: options.hideMarker ? void 0 : data.previousFill,
+        children: currencyFormatter(baseCurrency).format(costStart)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { marginRight: 2, children: /* @__PURE__ */ jsx(
+      LegendItem,
+      {
+        title: data.currentName,
+        markerColor: options.hideMarker ? void 0 : data.currentFill,
+        children: currencyFormatter(baseCurrency).format(costEnd)
+      }
+    ) }),
+    children
+  ] });
 };
 
 export { BarChartLegend };

package/dist/components/BarChart/BarChartLegend.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartLegend.esm.js","sources":["../../../src/components/BarChart/BarChartLegend.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { LegendItem } from '../LegendItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport { CostInsightsTheme } from '../../types';\nimport { useBarChartLayoutStyles as useStyles } from '../../utils/styles';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type BarChartLegendOptions = {\n  previousName: string;\n  previousFill: string;\n  currentName: string;\n  currentFill: string;\n  hideMarker?: boolean;\n};\n\n/** @public */\nexport type BarChartLegendProps = {\n  costStart: number;\n  costEnd: number;\n  options?: Partial<BarChartLegendOptions>;\n};\n\n/** @public */\nexport const BarChartLegend = (\n  props: PropsWithChildren<BarChartLegendProps>,\n) => {\n  const { costStart, costEnd, options = {}, children } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const classes = useStyles();\n  const { baseCurrency } = useConfig();\n\n  const data = Object.assign(\n    {\n      previousName: 'Previous',\n      previousFill: theme.palette.lightBlue,\n      currentName: 'Current',\n      currentFill: theme.palette.darkBlue,\n    },\n    options,\n  );\n\n  return (\n    <Box className={classes.legend} display=\"flex\" flexDirection=\"row\">\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.previousName}\n          markerColor={options.hideMarker ? undefined : data.previousFill}\n        >\n          {currencyFormatter(baseCurrency).format(costStart)}\n        </LegendItem>\n      </Box>\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.currentName}\n          markerColor={options.hideMarker ? undefined : data.currentFill}\n        >\n          {currencyFormatter(baseCurrency).format(costEnd)}\n        </LegendItem>\n      </Box>\n      {children}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;AA0Ca,MAAA,cAAA,GAAiB,CAC5B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAW,EAAA,OAAA,EAAS,UAAU,EAAC,EAAG,UAAa,GAAA,KAAA;AAEvD,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAA,MAAM,UAAUA,uBAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,SAAU,EAAA;AAEnC,EAAA,MAAM,OAAO,MAAO,CAAA,MAAA;AAAA,IAClB;AAAA,MACE,YAAc,EAAA,UAAA;AAAA,MACd,YAAA,EAAc,MAAM,OAAQ,CAAA,SAAA;AAAA,MAC5B,WAAa,EAAA,SAAA;AAAA,MACb,WAAA,EAAa,MAAM,OAAQ,CAAA;AAAA,KAC7B;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,MAAQ,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,KAC3D,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAa,CAChB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,IAAK,CAAA,YAAA;AAAA,MACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA;AAAA,KAAA;AAAA,IAElD,iBAAkB,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,SAAS;AAAA,GAErD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,aAAa,CAChB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,IAAK,CAAA,WAAA;AAAA,MACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA;AAAA,KAAA;AAAA,IAElD,iBAAkB,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,OAAO;AAAA,GAEnD,GACC,QACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BarChartLegend.esm.js","sources":["../../../src/components/BarChart/BarChartLegend.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { LegendItem } from '../LegendItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport { CostInsightsTheme } from '../../types';\nimport { useBarChartLayoutStyles as useStyles } from '../../utils/styles';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type BarChartLegendOptions = {\n  previousName: string;\n  previousFill: string;\n  currentName: string;\n  currentFill: string;\n  hideMarker?: boolean;\n};\n\n/** @public */\nexport type BarChartLegendProps = {\n  costStart: number;\n  costEnd: number;\n  options?: Partial<BarChartLegendOptions>;\n};\n\n/** @public */\nexport const BarChartLegend = (\n  props: PropsWithChildren<BarChartLegendProps>,\n) => {\n  const { costStart, costEnd, options = {}, children } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const classes = useStyles();\n  const { baseCurrency } = useConfig();\n\n  const data = Object.assign(\n    {\n      previousName: 'Previous',\n      previousFill: theme.palette.lightBlue,\n      currentName: 'Current',\n      currentFill: theme.palette.darkBlue,\n    },\n    options,\n  );\n\n  return (\n    <Box className={classes.legend} display=\"flex\" flexDirection=\"row\">\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.previousName}\n          markerColor={options.hideMarker ? undefined : data.previousFill}\n        >\n          {currencyFormatter(baseCurrency).format(costStart)}\n        </LegendItem>\n      </Box>\n      <Box marginRight={2}>\n        <LegendItem\n          title={data.currentName}\n          markerColor={options.hideMarker ? undefined : data.currentFill}\n        >\n          {currencyFormatter(baseCurrency).format(costEnd)}\n        </LegendItem>\n      </Box>\n      {children}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;AA0Ca,MAAA,cAAA,GAAiB,CAC5B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAW,EAAA,OAAA,EAAS,UAAU,EAAC,EAAG,UAAa,GAAA,KAAA;AAEvD,EAAA,MAAM,QAAQ,QAA4B,EAAA;AAC1C,EAAA,MAAM,UAAUA,uBAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,SAAU,EAAA;AAEnC,EAAA,MAAM,OAAO,MAAO,CAAA,MAAA;AAAA,IAClB;AAAA,MACE,YAAc,EAAA,UAAA;AAAA,MACd,YAAA,EAAc,MAAM,OAAQ,CAAA,SAAA;AAAA,MAC5B,WAAa,EAAA,SAAA;AAAA,MACb,WAAA,EAAa,MAAM,OAAQ,CAAA;AAAA,KAC7B;AAAA,IACA;AAAA,GACF;AAEA,EACE,uBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,QAAQ,OAAQ,EAAA,MAAA,EAAO,eAAc,KAC3D,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,aAAa,CAChB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,IAAK,CAAA,YAAA;AAAA,QACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA,YAAA;AAAA,QAElD,QAAkB,EAAA,iBAAA,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,KAErD,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,GAAI,EAAA,EAAA,WAAA,EAAa,CAChB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,IAAK,CAAA,WAAA;AAAA,QACZ,WAAa,EAAA,OAAA,CAAQ,UAAa,GAAA,KAAA,CAAA,GAAY,IAAK,CAAA,WAAA;AAAA,QAElD,QAAkB,EAAA,iBAAA,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,OAAO;AAAA;AAAA,KAEnD,EAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChartStepper.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import Paper from '@material-ui/core/Paper';
 import Slide from '@material-ui/core/Slide';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
@@ -32,58 +33,60 @@ const BarChartStepper = ({
       return prevStep + offset;
     });
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Paper,
     {
       "data-testid": "bar-chart-stepper",
       square: true,
       elevation: 0,
-      className: classes.paper
-    },
-    /* @__PURE__ */ React.createElement(
-      Slide,
-      {
-        direction: "right",
-        in: !disableScroll && activeStep !== 0,
-        mountOnEnter: true,
-        unmountOnExit: true
-      },
-      /* @__PURE__ */ React.createElement(
-        BarChartStepperButton,
-        {
-          name: "back",
-          className: classes.backButton,
-          onClick: handleBack
-        },
-        /* @__PURE__ */ React.createElement(ChevronLeftIcon, null)
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      BarChartSteps,
-      {
-        steps: Math.min(10, stepsRemaining),
-        activeStep: displayedStep,
-        onClick: handleClick
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Slide,
-      {
-        direction: "left",
-        in: !disableScroll && activeStep < steps - 1,
-        mountOnEnter: true,
-        unmountOnExit: true
-      },
-      /* @__PURE__ */ React.createElement(
-        BarChartStepperButton,
-        {
-          name: "next",
-          className: classes.nextButton,
-          onClick: handleNext
-        },
-        /* @__PURE__ */ React.createElement(ChevronRightIcon, null)
-      )
-    )
+      className: classes.paper,
+      children: [
+        /* @__PURE__ */ jsx(
+          Slide,
+          {
+            direction: "right",
+            in: !disableScroll && activeStep !== 0,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            children: /* @__PURE__ */ jsx(
+              BarChartStepperButton,
+              {
+                name: "back",
+                className: classes.backButton,
+                onClick: handleBack,
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BarChartSteps,
+          {
+            steps: Math.min(10, stepsRemaining),
+            activeStep: displayedStep,
+            onClick: handleClick
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Slide,
+          {
+            direction: "left",
+            in: !disableScroll && activeStep < steps - 1,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            children: /* @__PURE__ */ jsx(
+              BarChartStepperButton,
+              {
+                name: "next",
+                className: classes.nextButton,
+                onClick: handleNext,
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+              }
+            )
+          }
+        )
+      ]
+    }
   );
 };