@codecademy/gamut 67.6.3-alpha.86d3e6.0 → 67.6.3-alpha.cb4c1d.0

package/dist/BarChart/Bar/elements.js

@@ -0,0 +1,96 @@
+import _styled from "@emotion/styled/base";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { css, styledOptions } from '@codecademy/gamut-styles';
+import { motion } from 'framer-motion';
+import { Box } from '../../Box';
+const rowBaseStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  gap: 0,
+  py: 8,
+  pr: 16,
+  position: 'relative',
+  bg: 'transparent',
+  border: 'none',
+  textDecoration: 'none',
+  cursor: 'inherit',
+  '&:focus': {
+    outline: 'none'
+  },
+  '&:focus-visible': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '2px'
+  }
+});
+const interactiveStyles = css({
+  cursor: 'pointer',
+  '&:hover': {
+    bg: 'background-hover'
+  }
+});
+export const RowWrapper = /*#__PURE__*/_styled('div', _extends({}, {
+  target: "e1lnm2ux5",
+  label: "RowWrapper"
+}, styledOptions()))(rowBaseStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXIvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DMEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0Jhci9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmNvbnN0IHJvd0Jhc2VTdHlsZXMgPSBjc3Moe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB3aWR0aDogJzEwMCUnLFxuICBnYXA6IDAsXG4gIHB5OiA4LFxuICBwcjogMTYsXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICAnJjpmb2N1cyc6IHtcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gIH0sXG4gICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgb3V0bGluZTogJzJweCBzb2xpZCcsXG4gICAgb3V0bGluZUNvbG9yOiAncHJpbWFyeScsXG4gICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gIH0sXG59KTtcblxuY29uc3QgaW50ZXJhY3RpdmVTdHlsZXMgPSBjc3Moe1xuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJyY6aG92ZXInOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnZGl2Jywgc3R5bGVkT3B0aW9uczwnZGl2Jz4oKSkocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlc1xuKTtcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuIl19 */");
+export const RowButton = /*#__PURE__*/_styled('button', _extends({}, {
+  target: "e1lnm2ux4",
+  label: "RowButton"
+}, styledOptions()))(rowBaseStyles, interactiveStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXIvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0Jhci9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmNvbnN0IHJvd0Jhc2VTdHlsZXMgPSBjc3Moe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB3aWR0aDogJzEwMCUnLFxuICBnYXA6IDAsXG4gIHB5OiA4LFxuICBwcjogMTYsXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICAnJjpmb2N1cyc6IHtcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gIH0sXG4gICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgb3V0bGluZTogJzJweCBzb2xpZCcsXG4gICAgb3V0bGluZUNvbG9yOiAncHJpbWFyeScsXG4gICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gIH0sXG59KTtcblxuY29uc3QgaW50ZXJhY3RpdmVTdHlsZXMgPSBjc3Moe1xuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJyY6aG92ZXInOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnZGl2Jywgc3R5bGVkT3B0aW9uczwnZGl2Jz4oKSkocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlc1xuKTtcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuIl19 */");
+export const RowAnchor = /*#__PURE__*/_styled('a', _extends({}, {
+  target: "e1lnm2ux3",
+  label: "RowAnchor"
+}, styledOptions()))(rowBaseStyles, interactiveStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXIvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdDeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0Jhci9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmNvbnN0IHJvd0Jhc2VTdHlsZXMgPSBjc3Moe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB3aWR0aDogJzEwMCUnLFxuICBnYXA6IDAsXG4gIHB5OiA4LFxuICBwcjogMTYsXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICAnJjpmb2N1cyc6IHtcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gIH0sXG4gICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgb3V0bGluZTogJzJweCBzb2xpZCcsXG4gICAgb3V0bGluZUNvbG9yOiAncHJpbWFyeScsXG4gICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gIH0sXG59KTtcblxuY29uc3QgaW50ZXJhY3RpdmVTdHlsZXMgPSBjc3Moe1xuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJyY6aG92ZXInOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnZGl2Jywgc3R5bGVkT3B0aW9uczwnZGl2Jz4oKSkocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlc1xuKTtcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuIl19 */");
+
+/**
+ * Container for bars with responsive height
+ */
+export const BarWrapper = /*#__PURE__*/_styled(Box, {
+  target: "e1lnm2ux2",
+  label: "BarWrapper"
+})(css({
+  display: 'flex',
+  overflow: 'hidden',
+  position: 'relative',
+  alignItems: 'center',
+  flex: 1,
+  height: {
+    _: 12,
+    sm: 20
+  },
+  borderRadius: {
+    _: 'md',
+    sm: 'xl'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXIvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEMEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0Jhci9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmNvbnN0IHJvd0Jhc2VTdHlsZXMgPSBjc3Moe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB3aWR0aDogJzEwMCUnLFxuICBnYXA6IDAsXG4gIHB5OiA4LFxuICBwcjogMTYsXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICAnJjpmb2N1cyc6IHtcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gIH0sXG4gICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgb3V0bGluZTogJzJweCBzb2xpZCcsXG4gICAgb3V0bGluZUNvbG9yOiAncHJpbWFyeScsXG4gICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gIH0sXG59KTtcblxuY29uc3QgaW50ZXJhY3RpdmVTdHlsZXMgPSBjc3Moe1xuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJyY6aG92ZXInOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnZGl2Jywgc3R5bGVkT3B0aW9uczwnZGl2Jz4oKSkocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlc1xuKTtcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuIl19 */");
+const baseBarStyles = {
+  alignItems: 'center',
+  border: 1,
+  borderColor: 'border-primary',
+  borderRadius: 'inherit',
+  display: 'flex',
+  height: '100%',
+  left: 0,
+  position: 'absolute'
+};
+
+/**
+ * Animated bar element for background/total value display
+ */
+export const BackgroundBar = /*#__PURE__*/_styled(motion.create(Box), {
+  target: "e1lnm2ux1",
+  label: "BackgroundBar"
+})(css({
+  ...baseBarStyles
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXIvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBFNkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0Jhci9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmNvbnN0IHJvd0Jhc2VTdHlsZXMgPSBjc3Moe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB3aWR0aDogJzEwMCUnLFxuICBnYXA6IDAsXG4gIHB5OiA4LFxuICBwcjogMTYsXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICAnJjpmb2N1cyc6IHtcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gIH0sXG4gICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgb3V0bGluZTogJzJweCBzb2xpZCcsXG4gICAgb3V0bGluZUNvbG9yOiAncHJpbWFyeScsXG4gICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gIH0sXG59KTtcblxuY29uc3QgaW50ZXJhY3RpdmVTdHlsZXMgPSBjc3Moe1xuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJyY6aG92ZXInOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnZGl2Jywgc3R5bGVkT3B0aW9uczwnZGl2Jz4oKSkocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlc1xuKTtcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuIl19 */");
+
+/**
+ * Foreground bar for stacked display (progress value)
+ */
+export const ForegroundBar = /*#__PURE__*/_styled(motion.create(Box), {
+  target: "e1lnm2ux0",
+  label: "ForegroundBar"
+})(css({
+  ...baseBarStyles
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXIvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1GNkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0Jhci9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmNvbnN0IHJvd0Jhc2VTdHlsZXMgPSBjc3Moe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB3aWR0aDogJzEwMCUnLFxuICBnYXA6IDAsXG4gIHB5OiA4LFxuICBwcjogMTYsXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICAnJjpmb2N1cyc6IHtcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gIH0sXG4gICcmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgb3V0bGluZTogJzJweCBzb2xpZCcsXG4gICAgb3V0bGluZUNvbG9yOiAncHJpbWFyeScsXG4gICAgb3V0bGluZU9mZnNldDogJzJweCcsXG4gIH0sXG59KTtcblxuY29uc3QgaW50ZXJhY3RpdmVTdHlsZXMgPSBjc3Moe1xuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJyY6aG92ZXInOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnZGl2Jywgc3R5bGVkT3B0aW9uczwnZGl2Jz4oKSkocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlc1xuKTtcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuIl19 */");

package/dist/BarChart/Bar/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BarProps } from '../shared/types';
+export interface BarRowProps extends BarProps {
+    index?: number;
+}
+export declare const Bar: import("react").ForwardRefExoticComponent<BarRowProps & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>>;

package/dist/BarChart/Bar/index.js

@@ -0,0 +1,134 @@
+import { forwardRef } from 'react';
+import { FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { minBarWidth, rightSpacerWidth } from '../shared/styles';
+import { calculateBarWidth, getValuesSummary, useBarChartContext } from '../utils';
+import { BackgroundBar, BarWrapper, ForegroundBar, RowAnchor, RowButton, RowWrapper } from './elements';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Bar = /*#__PURE__*/forwardRef(({
+  yLabel,
+  seriesOneValue,
+  seriesTwoValue,
+  icon: Icon,
+  onClick,
+  href,
+  index = 0
+}, ref) => {
+  const {
+    minRange,
+    maxRange,
+    unit,
+    styleConfig,
+    animate
+  } = useBarChartContext();
+  const isStacked = seriesTwoValue !== undefined;
+  const displayValue = isStacked ? seriesTwoValue : seriesOneValue;
+  const backgroundBarWidth = calculateBarWidth({
+    value: displayValue,
+    minRange,
+    maxRange
+  });
+  const foregroundBarWidth = isStacked ? calculateBarWidth({
+    value: seriesOneValue,
+    minRange,
+    maxRange
+  }) : 0;
+  const bgWidthStr = `${Math.max(minBarWidth, backgroundBarWidth)}%`;
+  const fgWidthStr = `${Math.max(minBarWidth, foregroundBarWidth)}%`;
+  const valuesSummary = getValuesSummary({
+    yLabel,
+    seriesOneValue,
+    seriesTwoValue,
+    unit
+  });
+  const animationDelay = animate ? index * 0.1 : 0;
+  const rowContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      color: styleConfig.textColor,
+      flexShrink: 0,
+      minWidth: "200px",
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        size: 24
+      }), /*#__PURE__*/_jsx(Text, {
+        fontWeight: "bold",
+        truncate: "ellipsis",
+        truncateLines: 1,
+        children: yLabel
+      })]
+    }), /*#__PURE__*/_jsxs(BarWrapper, {
+      children: [/*#__PURE__*/_jsx(BackgroundBar, {
+        animate: animate ? {
+          width: bgWidthStr
+        } : undefined,
+        bg: styleConfig.backgroundBarColor,
+        "data-testid": "background-bar",
+        initial: animate ? {
+          width: '0%'
+        } : undefined,
+        transition: {
+          duration: 0.5,
+          delay: animationDelay
+        },
+        width: !animate ? bgWidthStr : undefined
+      }), isStacked && /*#__PURE__*/_jsx(ForegroundBar, {
+        animate: animate ? {
+          width: fgWidthStr
+        } : undefined,
+        bg: styleConfig.foregroundBarColor,
+        "data-testid": "foreground-bar",
+        initial: animate ? {
+          width: '0%'
+        } : undefined,
+        transition: {
+          duration: 0.5,
+          delay: animationDelay + 0.25
+        },
+        width: !animate ? fgWidthStr : undefined
+      })]
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      alignItems: "center",
+      flexShrink: 0,
+      justifyContent: "flex-end",
+      minWidth: rightSpacerWidth - 16,
+      children: /*#__PURE__*/_jsxs(Text, {
+        color: styleConfig.textColor,
+        variant: "p-small",
+        children: [displayValue.toLocaleString(), unit && ` ${unit}`]
+      })
+    })]
+  });
+  if (href) {
+    return /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(RowAnchor, {
+        "aria-label": valuesSummary,
+        href: href,
+        ref: ref,
+        children: rowContent
+      })
+    });
+  }
+  if (onClick) {
+    return /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(RowButton, {
+        "aria-label": valuesSummary,
+        ref: ref,
+        type: "button",
+        onClick: onClick,
+        onKeyDown: e => {
+          if (e.key === 'Enter') {
+            onClick(e);
+          }
+        },
+        children: rowContent
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("li", {
+    children: /*#__PURE__*/_jsx(RowWrapper, {
+      "aria-label": valuesSummary,
+      ref: ref,
+      children: rowContent
+    })
+  });
+});

package/dist/BarChart/BarChartProvider.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BarChartStyles } from './shared/types';
+export interface BarChartContextProps {
+    minRange: number;
+    maxRange: number;
+    xScale: number;
+    unit: string;
+    styleConfig: Required<BarChartStyles>;
+    animate: boolean;
+}
+export declare const BarChartContext: import("react").Context<BarChartContextProps>;
+export declare const BarChartProvider: import("react").Provider<BarChartContextProps>;

package/dist/BarChart/BarChartProvider.js

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+const defaultStyleConfig = {
+  textColor: 'text',
+  foregroundBarColor: 'feedback-warning',
+  backgroundBarColor: 'background-primary'
+};
+export const BarChartContext = /*#__PURE__*/createContext({
+  minRange: 0,
+  maxRange: 100,
+  xScale: 10,
+  unit: '',
+  styleConfig: defaultStyleConfig,
+  animate: false
+});
+BarChartContext.displayName = 'BarChartContext';
+export const BarChartProvider = BarChartContext.Provider;

package/dist/BarChart/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BarChartProps } from './shared/types';
+export declare const BarChart: React.FC<BarChartProps>;

package/dist/BarChart/index.js

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { Box } from '../Box';
+import { Bar } from './Bar';
+import { BarChartProvider } from './BarChartProvider';
+import { GridLines } from './layout/GridLines';
+import { ScaleChartHeader } from './layout/ScaleChartHeader';
+import { BarsList } from './shared/elements';
+import { sortBars, useBarChart } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BarChart = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  animate = false,
+  barValues,
+  maxRange,
+  minRange,
+  order = 'ascending',
+  sortBy = 'none',
+  unit = '',
+  styleConfig,
+  xScale
+}) => {
+  const contextValue = useBarChart({
+    minRange,
+    maxRange,
+    xScale,
+    unit,
+    styleConfig,
+    animate
+  });
+  const sortedBars = useMemo(() => sortBars({
+    bars: barValues,
+    sortBy,
+    order
+  }), [barValues, sortBy, order]);
+
+  // Calculate number of ticks for the scale header
+  const tickCount = Math.ceil((maxRange - minRange) / contextValue.xScale) + 1;
+  return /*#__PURE__*/_jsx(BarChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsxs(Box, {
+      position: "relative",
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(ScaleChartHeader, {
+        labelCount: tickCount,
+        max: maxRange,
+        min: minRange
+      }), /*#__PURE__*/_jsxs(Box, {
+        position: "relative",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(GridLines, {
+          max: maxRange,
+          min: minRange,
+          tickCount: tickCount
+        }), /*#__PURE__*/_jsx(BarsList, {
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          children: sortedBars.map((bar, index) => {
+            const uniqueKey = `${bar.yLabel}-${bar.seriesOneValue}-${bar.seriesTwoValue ?? ''}`;
+            return /*#__PURE__*/_jsx(Bar, {
+              index: index,
+              ...bar
+            }, uniqueKey);
+          })
+        })]
+      })]
+    })
+  });
+};

package/dist/BarChart/layout/GridLines.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface GridLinesProps {
+    tickCount: number;
+    min: number;
+    max: number;
+}
+export declare const GridLines: React.FC<GridLinesProps>;

package/dist/BarChart/layout/GridLines.js

@@ -0,0 +1,77 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { Box } from '../../Box';
+import { useLabelPositions } from '../utils';
+import { VerticalSpacer } from './VerticalSpacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridLineWrapper = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk2",
+  label: "GridLineWrapper"
+})(css({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  pointerEvents: 'none',
+  zIndex: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9HcmlkTGluZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgVmVydGljYWxTcGFjZXIgfSBmcm9tICcuL1ZlcnRpY2FsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIGJvdHRvbTogMCxcbiAgICBsZWZ0OiAwLFxuICAgIHJpZ2h0OiAwLFxuICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgICB6SW5kZXg6IDAsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZUNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJvdHRvbTogMCxcbiAgICBkaXNwbGF5OiB7IF86ICdub25lJywgc206ICdibG9jaycgfSxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogMCxcbiAgICByaWdodDogMCxcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlclJpZ2h0OiAxLFxuICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEdyaWRMaW5lc1Byb3BzIHtcbiAgdGlja0NvdW50OiBudW1iZXI7XG4gIG1pbjogbnVtYmVyO1xuICBtYXg6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lczogUmVhY3QuRkM8R3JpZExpbmVzUHJvcHM+ID0gKHtcbiAgdGlja0NvdW50LFxuICBtaW4sXG4gIG1heCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7IG1pbiwgbWF4LCBjb3VudDogdGlja0NvdW50IH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgIDxHcmlkTGluZVxuICAgICAgYXJpYS1oaWRkZW5cbiAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAvPlxuICApKTtcblxuICByZXR1cm4gKFxuICAgIDxHcmlkTGluZVdyYXBwZXIgYXJpYS1oaWRkZW4+XG4gICAgICA8VmVydGljYWxTcGFjZXI+XG4gICAgICAgIDxHcmlkTGluZUNvbnRhaW5lcj57bGluZXN9PC9HcmlkTGluZUNvbnRhaW5lcj5cbiAgICAgIDwvVmVydGljYWxTcGFjZXI+XG4gICAgPC9HcmlkTGluZVdyYXBwZXI+XG4gICk7XG59O1xuIl19 */");
+const GridLineContainer = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk1",
+  label: "GridLineContainer"
+})(css({
+  bottom: 0,
+  display: {
+    _: 'none',
+    sm: 'block'
+  },
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  borderLeft: 1,
+  borderRight: 1,
+  borderColor: 'background-disabled'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IFZlcnRpY2FsU3BhY2VyIH0gZnJvbSAnLi9WZXJ0aWNhbFNwYWNlcic7XG5cbmNvbnN0IEdyaWRMaW5lV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICBib3R0b206IDAsXG4gICAgbGVmdDogMCxcbiAgICByaWdodDogMCxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgekluZGV4OiAwLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmVDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3R0b206IDAsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIHNtOiAnYmxvY2snIH0sXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgcmlnaHQ6IDAsXG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJSaWdodDogMSxcbiAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmUgPSBzdHlsZWQoQm94KTx7IHBvc2l0aW9uUGVyY2VudDogbnVtYmVyIH0+KFxuICBjc3Moe1xuICAgIGJvcmRlckxlZnQ6IDEsXG4gICAgYm9yZGVyQ29sb3JMZWZ0OiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50IH0pID0+ICh7XG4gICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSknLFxuICB9KVxuKTtcblxuZXhwb3J0IGludGVyZmFjZSBHcmlkTGluZXNQcm9wcyB7XG4gIHRpY2tDb3VudDogbnVtYmVyO1xuICBtaW46IG51bWJlcjtcbiAgbWF4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBjb25zdCBHcmlkTGluZXM6IFJlYWN0LkZDPEdyaWRMaW5lc1Byb3BzPiA9ICh7XG4gIHRpY2tDb3VudCxcbiAgbWluLFxuICBtYXgsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoeyBtaW4sIG1heCwgY291bnQ6IHRpY2tDb3VudCB9KTtcblxuICBjb25zdCBsaW5lcyA9IGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICA8R3JpZExpbmVcbiAgICAgIGFyaWEtaGlkZGVuXG4gICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgLz5cbiAgKSk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+const GridLine = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk0",
+  label: "GridLine"
+})(css({
+  borderLeft: 1,
+  borderColorLeft: 'background-disabled',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  width: 0
+}), ({
+  positionPercent
+}) => ({
+  left: `${positionPercent}%`,
+  transform: 'translateX(-50%)'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ2lCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IFZlcnRpY2FsU3BhY2VyIH0gZnJvbSAnLi9WZXJ0aWNhbFNwYWNlcic7XG5cbmNvbnN0IEdyaWRMaW5lV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICBib3R0b206IDAsXG4gICAgbGVmdDogMCxcbiAgICByaWdodDogMCxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgekluZGV4OiAwLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmVDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3R0b206IDAsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIHNtOiAnYmxvY2snIH0sXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgcmlnaHQ6IDAsXG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJSaWdodDogMSxcbiAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmUgPSBzdHlsZWQoQm94KTx7IHBvc2l0aW9uUGVyY2VudDogbnVtYmVyIH0+KFxuICBjc3Moe1xuICAgIGJvcmRlckxlZnQ6IDEsXG4gICAgYm9yZGVyQ29sb3JMZWZ0OiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAwLFxuICAgIHdpZHRoOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50IH0pID0+ICh7XG4gICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSknLFxuICB9KVxuKTtcblxuZXhwb3J0IGludGVyZmFjZSBHcmlkTGluZXNQcm9wcyB7XG4gIHRpY2tDb3VudDogbnVtYmVyO1xuICBtaW46IG51bWJlcjtcbiAgbWF4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBjb25zdCBHcmlkTGluZXM6IFJlYWN0LkZDPEdyaWRMaW5lc1Byb3BzPiA9ICh7XG4gIHRpY2tDb3VudCxcbiAgbWluLFxuICBtYXgsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoeyBtaW4sIG1heCwgY291bnQ6IHRpY2tDb3VudCB9KTtcblxuICBjb25zdCBsaW5lcyA9IGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICA8R3JpZExpbmVcbiAgICAgIGFyaWEtaGlkZGVuXG4gICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgLz5cbiAgKSk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+export const GridLines = ({
+  tickCount,
+  min,
+  max
+}) => {
+  const labelPositions = useLabelPositions({
+    min,
+    max,
+    count: tickCount
+  });
+  const lines = labelPositions.map(({
+    positionPercent,
+    value
+  }) => /*#__PURE__*/_jsx(GridLine, {
+    "aria-hidden": true,
+    positionPercent: positionPercent
+  }, `gridline-${value}-${positionPercent}`));
+  return /*#__PURE__*/_jsx(GridLineWrapper, {
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx(VerticalSpacer, {
+      children: /*#__PURE__*/_jsx(GridLineContainer, {
+        children: lines
+      })
+    })
+  });
+};

package/dist/BarChart/layout/ScaleChartHeader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ScaleChartHeaderProps {
+    /** Minimum value on the scale */
+    min: number;
+    /** Maximum value on the scale */
+    max: number;
+    /** Number of labels to display */
+    labelCount: number;
+}
+export declare const ScaleChartHeader: React.FC<ScaleChartHeaderProps>;

package/dist/BarChart/layout/ScaleChartHeader.js

@@ -0,0 +1,88 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { Box } from '../../Box';
+import { Text } from '../../Typography';
+import { formatNumberUSCompact, useBarChartContext, useLabelPositions } from '../utils';
+import { VerticalSpacer } from './VerticalSpacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledLabelText = /*#__PURE__*/_styled(Text, {
+  target: "e1ssd1i12",
+  label: "StyledLabelText"
+})(css({
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  margin: 0,
+  padding: 0
+}), ({
+  positionPercent,
+  textAlign
+}) => {
+  let transform = '';
+  if (textAlign === 'left') {
+    transform = 'translateX(0)';
+  } else if (textAlign === 'right') {
+    transform = 'translateX(-100%)';
+  } else {
+    transform = 'translateX(-50%)';
+  }
+  return {
+    left: `${positionPercent}%`,
+    transform
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7XG4gIGZvcm1hdE51bWJlclVTQ29tcGFjdCxcbiAgdXNlQmFyQ2hhcnRDb250ZXh0LFxuICB1c2VMYWJlbFBvc2l0aW9ucyxcbn0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgVmVydGljYWxTcGFjZXIgfSBmcm9tICcuL1ZlcnRpY2FsU3BhY2VyJztcblxuZXhwb3J0IGludGVyZmFjZSBTY2FsZUNoYXJ0SGVhZGVyUHJvcHMge1xuICAvKiogTWluaW11bSB2YWx1ZSBvbiB0aGUgc2NhbGUgKi9cbiAgbWluOiBudW1iZXI7XG4gIC8qKiBNYXhpbXVtIHZhbHVlIG9uIHRoZSBzY2FsZSAqL1xuICBtYXg6IG51bWJlcjtcbiAgLyoqIE51bWJlciBvZiBsYWJlbHMgdG8gZGlzcGxheSAqL1xuICBsYWJlbENvdW50OiBudW1iZXI7XG59XG5cbmNvbnN0IFN0eWxlZExhYmVsVGV4dCA9IHN0eWxlZChUZXh0KTx7XG4gIHBvc2l0aW9uUGVyY2VudDogbnVtYmVyO1xuICB0ZXh0QWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInIHwgJ3JpZ2h0Jztcbn0+KFxuICBjc3Moe1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIG1hcmdpbjogMCxcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50LCB0ZXh0QWxpZ24gfSkgPT4ge1xuICAgIGxldCB0cmFuc2Zvcm0gPSAnJztcbiAgICBpZiAodGV4dEFsaWduID09PSAnbGVmdCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDApJztcbiAgICB9IGVsc2UgaWYgKHRleHRBbGlnbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTEwMCUpJztcbiAgICB9IGVsc2Uge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTUwJSknO1xuICAgIH1cbiAgICByZXR1cm4ge1xuICAgICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgICAgdHJhbnNmb3JtLFxuICAgIH07XG4gIH1cbik7XG5cbmNvbnN0IFN0eWxlZEhlYWRlckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9KVxuKTtcblxuY29uc3QgSGVhZGVyTGFiZWxBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgbWluSGVpZ2h0OiAnMjRweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU2NhbGVDaGFydEhlYWRlcjogUmVhY3QuRkM8U2NhbGVDaGFydEhlYWRlclByb3BzPiA9ICh7XG4gIGxhYmVsQ291bnQsXG4gIG1pbixcbiAgbWF4LFxufSkgPT4ge1xuICBjb25zdCB7IHN0eWxlQ29uZmlnIH0gPSB1c2VCYXJDaGFydENvbnRleHQoKTtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7IG1pbiwgbWF4LCBjb3VudDogbGFiZWxDb3VudCB9KTtcblxuICBjb25zdCBzY2FsZUxhYmVscyA9IGxhYmVsUG9zaXRpb25zLm1hcCgoeyB2YWx1ZSwgcG9zaXRpb25QZXJjZW50IH0pID0+IChcbiAgICA8U3R5bGVkTGFiZWxUZXh0XG4gICAgICBkYXRhLXRlc3RpZD1cImNoYXJ0LWhlYWRlci1sYWJlbFwiXG4gICAgICBrZXk9e2BsYWJlbC0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgdGV4dENvbG9yPXtzdHlsZUNvbmZpZy50ZXh0Q29sb3J9XG4gICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgPlxuICAgICAge2Zvcm1hdE51bWJlclVTQ29tcGFjdCh7XG4gICAgICAgIG51bTogdmFsdWUsXG4gICAgICB9KX1cbiAgICA8L1N0eWxlZExhYmVsVGV4dD5cbiAgKSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgc206ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG4iXX0= */");
+const StyledHeaderContainer = /*#__PURE__*/_styled(Box, {
+  target: "e1ssd1i11",
+  label: "StyledHeaderContainer"
+})(css({
+  alignItems: 'center',
+  position: 'relative'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0M4QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7XG4gIGZvcm1hdE51bWJlclVTQ29tcGFjdCxcbiAgdXNlQmFyQ2hhcnRDb250ZXh0LFxuICB1c2VMYWJlbFBvc2l0aW9ucyxcbn0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgVmVydGljYWxTcGFjZXIgfSBmcm9tICcuL1ZlcnRpY2FsU3BhY2VyJztcblxuZXhwb3J0IGludGVyZmFjZSBTY2FsZUNoYXJ0SGVhZGVyUHJvcHMge1xuICAvKiogTWluaW11bSB2YWx1ZSBvbiB0aGUgc2NhbGUgKi9cbiAgbWluOiBudW1iZXI7XG4gIC8qKiBNYXhpbXVtIHZhbHVlIG9uIHRoZSBzY2FsZSAqL1xuICBtYXg6IG51bWJlcjtcbiAgLyoqIE51bWJlciBvZiBsYWJlbHMgdG8gZGlzcGxheSAqL1xuICBsYWJlbENvdW50OiBudW1iZXI7XG59XG5cbmNvbnN0IFN0eWxlZExhYmVsVGV4dCA9IHN0eWxlZChUZXh0KTx7XG4gIHBvc2l0aW9uUGVyY2VudDogbnVtYmVyO1xuICB0ZXh0QWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInIHwgJ3JpZ2h0Jztcbn0+KFxuICBjc3Moe1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIG1hcmdpbjogMCxcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50LCB0ZXh0QWxpZ24gfSkgPT4ge1xuICAgIGxldCB0cmFuc2Zvcm0gPSAnJztcbiAgICBpZiAodGV4dEFsaWduID09PSAnbGVmdCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDApJztcbiAgICB9IGVsc2UgaWYgKHRleHRBbGlnbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTEwMCUpJztcbiAgICB9IGVsc2Uge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTUwJSknO1xuICAgIH1cbiAgICByZXR1cm4ge1xuICAgICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgICAgdHJhbnNmb3JtLFxuICAgIH07XG4gIH1cbik7XG5cbmNvbnN0IFN0eWxlZEhlYWRlckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9KVxuKTtcblxuY29uc3QgSGVhZGVyTGFiZWxBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgbWluSGVpZ2h0OiAnMjRweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU2NhbGVDaGFydEhlYWRlcjogUmVhY3QuRkM8U2NhbGVDaGFydEhlYWRlclByb3BzPiA9ICh7XG4gIGxhYmVsQ291bnQsXG4gIG1pbixcbiAgbWF4LFxufSkgPT4ge1xuICBjb25zdCB7IHN0eWxlQ29uZmlnIH0gPSB1c2VCYXJDaGFydENvbnRleHQoKTtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7IG1pbiwgbWF4LCBjb3VudDogbGFiZWxDb3VudCB9KTtcblxuICBjb25zdCBzY2FsZUxhYmVscyA9IGxhYmVsUG9zaXRpb25zLm1hcCgoeyB2YWx1ZSwgcG9zaXRpb25QZXJjZW50IH0pID0+IChcbiAgICA8U3R5bGVkTGFiZWxUZXh0XG4gICAgICBkYXRhLXRlc3RpZD1cImNoYXJ0LWhlYWRlci1sYWJlbFwiXG4gICAgICBrZXk9e2BsYWJlbC0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgdGV4dENvbG9yPXtzdHlsZUNvbmZpZy50ZXh0Q29sb3J9XG4gICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgPlxuICAgICAge2Zvcm1hdE51bWJlclVTQ29tcGFjdCh7XG4gICAgICAgIG51bTogdmFsdWUsXG4gICAgICB9KX1cbiAgICA8L1N0eWxlZExhYmVsVGV4dD5cbiAgKSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgc206ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG4iXX0= */");
+const HeaderLabelArea = /*#__PURE__*/_styled(Box, {
+  target: "e1ssd1i10",
+  label: "HeaderLabelArea"
+})(css({
+  minHeight: '24px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0R3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7XG4gIGZvcm1hdE51bWJlclVTQ29tcGFjdCxcbiAgdXNlQmFyQ2hhcnRDb250ZXh0LFxuICB1c2VMYWJlbFBvc2l0aW9ucyxcbn0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgVmVydGljYWxTcGFjZXIgfSBmcm9tICcuL1ZlcnRpY2FsU3BhY2VyJztcblxuZXhwb3J0IGludGVyZmFjZSBTY2FsZUNoYXJ0SGVhZGVyUHJvcHMge1xuICAvKiogTWluaW11bSB2YWx1ZSBvbiB0aGUgc2NhbGUgKi9cbiAgbWluOiBudW1iZXI7XG4gIC8qKiBNYXhpbXVtIHZhbHVlIG9uIHRoZSBzY2FsZSAqL1xuICBtYXg6IG51bWJlcjtcbiAgLyoqIE51bWJlciBvZiBsYWJlbHMgdG8gZGlzcGxheSAqL1xuICBsYWJlbENvdW50OiBudW1iZXI7XG59XG5cbmNvbnN0IFN0eWxlZExhYmVsVGV4dCA9IHN0eWxlZChUZXh0KTx7XG4gIHBvc2l0aW9uUGVyY2VudDogbnVtYmVyO1xuICB0ZXh0QWxpZ246ICdsZWZ0JyB8ICdjZW50ZXInIHwgJ3JpZ2h0Jztcbn0+KFxuICBjc3Moe1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIG1hcmdpbjogMCxcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50LCB0ZXh0QWxpZ24gfSkgPT4ge1xuICAgIGxldCB0cmFuc2Zvcm0gPSAnJztcbiAgICBpZiAodGV4dEFsaWduID09PSAnbGVmdCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDApJztcbiAgICB9IGVsc2UgaWYgKHRleHRBbGlnbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTEwMCUpJztcbiAgICB9IGVsc2Uge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTUwJSknO1xuICAgIH1cbiAgICByZXR1cm4ge1xuICAgICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgICAgdHJhbnNmb3JtLFxuICAgIH07XG4gIH1cbik7XG5cbmNvbnN0IFN0eWxlZEhlYWRlckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9KVxuKTtcblxuY29uc3QgSGVhZGVyTGFiZWxBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgbWluSGVpZ2h0OiAnMjRweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU2NhbGVDaGFydEhlYWRlcjogUmVhY3QuRkM8U2NhbGVDaGFydEhlYWRlclByb3BzPiA9ICh7XG4gIGxhYmVsQ291bnQsXG4gIG1pbixcbiAgbWF4LFxufSkgPT4ge1xuICBjb25zdCB7IHN0eWxlQ29uZmlnIH0gPSB1c2VCYXJDaGFydENvbnRleHQoKTtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7IG1pbiwgbWF4LCBjb3VudDogbGFiZWxDb3VudCB9KTtcblxuICBjb25zdCBzY2FsZUxhYmVscyA9IGxhYmVsUG9zaXRpb25zLm1hcCgoeyB2YWx1ZSwgcG9zaXRpb25QZXJjZW50IH0pID0+IChcbiAgICA8U3R5bGVkTGFiZWxUZXh0XG4gICAgICBkYXRhLXRlc3RpZD1cImNoYXJ0LWhlYWRlci1sYWJlbFwiXG4gICAgICBrZXk9e2BsYWJlbC0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgdGV4dENvbG9yPXtzdHlsZUNvbmZpZy50ZXh0Q29sb3J9XG4gICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgPlxuICAgICAge2Zvcm1hdE51bWJlclVTQ29tcGFjdCh7XG4gICAgICAgIG51bTogdmFsdWUsXG4gICAgICB9KX1cbiAgICA8L1N0eWxlZExhYmVsVGV4dD5cbiAgKSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgc206ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG4iXX0= */");
+export const ScaleChartHeader = ({
+  labelCount,
+  min,
+  max
+}) => {
+  const {
+    styleConfig
+  } = useBarChartContext();
+  const labelPositions = useLabelPositions({
+    min,
+    max,
+    count: labelCount
+  });
+  const scaleLabels = labelPositions.map(({
+    value,
+    positionPercent
+  }) => /*#__PURE__*/_jsx(StyledLabelText, {
+    "data-testid": "chart-header-label",
+    positionPercent: positionPercent,
+    textAlign: "center",
+    textColor: styleConfig.textColor,
+    variant: "p-small",
+    children: formatNumberUSCompact({
+      num: value
+    })
+  }, `label-${value}-${positionPercent}`));
+  return /*#__PURE__*/_jsx(Box, {
+    mb: 12,
+    width: 1,
+    children: /*#__PURE__*/_jsx(StyledHeaderContainer, {
+      "aria-hidden": "true",
+      display: {
+        _: 'none',
+        sm: 'block'
+      },
+      children: /*#__PURE__*/_jsx(VerticalSpacer, {
+        children: /*#__PURE__*/_jsx(HeaderLabelArea, {
+          children: scaleLabels
+        })
+      })
+    })
+  });
+};

package/dist/BarChart/layout/VerticalSpacer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface VerticalSpacerProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const VerticalSpacer: React.FC<VerticalSpacerProps>;