@codecademy/gamut 68.2.0-alpha.a8fc55.0 → 68.2.0

package/dist/BarChart/BarRow/elements.js

@@ -0,0 +1,110 @@
+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 { FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { barListItemPadding } from '../shared/styles';
+export const TotalValueLabelsHoverTarget = /*#__PURE__*/_styled(FlexBox, {
+  target: "e15ycbyh6",
+  label: "TotalValueLabelsHoverTarget"
+})(css({
+  alignItems: 'center',
+  flexShrink: 0,
+  height: 'stretch',
+  justifyContent: 'flex-end'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVEyQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvQmFyUm93L2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgc3R5bGVkT3B0aW9ucyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBtb3Rpb24gfSBmcm9tICdmcmFtZXItbW90aW9uJztcblxuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vLi4vVHlwb2dyYXBoeSc7XG5pbXBvcnQgeyBiYXJMaXN0SXRlbVBhZGRpbmcgfSBmcm9tICcuLi9zaGFyZWQvc3R5bGVzJztcblxuZXhwb3J0IGNvbnN0IFRvdGFsVmFsdWVMYWJlbHNIb3ZlclRhcmdldCA9IHN0eWxlZChGbGV4Qm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBmbGV4U2hyaW5rOiAwLFxuICAgIGhlaWdodDogJ3N0cmV0Y2gnLFxuICAgIGp1c3RpZnlDb250ZW50OiAnZmxleC1lbmQnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IENhdGVnb3J5TGFiZWwgPSBzdHlsZWQoVGV4dCkoXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2JvbGQnLFxuXG4gICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gIH0pXG4pO1xuXG5jb25zdCByb3dCYXNlU3R5bGVzID0gY3NzKHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJnOiAndHJhbnNwYXJlbnQnLFxuICBib3JkZXI6ICdub25lJyxcbiAgY3Vyc29yOiAnaW5oZXJpdCcsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgZmxleERpcmVjdGlvbjogeyBfOiAnY29sdW1uJywgY194czogJ3JvdycgfSxcbiAgcDogYmFyTGlzdEl0ZW1QYWRkaW5nLFxuICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgd2lkdGg6ICcxMDAlJyxcbiAgJyY6Zm9jdXMnOiB7XG4gICAgb3V0bGluZTogJ25vbmUnLFxuICB9LFxuICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIG91dGxpbmU6ICcycHggc29saWQnLFxuICAgIG91dGxpbmVDb2xvcjogJ3ByaW1hcnknLFxuICAgIG91dGxpbmVPZmZzZXQ6ICcycHgnLFxuICB9LFxufSk7XG5cbmNvbnN0IGludGVyYWN0aXZlU3R5bGVzID0gY3NzKHtcbiAgY3Vyc29yOiAncG9pbnRlcicsXG4gICcmOmhvdmVyLCAmOmZvY3VzLXZpc2libGUnOiB7XG4gICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgICB0ZXh0RGVjb3JhdGlvbjogJ25vbmUnLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBSb3dXcmFwcGVyID0gc3R5bGVkKCdzcGFuJykocm93QmFzZVN0eWxlcyk7XG5leHBvcnQgY29uc3QgUm93QnV0dG9uID0gc3R5bGVkKCdidXR0b24nLCBzdHlsZWRPcHRpb25zPCdidXR0b24nPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXNcbik7XG5leHBvcnQgY29uc3QgUm93QW5jaG9yID0gc3R5bGVkKCdhJywgc3R5bGVkT3B0aW9uczwnYSc+KCkpKFxuICByb3dCYXNlU3R5bGVzLFxuICBpbnRlcmFjdGl2ZVN0eWxlcyxcbiAgY3NzKHtcbiAgICBbYCY6Zm9jdXMtdmlzaWJsZSAke0NhdGVnb3J5TGFiZWx9LCAmOmhvdmVyICR7Q2F0ZWdvcnlMYWJlbH1gXToge1xuICAgICAgdGV4dERlY29yYXRpb246ICd1bmRlcmxpbmUnLFxuICAgICAgdGV4dERlY29yYXRpb25Db2xvcjogJ3ByaW1hcnknLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChGbGV4Qm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBib3JkZXJSYWRpdXM6IHsgXzogJ21kJyBhcyBhbnksIGNfeHM6ICd4bCcgfSxcbiAgICBmbGV4OiB7IF86ICdub25lJywgY194czogMSB9LFxuICAgIGhlaWdodDogeyBfOiA4LCBjX3hzOiAyNCB9LFxuICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICB3aWR0aDogeyBfOiAnMTAwJScsIGNfeHM6ICdhdXRvJyB9LFxuICAgIG10OiB7IF86IDgsIGNfeHM6IDAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShGbGV4Qm94KSkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gICAgYm9yZGVyU3R5bGU6ICdzb2xpZCcsXG4gICAgYm9yZGVyV2lkdGg6ICcxcHgnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIGxlZnQ6IDAsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIH0pXG4pO1xuIl19 */");
+export const CategoryLabel = /*#__PURE__*/_styled(Text, {
+  target: "e15ycbyh5",
+  label: "CategoryLabel"
+})(css({
+  fontWeight: 'bold',
+  whiteSpace: 'nowrap'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCNkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0JhclJvdy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBUb3RhbFZhbHVlTGFiZWxzSG92ZXJUYXJnZXQgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleFNocmluazogMCxcbiAgICBoZWlnaHQ6ICdzdHJldGNoJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtZW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBDYXRlZ29yeUxhYmVsID0gc3R5bGVkKFRleHQpKFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcblxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICB9KVxuKTtcblxuY29uc3Qgcm93QmFzZVN0eWxlcyA9IGNzcyh7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246IHsgXzogJ2NvbHVtbicsIGNfeHM6ICdyb3cnIH0sXG4gIHA6IGJhckxpc3RJdGVtUGFkZGluZyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIHdpZHRoOiAnMTAwJScsXG4gICcmOmZvY3VzJzoge1xuICAgIG91dGxpbmU6ICdub25lJyxcbiAgfSxcbiAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICBvdXRsaW5lOiAnMnB4IHNvbGlkJyxcbiAgICBvdXRsaW5lQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgfSxcbn0pO1xuXG5jb25zdCBpbnRlcmFjdGl2ZVN0eWxlcyA9IGNzcyh7XG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICAnJjpob3ZlciwgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnc3BhbicpKHJvd0Jhc2VTdHlsZXMpO1xuZXhwb3J0IGNvbnN0IFJvd0J1dHRvbiA9IHN0eWxlZCgnYnV0dG9uJywgc3R5bGVkT3B0aW9uczwnYnV0dG9uJz4oKSkoXG4gIHJvd0Jhc2VTdHlsZXMsXG4gIGludGVyYWN0aXZlU3R5bGVzXG4pO1xuZXhwb3J0IGNvbnN0IFJvd0FuY2hvciA9IHN0eWxlZCgnYScsIHN0eWxlZE9wdGlvbnM8J2EnPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXMsXG4gIGNzcyh7XG4gICAgW2AmOmZvY3VzLXZpc2libGUgJHtDYXRlZ29yeUxhYmVsfSwgJjpob3ZlciAke0NhdGVnb3J5TGFiZWx9YF06IHtcbiAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgIHRleHREZWNvcmF0aW9uQ29sb3I6ICdwcmltYXJ5JyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiB7IF86ICdtZCcgYXMgYW55LCBjX3hzOiAneGwnIH0sXG4gICAgZmxleDogeyBfOiAnbm9uZScsIGNfeHM6IDEgfSxcbiAgICBoZWlnaHQ6IHsgXzogOCwgY194czogMjQgfSxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6IHsgXzogJzEwMCUnLCBjX3hzOiAnYXV0bycgfSxcbiAgICBtdDogeyBfOiA4LCBjX3hzOiAwIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoRmxleEJveCkpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcbiJdfQ== */");
+const rowBaseStyles = css({
+  alignItems: 'center',
+  bg: 'transparent',
+  border: 'none',
+  cursor: 'inherit',
+  display: 'flex',
+  flexDirection: {
+    _: 'column',
+    c_xs: 'row'
+  },
+  p: barListItemPadding,
+  position: 'relative',
+  textDecoration: 'none',
+  width: '100%',
+  '&:focus': {
+    outline: 'none'
+  },
+  '&:focus-visible': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '2px'
+  }
+});
+const interactiveStyles = css({
+  cursor: 'pointer',
+  '&:hover, &:focus-visible': {
+    bg: 'background-hover',
+    textDecoration: 'none'
+  }
+});
+export const RowWrapper = /*#__PURE__*/_styled('span', {
+  target: "e15ycbyh4",
+  label: "RowWrapper"
+})(rowBaseStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEMEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0JhclJvdy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBUb3RhbFZhbHVlTGFiZWxzSG92ZXJUYXJnZXQgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleFNocmluazogMCxcbiAgICBoZWlnaHQ6ICdzdHJldGNoJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtZW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBDYXRlZ29yeUxhYmVsID0gc3R5bGVkKFRleHQpKFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcblxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICB9KVxuKTtcblxuY29uc3Qgcm93QmFzZVN0eWxlcyA9IGNzcyh7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246IHsgXzogJ2NvbHVtbicsIGNfeHM6ICdyb3cnIH0sXG4gIHA6IGJhckxpc3RJdGVtUGFkZGluZyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIHdpZHRoOiAnMTAwJScsXG4gICcmOmZvY3VzJzoge1xuICAgIG91dGxpbmU6ICdub25lJyxcbiAgfSxcbiAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICBvdXRsaW5lOiAnMnB4IHNvbGlkJyxcbiAgICBvdXRsaW5lQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgfSxcbn0pO1xuXG5jb25zdCBpbnRlcmFjdGl2ZVN0eWxlcyA9IGNzcyh7XG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICAnJjpob3ZlciwgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnc3BhbicpKHJvd0Jhc2VTdHlsZXMpO1xuZXhwb3J0IGNvbnN0IFJvd0J1dHRvbiA9IHN0eWxlZCgnYnV0dG9uJywgc3R5bGVkT3B0aW9uczwnYnV0dG9uJz4oKSkoXG4gIHJvd0Jhc2VTdHlsZXMsXG4gIGludGVyYWN0aXZlU3R5bGVzXG4pO1xuZXhwb3J0IGNvbnN0IFJvd0FuY2hvciA9IHN0eWxlZCgnYScsIHN0eWxlZE9wdGlvbnM8J2EnPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXMsXG4gIGNzcyh7XG4gICAgW2AmOmZvY3VzLXZpc2libGUgJHtDYXRlZ29yeUxhYmVsfSwgJjpob3ZlciAke0NhdGVnb3J5TGFiZWx9YF06IHtcbiAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgIHRleHREZWNvcmF0aW9uQ29sb3I6ICdwcmltYXJ5JyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiB7IF86ICdtZCcgYXMgYW55LCBjX3hzOiAneGwnIH0sXG4gICAgZmxleDogeyBfOiAnbm9uZScsIGNfeHM6IDEgfSxcbiAgICBoZWlnaHQ6IHsgXzogOCwgY194czogMjQgfSxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6IHsgXzogJzEwMCUnLCBjX3hzOiAnYXV0bycgfSxcbiAgICBtdDogeyBfOiA4LCBjX3hzOiAwIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoRmxleEJveCkpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcbiJdfQ== */");
+export const RowButton = /*#__PURE__*/_styled('button', _extends({}, {
+  target: "e15ycbyh3",
+  label: "RowButton"
+}, styledOptions()))(rowBaseStyles, interactiveStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0JhclJvdy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBUb3RhbFZhbHVlTGFiZWxzSG92ZXJUYXJnZXQgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleFNocmluazogMCxcbiAgICBoZWlnaHQ6ICdzdHJldGNoJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtZW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBDYXRlZ29yeUxhYmVsID0gc3R5bGVkKFRleHQpKFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcblxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICB9KVxuKTtcblxuY29uc3Qgcm93QmFzZVN0eWxlcyA9IGNzcyh7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246IHsgXzogJ2NvbHVtbicsIGNfeHM6ICdyb3cnIH0sXG4gIHA6IGJhckxpc3RJdGVtUGFkZGluZyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIHdpZHRoOiAnMTAwJScsXG4gICcmOmZvY3VzJzoge1xuICAgIG91dGxpbmU6ICdub25lJyxcbiAgfSxcbiAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICBvdXRsaW5lOiAnMnB4IHNvbGlkJyxcbiAgICBvdXRsaW5lQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgfSxcbn0pO1xuXG5jb25zdCBpbnRlcmFjdGl2ZVN0eWxlcyA9IGNzcyh7XG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICAnJjpob3ZlciwgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnc3BhbicpKHJvd0Jhc2VTdHlsZXMpO1xuZXhwb3J0IGNvbnN0IFJvd0J1dHRvbiA9IHN0eWxlZCgnYnV0dG9uJywgc3R5bGVkT3B0aW9uczwnYnV0dG9uJz4oKSkoXG4gIHJvd0Jhc2VTdHlsZXMsXG4gIGludGVyYWN0aXZlU3R5bGVzXG4pO1xuZXhwb3J0IGNvbnN0IFJvd0FuY2hvciA9IHN0eWxlZCgnYScsIHN0eWxlZE9wdGlvbnM8J2EnPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXMsXG4gIGNzcyh7XG4gICAgW2AmOmZvY3VzLXZpc2libGUgJHtDYXRlZ29yeUxhYmVsfSwgJjpob3ZlciAke0NhdGVnb3J5TGFiZWx9YF06IHtcbiAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgIHRleHREZWNvcmF0aW9uQ29sb3I6ICdwcmltYXJ5JyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiB7IF86ICdtZCcgYXMgYW55LCBjX3hzOiAneGwnIH0sXG4gICAgZmxleDogeyBfOiAnbm9uZScsIGNfeHM6IDEgfSxcbiAgICBoZWlnaHQ6IHsgXzogOCwgY194czogMjQgfSxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6IHsgXzogJzEwMCUnLCBjX3hzOiAnYXV0bycgfSxcbiAgICBtdDogeyBfOiA4LCBjX3hzOiAwIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoRmxleEJveCkpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcbiJdfQ== */");
+export const RowAnchor = /*#__PURE__*/_styled('a', _extends({}, {
+  target: "e15ycbyh2",
+  label: "RowAnchor"
+}, styledOptions()))(rowBaseStyles, interactiveStyles, css({
+  [`&:focus-visible ${CategoryLabel}, &:hover ${CategoryLabel}`]: {
+    textDecoration: 'underline',
+    textDecorationColor: 'primary'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJEeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0JhclJvdy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBUb3RhbFZhbHVlTGFiZWxzSG92ZXJUYXJnZXQgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleFNocmluazogMCxcbiAgICBoZWlnaHQ6ICdzdHJldGNoJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtZW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBDYXRlZ29yeUxhYmVsID0gc3R5bGVkKFRleHQpKFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcblxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICB9KVxuKTtcblxuY29uc3Qgcm93QmFzZVN0eWxlcyA9IGNzcyh7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246IHsgXzogJ2NvbHVtbicsIGNfeHM6ICdyb3cnIH0sXG4gIHA6IGJhckxpc3RJdGVtUGFkZGluZyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIHdpZHRoOiAnMTAwJScsXG4gICcmOmZvY3VzJzoge1xuICAgIG91dGxpbmU6ICdub25lJyxcbiAgfSxcbiAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICBvdXRsaW5lOiAnMnB4IHNvbGlkJyxcbiAgICBvdXRsaW5lQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgfSxcbn0pO1xuXG5jb25zdCBpbnRlcmFjdGl2ZVN0eWxlcyA9IGNzcyh7XG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICAnJjpob3ZlciwgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnc3BhbicpKHJvd0Jhc2VTdHlsZXMpO1xuZXhwb3J0IGNvbnN0IFJvd0J1dHRvbiA9IHN0eWxlZCgnYnV0dG9uJywgc3R5bGVkT3B0aW9uczwnYnV0dG9uJz4oKSkoXG4gIHJvd0Jhc2VTdHlsZXMsXG4gIGludGVyYWN0aXZlU3R5bGVzXG4pO1xuZXhwb3J0IGNvbnN0IFJvd0FuY2hvciA9IHN0eWxlZCgnYScsIHN0eWxlZE9wdGlvbnM8J2EnPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXMsXG4gIGNzcyh7XG4gICAgW2AmOmZvY3VzLXZpc2libGUgJHtDYXRlZ29yeUxhYmVsfSwgJjpob3ZlciAke0NhdGVnb3J5TGFiZWx9YF06IHtcbiAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgIHRleHREZWNvcmF0aW9uQ29sb3I6ICdwcmltYXJ5JyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiB7IF86ICdtZCcgYXMgYW55LCBjX3hzOiAneGwnIH0sXG4gICAgZmxleDogeyBfOiAnbm9uZScsIGNfeHM6IDEgfSxcbiAgICBoZWlnaHQ6IHsgXzogOCwgY194czogMjQgfSxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6IHsgXzogJzEwMCUnLCBjX3hzOiAnYXV0bycgfSxcbiAgICBtdDogeyBfOiA4LCBjX3hzOiAwIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoRmxleEJveCkpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcbiJdfQ== */");
+export const BarWrapper = /*#__PURE__*/_styled(FlexBox, {
+  target: "e15ycbyh1",
+  label: "BarWrapper"
+})(css({
+  alignItems: 'center',
+  borderRadius: {
+    _: 'md',
+    c_xs: 'xl'
+  },
+  flex: {
+    _: 'none',
+    c_xs: 1
+  },
+  height: {
+    _: 8,
+    c_xs: 24
+  },
+  overflow: 'hidden',
+  position: 'relative',
+  width: {
+    _: '100%',
+    c_xs: 'auto'
+  },
+  mt: {
+    _: 8,
+    c_xs: 0
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNFMEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0JhclJvdy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBUb3RhbFZhbHVlTGFiZWxzSG92ZXJUYXJnZXQgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleFNocmluazogMCxcbiAgICBoZWlnaHQ6ICdzdHJldGNoJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtZW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBDYXRlZ29yeUxhYmVsID0gc3R5bGVkKFRleHQpKFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcblxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICB9KVxuKTtcblxuY29uc3Qgcm93QmFzZVN0eWxlcyA9IGNzcyh7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246IHsgXzogJ2NvbHVtbicsIGNfeHM6ICdyb3cnIH0sXG4gIHA6IGJhckxpc3RJdGVtUGFkZGluZyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIHdpZHRoOiAnMTAwJScsXG4gICcmOmZvY3VzJzoge1xuICAgIG91dGxpbmU6ICdub25lJyxcbiAgfSxcbiAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICBvdXRsaW5lOiAnMnB4IHNvbGlkJyxcbiAgICBvdXRsaW5lQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgfSxcbn0pO1xuXG5jb25zdCBpbnRlcmFjdGl2ZVN0eWxlcyA9IGNzcyh7XG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICAnJjpob3ZlciwgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnc3BhbicpKHJvd0Jhc2VTdHlsZXMpO1xuZXhwb3J0IGNvbnN0IFJvd0J1dHRvbiA9IHN0eWxlZCgnYnV0dG9uJywgc3R5bGVkT3B0aW9uczwnYnV0dG9uJz4oKSkoXG4gIHJvd0Jhc2VTdHlsZXMsXG4gIGludGVyYWN0aXZlU3R5bGVzXG4pO1xuZXhwb3J0IGNvbnN0IFJvd0FuY2hvciA9IHN0eWxlZCgnYScsIHN0eWxlZE9wdGlvbnM8J2EnPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXMsXG4gIGNzcyh7XG4gICAgW2AmOmZvY3VzLXZpc2libGUgJHtDYXRlZ29yeUxhYmVsfSwgJjpob3ZlciAke0NhdGVnb3J5TGFiZWx9YF06IHtcbiAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgIHRleHREZWNvcmF0aW9uQ29sb3I6ICdwcmltYXJ5JyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiB7IF86ICdtZCcgYXMgYW55LCBjX3hzOiAneGwnIH0sXG4gICAgZmxleDogeyBfOiAnbm9uZScsIGNfeHM6IDEgfSxcbiAgICBoZWlnaHQ6IHsgXzogOCwgY194czogMjQgfSxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6IHsgXzogJzEwMCUnLCBjX3hzOiAnYXV0bycgfSxcbiAgICBtdDogeyBfOiA4LCBjX3hzOiAwIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoRmxleEJveCkpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcbiJdfQ== */");
+export const Bar = /*#__PURE__*/_styled(motion.create(FlexBox), {
+  target: "e15ycbyh0",
+  label: "Bar"
+})(css({
+  alignItems: 'center',
+  borderRadius: 'inherit',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  height: '100%',
+  left: 0,
+  position: 'absolute'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9CYXJSb3cvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1GbUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L0JhclJvdy9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5cbmV4cG9ydCBjb25zdCBUb3RhbFZhbHVlTGFiZWxzSG92ZXJUYXJnZXQgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleFNocmluazogMCxcbiAgICBoZWlnaHQ6ICdzdHJldGNoJyxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2ZsZXgtZW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBDYXRlZ29yeUxhYmVsID0gc3R5bGVkKFRleHQpKFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcblxuICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICB9KVxuKTtcblxuY29uc3Qgcm93QmFzZVN0eWxlcyA9IGNzcyh7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgYm9yZGVyOiAnbm9uZScsXG4gIGN1cnNvcjogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246IHsgXzogJ2NvbHVtbicsIGNfeHM6ICdyb3cnIH0sXG4gIHA6IGJhckxpc3RJdGVtUGFkZGluZyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIHRleHREZWNvcmF0aW9uOiAnbm9uZScsXG4gIHdpZHRoOiAnMTAwJScsXG4gICcmOmZvY3VzJzoge1xuICAgIG91dGxpbmU6ICdub25lJyxcbiAgfSxcbiAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICBvdXRsaW5lOiAnMnB4IHNvbGlkJyxcbiAgICBvdXRsaW5lQ29sb3I6ICdwcmltYXJ5JyxcbiAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgfSxcbn0pO1xuXG5jb25zdCBpbnRlcmFjdGl2ZVN0eWxlcyA9IGNzcyh7XG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICAnJjpob3ZlciwgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgdGV4dERlY29yYXRpb246ICdub25lJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgUm93V3JhcHBlciA9IHN0eWxlZCgnc3BhbicpKHJvd0Jhc2VTdHlsZXMpO1xuZXhwb3J0IGNvbnN0IFJvd0J1dHRvbiA9IHN0eWxlZCgnYnV0dG9uJywgc3R5bGVkT3B0aW9uczwnYnV0dG9uJz4oKSkoXG4gIHJvd0Jhc2VTdHlsZXMsXG4gIGludGVyYWN0aXZlU3R5bGVzXG4pO1xuZXhwb3J0IGNvbnN0IFJvd0FuY2hvciA9IHN0eWxlZCgnYScsIHN0eWxlZE9wdGlvbnM8J2EnPigpKShcbiAgcm93QmFzZVN0eWxlcyxcbiAgaW50ZXJhY3RpdmVTdHlsZXMsXG4gIGNzcyh7XG4gICAgW2AmOmZvY3VzLXZpc2libGUgJHtDYXRlZ29yeUxhYmVsfSwgJjpob3ZlciAke0NhdGVnb3J5TGFiZWx9YF06IHtcbiAgICAgIHRleHREZWNvcmF0aW9uOiAndW5kZXJsaW5lJyxcbiAgICAgIHRleHREZWNvcmF0aW9uQ29sb3I6ICdwcmltYXJ5JyxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgYm9yZGVyUmFkaXVzOiB7IF86ICdtZCcgYXMgYW55LCBjX3hzOiAneGwnIH0sXG4gICAgZmxleDogeyBfOiAnbm9uZScsIGNfeHM6IDEgfSxcbiAgICBoZWlnaHQ6IHsgXzogOCwgY194czogMjQgfSxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6IHsgXzogJzEwMCUnLCBjX3hzOiAnYXV0bycgfSxcbiAgICBtdDogeyBfOiA4LCBjX3hzOiAwIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyID0gc3R5bGVkKG1vdGlvbi5jcmVhdGUoRmxleEJveCkpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9KVxuKTtcbiJdfQ== */");

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

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

package/dist/BarChart/BarRow/index.js

@@ -0,0 +1,231 @@
+import { forwardRef, useMemo, useRef } from 'react';
+import { Box, FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { iconPadding, iconWidth, minBarWidth } from '../shared/styles';
+import { calculateBarWidth, formatValueWithUnit, getValuesSummary } from '../utils';
+import { useBarBorderColor, useBarChartContext, useMeasureCategoryLabelWidth, useMeasureTotalValueLabelWidth } from '../utils/hooks';
+import { Bar, BarWrapper, CategoryLabel, RowAnchor, RowButton, RowWrapper, TotalValueLabelsHoverTarget } from './elements';
+import { ValueLabelsContent } from './ValueLabelsContent';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const BarRow = /*#__PURE__*/forwardRef(({
+  categoryLabel,
+  seriesOneValue,
+  seriesTwoValue,
+  icon: Icon,
+  onClick,
+  href,
+  index = 0
+}, ref) => {
+  const {
+    maxScaleValue,
+    unit,
+    styleConfig,
+    animate,
+    widestCategoryLabelWidth,
+    widestTotalValueLabelWidth,
+    translations
+  } = useBarChartContext();
+  const {
+    textColor,
+    seriesOneBarColor,
+    seriesTwoBarColor,
+    seriesOneLabel,
+    seriesTwoLabel
+  } = styleConfig;
+  const labelRef = useRef(null);
+  const totalValueLabelRef = useRef(null);
+  useMeasureCategoryLabelWidth({
+    ref: labelRef
+  });
+  useMeasureTotalValueLabelWidth({
+    ref: totalValueLabelRef
+  });
+  const getBorderColor = useBarBorderColor();
+  const isStacked = seriesTwoValue !== undefined;
+  const displayValue = isStacked ? seriesTwoValue : seriesOneValue;
+  const {
+    seriesOneBorderColor,
+    seriesTwoBorderColor
+  } = useMemo(() => ({
+    seriesOneBorderColor: getBorderColor(seriesOneBarColor),
+    seriesTwoBorderColor: getBorderColor(seriesTwoBarColor)
+  }), [getBorderColor, seriesOneBarColor, seriesTwoBarColor]);
+  const {
+    bgWidthStr,
+    fgWidthStr
+  } = useMemo(() => {
+    const bgWidth = calculateBarWidth({
+      value: displayValue,
+      maxScaleValue
+    });
+    const fgWidth = isStacked ? calculateBarWidth({
+      value: seriesOneValue,
+      maxScaleValue
+    }) : 0;
+    return {
+      bgWidthStr: `${Math.max(minBarWidth, bgWidth)}%`,
+      fgWidthStr: `${Math.max(minBarWidth, fgWidth)}%`
+    };
+  }, [displayValue, isStacked, seriesOneValue, maxScaleValue]);
+  const valuesSummary = useMemo(() => getValuesSummary({
+    seriesOneValue,
+    seriesTwoValue,
+    unit,
+    categoryLabel,
+    translations
+  }), [seriesOneValue, seriesTwoValue, unit, categoryLabel, translations]);
+  const animationDelay = animate ? index * 0.1 : 0;
+  const widthValue = widestCategoryLabelWidth === null ? 'min-content' : widestCategoryLabelWidth;
+  const totalValueLabelWidthValue = widestTotalValueLabelWidth === null ? 'min-content' : widestTotalValueLabelWidth;
+  const {
+    seriesOneFormatted,
+    displayValueFormatted
+  } = useMemo(() => ({
+    seriesOneFormatted: formatValueWithUnit({
+      value: seriesOneValue,
+      unit,
+      locale: translations.locale
+    }),
+    displayValueFormatted: formatValueWithUnit({
+      value: displayValue,
+      unit,
+      locale: translations.locale
+    })
+  }), [seriesOneValue, displayValue, unit, translations.locale]);
+  const valueLabelsContent = useMemo(() => /*#__PURE__*/_jsx(ValueLabelsContent, {
+    displayValueFormatted: displayValueFormatted,
+    isStacked: isStacked,
+    seriesOneFormatted: seriesOneFormatted,
+    seriesOneLabel: seriesOneLabel,
+    seriesTwoLabel: seriesTwoLabel
+  }), [displayValueFormatted, isStacked, seriesOneFormatted, seriesOneLabel, seriesTwoLabel]);
+  const desktopLabelsContainer = useMemo(() => /*#__PURE__*/_jsxs(FlexBox, {
+    alignItems: "center",
+    display: {
+      _: 'flex',
+      c_xs: 'none'
+    },
+    flexWrap: "wrap",
+    gap: 8,
+    justifyContent: "space-between",
+    width: "100%",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      color: textColor,
+      flexShrink: 0,
+      children: [Icon && /*#__PURE__*/_jsx(Icon, {
+        mr: iconPadding,
+        size: iconWidth
+      }), /*#__PURE__*/_jsx(CategoryLabel, {
+        truncate: "ellipsis",
+        truncateLines: 1,
+        children: categoryLabel
+      })]
+    }), /*#__PURE__*/_jsx(TotalValueLabelsHoverTarget, {
+      gap: 8,
+      children: valueLabelsContent
+    })]
+  }), [textColor, Icon, categoryLabel, valueLabelsContent]);
+  const xsLabelNode = useMemo(() => /*#__PURE__*/_jsxs(FlexBox, {
+    alignItems: "center",
+    "aria-hidden": true,
+    color: textColor,
+    display: {
+      _: 'none',
+      c_xs: 'flex'
+    },
+    flexShrink: 0,
+    pr: {
+      _: 0,
+      c_xs: 24
+    },
+    ref: labelRef,
+    width: {
+      _: 'auto',
+      c_xs: widthValue
+    },
+    children: [Icon && /*#__PURE__*/_jsx(Icon, {
+      mr: iconPadding,
+      size: iconWidth
+    }), /*#__PURE__*/_jsx(CategoryLabel, {
+      truncate: "ellipsis",
+      truncateLines: 1,
+      children: categoryLabel
+    })]
+  }), [textColor, Icon, categoryLabel, widthValue]);
+  const totalValueLabelNode = useMemo(() => /*#__PURE__*/_jsx(TotalValueLabelsHoverTarget, {
+    display: {
+      _: 'none',
+      c_xs: 'flex'
+    },
+    pl: {
+      _: 0,
+      c_xs: 24
+    },
+    ref: totalValueLabelRef,
+    width: {
+      _: 'auto',
+      c_xs: totalValueLabelWidthValue
+    },
+    children: valueLabelsContent
+  }), [valueLabelsContent, totalValueLabelWidthValue]);
+  const rowContent = useMemo(() => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [desktopLabelsContainer, xsLabelNode, /*#__PURE__*/_jsxs(BarWrapper, {
+      children: [/*#__PURE__*/_jsx(Bar, {
+        animate: animate ? {
+          width: bgWidthStr
+        } : undefined,
+        bg: isStacked ? seriesTwoBarColor : seriesOneBarColor,
+        borderColor: isStacked ? seriesTwoBorderColor : seriesOneBorderColor,
+        "data-testid": "background-bar",
+        initial: animate ? {
+          width: '0%'
+        } : undefined,
+        transition: {
+          duration: 0.5,
+          delay: animationDelay
+        },
+        width: !animate ? bgWidthStr : undefined
+      }), isStacked && /*#__PURE__*/_jsx(Bar, {
+        animate: animate ? {
+          width: fgWidthStr
+        } : undefined,
+        bg: seriesOneBarColor,
+        borderColor: seriesOneBorderColor,
+        "data-testid": "foreground-bar",
+        initial: animate ? {
+          width: '0%'
+        } : undefined,
+        transition: {
+          duration: 0.5,
+          delay: animationDelay + 0.25
+        },
+        width: !animate ? fgWidthStr : undefined
+      })]
+    }), totalValueLabelNode]
+  }), [animate, animationDelay, bgWidthStr, fgWidthStr, isStacked, desktopLabelsContainer, xsLabelNode, totalValueLabelNode, seriesOneBarColor, seriesOneBorderColor, seriesTwoBarColor, seriesTwoBorderColor]);
+  const content = href ? /*#__PURE__*/_jsx(RowAnchor, {
+    "aria-label": valuesSummary,
+    href: href,
+    ref: ref,
+    onClick: onClick,
+    children: rowContent
+  }) : onClick ? /*#__PURE__*/_jsx(RowButton, {
+    "aria-label": valuesSummary,
+    ref: ref,
+    onClick: onClick,
+    children: rowContent
+  }) : /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(RowWrapper, {
+      ref: ref,
+      children: [/*#__PURE__*/_jsx(Text, {
+        screenreader: true,
+        children: valuesSummary
+      }), " ", rowContent]
+    })
+  });
+  return /*#__PURE__*/_jsx(Box, {
+    as: "li",
+    children: content
+  });
+});

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const StyledFormGroupLabel: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLLabelElement> & import("../../Form").LabelVariants & Pick<import("../../Form/types").BaseInputProps, "htmlFor" | "required"> & {
+    infotip?: import("../../Tip/InfoTip/type-utils").InfoTipSubComponentProps | undefined;
+    size?: "small" | "large" | undefined;
+    isSoloField?: boolean | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const WidthSelect: import("@emotion/styled").StyledComponent<Pick<import("react").SelectHTMLAttributes<HTMLSelectElement>, "disabled" | "id"> & Pick<import("../../Form/types").BaseInputProps, "error" | "htmlFor"> & {
+    options?: import("../../Form").SelectOptions | undefined;
+} & import("react").SelectHTMLAttributes<HTMLSelectElement> & {
+    sizeVariant?: "small" | "base" | undefined;
+} & import("react").RefAttributes<HTMLSelectElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/BarChart/SortSelect/index.js

@@ -0,0 +1,18 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { FormGroupLabel } from '../../Form';
+import { Select } from '../../Form/inputs/Select';
+export const StyledFormGroupLabel = /*#__PURE__*/_styled(FormGroupLabel, {
+  target: "ej5ganj1",
+  label: "StyledFormGroupLabel"
+})(css({
+  mr: 8,
+  mt: 4
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9Tb3J0U2VsZWN0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNb0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L1NvcnRTZWxlY3QvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi8uLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uLy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtR3JvdXBMYWJlbCA9IHN0eWxlZChGb3JtR3JvdXBMYWJlbCkoXG4gIGNzcyh7XG4gICAgbXI6IDgsXG4gICAgbXQ6IDQsXG4gIH0pXG4pO1xuZXhwb3J0IGNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcbiJdfQ== */");
+export const WidthSelect = /*#__PURE__*/_styled(Select, {
+  target: "ej5ganj0",
+  label: "WidthSelect"
+})(css({
+  width: 'max-content',
+  pr: 12
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9Tb3J0U2VsZWN0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZMkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L1NvcnRTZWxlY3QvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi8uLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uLy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtR3JvdXBMYWJlbCA9IHN0eWxlZChGb3JtR3JvdXBMYWJlbCkoXG4gIGNzcyh7XG4gICAgbXI6IDgsXG4gICAgbXQ6IDQsXG4gIH0pXG4pO1xuZXhwb3J0IGNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcbiJdfQ== */");

package/dist/BarChart/index.d.ts

@@ -0,0 +1,4 @@
+import { BarChartSingleValueBarSummaryContext, BarChartStackedSummaryContext, BarChartTranslations, PartialBarChartTranslations } from './shared/translations';
+import { BarChartProps, BarProps, InferBarType } from './shared/types';
+export type { BarChartSingleValueBarSummaryContext, BarChartStackedSummaryContext, BarProps, InferBarType, BarChartTranslations, PartialBarChartTranslations, };
+export declare const BarChart: <TBarValues extends BarProps[] | readonly BarProps[] = BarProps[]>({ "aria-labelledby": ariaLabelledBy, animate, barValues, description, hideDescription, hideTitle, maxScaleValue, sortFns, styleConfig, title, translations, unit, scaleInterval, }: BarChartProps<TBarValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/BarChart/index.js

@@ -0,0 +1,136 @@
+import { useId, useMemo } from 'react';
+import { Box, FlexBox } from '../Box';
+import { Text } from '../Typography/Text';
+import { BarChartProvider } from './BarChartProvider';
+import { BarRow } from './BarRow';
+import { GridLines } from './layout/GridLines';
+import { ScaleChartHeader } from './layout/ScaleChartHeader';
+import { BarsList } from './shared/elements';
+import { defaultBarChartTranslations } from './shared/translations';
+import { StyledFormGroupLabel, WidthSelect } from './SortSelect';
+import { getBarRowKey } from './utils';
+import { useBarChart, useBarChartSort } from './utils/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BarChart = ({
+  'aria-labelledby': ariaLabelledBy,
+  animate = false,
+  barValues,
+  description,
+  hideDescription = false,
+  hideTitle = false,
+  maxScaleValue,
+  sortFns,
+  styleConfig,
+  title,
+  translations,
+  unit = '',
+  scaleInterval
+}) => {
+  const mergedTranslations = useMemo(() => ({
+    ...defaultBarChartTranslations,
+    ...translations,
+    sortOptions: {
+      ...defaultBarChartTranslations.sortOptions,
+      ...translations?.sortOptions
+    },
+    accessibility: {
+      ...defaultBarChartTranslations.accessibility,
+      ...translations?.accessibility
+    }
+  }), [translations]);
+  const {
+    sortedBars,
+    selectProps
+  } = useBarChartSort({
+    bars: barValues,
+    sortFns,
+    translations: mergedTranslations
+  });
+  const contextValue = useBarChart({
+    maxScaleValue,
+    scaleInterval,
+    unit,
+    styleConfig,
+    animate,
+    barCount: sortedBars?.length,
+    translations: mergedTranslations
+  });
+  const tickCount = Math.ceil(maxScaleValue / contextValue.scaleInterval) + 1;
+  const titleId = useId();
+  const sortSelectId = useId();
+  const titleProps = typeof title === 'string' ? {
+    as: 'h2',
+    children: title,
+    hidden: hideTitle,
+    id: titleId,
+    variant: 'title-xs'
+  } : title ? {
+    ...title,
+    children: title.title,
+    hidden: hideTitle,
+    id: titleId
+  } : null;
+  const titleContent = title && !hideTitle || selectProps ? /*#__PURE__*/_jsx(Box, {
+    borderBottom: 1,
+    borderColor: "background-disabled",
+    mb: 24,
+    pb: 8,
+    width: "100%",
+    children: /*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      children: [titleProps && /*#__PURE__*/_jsx(Text, {
+        mb: 4,
+        ...titleProps
+      }), selectProps && /*#__PURE__*/_jsxs(FlexBox, {
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(StyledFormGroupLabel, {
+          htmlFor: sortSelectId,
+          isSoloField: true,
+          size: "small",
+          children: mergedTranslations.sortLabel
+        }), /*#__PURE__*/_jsx(WidthSelect, {
+          sizeVariant: "small",
+          ...selectProps,
+          id: sortSelectId
+        })]
+      })]
+    })
+  }) : titleProps ? /*#__PURE__*/_jsx(Text, {
+    ...titleProps
+  }) : null;
+  return /*#__PURE__*/_jsxs(BarChartProvider, {
+    value: contextValue,
+    children: [titleContent, /*#__PURE__*/_jsxs(Box, {
+      as: "figure",
+      containerType: "inline-size",
+      position: "relative",
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(ScaleChartHeader, {
+        maxScaleValue: maxScaleValue,
+        tickCount: tickCount
+      }), /*#__PURE__*/_jsxs(Box, {
+        position: "relative",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(GridLines, {
+          maxScaleValue: maxScaleValue,
+          tickCount: tickCount
+        }), /*#__PURE__*/_jsx(BarsList, {
+          "aria-labelledby": ariaLabelledBy ?? titleId,
+          children: sortedBars.map((bar, index) => /*#__PURE__*/_jsx(BarRow, {
+            index: index,
+            ...bar
+          }, getBarRowKey(bar, index)))
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        as: "figcaption",
+        color: "text-secondary",
+        hidden: hideDescription,
+        mt: 8,
+        variant: "p-small",
+        children: description
+      })]
+    })]
+  });
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ScaleAxisLayoutProps } from '../shared/types';
+export declare const GridLines: React.FC<ScaleAxisLayoutProps>;

package/dist/BarChart/layout/GridLines.js

@@ -0,0 +1,69 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import React, { useMemo } from 'react';
+import { Box } from '../../Box';
+import { useLabelPositions } from '../utils/hooks';
+import { LabelSpacer } from './LabelSpacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridLineWrapper = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk2",
+  label: "GridLineWrapper"
+})(css({
+  inset: 0,
+  pointerEvents: 'none',
+  position: 'absolute',
+  zIndex: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9HcmlkTGluZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgU2NhbGVBeGlzTGF5b3V0UHJvcHMgfSBmcm9tICcuLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgdXNlTGFiZWxQb3NpdGlvbnMgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbFNwYWNlciB9IGZyb20gJy4vTGFiZWxTcGFjZXInO1xuXG5jb25zdCBHcmlkTGluZVdyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBpbnNldDogMCxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgekluZGV4OiAwLFxuICB9KVxuKTtcblxuY29uc3QgR3JpZExpbmVDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3JkZXJDb2xvcjogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGJvcmRlclg6IDEsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIGNfeHM6ICdibG9jaycgfSxcbiAgICBpbnNldDogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lID0gc3R5bGVkKEJveCk8eyBwb3NpdGlvblBlcmNlbnQ6IG51bWJlciB9PihcbiAgY3NzKHtcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlckNvbG9yTGVmdDogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoe1xuICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKC01MCUpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBHcmlkTGluZXM6IFJlYWN0LkZDPFNjYWxlQXhpc0xheW91dFByb3BzPiA9ICh7XG4gIG1heFNjYWxlVmFsdWUsXG4gIHRpY2tDb3VudCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7XG4gICAgbWF4U2NhbGVWYWx1ZSxcbiAgICB0aWNrQ291bnQsXG4gIH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgICAgICA8R3JpZExpbmVcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgIC8+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPExhYmVsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L0xhYmVsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+const GridLineContainer = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk1",
+  label: "GridLineContainer"
+})(css({
+  borderColor: 'background-disabled',
+  borderX: 1,
+  display: {
+    _: 'none',
+    c_xs: 'block'
+  },
+  inset: 0,
+  position: 'absolute'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHpJbmRleDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBib3JkZXJYOiAxLFxuICAgIGRpc3BsYXk6IHsgXzogJ25vbmUnLCBjX3hzOiAnYmxvY2snIH0sXG4gICAgaW5zZXQ6IDAsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmVzOiBSZWFjdC5GQzxTY2FsZUF4aXNMYXlvdXRQcm9wcz4gPSAoe1xuICBtYXhTY2FsZVZhbHVlLFxuICB0aWNrQ291bnQsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoe1xuICAgIG1heFNjYWxlVmFsdWUsXG4gICAgdGlja0NvdW50LFxuICB9KTtcblxuICBjb25zdCBsaW5lcyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICAgICAgPEdyaWRMaW5lXG4gICAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAvPlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRMaW5lV3JhcHBlciBhcmlhLWhpZGRlbj5cbiAgICAgIDxMYWJlbFNwYWNlcj5cbiAgICAgICAgPEdyaWRMaW5lQ29udGFpbmVyPntsaW5lc308L0dyaWRMaW5lQ29udGFpbmVyPlxuICAgICAgPC9MYWJlbFNwYWNlcj5cbiAgICA8L0dyaWRMaW5lV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QmlCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IFNjYWxlQXhpc0xheW91dFByb3BzIH0gZnJvbSAnLi4vc2hhcmVkL3R5cGVzJztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgaW5zZXQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHpJbmRleDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBib3JkZXJYOiAxLFxuICAgIGRpc3BsYXk6IHsgXzogJ25vbmUnLCBjX3hzOiAnYmxvY2snIH0sXG4gICAgaW5zZXQ6IDAsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmVzOiBSZWFjdC5GQzxTY2FsZUF4aXNMYXlvdXRQcm9wcz4gPSAoe1xuICBtYXhTY2FsZVZhbHVlLFxuICB0aWNrQ291bnQsXG59KSA9PiB7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoe1xuICAgIG1heFNjYWxlVmFsdWUsXG4gICAgdGlja0NvdW50LFxuICB9KTtcblxuICBjb25zdCBsaW5lcyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGxhYmVsUG9zaXRpb25zLm1hcCgoeyBwb3NpdGlvblBlcmNlbnQsIHZhbHVlIH0pID0+IChcbiAgICAgICAgPEdyaWRMaW5lXG4gICAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgICAgICBrZXk9e2BncmlkbGluZS0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAvPlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRMaW5lV3JhcHBlciBhcmlhLWhpZGRlbj5cbiAgICAgIDxMYWJlbFNwYWNlcj5cbiAgICAgICAgPEdyaWRMaW5lQ29udGFpbmVyPntsaW5lc308L0dyaWRMaW5lQ29udGFpbmVyPlxuICAgICAgPC9MYWJlbFNwYWNlcj5cbiAgICA8L0dyaWRMaW5lV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
+export const GridLines = ({
+  maxScaleValue,
+  tickCount
+}) => {
+  const labelPositions = useLabelPositions({
+    maxScaleValue,
+    tickCount
+  });
+  const lines = useMemo(() => labelPositions.map(({
+    positionPercent,
+    value
+  }) => /*#__PURE__*/_jsx(GridLine, {
+    "aria-hidden": true,
+    positionPercent: positionPercent
+  }, `gridline-${value}-${positionPercent}`)), [labelPositions]);
+  return /*#__PURE__*/_jsx(GridLineWrapper, {
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx(LabelSpacer, {
+      children: /*#__PURE__*/_jsx(GridLineContainer, {
+        children: lines
+      })
+    })
+  });
+};

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

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