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

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartStepper.esm.js","sources":["../../../src/components/BarChart/BarChartStepper.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, { useEffect, useState } from 'react';\nimport Paper from '@material-ui/core/Paper';\nimport Slide from '@material-ui/core/Slide';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport { BarChartStepperButton } from './BarChartStepperButton';\nimport { BarChartSteps } from './BarChartSteps';\nimport { useBarChartStepperStyles } from '../../utils/styles';\n\ntype BarChartStepperProps = {\n  disableScroll: boolean;\n  steps: number;\n  onChange: (activeStep: number) => void;\n};\n\nexport const BarChartStepper = ({\n  steps,\n  disableScroll,\n  onChange,\n}: BarChartStepperProps) => {\n  const classes = useBarChartStepperStyles();\n  const [activeStep, setActiveStep] = useState(0);\n\n  /*\n   * This calc determines how many active steps to display in the stepper.\n   * If the chart is displaying a large amount of resources,\n   * the total dots are truncated to 10. As the user clicks forward,\n   * eventually, there might be resources \"left over\" in excess of the ten dot limit.\n   * Once the user has reached that threshold, the difference should appear constant\n   * as the user clicks through the remaining resources and no extra dots should be displayed.\n   */\n\n  const diff = steps % 10;\n  const stepsRemaining = steps - activeStep <= diff ? diff : steps;\n  const displayedStep = activeStep % 10;\n\n  useEffect(() => {\n    onChange(activeStep);\n  }, [activeStep, onChange]);\n\n  const handleNext = () => {\n    setActiveStep(prevStep => prevStep + 1);\n  };\n\n  const handleBack = () => {\n    setActiveStep(prevStep => prevStep - 1);\n  };\n\n  const handleClick = (index: number) => {\n    setActiveStep(prevStep => {\n      const offset = index - (prevStep % 10);\n      return prevStep + offset;\n    });\n  };\n\n  return (\n    <Paper\n      data-testid=\"bar-chart-stepper\"\n      square\n      elevation={0}\n      className={classes.paper}\n    >\n      <Slide\n        direction=\"right\"\n        in={!disableScroll && activeStep !== 0}\n        mountOnEnter\n        unmountOnExit\n      >\n        <BarChartStepperButton\n          name=\"back\"\n          className={classes.backButton}\n          onClick={handleBack}\n        >\n          <ChevronLeftIcon />\n        </BarChartStepperButton>\n      </Slide>\n      <BarChartSteps\n        steps={Math.min(10, stepsRemaining)}\n        activeStep={displayedStep}\n        onClick={handleClick}\n      />\n      <Slide\n        direction=\"left\"\n        in={!disableScroll && activeStep < steps - 1}\n        mountOnEnter\n        unmountOnExit\n      >\n        <BarChartStepperButton\n          name=\"next\"\n          className={classes.nextButton}\n          onClick={handleNext}\n        >\n          <ChevronRightIcon />\n        </BarChartStepperButton>\n      </Slide>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA+BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,UAAU,wBAAyB,EAAA;AACzC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA;AAW9C,EAAA,MAAM,OAAO,KAAQ,GAAA,EAAA;AACrB,EAAA,MAAM,cAAiB,GAAA,KAAA,GAAQ,UAAc,IAAA,IAAA,GAAO,IAAO,GAAA,KAAA;AAC3D,EAAA,MAAM,gBAAgB,UAAa,GAAA,EAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,UAAU,CAAA;AAAA,GAClB,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAkB,KAAA;AACrC,IAAA,aAAA,CAAc,CAAY,QAAA,KAAA;AACxB,MAAM,MAAA,MAAA,GAAS,QAAS,QAAW,GAAA,EAAA;AACnC,MAAA,OAAO,QAAW,GAAA,MAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,mBAAA;AAAA,MACZ,MAAM,EAAA,IAAA;AAAA,MACN,SAAW,EAAA,CAAA;AAAA,MACX,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,oBAEnB,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,OAAA;AAAA,QACV,EAAA,EAAI,CAAC,aAAA,IAAiB,UAAe,KAAA,CAAA;AAAA,QACrC,YAAY,EAAA,IAAA;AAAA,QACZ,aAAa,EAAA;AAAA,OAAA;AAAA,sBAEb,KAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,MAAA;AAAA,UACL,WAAW,OAAQ,CAAA,UAAA;AAAA,UACnB,OAAS,EAAA;AAAA,SAAA;AAAA,4CAER,eAAgB,EAAA,IAAA;AAAA;AACnB,KACF;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,cAAc,CAAA;AAAA,QAClC,UAAY,EAAA,aAAA;AAAA,QACZ,OAAS,EAAA;AAAA;AAAA,KACX;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,MAAA;AAAA,QACV,EAAI,EAAA,CAAC,aAAiB,IAAA,UAAA,GAAa,KAAQ,GAAA,CAAA;AAAA,QAC3C,YAAY,EAAA,IAAA;AAAA,QACZ,aAAa,EAAA;AAAA,OAAA;AAAA,sBAEb,KAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,MAAA;AAAA,UACL,WAAW,OAAQ,CAAA,UAAA;AAAA,UACnB,OAAS,EAAA;AAAA,SAAA;AAAA,4CAER,gBAAiB,EAAA,IAAA;AAAA;AACpB;AACF,GACF;AAEJ;;;;"}
+{"version":3,"file":"BarChartStepper.esm.js","sources":["../../../src/components/BarChart/BarChartStepper.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 { useEffect, useState } from 'react';\nimport Paper from '@material-ui/core/Paper';\nimport Slide from '@material-ui/core/Slide';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport { BarChartStepperButton } from './BarChartStepperButton';\nimport { BarChartSteps } from './BarChartSteps';\nimport { useBarChartStepperStyles } from '../../utils/styles';\n\ntype BarChartStepperProps = {\n  disableScroll: boolean;\n  steps: number;\n  onChange: (activeStep: number) => void;\n};\n\nexport const BarChartStepper = ({\n  steps,\n  disableScroll,\n  onChange,\n}: BarChartStepperProps) => {\n  const classes = useBarChartStepperStyles();\n  const [activeStep, setActiveStep] = useState(0);\n\n  /*\n   * This calc determines how many active steps to display in the stepper.\n   * If the chart is displaying a large amount of resources,\n   * the total dots are truncated to 10. As the user clicks forward,\n   * eventually, there might be resources \"left over\" in excess of the ten dot limit.\n   * Once the user has reached that threshold, the difference should appear constant\n   * as the user clicks through the remaining resources and no extra dots should be displayed.\n   */\n\n  const diff = steps % 10;\n  const stepsRemaining = steps - activeStep <= diff ? diff : steps;\n  const displayedStep = activeStep % 10;\n\n  useEffect(() => {\n    onChange(activeStep);\n  }, [activeStep, onChange]);\n\n  const handleNext = () => {\n    setActiveStep(prevStep => prevStep + 1);\n  };\n\n  const handleBack = () => {\n    setActiveStep(prevStep => prevStep - 1);\n  };\n\n  const handleClick = (index: number) => {\n    setActiveStep(prevStep => {\n      const offset = index - (prevStep % 10);\n      return prevStep + offset;\n    });\n  };\n\n  return (\n    <Paper\n      data-testid=\"bar-chart-stepper\"\n      square\n      elevation={0}\n      className={classes.paper}\n    >\n      <Slide\n        direction=\"right\"\n        in={!disableScroll && activeStep !== 0}\n        mountOnEnter\n        unmountOnExit\n      >\n        <BarChartStepperButton\n          name=\"back\"\n          className={classes.backButton}\n          onClick={handleBack}\n        >\n          <ChevronLeftIcon />\n        </BarChartStepperButton>\n      </Slide>\n      <BarChartSteps\n        steps={Math.min(10, stepsRemaining)}\n        activeStep={displayedStep}\n        onClick={handleClick}\n      />\n      <Slide\n        direction=\"left\"\n        in={!disableScroll && activeStep < steps - 1}\n        mountOnEnter\n        unmountOnExit\n      >\n        <BarChartStepperButton\n          name=\"next\"\n          className={classes.nextButton}\n          onClick={handleNext}\n        >\n          <ChevronRightIcon />\n        </BarChartStepperButton>\n      </Slide>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,UAAU,wBAAyB,EAAA;AACzC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,CAAC,CAAA;AAW9C,EAAA,MAAM,OAAO,KAAQ,GAAA,EAAA;AACrB,EAAA,MAAM,cAAiB,GAAA,KAAA,GAAQ,UAAc,IAAA,IAAA,GAAO,IAAO,GAAA,KAAA;AAC3D,EAAA,MAAM,gBAAgB,UAAa,GAAA,EAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,UAAU,CAAA;AAAA,GAClB,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,QAAA,KAAY,WAAW,CAAC,CAAA;AAAA,GACxC;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAkB,KAAA;AACrC,IAAA,aAAA,CAAc,CAAY,QAAA,KAAA;AACxB,MAAM,MAAA,MAAA,GAAS,QAAS,QAAW,GAAA,EAAA;AACnC,MAAA,OAAO,QAAW,GAAA,MAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,mBAAA;AAAA,MACZ,MAAM,EAAA,IAAA;AAAA,MACN,SAAW,EAAA,CAAA;AAAA,MACX,WAAW,OAAQ,CAAA,KAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,OAAA;AAAA,YACV,EAAA,EAAI,CAAC,aAAA,IAAiB,UAAe,KAAA,CAAA;AAAA,YACrC,YAAY,EAAA,IAAA;AAAA,YACZ,aAAa,EAAA,IAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,qBAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,MAAA;AAAA,gBACL,WAAW,OAAQ,CAAA,UAAA;AAAA,gBACnB,OAAS,EAAA,UAAA;AAAA,gBAET,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA;AACnB;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,cAAc,CAAA;AAAA,YAClC,UAAY,EAAA,aAAA;AAAA,YACZ,OAAS,EAAA;AAAA;AAAA,SACX;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,MAAA;AAAA,YACV,EAAI,EAAA,CAAC,aAAiB,IAAA,UAAA,GAAa,KAAQ,GAAA,CAAA;AAAA,YAC3C,YAAY,EAAA,IAAA;AAAA,YACZ,aAAa,EAAA,IAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,qBAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,MAAA;AAAA,gBACL,WAAW,OAAQ,CAAA,UAAA;AAAA,gBACnB,OAAS,EAAA,UAAA;AAAA,gBAET,8BAAC,gBAAiB,EAAA,EAAA;AAAA;AAAA;AACpB;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { useBarChartStepperButtonStyles } from '../../utils/styles.esm.js';
 
@@ -9,16 +10,16 @@ const BarChartStepperButton = forwardRef(
     ...buttonBaseProps
   }, ref) => {
     const classes = useBarChartStepperButtonStyles();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ButtonBase,
       {
         ref,
         classes,
         disableRipple: true,
         "data-testid": `bar-chart-stepper-button-${name}`,
-        ...buttonBaseProps
-      },
-      children
+        ...buttonBaseProps,
+        children
+      }
     );
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartStepperButton.esm.js","sources":["../../../src/components/BarChart/BarChartStepperButton.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, { forwardRef, PropsWithChildren, Ref } from 'react';\nimport ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase';\nimport { useBarChartStepperButtonStyles as useStyles } from '../../utils/styles';\n\ninterface BarChartStepperButtonProps extends ButtonBaseProps {\n  name: string;\n}\n\nexport const BarChartStepperButton = forwardRef(\n  (\n    {\n      name,\n      children,\n      ...buttonBaseProps\n    }: PropsWithChildren<BarChartStepperButtonProps>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classes = useStyles();\n    return (\n      <ButtonBase\n        ref={ref}\n        classes={classes}\n        disableRipple\n        data-testid={`bar-chart-stepper-button-${name}`}\n        {...buttonBaseProps}\n      >\n        {children}\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["useStyles"],"mappings":";;;;AAwBO,MAAM,qBAAwB,GAAA,UAAA;AAAA,EACnC,CACE;AAAA,IACE,IAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAUA,8BAAU,EAAA;AAC1B,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,OAAA;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,aAAA,EAAa,4BAA4B,IAAI,CAAA,CAAA;AAAA,QAC5C,GAAG;AAAA,OAAA;AAAA,MAEH;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"BarChartStepperButton.esm.js","sources":["../../../src/components/BarChart/BarChartStepperButton.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 { forwardRef, PropsWithChildren, Ref } from 'react';\nimport ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase';\nimport { useBarChartStepperButtonStyles as useStyles } from '../../utils/styles';\n\ninterface BarChartStepperButtonProps extends ButtonBaseProps {\n  name: string;\n}\n\nexport const BarChartStepperButton = forwardRef(\n  (\n    {\n      name,\n      children,\n      ...buttonBaseProps\n    }: PropsWithChildren<BarChartStepperButtonProps>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classes = useStyles();\n    return (\n      <ButtonBase\n        ref={ref}\n        classes={classes}\n        disableRipple\n        data-testid={`bar-chart-stepper-button-${name}`}\n        {...buttonBaseProps}\n      >\n        {children}\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["useStyles"],"mappings":";;;;;AAwBO,MAAM,qBAAwB,GAAA,UAAA;AAAA,EACnC,CACE;AAAA,IACE,IAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAUA,8BAAU,EAAA;AAC1B,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,OAAA;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,aAAA,EAAa,4BAA4B,IAAI,CAAA,CAAA;AAAA,QAC5C,GAAG,eAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { useBarChartStepperStyles } from '../../utils/styles.esm.js';
 
@@ -12,13 +12,13 @@ const BarChartSteps = ({
     event.preventDefault();
     onClick(index);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: classes.steps }, [...new Array(steps)].map((_, index) => /* @__PURE__ */ React.createElement(ButtonBase, { key: index, centerRipple: true, onClick: handleOnClick(index) }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: classes.steps, children: [...new Array(steps)].map((_, index) => /* @__PURE__ */ jsx(ButtonBase, { centerRipple: true, onClick: handleOnClick(index), children: /* @__PURE__ */ jsx(
     "div",
     {
       "data-testid": "bar-chart-step",
       className: `${classes.step} ${index === activeStep ? classes.stepActive : ""}`
     }
-  ))));
+  ) }, index)) });
 };
 
 export { BarChartSteps };

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartSteps.esm.js","sources":["../../../src/components/BarChart/BarChartSteps.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 from 'react';\nimport ButtonBase from '@material-ui/core/ButtonBase';\nimport { useBarChartStepperStyles as useStyles } from '../../utils/styles';\n\nexport type BarChartStepsProps = {\n  steps: number;\n  activeStep: number;\n  onClick: (index: number) => void;\n};\n\nexport const BarChartSteps = ({\n  steps,\n  activeStep,\n  onClick,\n}: BarChartStepsProps) => {\n  const classes = useStyles();\n  const handleOnClick =\n    (index: number) =>\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault();\n      onClick(index);\n    };\n\n  return (\n    <div className={classes.steps}>\n      {[...new Array(steps)].map((_, index) => (\n        <ButtonBase key={index} centerRipple onClick={handleOnClick(index)}>\n          <div\n            data-testid=\"bar-chart-step\"\n            className={`${classes.step} ${\n              index === activeStep ? classes.stepActive : ''\n            }`}\n          />\n        </ButtonBase>\n      ))}\n    </div>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;AA0BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,UAAUA,wBAAU,EAAA;AAC1B,EAAA,MAAM,aACJ,GAAA,CAAC,KACD,KAAA,CAAC,KAA2D,KAAA;AAC1D,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,KAAA,EAAA,EACrB,CAAC,GAAG,IAAI,KAAM,CAAA,KAAK,CAAC,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,KAC7B,qBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,GAAA,EAAK,KAAO,EAAA,YAAA,EAAY,IAAC,EAAA,OAAA,EAAS,aAAc,CAAA,KAAK,CAC/D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,gBAAA;AAAA,MACZ,SAAA,EAAW,GAAG,OAAQ,CAAA,IAAI,IACxB,KAAU,KAAA,UAAA,GAAa,OAAQ,CAAA,UAAA,GAAa,EAC9C,CAAA;AAAA;AAAA,GAEJ,CACD,CACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BarChartSteps.esm.js","sources":["../../../src/components/BarChart/BarChartSteps.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 * as React from 'react';\nimport ButtonBase from '@material-ui/core/ButtonBase';\nimport { useBarChartStepperStyles as useStyles } from '../../utils/styles';\n\nexport type BarChartStepsProps = {\n  steps: number;\n  activeStep: number;\n  onClick: (index: number) => void;\n};\n\nexport const BarChartSteps = ({\n  steps,\n  activeStep,\n  onClick,\n}: BarChartStepsProps) => {\n  const classes = useStyles();\n  const handleOnClick =\n    (index: number) =>\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault();\n      onClick(index);\n    };\n\n  return (\n    <div className={classes.steps}>\n      {[...new Array(steps)].map((_, index) => (\n        <ButtonBase key={index} centerRipple onClick={handleOnClick(index)}>\n          <div\n            data-testid=\"bar-chart-step\"\n            className={`${classes.step} ${\n              index === activeStep ? classes.stepActive : ''\n            }`}\n          />\n        </ButtonBase>\n      ))}\n    </div>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;AA0BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,UAAUA,wBAAU,EAAA;AAC1B,EAAA,MAAM,aACJ,GAAA,CAAC,KACD,KAAA,CAAC,KAA2D,KAAA;AAC1D,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEF,EACE,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,OAAA,CAAQ,OACrB,QAAC,EAAA,CAAA,GAAG,IAAI,KAAA,CAAM,KAAK,CAAC,EAAE,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,qBAC5B,GAAA,CAAA,UAAA,EAAA,EAAuB,cAAY,IAAC,EAAA,OAAA,EAAS,aAAc,CAAA,KAAK,CAC/D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,gBAAA;AAAA,MACZ,SAAA,EAAW,GAAG,OAAQ,CAAA,IAAI,IACxB,KAAU,KAAA,UAAA,GAAa,OAAQ,CAAA,UAAA,GAAa,EAC9C,CAAA;AAAA;AAAA,GACF,EAAA,EANe,KAOjB,CACD,CACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { BarChartLabel } from './BarChartLabel.esm.js';
 
 const BarChartTick = ({
@@ -12,16 +12,16 @@ const BarChartTick = ({
 }) => {
   const gutterWidth = 5;
   const labelWidth = width / visibleTicksCount - gutterWidth * 2;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     BarChartLabel,
     {
       x,
       y,
       height,
       width: labelWidth,
-      details
-    },
-    !payload.value ? "Unlabeled" : payload.value
+      details,
+      children: !payload.value ? "Unlabeled" : payload.value
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartTick.esm.js","sources":["../../../src/components/BarChart/BarChartTick.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 from 'react';\nimport { BarChartLabel } from './BarChartLabel';\n\ntype BarChartTickProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  payload: {\n    value: any;\n  };\n  visibleTicksCount: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartTick = ({\n  x,\n  y,\n  height,\n  width,\n  payload,\n  visibleTicksCount,\n  details,\n}: BarChartTickProps) => {\n  const gutterWidth = 5;\n  const labelWidth = width / visibleTicksCount - gutterWidth * 2;\n  return (\n    <BarChartLabel\n      x={x}\n      y={y}\n      height={height}\n      width={labelWidth}\n      details={details}\n    >\n      {!payload.value ? 'Unlabeled' : payload.value}\n    </BarChartLabel>\n  );\n};\n"],"names":[],"mappings":";;;AA+BO,MAAM,eAAe,CAAC;AAAA,EAC3B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,WAAc,GAAA,CAAA;AACpB,EAAM,MAAA,UAAA,GAAa,KAAQ,GAAA,iBAAA,GAAoB,WAAc,GAAA,CAAA;AAC7D,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACP;AAAA,KAAA;AAAA,IAEC,CAAC,OAAA,CAAQ,KAAQ,GAAA,WAAA,GAAc,OAAQ,CAAA;AAAA,GAC1C;AAEJ;;;;"}
+{"version":3,"file":"BarChartTick.esm.js","sources":["../../../src/components/BarChart/BarChartTick.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 { BarChartLabel } from './BarChartLabel';\n\ntype BarChartTickProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  payload: {\n    value: any;\n  };\n  visibleTicksCount: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartTick = ({\n  x,\n  y,\n  height,\n  width,\n  payload,\n  visibleTicksCount,\n  details,\n}: BarChartTickProps) => {\n  const gutterWidth = 5;\n  const labelWidth = width / visibleTicksCount - gutterWidth * 2;\n  return (\n    <BarChartLabel\n      x={x}\n      y={y}\n      height={height}\n      width={labelWidth}\n      details={details}\n    >\n      {!payload.value ? 'Unlabeled' : payload.value}\n    </BarChartLabel>\n  );\n};\n"],"names":[],"mappings":";;;AA8BO,MAAM,eAAe,CAAC;AAAA,EAC3B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,WAAc,GAAA,CAAA;AACpB,EAAM,MAAA,UAAA,GAAa,KAAQ,GAAA,iBAAA,GAAoB,WAAc,GAAA,CAAA;AAC7D,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACP,OAAA;AAAA,MAEC,QAAC,EAAA,CAAA,OAAA,CAAQ,KAAQ,GAAA,WAAA,GAAc,OAAQ,CAAA;AAAA;AAAA,GAC1C;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Box from '@material-ui/core/Box';
 import Divider from '@material-ui/core/Divider';
@@ -11,19 +11,32 @@ const BarChartTooltip = (props) => {
   const titleClassName = classnames(classes.truncate, {
     [classes.maxWidth]: topRight === void 0
   });
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.tooltip, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "baseline",
-      px: 2,
-      pt: 2
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Typography, { className: titleClassName, variant: "h6" }, title), subtitle && /* @__PURE__ */ React.createElement(Typography, { className: classes.subtitle, variant: "subtitle1" }, subtitle)),
-    topRight && /* @__PURE__ */ React.createElement(Box, { ml: 2 }, topRight)
-  ), content && /* @__PURE__ */ React.createElement(Box, { px: 2, pt: 2, className: classes.maxWidth }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", paragraph: true }, content)), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", p: 2 }, children), actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { className: classes.divider, variant: "fullWidth" }), /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", p: 2 }, actions)));
+  return /* @__PURE__ */ jsxs(Box, { className: classes.tooltip, display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "baseline",
+        px: 2,
+        pt: 2,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ jsx(Typography, { className: titleClassName, variant: "h6", children: title }),
+            subtitle && /* @__PURE__ */ jsx(Typography, { className: classes.subtitle, variant: "subtitle1", children: subtitle })
+          ] }),
+          topRight && /* @__PURE__ */ jsx(Box, { ml: 2, children: topRight })
+        ]
+      }
+    ),
+    content && /* @__PURE__ */ jsx(Box, { px: 2, pt: 2, className: classes.maxWidth, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", paragraph: true, children: content }) }),
+    /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", p: 2, children }),
+    actions && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { className: classes.divider, variant: "fullWidth" }),
+      /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", p: 2, children: actions })
+    ] })
+  ] });
 };
 
 export { BarChartTooltip };

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartTooltip.esm.js","sources":["../../../src/components/BarChart/BarChartTooltip.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, { ReactNode, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type BarChartTooltipProps = {\n  title: string;\n  content?: ReactNode | string;\n  subtitle?: ReactNode;\n  topRight?: ReactNode;\n  actions?: ReactNode;\n};\n\n/** @public */\nexport const BarChartTooltip = (\n  props: PropsWithChildren<BarChartTooltipProps>,\n) => {\n  const { title, content, subtitle, topRight, actions, children } = props;\n\n  const classes = useStyles();\n  const titleClassName = classnames(classes.truncate, {\n    [classes.maxWidth]: topRight === undefined,\n  });\n\n  return (\n    <Box className={classes.tooltip} display=\"flex\" flexDirection=\"column\">\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"baseline\"\n        px={2}\n        pt={2}\n      >\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Typography className={titleClassName} variant=\"h6\">\n            {title}\n          </Typography>\n          {subtitle && (\n            <Typography className={classes.subtitle} variant=\"subtitle1\">\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {topRight && <Box ml={2}>{topRight}</Box>}\n      </Box>\n      {content && (\n        <Box px={2} pt={2} className={classes.maxWidth}>\n          <Typography variant=\"body1\" paragraph>\n            {content}\n          </Typography>\n        </Box>\n      )}\n      <Box display=\"flex\" flexDirection=\"column\" p={2}>\n        {children}\n      </Box>\n      {actions && (\n        <>\n          <Divider className={classes.divider} variant=\"fullWidth\" />\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            {actions}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCa,MAAA,eAAA,GAAkB,CAC7B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,UAAU,QAAU,EAAA,OAAA,EAAS,UAAa,GAAA,KAAA;AAElE,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAC1B,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,OAAA,CAAQ,QAAU,EAAA;AAAA,IAClD,CAAC,OAAA,CAAQ,QAAQ,GAAG,QAAa,KAAA,KAAA;AAAA,GAClC,CAAA;AAED,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,SAAS,OAAQ,EAAA,MAAA,EAAO,eAAc,QAC5D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,aAAc,EAAA,KAAA;AAAA,MACd,cAAe,EAAA,eAAA;AAAA,MACf,UAAW,EAAA,UAAA;AAAA,MACX,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,OAAA,EAAQ,QAC5C,KACH,CAAA,EACC,QACC,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,OAAA,EAAQ,WAC9C,EAAA,EAAA,QACH,CAEJ,CAAA;AAAA,IACC,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,KAAI,QAAS;AAAA,GACrC,EACC,2BACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CAAG,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,OAAQ,CAAA,QAAA,EAAA,sCACnC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,SAAA,EAAS,IAClC,EAAA,EAAA,OACH,CACF,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,CAAG,EAAA,CAAA,EAAA,EAC3C,QACH,CACC,EAAA,OAAA,8EAEI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,OAAA,EAAQ,aAAY,CACzD,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,CAAG,EAAA,CAAA,EAAA,EAC3C,OACH,CACF,CAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BarChartTooltip.esm.js","sources":["../../../src/components/BarChart/BarChartTooltip.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 { ReactNode, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport Typography from '@material-ui/core/Typography';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type BarChartTooltipProps = {\n  title: string;\n  content?: ReactNode | string;\n  subtitle?: ReactNode;\n  topRight?: ReactNode;\n  actions?: ReactNode;\n};\n\n/** @public */\nexport const BarChartTooltip = (\n  props: PropsWithChildren<BarChartTooltipProps>,\n) => {\n  const { title, content, subtitle, topRight, actions, children } = props;\n\n  const classes = useStyles();\n  const titleClassName = classnames(classes.truncate, {\n    [classes.maxWidth]: topRight === undefined,\n  });\n\n  return (\n    <Box className={classes.tooltip} display=\"flex\" flexDirection=\"column\">\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"baseline\"\n        px={2}\n        pt={2}\n      >\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Typography className={titleClassName} variant=\"h6\">\n            {title}\n          </Typography>\n          {subtitle && (\n            <Typography className={classes.subtitle} variant=\"subtitle1\">\n              {subtitle}\n            </Typography>\n          )}\n        </Box>\n        {topRight && <Box ml={2}>{topRight}</Box>}\n      </Box>\n      {content && (\n        <Box px={2} pt={2} className={classes.maxWidth}>\n          <Typography variant=\"body1\" paragraph>\n            {content}\n          </Typography>\n        </Box>\n      )}\n      <Box display=\"flex\" flexDirection=\"column\" p={2}>\n        {children}\n      </Box>\n      {actions && (\n        <>\n          <Divider className={classes.divider} variant=\"fullWidth\" />\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            {actions}\n          </Box>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AAiCa,MAAA,eAAA,GAAkB,CAC7B,KACG,KAAA;AACH,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,UAAU,QAAU,EAAA,OAAA,EAAS,UAAa,GAAA,KAAA;AAElE,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAC1B,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,OAAA,CAAQ,QAAU,EAAA;AAAA,IAClD,CAAC,OAAA,CAAQ,QAAQ,GAAG,QAAa,KAAA,KAAA;AAAA,GAClC,CAAA;AAED,EACE,uBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,SAAS,OAAQ,EAAA,MAAA,EAAO,eAAc,QAC5D,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,MAAA;AAAA,QACR,aAAc,EAAA,KAAA;AAAA,QACd,cAAe,EAAA,eAAA;AAAA,QACf,UAAW,EAAA,UAAA;AAAA,QACX,EAAI,EAAA,CAAA;AAAA,QACJ,EAAI,EAAA,CAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,QAChC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,cAAgB,EAAA,OAAA,EAAQ,MAC5C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,YACC,QAAA,wBACE,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,OAAA,EAAQ,aAC9C,QACH,EAAA,QAAA,EAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,UACC,QAAY,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,GAAI,QAAS,EAAA,QAAA,EAAA;AAAA;AAAA;AAAA,KACrC;AAAA,IACC,2BACE,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CAAG,EAAA,SAAA,EAAW,OAAQ,CAAA,QAAA,EACpC,8BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,SAAS,EAAA,IAAA,EAClC,mBACH,CACF,EAAA,CAAA;AAAA,oBAEF,GAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAAS,EAAA,CAAA,EAAG,GAC3C,QACH,EAAA,CAAA;AAAA,IACC,2BAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,OAAA,EAAS,SAAQ,WAAY,EAAA,CAAA;AAAA,sBACzD,GAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,eAAc,QAAS,EAAA,CAAA,EAAG,GAC3C,QACH,EAAA,OAAA,EAAA;AAAA,KACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChartTooltipItem.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 Typography from '@material-ui/core/Typography';
 import LensIcon from '@material-ui/icons/Lens';
@@ -7,16 +7,21 @@ import { useTooltipStyles } from '../../utils/styles.esm.js';
 const BarChartTooltipItem = (props) => {
   const { item } = props;
   const classes = useTooltipStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      minHeight: 25
-    },
-    /* @__PURE__ */ React.createElement(Box, { display: "flex", alignContent: "center", marginRight: ".5em" }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", marginRight: ".5em" }, /* @__PURE__ */ React.createElement(LensIcon, { className: classes.lensIcon, style: { fill: item.fill } })), /* @__PURE__ */ React.createElement(Typography, null, item.label)),
-    /* @__PURE__ */ React.createElement(Typography, { display: "block" }, item.value)
+      minHeight: 25,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { display: "flex", alignContent: "center", marginRight: ".5em", children: [
+          /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", marginRight: ".5em", children: /* @__PURE__ */ jsx(LensIcon, { className: classes.lensIcon, style: { fill: item.fill } }) }),
+          /* @__PURE__ */ jsx(Typography, { children: item.label })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { display: "block", children: item.value })
+      ]
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BarChartTooltipItem.esm.js","sources":["../../../src/components/BarChart/BarChartTooltipItem.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 from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport LensIcon from '@material-ui/icons/Lens';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type TooltipItem = {\n  fill: string;\n  label?: string;\n  value?: string;\n};\n\n/** @public */\nexport type BarChartTooltipItemProps = {\n  item: TooltipItem;\n};\n\n/** @public */\nexport const BarChartTooltipItem = (props: BarChartTooltipItemProps) => {\n  const { item } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      minHeight={25}\n    >\n      <Box display=\"flex\" alignContent=\"center\" marginRight=\".5em\">\n        <Box display=\"flex\" alignItems=\"center\" marginRight=\".5em\">\n          <LensIcon className={classes.lensIcon} style={{ fill: item.fill }} />\n        </Box>\n        <Typography>{item.label}</Typography>\n      </Box>\n      <Typography display=\"block\">{item.value}</Typography>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AAmCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,eAAA;AAAA,MACf,SAAW,EAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAa,QAAS,EAAA,WAAA,EAAY,MACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,UAAA,EAAW,UAAS,WAAY,EAAA,MAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,QAAU,EAAA,KAAA,EAAO,EAAE,IAAM,EAAA,IAAA,CAAK,IAAK,EAAA,EAAG,CACrE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAY,EAAA,IAAA,EAAA,IAAA,CAAK,KAAM,CAC1B,CAAA;AAAA,oBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAS,KAAK,KAAM;AAAA,GAC1C;AAEJ;;;;"}
+{"version":3,"file":"BarChartTooltipItem.esm.js","sources":["../../../src/components/BarChart/BarChartTooltipItem.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 Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport LensIcon from '@material-ui/icons/Lens';\nimport { useTooltipStyles as useStyles } from '../../utils/styles';\n\n/** @public */\nexport type TooltipItem = {\n  fill: string;\n  label?: string;\n  value?: string;\n};\n\n/** @public */\nexport type BarChartTooltipItemProps = {\n  item: TooltipItem;\n};\n\n/** @public */\nexport const BarChartTooltipItem = (props: BarChartTooltipItemProps) => {\n  const { item } = props;\n\n  const classes = useStyles();\n\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      minHeight={25}\n    >\n      <Box display=\"flex\" alignContent=\"center\" marginRight=\".5em\">\n        <Box display=\"flex\" alignItems=\"center\" marginRight=\".5em\">\n          <LensIcon className={classes.lensIcon} style={{ fill: item.fill }} />\n        </Box>\n        <Typography>{item.label}</Typography>\n      </Box>\n      <Typography display=\"block\">{item.value}</Typography>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AAkCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AAEjB,EAAA,MAAM,UAAUA,gBAAU,EAAA;AAE1B,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,eAAA;AAAA,MACf,SAAW,EAAA,EAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,YAAa,EAAA,QAAA,EAAS,aAAY,MACpD,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,YAAW,QAAS,EAAA,WAAA,EAAY,QAClD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,UAAU,KAAO,EAAA,EAAE,MAAM,IAAK,CAAA,IAAA,IAAQ,CACrE,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,UAAY,EAAA,EAAA,QAAA,EAAA,IAAA,CAAK,KAAM,EAAA;AAAA,SAC1B,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAS,eAAK,KAAM,EAAA;AAAA;AAAA;AAAA,GAC1C;AAEJ;;;;"}

package/dist/components/CopyUrlToClipboard/CopyUrlToClipboard.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -37,7 +38,7 @@ const CopyUrlToClipboard = () => {
     text = ClipboardMessage.success;
     Icon = AssignmentTurnedInOutlinedIcon;
   }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: text, arrow: true }, /* @__PURE__ */ React.createElement(IconButton, { onClick: () => copyToClipboard(url) }, /* @__PURE__ */ React.createElement(Icon, null)));
+  return /* @__PURE__ */ jsx(Tooltip, { title: text, arrow: true, children: /* @__PURE__ */ jsx(IconButton, { onClick: () => copyToClipboard(url), children: /* @__PURE__ */ jsx(Icon, {}) }) });
 };
 
 export { CopyUrlToClipboard };

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

@@ -1 +1 @@
-{"version":3,"file":"CopyUrlToClipboard.esm.js","sources":["../../../src/components/CopyUrlToClipboard/CopyUrlToClipboard.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, { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';\nimport AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';\nimport SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';\n\nconst ClipboardMessage = {\n  default: 'Copy URL to clipboard',\n  success: 'Copied!',\n  error: \"Couldn't copy to clipboard\",\n};\n\nexport const CopyUrlToClipboard = () => {\n  const location = useLocation();\n  const [state, copyToClipboard] = useCopyToClipboard();\n  const [copied, setCopied] = useState(false);\n\n  const origin = window.location.origin;\n  const pathname = location.pathname;\n  const search = location.search;\n  const url = `${origin}${pathname}${search}`;\n\n  useEffect(() => {\n    if (state.error) {\n      setCopied(false);\n    } else if (state.value) {\n      setCopied(true);\n      setTimeout(setCopied, 1500, false);\n    }\n  }, [state]);\n\n  let text = ClipboardMessage.default;\n  let Icon = AssignmentOutlinedIcon;\n\n  if (state.error) {\n    text = ClipboardMessage.error;\n    Icon = SentimentVeryDissatisfiedIcon;\n  } else if (copied) {\n    text = ClipboardMessage.success;\n    Icon = AssignmentTurnedInOutlinedIcon;\n  }\n\n  return (\n    <Tooltip title={text} arrow>\n      <IconButton onClick={() => copyToClipboard(url)}>\n        <Icon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,OAAS,EAAA,uBAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,KAAO,EAAA;AACT,CAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,CAAC,KAAA,EAAO,eAAe,CAAA,GAAI,kBAAmB,EAAA;AACpD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,OAAO,QAAS,CAAA,MAAA;AAC/B,EAAA,MAAM,WAAW,QAAS,CAAA,QAAA;AAC1B,EAAA,MAAM,SAAS,QAAS,CAAA,MAAA;AACxB,EAAA,MAAM,MAAM,CAAG,EAAA,MAAM,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,KACjB,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAW,UAAA,CAAA,SAAA,EAAW,MAAM,KAAK,CAAA;AAAA;AACnC,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,OAAO,gBAAiB,CAAA,OAAA;AAC5B,EAAA,IAAI,IAAO,GAAA,sBAAA;AAEX,EAAA,IAAI,MAAM,KAAO,EAAA;AACf,IAAA,IAAA,GAAO,gBAAiB,CAAA,KAAA;AACxB,IAAO,IAAA,GAAA,6BAAA;AAAA,aACE,MAAQ,EAAA;AACjB,IAAA,IAAA,GAAO,gBAAiB,CAAA,OAAA;AACxB,IAAO,IAAA,GAAA,8BAAA;AAAA;AAGT,EAAA,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAK,wBACxB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAS,EAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,kBAC3C,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CopyUrlToClipboard.esm.js","sources":["../../../src/components/CopyUrlToClipboard/CopyUrlToClipboard.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 { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';\nimport AssignmentTurnedInOutlinedIcon from '@material-ui/icons/AssignmentTurnedInOutlined';\nimport SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';\n\nconst ClipboardMessage = {\n  default: 'Copy URL to clipboard',\n  success: 'Copied!',\n  error: \"Couldn't copy to clipboard\",\n};\n\nexport const CopyUrlToClipboard = () => {\n  const location = useLocation();\n  const [state, copyToClipboard] = useCopyToClipboard();\n  const [copied, setCopied] = useState(false);\n\n  const origin = window.location.origin;\n  const pathname = location.pathname;\n  const search = location.search;\n  const url = `${origin}${pathname}${search}`;\n\n  useEffect(() => {\n    if (state.error) {\n      setCopied(false);\n    } else if (state.value) {\n      setCopied(true);\n      setTimeout(setCopied, 1500, false);\n    }\n  }, [state]);\n\n  let text = ClipboardMessage.default;\n  let Icon = AssignmentOutlinedIcon;\n\n  if (state.error) {\n    text = ClipboardMessage.error;\n    Icon = SentimentVeryDissatisfiedIcon;\n  } else if (copied) {\n    text = ClipboardMessage.success;\n    Icon = AssignmentTurnedInOutlinedIcon;\n  }\n\n  return (\n    <Tooltip title={text} arrow>\n      <IconButton onClick={() => copyToClipboard(url)}>\n        <Icon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,OAAS,EAAA,uBAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,KAAO,EAAA;AACT,CAAA;AAEO,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,CAAC,KAAA,EAAO,eAAe,CAAA,GAAI,kBAAmB,EAAA;AACpD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,OAAO,QAAS,CAAA,MAAA;AAC/B,EAAA,MAAM,WAAW,QAAS,CAAA,QAAA;AAC1B,EAAA,MAAM,SAAS,QAAS,CAAA,MAAA;AACxB,EAAA,MAAM,MAAM,CAAG,EAAA,MAAM,CAAG,EAAA,QAAQ,GAAG,MAAM,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,KACjB,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAW,UAAA,CAAA,SAAA,EAAW,MAAM,KAAK,CAAA;AAAA;AACnC,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,OAAO,gBAAiB,CAAA,OAAA;AAC5B,EAAA,IAAI,IAAO,GAAA,sBAAA;AAEX,EAAA,IAAI,MAAM,KAAO,EAAA;AACf,IAAA,IAAA,GAAO,gBAAiB,CAAA,KAAA;AACxB,IAAO,IAAA,GAAA,6BAAA;AAAA,aACE,MAAQ,EAAA;AACjB,IAAA,IAAA,GAAO,gBAAiB,CAAA,OAAA;AACxB,IAAO,IAAA,GAAA,8BAAA;AAAA;AAGT,EAAA,2BACG,OAAQ,EAAA,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAK,MACzB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,OAAS,EAAA,MAAM,gBAAgB,GAAG,CAAA,EAC5C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,GACR,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostGrowth/CostGrowth.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import '../../types/Alert.esm.js';
@@ -34,21 +34,40 @@ const CostGrowth = (props) => {
     [styles.savings]: growth === GrowthType.Savings
   });
   if (engineers < engineerThreshold) {
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "Negligible");
+    return /* @__PURE__ */ jsx(Typography, { component: "span", className: classes, children: "Negligible" });
   }
   if (currency.kind === CurrencyType.USD) {
     if (isNaN(ratio)) {
-      return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "~", currency.prefix, formatCurrency(converted));
+      return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+        "~",
+        currency.prefix,
+        formatCurrency(converted)
+      ] });
     }
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, formatPercent(ratio), " or ~", currency.prefix, formatCurrency(converted));
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+      formatPercent(ratio),
+      " or ~",
+      currency.prefix,
+      formatCurrency(converted)
+    ] });
   }
   if (amount < 1) {
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "less than ", indefiniteArticleOf(["a", "an"], currency.unit));
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+      "less than ",
+      indefiniteArticleOf(["a", "an"], currency.unit)
+    ] });
   }
   if (isNaN(ratio)) {
-    return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, "~", formatCurrency(converted, currency.unit));
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+      "~",
+      formatCurrency(converted, currency.unit)
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(Typography, { component: "span", className: classes }, formatPercent(ratio), " or ~", formatCurrency(converted, currency.unit));
+  return /* @__PURE__ */ jsxs(Typography, { component: "span", className: classes, children: [
+    formatPercent(ratio),
+    " or ~",
+    formatCurrency(converted, currency.unit)
+  ] });
 };
 
 export { CostGrowth };

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

@@ -1 +1 @@
-{"version":3,"file":"CostGrowth.esm.js","sources":["../../../src/components/CostGrowth/CostGrowth.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 from 'react';\nimport classnames from 'classnames';\nimport Typography from '@material-ui/core/Typography';\nimport { CurrencyType, Duration, GrowthType } from '../../types';\nimport { ChangeStatistic } from '@backstage-community/plugin-cost-insights-common';\nimport { rateOf } from '../../utils/currency';\nimport { growthOf } from '../../utils/change';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport { formatPercent, formatCurrency } from '../../utils/formatters';\nimport { indefiniteArticleOf } from '../../utils/grammar';\nimport { useConfig, useCurrency } from '../../hooks';\nimport { notEmpty } from '../../utils/assert';\n\n/** @public */\nexport type CostGrowthProps = {\n  change: ChangeStatistic;\n  duration: Duration;\n};\n\n/** @public */\nexport const CostGrowth = (props: CostGrowthProps) => {\n  const { change, duration } = props;\n\n  const styles = useStyles();\n  const { engineerCost, engineerThreshold } = useConfig();\n  const [currency] = useCurrency();\n\n  // Only display costs in absolute values\n  const amount = Math.abs(change.amount);\n  const ratio = Math.abs(change.ratio ?? NaN);\n\n  const rate = rateOf(engineerCost, duration);\n  const engineers = amount / rate;\n  const converted = amount / (currency.rate ?? rate);\n\n  // If a ratio cannot be calculated, don't format.\n  const growth = notEmpty(change.ratio)\n    ? growthOf({ ratio: change.ratio, amount: engineers }, engineerThreshold)\n    : null;\n  // Determine if growth is significant enough to highlight\n  const classes = classnames({\n    [styles.excess]: growth === GrowthType.Excess,\n    [styles.savings]: growth === GrowthType.Savings,\n  });\n\n  if (engineers < engineerThreshold) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        Negligible\n      </Typography>\n    );\n  }\n\n  if (currency.kind === CurrencyType.USD) {\n    // Do not display percentage if ratio cannot be calculated\n    if (isNaN(ratio)) {\n      return (\n        <Typography component=\"span\" className={classes}>\n          ~{currency.prefix}\n          {formatCurrency(converted)}\n        </Typography>\n      );\n    }\n\n    return (\n      <Typography component=\"span\" className={classes}>\n        {formatPercent(ratio)} or ~{currency.prefix}\n        {formatCurrency(converted)}\n      </Typography>\n    );\n  }\n\n  if (amount < 1) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        less than {indefiniteArticleOf(['a', 'an'], currency.unit)}\n      </Typography>\n    );\n  }\n\n  // Do not display percentage if ratio cannot be calculated\n  if (isNaN(ratio)) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        ~{formatCurrency(converted, currency.unit)}\n      </Typography>\n    );\n  }\n\n  return (\n    <Typography component=\"span\" className={classes}>\n      {formatPercent(ratio)} or ~{formatCurrency(converted, currency.unit)}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoCa,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,KAAA;AAE7B,EAAA,MAAM,SAASA,mBAAU,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACtD,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAI,WAAY,EAAA;AAG/B,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,MAAM,CAAA;AACrC,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,SAAS,GAAG,CAAA;AAE1C,EAAM,MAAA,IAAA,GAAO,MAAO,CAAA,YAAA,EAAc,QAAQ,CAAA;AAC1C,EAAA,MAAM,YAAY,MAAS,GAAA,IAAA;AAC3B,EAAM,MAAA,SAAA,GAAY,MAAU,IAAA,QAAA,CAAS,IAAQ,IAAA,IAAA,CAAA;AAG7C,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,MAAO,CAAA,KAAK,IAChC,QAAS,CAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAO,EAAA,MAAA,EAAQ,SAAU,EAAA,EAAG,iBAAiB,CACtE,GAAA,IAAA;AAEJ,EAAA,MAAM,UAAU,UAAW,CAAA;AAAA,IACzB,CAAC,MAAA,CAAO,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACvC,CAAC,MAAA,CAAO,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GACzC,CAAA;AAED,EAAA,IAAI,YAAY,iBAAmB,EAAA;AACjC,IAAA,2CACG,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,WAAS,YAEjD,CAAA;AAAA;AAIJ,EAAI,IAAA,QAAA,CAAS,IAAS,KAAA,YAAA,CAAa,GAAK,EAAA;AAEtC,IAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,MACE,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,OAAS,EAAA,EAAA,GAAA,EAC7C,QAAS,CAAA,MAAA,EACV,cAAe,CAAA,SAAS,CAC3B,CAAA;AAAA;AAIJ,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,EAAA,aAAA,CAAc,KAAK,CAAA,EAAE,OAAM,EAAA,QAAA,CAAS,MACpC,EAAA,cAAA,CAAe,SAAS,CAC3B,CAAA;AAAA;AAIJ,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,EAAA,YAAA,EACpC,mBAAoB,CAAA,CAAC,GAAK,EAAA,IAAI,CAAG,EAAA,QAAA,CAAS,IAAI,CAC3D,CAAA;AAAA;AAKJ,EAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,OAAS,EAAA,EAAA,GAAA,EAC7C,cAAe,CAAA,SAAA,EAAW,QAAS,CAAA,IAAI,CAC3C,CAAA;AAAA;AAIJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,EAAA,aAAA,CAAc,KAAK,CAAA,EAAE,OAAM,EAAA,cAAA,CAAe,SAAW,EAAA,QAAA,CAAS,IAAI,CACrE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostGrowth.esm.js","sources":["../../../src/components/CostGrowth/CostGrowth.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 classnames from 'classnames';\nimport Typography from '@material-ui/core/Typography';\nimport { CurrencyType, Duration, GrowthType } from '../../types';\nimport { ChangeStatistic } from '@backstage-community/plugin-cost-insights-common';\nimport { rateOf } from '../../utils/currency';\nimport { growthOf } from '../../utils/change';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport { formatPercent, formatCurrency } from '../../utils/formatters';\nimport { indefiniteArticleOf } from '../../utils/grammar';\nimport { useConfig, useCurrency } from '../../hooks';\nimport { notEmpty } from '../../utils/assert';\n\n/** @public */\nexport type CostGrowthProps = {\n  change: ChangeStatistic;\n  duration: Duration;\n};\n\n/** @public */\nexport const CostGrowth = (props: CostGrowthProps) => {\n  const { change, duration } = props;\n\n  const styles = useStyles();\n  const { engineerCost, engineerThreshold } = useConfig();\n  const [currency] = useCurrency();\n\n  // Only display costs in absolute values\n  const amount = Math.abs(change.amount);\n  const ratio = Math.abs(change.ratio ?? NaN);\n\n  const rate = rateOf(engineerCost, duration);\n  const engineers = amount / rate;\n  const converted = amount / (currency.rate ?? rate);\n\n  // If a ratio cannot be calculated, don't format.\n  const growth = notEmpty(change.ratio)\n    ? growthOf({ ratio: change.ratio, amount: engineers }, engineerThreshold)\n    : null;\n  // Determine if growth is significant enough to highlight\n  const classes = classnames({\n    [styles.excess]: growth === GrowthType.Excess,\n    [styles.savings]: growth === GrowthType.Savings,\n  });\n\n  if (engineers < engineerThreshold) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        Negligible\n      </Typography>\n    );\n  }\n\n  if (currency.kind === CurrencyType.USD) {\n    // Do not display percentage if ratio cannot be calculated\n    if (isNaN(ratio)) {\n      return (\n        <Typography component=\"span\" className={classes}>\n          ~{currency.prefix}\n          {formatCurrency(converted)}\n        </Typography>\n      );\n    }\n\n    return (\n      <Typography component=\"span\" className={classes}>\n        {formatPercent(ratio)} or ~{currency.prefix}\n        {formatCurrency(converted)}\n      </Typography>\n    );\n  }\n\n  if (amount < 1) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        less than {indefiniteArticleOf(['a', 'an'], currency.unit)}\n      </Typography>\n    );\n  }\n\n  // Do not display percentage if ratio cannot be calculated\n  if (isNaN(ratio)) {\n    return (\n      <Typography component=\"span\" className={classes}>\n        ~{formatCurrency(converted, currency.unit)}\n      </Typography>\n    );\n  }\n\n  return (\n    <Typography component=\"span\" className={classes}>\n      {formatPercent(ratio)} or ~{formatCurrency(converted, currency.unit)}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmCa,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,KAAA;AAE7B,EAAA,MAAM,SAASA,mBAAU,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACtD,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAI,WAAY,EAAA;AAG/B,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,MAAM,CAAA;AACrC,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,MAAA,CAAO,SAAS,GAAG,CAAA;AAE1C,EAAM,MAAA,IAAA,GAAO,MAAO,CAAA,YAAA,EAAc,QAAQ,CAAA;AAC1C,EAAA,MAAM,YAAY,MAAS,GAAA,IAAA;AAC3B,EAAM,MAAA,SAAA,GAAY,MAAU,IAAA,QAAA,CAAS,IAAQ,IAAA,IAAA,CAAA;AAG7C,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,MAAO,CAAA,KAAK,IAChC,QAAS,CAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAO,EAAA,MAAA,EAAQ,SAAU,EAAA,EAAG,iBAAiB,CACtE,GAAA,IAAA;AAEJ,EAAA,MAAM,UAAU,UAAW,CAAA;AAAA,IACzB,CAAC,MAAA,CAAO,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACvC,CAAC,MAAA,CAAO,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GACzC,CAAA;AAED,EAAA,IAAI,YAAY,iBAAmB,EAAA;AACjC,IAAA,2BACG,UAAW,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,SAAS,QAEjD,EAAA,YAAA,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,QAAA,CAAS,IAAS,KAAA,YAAA,CAAa,GAAK,EAAA;AAEtC,IAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,MAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAC7C,QAAS,CAAA,MAAA;AAAA,QACV,eAAe,SAAS;AAAA,OAC3B,EAAA,CAAA;AAAA;AAIJ,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,QAAA,EAAA;AAAA,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MAAE,OAAA;AAAA,MAAM,QAAS,CAAA,MAAA;AAAA,MACpC,eAAe,SAAS;AAAA,KAC3B,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA;AAAA,MACpC,oBAAoB,CAAC,GAAA,EAAK,IAAI,CAAA,EAAG,SAAS,IAAI;AAAA,KAC3D,EAAA,CAAA;AAAA;AAKJ,EAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OAAS,EAAA,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAC7C,cAAA,CAAe,SAAW,EAAA,QAAA,CAAS,IAAI;AAAA,KAC3C,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,WAAW,OACrC,EAAA,QAAA,EAAA;AAAA,IAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IAAE,OAAA;AAAA,IAAM,cAAA,CAAe,SAAW,EAAA,QAAA,CAAS,IAAI;AAAA,GACrE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostGrowth/CostGrowthIndicator.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
@@ -24,7 +24,11 @@ const CostGrowthIndicator = (props) => {
     [classes.excess]: growth === GrowthType.Excess,
     [classes.savings]: growth === GrowthType.Savings
   });
-  return /* @__PURE__ */ React.createElement(Typography, { className: classNames, component: "span", ...extraProps }, formatter ? formatter(change, { absolute: true }) : change.ratio, growth === GrowthType.Excess && /* @__PURE__ */ React.createElement(ArrowDropUp, { "aria-label": "excess" }), growth === GrowthType.Savings && /* @__PURE__ */ React.createElement(ArrowDropDown, { "aria-label": "savings" }));
+  return /* @__PURE__ */ jsxs(Typography, { className: classNames, component: "span", ...extraProps, children: [
+    formatter ? formatter(change, { absolute: true }) : change.ratio,
+    growth === GrowthType.Excess && /* @__PURE__ */ jsx(ArrowDropUp, { "aria-label": "excess" }),
+    growth === GrowthType.Savings && /* @__PURE__ */ jsx(ArrowDropDown, { "aria-label": "savings" })
+  ] });
 };
 
 export { CostGrowthIndicator };

package/dist/components/CostGrowth/CostGrowthIndicator.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostGrowthIndicator.esm.js","sources":["../../../src/components/CostGrowth/CostGrowthIndicator.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 from 'react';\nimport classnames from 'classnames';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { default as ArrowDropUp } from '@material-ui/icons/ArrowDropUp';\nimport { default as ArrowDropDown } from '@material-ui/icons/ArrowDropDown';\nimport { growthOf } from '../../utils/change';\nimport { GrowthType } from '../../types';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport {\n  ChangeStatistic,\n  Maybe,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type CostGrowthIndicatorProps = TypographyProps & {\n  change: ChangeStatistic;\n  formatter?: (\n    change: ChangeStatistic,\n    options?: { absolute: boolean },\n  ) => Maybe<string>;\n};\n\n/** @public */\nexport const CostGrowthIndicator = (props: CostGrowthIndicatorProps) => {\n  const { engineerThreshold } = useConfig();\n  const { change, formatter, className, ...extraProps } = props;\n\n  const classes = useStyles();\n\n  const growth = growthOf(change, engineerThreshold);\n\n  const classNames = classnames(classes.indicator, className, {\n    [classes.excess]: growth === GrowthType.Excess,\n    [classes.savings]: growth === GrowthType.Savings,\n  });\n\n  return (\n    <Typography className={classNames} component=\"span\" {...extraProps}>\n      {formatter ? formatter(change, { absolute: true }) : change.ratio}\n      {growth === GrowthType.Excess && <ArrowDropUp aria-label=\"excess\" />}\n      {growth === GrowthType.Savings && <ArrowDropDown aria-label=\"savings\" />}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;AAwCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACxC,EAAA,MAAM,EAAE,MAAQ,EAAA,SAAA,EAAW,SAAW,EAAA,GAAG,YAAe,GAAA,KAAA;AAExD,EAAA,MAAM,UAAUA,mBAAU,EAAA;AAE1B,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,MAAA,EAAQ,iBAAiB,CAAA;AAEjD,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,OAAQ,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,IAC1D,CAAC,OAAA,CAAQ,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACxC,CAAC,OAAA,CAAQ,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GAC1C,CAAA;AAED,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,UAAA,EAAY,WAAU,MAAQ,EAAA,GAAG,UACrD,EAAA,EAAA,SAAA,GAAY,SAAU,CAAA,MAAA,EAAQ,EAAE,QAAA,EAAU,MAAM,CAAA,GAAI,MAAO,CAAA,KAAA,EAC3D,MAAW,KAAA,UAAA,CAAW,MAAU,oBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,YAAW,EAAA,QAAA,EAAS,CACjE,EAAA,MAAA,KAAW,WAAW,OAAW,oBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,YAAA,EAAW,WAAU,CACxE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CostGrowthIndicator.esm.js","sources":["../../../src/components/CostGrowth/CostGrowthIndicator.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 classnames from 'classnames';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { default as ArrowDropUp } from '@material-ui/icons/ArrowDropUp';\nimport { default as ArrowDropDown } from '@material-ui/icons/ArrowDropDown';\nimport { growthOf } from '../../utils/change';\nimport { GrowthType } from '../../types';\nimport { useCostGrowthStyles as useStyles } from '../../utils/styles';\nimport {\n  ChangeStatistic,\n  Maybe,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useConfig } from '../../hooks';\n\n/** @public */\nexport type CostGrowthIndicatorProps = TypographyProps & {\n  change: ChangeStatistic;\n  formatter?: (\n    change: ChangeStatistic,\n    options?: { absolute: boolean },\n  ) => Maybe<string>;\n};\n\n/** @public */\nexport const CostGrowthIndicator = (props: CostGrowthIndicatorProps) => {\n  const { engineerThreshold } = useConfig();\n  const { change, formatter, className, ...extraProps } = props;\n\n  const classes = useStyles();\n\n  const growth = growthOf(change, engineerThreshold);\n\n  const classNames = classnames(classes.indicator, className, {\n    [classes.excess]: growth === GrowthType.Excess,\n    [classes.savings]: growth === GrowthType.Savings,\n  });\n\n  return (\n    <Typography className={classNames} component=\"span\" {...extraProps}>\n      {formatter ? formatter(change, { absolute: true }) : change.ratio}\n      {growth === GrowthType.Excess && <ArrowDropUp aria-label=\"excess\" />}\n      {growth === GrowthType.Savings && <ArrowDropDown aria-label=\"savings\" />}\n    </Typography>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;AAuCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,SAAU,EAAA;AACxC,EAAA,MAAM,EAAE,MAAQ,EAAA,SAAA,EAAW,SAAW,EAAA,GAAG,YAAe,GAAA,KAAA;AAExD,EAAA,MAAM,UAAUA,mBAAU,EAAA;AAE1B,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,MAAA,EAAQ,iBAAiB,CAAA;AAEjD,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,OAAQ,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,IAC1D,CAAC,OAAA,CAAQ,MAAM,GAAG,WAAW,UAAW,CAAA,MAAA;AAAA,IACxC,CAAC,OAAA,CAAQ,OAAO,GAAG,WAAW,UAAW,CAAA;AAAA,GAC1C,CAAA;AAED,EAAA,4BACG,UAAW,EAAA,EAAA,SAAA,EAAW,YAAY,SAAU,EAAA,MAAA,EAAQ,GAAG,UACrD,EAAA,QAAA,EAAA;AAAA,IAAA,SAAA,GAAY,UAAU,MAAQ,EAAA,EAAE,UAAU,IAAK,EAAC,IAAI,MAAO,CAAA,KAAA;AAAA,IAC3D,WAAW,UAAW,CAAA,MAAA,oBAAW,GAAA,CAAA,WAAA,EAAA,EAAY,cAAW,QAAS,EAAA,CAAA;AAAA,IACjE,WAAW,UAAW,CAAA,OAAA,oBAAY,GAAA,CAAA,aAAA,EAAA,EAAc,cAAW,SAAU,EAAA;AAAA,GACxE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostInsightsHeader/CostInsightsHeader.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Typography from '@material-ui/core/Typography';
 import useAsync from 'react-use/esm/useAsync';
 import { useCostInsightsStyles } from '../../utils/styles.esm.js';
@@ -17,7 +17,24 @@ const CostInsightsHeaderNoData = ({
   const classes = useCostInsightsStyles();
   const hasMultipleGroups = groups.length > 1;
   const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " doesn't seem to have any cloud costs."), hasMultipleGroups && /* @__PURE__ */ React.createElement(Typography, { align: "center", gutterBottom: true }, "Maybe we picked the wrong team, choose another from the menu above?"));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "flushed-face", children: "\u{1F633}" }),
+      " ",
+      "Well this is awkward"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("b", { children: ownerName }),
+      " doesn't seem to have any cloud costs."
+    ] }),
+    hasMultipleGroups && /* @__PURE__ */ jsx(Typography, { align: "center", gutterBottom: true, children: "Maybe we picked the wrong team, choose another from the menu above?" })
+  ] });
 };
 const CostInsightsHeaderAlerts = ({
   groupId,
@@ -27,7 +44,29 @@ const CostInsightsHeaderAlerts = ({
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
   const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "magnifying-glass" }, "\u{1F50E}"), " ", "You have ", alerts, " thing", alerts > 1 && "s", " to look into"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " We've identified", " ", alerts > 1 ? "a few things " : "one thing ", /* @__PURE__ */ React.createElement("b", null, ownerName), " should look into next."));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "magnifying-glass", children: "\u{1F50E}" }),
+      " ",
+      "You have ",
+      alerts,
+      " thing",
+      alerts > 1 && "s",
+      " to look into"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " We've identified",
+      " ",
+      alerts > 1 ? "a few things " : "one thing ",
+      /* @__PURE__ */ jsx("b", { children: ownerName }),
+      " should look into next."
+    ] })
+  ] });
 };
 const CostInsightsHeaderNoAlerts = ({
   groupId,
@@ -36,21 +75,51 @@ const CostInsightsHeaderNoAlerts = ({
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
   const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", gutterBottom: true, align: "center" }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "thumbs-up" }, "\u{1F44D}"), " ", "Your team is doing great"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " ", /* @__PURE__ */ React.createElement("b", null, ownerName), " is doing well. No major changes this month."));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", gutterBottom: true, align: "center", children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "thumbs-up", children: "\u{1F44D}" }),
+      " ",
+      "Your team is doing great"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("b", { children: ownerName }),
+      " is doing well. No major changes this month."
+    ] })
+  ] });
 };
 const CostInsightsHeaderNoGroups = () => {
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "flushed-face" }, "\u{1F633}"), " ", "Well this is awkward"), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, /* @__PURE__ */ React.createElement("b", null, "Hey, ", displayName, "!"), " It doesn't look like you belong to any teams."));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h4", align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", role: "img", "aria-label": "flushed-face", children: "\u{1F633}" }),
+      " ",
+      "Well this is awkward"
+    ] }),
+    /* @__PURE__ */ jsxs(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        "Hey, ",
+        displayName,
+        "!"
+      ] }),
+      " It doesn't look like you belong to any teams."
+    ] })
+  ] });
 };
 const CostInsightsHeader = (props) => {
   if (!props.hasCostData) {
-    return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoData, { ...props });
+    return /* @__PURE__ */ jsx(CostInsightsHeaderNoData, { ...props });
   }
   if (props.alerts) {
-    return /* @__PURE__ */ React.createElement(CostInsightsHeaderAlerts, { ...props });
+    return /* @__PURE__ */ jsx(CostInsightsHeaderAlerts, { ...props });
   }
-  return /* @__PURE__ */ React.createElement(CostInsightsHeaderNoAlerts, { ...props });
+  return /* @__PURE__ */ jsx(CostInsightsHeaderNoAlerts, { ...props });
 };
 
 export { CostInsightsHeader, CostInsightsHeaderNoGroups };