@codecademy/gamut 67.6.5-alpha.9b8a7f.0 → 67.6.5-alpha.c4325a.0

package/dist/BarChart/layout/ScaleChartHeader.js

@@ -0,0 +1,89 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import React, { useMemo } from 'react';
+import { Box } from '../../Box';
+import { Text } from '../../Typography';
+import { formatNumberUSCompact } from '../utils';
+import { useBarChartContext, useLabelPositions } from '../utils/hooks';
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJ3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgZm9ybWF0TnVtYmVyVVNDb21wYWN0IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlQmFyQ2hhcnRDb250ZXh0LCB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcbmltcG9ydCB7IFZlcnRpY2FsU3BhY2VyIH0gZnJvbSAnLi9WZXJ0aWNhbFNwYWNlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2NhbGVDaGFydEhlYWRlclByb3BzIHtcbiAgLyoqIE1pbmltdW0gdmFsdWUgb24gdGhlIHNjYWxlICovXG4gIG1pbjogbnVtYmVyO1xuICAvKiogTWF4aW11bSB2YWx1ZSBvbiB0aGUgc2NhbGUgKi9cbiAgbWF4OiBudW1iZXI7XG4gIC8qKiBOdW1iZXIgb2YgbGFiZWxzIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWxDb3VudDogbnVtYmVyO1xufVxuXG5jb25zdCBTdHlsZWRMYWJlbFRleHQgPSBzdHlsZWQoVGV4dCk8e1xuICBwb3NpdGlvblBlcmNlbnQ6IG51bWJlcjtcbiAgdGV4dEFsaWduOiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCc7XG59PihcbiAgY3NzKHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICBtYXJnaW46IDAsXG4gICAgcGFkZGluZzogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCwgdGV4dEFsaWduIH0pID0+IHtcbiAgICBsZXQgdHJhbnNmb3JtID0gJyc7XG4gICAgaWYgKHRleHRBbGlnbiA9PT0gJ2xlZnQnKSB7XG4gICAgICB0cmFuc2Zvcm0gPSAndHJhbnNsYXRlWCgwKSc7XG4gICAgfSBlbHNlIGlmICh0ZXh0QWxpZ24gPT09ICdyaWdodCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKC0xMDAlKSc7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKC01MCUpJztcbiAgICB9XG4gICAgcmV0dXJuIHtcbiAgICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICAgIHRyYW5zZm9ybSxcbiAgICB9O1xuICB9XG4pO1xuXG5jb25zdCBTdHlsZWRIZWFkZXJDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEhlYWRlckxhYmVsQXJlYSA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIG1pbkhlaWdodDogJzI0cHgnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNjYWxlQ2hhcnRIZWFkZXI6IFJlYWN0LkZDPFNjYWxlQ2hhcnRIZWFkZXJQcm9wcz4gPSAoe1xuICBsYWJlbENvdW50LFxuICBtaW4sXG4gIG1heCxcbn0pID0+IHtcbiAgY29uc3QgeyB0cmFuc2xhdGlvbnMgfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHsgbWluLCBtYXgsIGNvdW50OiBsYWJlbENvdW50IH0pO1xuXG4gIGNvbnN0IHNjYWxlTGFiZWxzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHZhbHVlLCBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKFxuICAgICAgICA8U3R5bGVkTGFiZWxUZXh0XG4gICAgICAgICAga2V5PXtgbGFiZWwtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtmb3JtYXROdW1iZXJVU0NvbXBhY3Qoe1xuICAgICAgICAgICAgbnVtOiB2YWx1ZSxcbiAgICAgICAgICAgIGxvY2FsZTogdHJhbnNsYXRpb25zLmxvY2FsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9TdHlsZWRMYWJlbFRleHQ+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnMsIHRyYW5zbGF0aW9ucy5sb2NhbGVdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgeHM6ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuIl19 */");
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkM4QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgZm9ybWF0TnVtYmVyVVNDb21wYWN0IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlQmFyQ2hhcnRDb250ZXh0LCB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcbmltcG9ydCB7IFZlcnRpY2FsU3BhY2VyIH0gZnJvbSAnLi9WZXJ0aWNhbFNwYWNlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2NhbGVDaGFydEhlYWRlclByb3BzIHtcbiAgLyoqIE1pbmltdW0gdmFsdWUgb24gdGhlIHNjYWxlICovXG4gIG1pbjogbnVtYmVyO1xuICAvKiogTWF4aW11bSB2YWx1ZSBvbiB0aGUgc2NhbGUgKi9cbiAgbWF4OiBudW1iZXI7XG4gIC8qKiBOdW1iZXIgb2YgbGFiZWxzIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWxDb3VudDogbnVtYmVyO1xufVxuXG5jb25zdCBTdHlsZWRMYWJlbFRleHQgPSBzdHlsZWQoVGV4dCk8e1xuICBwb3NpdGlvblBlcmNlbnQ6IG51bWJlcjtcbiAgdGV4dEFsaWduOiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCc7XG59PihcbiAgY3NzKHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICBtYXJnaW46IDAsXG4gICAgcGFkZGluZzogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCwgdGV4dEFsaWduIH0pID0+IHtcbiAgICBsZXQgdHJhbnNmb3JtID0gJyc7XG4gICAgaWYgKHRleHRBbGlnbiA9PT0gJ2xlZnQnKSB7XG4gICAgICB0cmFuc2Zvcm0gPSAndHJhbnNsYXRlWCgwKSc7XG4gICAgfSBlbHNlIGlmICh0ZXh0QWxpZ24gPT09ICdyaWdodCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKC0xMDAlKSc7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKC01MCUpJztcbiAgICB9XG4gICAgcmV0dXJuIHtcbiAgICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICAgIHRyYW5zZm9ybSxcbiAgICB9O1xuICB9XG4pO1xuXG5jb25zdCBTdHlsZWRIZWFkZXJDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEhlYWRlckxhYmVsQXJlYSA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIG1pbkhlaWdodDogJzI0cHgnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNjYWxlQ2hhcnRIZWFkZXI6IFJlYWN0LkZDPFNjYWxlQ2hhcnRIZWFkZXJQcm9wcz4gPSAoe1xuICBsYWJlbENvdW50LFxuICBtaW4sXG4gIG1heCxcbn0pID0+IHtcbiAgY29uc3QgeyB0cmFuc2xhdGlvbnMgfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHsgbWluLCBtYXgsIGNvdW50OiBsYWJlbENvdW50IH0pO1xuXG4gIGNvbnN0IHNjYWxlTGFiZWxzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHZhbHVlLCBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKFxuICAgICAgICA8U3R5bGVkTGFiZWxUZXh0XG4gICAgICAgICAga2V5PXtgbGFiZWwtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtmb3JtYXROdW1iZXJVU0NvbXBhY3Qoe1xuICAgICAgICAgICAgbnVtOiB2YWx1ZSxcbiAgICAgICAgICAgIGxvY2FsZTogdHJhbnNsYXRpb25zLmxvY2FsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9TdHlsZWRMYWJlbFRleHQ+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnMsIHRyYW5zbGF0aW9ucy5sb2NhbGVdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgeHM6ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuIl19 */");
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0R3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgZm9ybWF0TnVtYmVyVVNDb21wYWN0IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlQmFyQ2hhcnRDb250ZXh0LCB1c2VMYWJlbFBvc2l0aW9ucyB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcbmltcG9ydCB7IFZlcnRpY2FsU3BhY2VyIH0gZnJvbSAnLi9WZXJ0aWNhbFNwYWNlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2NhbGVDaGFydEhlYWRlclByb3BzIHtcbiAgLyoqIE1pbmltdW0gdmFsdWUgb24gdGhlIHNjYWxlICovXG4gIG1pbjogbnVtYmVyO1xuICAvKiogTWF4aW11bSB2YWx1ZSBvbiB0aGUgc2NhbGUgKi9cbiAgbWF4OiBudW1iZXI7XG4gIC8qKiBOdW1iZXIgb2YgbGFiZWxzIHRvIGRpc3BsYXkgKi9cbiAgbGFiZWxDb3VudDogbnVtYmVyO1xufVxuXG5jb25zdCBTdHlsZWRMYWJlbFRleHQgPSBzdHlsZWQoVGV4dCk8e1xuICBwb3NpdGlvblBlcmNlbnQ6IG51bWJlcjtcbiAgdGV4dEFsaWduOiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCc7XG59PihcbiAgY3NzKHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICBtYXJnaW46IDAsXG4gICAgcGFkZGluZzogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCwgdGV4dEFsaWduIH0pID0+IHtcbiAgICBsZXQgdHJhbnNmb3JtID0gJyc7XG4gICAgaWYgKHRleHRBbGlnbiA9PT0gJ2xlZnQnKSB7XG4gICAgICB0cmFuc2Zvcm0gPSAndHJhbnNsYXRlWCgwKSc7XG4gICAgfSBlbHNlIGlmICh0ZXh0QWxpZ24gPT09ICdyaWdodCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKC0xMDAlKSc7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKC01MCUpJztcbiAgICB9XG4gICAgcmV0dXJuIHtcbiAgICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICAgIHRyYW5zZm9ybSxcbiAgICB9O1xuICB9XG4pO1xuXG5jb25zdCBTdHlsZWRIZWFkZXJDb250YWluZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEhlYWRlckxhYmVsQXJlYSA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIG1pbkhlaWdodDogJzI0cHgnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNjYWxlQ2hhcnRIZWFkZXI6IFJlYWN0LkZDPFNjYWxlQ2hhcnRIZWFkZXJQcm9wcz4gPSAoe1xuICBsYWJlbENvdW50LFxuICBtaW4sXG4gIG1heCxcbn0pID0+IHtcbiAgY29uc3QgeyB0cmFuc2xhdGlvbnMgfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHsgbWluLCBtYXgsIGNvdW50OiBsYWJlbENvdW50IH0pO1xuXG4gIGNvbnN0IHNjYWxlTGFiZWxzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHZhbHVlLCBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKFxuICAgICAgICA8U3R5bGVkTGFiZWxUZXh0XG4gICAgICAgICAga2V5PXtgbGFiZWwtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtmb3JtYXROdW1iZXJVU0NvbXBhY3Qoe1xuICAgICAgICAgICAgbnVtOiB2YWx1ZSxcbiAgICAgICAgICAgIGxvY2FsZTogdHJhbnNsYXRpb25zLmxvY2FsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9TdHlsZWRMYWJlbFRleHQ+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnMsIHRyYW5zbGF0aW9ucy5sb2NhbGVdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgeHM6ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuIl19 */");
+export const ScaleChartHeader = ({
+  labelCount,
+  min,
+  max
+}) => {
+  const {
+    translations
+  } = useBarChartContext();
+  const labelPositions = useLabelPositions({
+    min,
+    max,
+    count: labelCount
+  });
+  const scaleLabels = useMemo(() => labelPositions.map(({
+    value,
+    positionPercent
+  }) => /*#__PURE__*/_jsx(StyledLabelText, {
+    positionPercent: positionPercent,
+    textAlign: "center",
+    variant: "p-small",
+    children: formatNumberUSCompact({
+      num: value,
+      locale: translations.locale
+    })
+  }, `label-${value}-${positionPercent}`)), [labelPositions, translations.locale]);
+  return /*#__PURE__*/_jsx(Box, {
+    mb: 12,
+    width: 1,
+    children: /*#__PURE__*/_jsx(StyledHeaderContainer, {
+      "aria-hidden": "true",
+      display: {
+        _: 'none',
+        xs: '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>;

package/dist/BarChart/layout/VerticalSpacer.js

@@ -0,0 +1,56 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { Box } from '../../Box';
+import { barListItemPadding } from '../shared/styles';
+import { useBarChartContext } from '../utils/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SpacerContainer = /*#__PURE__*/_styled(Box, {
+  target: "e1u3mkni1",
+  label: "SpacerContainer"
+})(css({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  gap: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvVmVydGljYWxTcGFjZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1ZlcnRpY2FsU3BhY2VyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBiYXJMaXN0SXRlbVBhZGRpbmcgfSBmcm9tICcuLi9zaGFyZWQvc3R5bGVzJztcbmltcG9ydCB7IHVzZUJhckNoYXJ0Q29udGV4dCB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcblxuY29uc3QgU3BhY2VyQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgZ2FwOiAwLFxuICB9KVxuKTtcblxuY29uc3QgQ29udGVudEFyZWEgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBmbGV4OiAxLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICB9KVxuKTtcblxuZXhwb3J0IGludGVyZmFjZSBWZXJ0aWNhbFNwYWNlclByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xufVxuXG5jb25zdCBMZWZ0U3BhY2VyOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAgY29uc3QgeyB3aWRlc3RMZWZ0TGFiZWxXaWR0aCB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IHdpZHRoID1cbiAgICB3aWRlc3RMZWZ0TGFiZWxXaWR0aCA9PT0gbnVsbCA/ICdtaW4tY29udGVudCcgOiB3aWRlc3RMZWZ0TGFiZWxXaWR0aDtcblxuICByZXR1cm4gPEJveCBmbGV4U2hyaW5rPXswfSBtaW5XaWR0aD17d2lkdGh9IG1sPXtiYXJMaXN0SXRlbVBhZGRpbmd9IC8+O1xufTtcblxuY29uc3QgUmlnaHRTcGFjZXI6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCB7IHdpZGVzdFJpZ2h0TGFiZWxXaWR0aCB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IHdpZHRoID1cbiAgICB3aWRlc3RSaWdodExhYmVsV2lkdGggPT09IG51bGwgPyAnbWluLWNvbnRlbnQnIDogd2lkZXN0UmlnaHRMYWJlbFdpZHRoO1xuXG4gIHJldHVybiA8Qm94IGZsZXhTaHJpbms9ezB9IG1pbldpZHRoPXt3aWR0aH0gbXI9e2Jhckxpc3RJdGVtUGFkZGluZ30gLz47XG59O1xuXG5leHBvcnQgY29uc3QgVmVydGljYWxTcGFjZXI6IFJlYWN0LkZDPFZlcnRpY2FsU3BhY2VyUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3BhY2VyQ29udGFpbmVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgIDxMZWZ0U3BhY2VyIC8+XG4gICAgICA8Q29udGVudEFyZWE+e2NoaWxkcmVufTwvQ29udGVudEFyZWE+XG4gICAgICA8UmlnaHRTcGFjZXIgLz5cbiAgICA8L1NwYWNlckNvbnRhaW5lcj5cbiAgKTtcbn07XG4iXX0= */");
+const ContentArea = /*#__PURE__*/_styled(Box, {
+  target: "e1u3mkni0",
+  label: "ContentArea"
+})(css({
+  flex: 1,
+  position: 'relative',
+  height: '100%'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvVmVydGljYWxTcGFjZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9WZXJ0aWNhbFNwYWNlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydENvbnRleHQgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5cbmNvbnN0IFNwYWNlckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIGdhcDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IENvbnRlbnRBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgZmxleDogMSxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVmVydGljYWxTcGFjZXJQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuY29uc3QgTGVmdFNwYWNlcjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IHsgd2lkZXN0TGVmdExhYmVsV2lkdGggfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCB3aWR0aCA9XG4gICAgd2lkZXN0TGVmdExhYmVsV2lkdGggPT09IG51bGwgPyAnbWluLWNvbnRlbnQnIDogd2lkZXN0TGVmdExhYmVsV2lkdGg7XG5cbiAgcmV0dXJuIDxCb3ggZmxleFNocmluaz17MH0gbWluV2lkdGg9e3dpZHRofSBtbD17YmFyTGlzdEl0ZW1QYWRkaW5nfSAvPjtcbn07XG5cbmNvbnN0IFJpZ2h0U3BhY2VyOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAgY29uc3QgeyB3aWRlc3RSaWdodExhYmVsV2lkdGggfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCB3aWR0aCA9XG4gICAgd2lkZXN0UmlnaHRMYWJlbFdpZHRoID09PSBudWxsID8gJ21pbi1jb250ZW50JyA6IHdpZGVzdFJpZ2h0TGFiZWxXaWR0aDtcblxuICByZXR1cm4gPEJveCBmbGV4U2hyaW5rPXswfSBtaW5XaWR0aD17d2lkdGh9IG1yPXtiYXJMaXN0SXRlbVBhZGRpbmd9IC8+O1xufTtcblxuZXhwb3J0IGNvbnN0IFZlcnRpY2FsU3BhY2VyOiBSZWFjdC5GQzxWZXJ0aWNhbFNwYWNlclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFNwYWNlckNvbnRhaW5lciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICA8TGVmdFNwYWNlciAvPlxuICAgICAgPENvbnRlbnRBcmVhPntjaGlsZHJlbn08L0NvbnRlbnRBcmVhPlxuICAgICAgPFJpZ2h0U3BhY2VyIC8+XG4gICAgPC9TcGFjZXJDb250YWluZXI+XG4gICk7XG59O1xuIl19 */");
+const LeftSpacer = () => {
+  const {
+    widestLeftLabelWidth
+  } = useBarChartContext();
+  const width = widestLeftLabelWidth === null ? 'min-content' : widestLeftLabelWidth;
+  return /*#__PURE__*/_jsx(Box, {
+    flexShrink: 0,
+    minWidth: width,
+    ml: barListItemPadding
+  });
+};
+const RightSpacer = () => {
+  const {
+    widestRightLabelWidth
+  } = useBarChartContext();
+  const width = widestRightLabelWidth === null ? 'min-content' : widestRightLabelWidth;
+  return /*#__PURE__*/_jsx(Box, {
+    flexShrink: 0,
+    minWidth: width,
+    mr: barListItemPadding
+  });
+};
+export const VerticalSpacer = ({
+  children,
+  className
+}) => {
+  return /*#__PURE__*/_jsxs(SpacerContainer, {
+    className: className,
+    children: [/*#__PURE__*/_jsx(LeftSpacer, {}), /*#__PURE__*/_jsx(ContentArea, {
+      children: children
+    }), /*#__PURE__*/_jsx(RightSpacer, {})]
+  });
+};

package/dist/BarChart/shared/elements.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const BarsList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/dist/BarChart/shared/elements.js

@@ -0,0 +1,12 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+export const BarsList = /*#__PURE__*/_styled('ul', {
+  target: "ey0wy1t0",
+  label: "BarsList"
+})(css({
+  p: 0,
+  listStyle: 'none',
+  '& li:nth-of-type(even)': {
+    bg: 'background-selected'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9zaGFyZWQvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUd3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvc2hhcmVkL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBCYXJzTGlzdCA9IHN0eWxlZCgndWwnKShcbiAgY3NzKHtcbiAgICBwOiAwLFxuICAgIGxpc3RTdHlsZTogJ25vbmUnLFxuICAgICcmIGxpOm50aC1vZi10eXBlKGV2ZW4pJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLXNlbGVjdGVkJyxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");

package/dist/BarChart/shared/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const minBarWidth = 8;
+export declare const barListItemPadding = 16;
+export declare const iconWidth = 24;
+export declare const iconPadding = 12;

package/dist/BarChart/shared/styles.js

@@ -0,0 +1,4 @@
+export const minBarWidth = 8;
+export const barListItemPadding = 16;
+export const iconWidth = 24;
+export const iconPadding = 12;

package/dist/BarChart/shared/translations.d.ts

@@ -0,0 +1,17 @@
+export type BarChartTranslations = {
+    sortLabel: string;
+    sortOptions: {
+        none: string;
+        labelAsc: string;
+        labelDesc: string;
+        valueAsc: string;
+        valueDesc: string;
+    };
+    accessibility: {
+        gainedNowAt: string;
+        inLabel: string;
+        inOnly: string;
+    };
+    locale: string;
+};
+export declare const defaultBarChartTranslations: BarChartTranslations;

package/dist/BarChart/shared/translations.js

@@ -0,0 +1,16 @@
+export const defaultBarChartTranslations = {
+  sortLabel: 'Order by:',
+  sortOptions: {
+    none: 'None',
+    labelAsc: 'Label (A-Z)',
+    labelDesc: 'Label (Z-A)',
+    valueAsc: 'Value (Low-High)',
+    valueDesc: 'Value (High-Low)'
+  },
+  accessibility: {
+    gainedNowAt: 'gained - now at',
+    inLabel: 'in',
+    inOnly: 'in '
+  },
+  locale: 'en'
+};

package/dist/BarChart/shared/types.d.ts

@@ -0,0 +1,88 @@
+import { GamutIconProps } from '@codecademy/gamut-icons';
+import { ColorAlias } from '@codecademy/gamut-styles';
+import { ComponentProps, HTMLProps } from 'react';
+import { ButtonProps } from '../../Button';
+import { Text } from '../../Typography/Text';
+import { HeadingTags } from '../../Typography/types';
+import { CustomSortOption } from '../utils/hooks';
+import { BarChartTranslations } from './translations';
+type titleType = string | {
+    as?: HeadingTags;
+    title: string;
+    variant?: ComponentProps<typeof Text>['variant'];
+};
+type BarChartAriaLabel = {
+    title: titleType;
+    'aria-labelledby'?: never;
+    hideTitle?: boolean;
+};
+type BarChartAriaLabelledBy = {
+    title?: never;
+    'aria-labelledby': string;
+};
+type BarChartLabel = BarChartAriaLabel | BarChartAriaLabelledBy;
+export type BarChartStyles = {
+    /** Color for text labels. Defaults to 'text' */
+    textColor?: ColorAlias;
+    /** Color for the foreground/progress bar. Defaults to 'feedback-warning' */
+    foregroundBarColor?: ColorAlias;
+    /** Color for the background/total bar. Defaults to 'paleBlue' */
+    backgroundBarColor?: ColorAlias;
+    /** Color for the series one label (first right label when stacked, or displayValue when not stacked). Defaults to 'text' */
+    seriesOneLabel?: ColorAlias;
+    /** Color for the series two label (displayValue when stacked). Defaults to 'text' */
+    seriesTwoLabel?: ColorAlias;
+};
+type BarPropsBase = {
+    /** Label displayed on the y-axis for this bar */
+    yLabel: string;
+    /** The foreground/progress bar value (always shown) */
+    seriesOneValue: number;
+    /** The background/total bar value (optional - creates stacked effect when provided) */
+    seriesTwoValue?: number;
+    /** Optional gamut-icon to display next to the label */
+    icon?: React.ComponentType<GamutIconProps>;
+} & Record<string, unknown>;
+type BarPropsWithoutInteraction = BarPropsBase & {
+    onClick?: never;
+    href?: never;
+};
+type BarPropsWithInteraction = BarPropsBase & {
+    onClick?: ButtonProps['onClick'];
+    href?: HTMLProps<HTMLAnchorElement>['href'];
+};
+export type BarProps = BarPropsWithoutInteraction | BarPropsWithInteraction;
+/**
+ * Helper type that extracts the element type from an array of bars.
+ * Handles both mutable and readonly arrays.
+ */
+export type InferBarType<T> = T extends readonly (infer U)[] ? U extends BarProps ? U : BarProps : T extends (infer U)[] ? U extends BarProps ? U : BarProps : BarProps;
+export type BarChartProps<TBarValues extends BarProps[] | readonly BarProps[] = BarProps[]> = BarChartLabel & {
+    /** Whether to animate bars on mount */
+    animate?: boolean;
+    /** Array of bar data to render */
+    barValues: TBarValues;
+    /** Figure caption for the BarChart. This should be a summary of the information or the overall takeaway of the information in the chart */
+    description: string;
+    /** Hides the visual figcaption */
+    hideDescription?: boolean;
+    /** Hides the visual title for the chart UL */
+    hideTitle?: boolean;
+    /** Maximum value for the x-axis scale */
+    maxRange: number;
+    /** Minimum value for the x-axis scale (usually 0) */
+    minRange: number;
+    /** Unit label to display (e.g., "XP") */
+    unit?: string;
+    /** Style configuration for colors */
+    styleConfig?: BarChartStyles;
+    /** Interval for x-axis scale markers */
+    xScale?: number;
+    /** Array of sort options to display in the dropdown. Can include string literals ('alphabetically', 'numerically', 'none') or custom sort functions. If not provided, the Select dropdown will not render. */
+    sortFns?: ('alphabetically' | 'numerically' | 'none' | CustomSortOption<InferBarType<TBarValues>>)[];
+    /** Translations for internationalization. Partial translations will be merged with defaults. */
+    translations?: Partial<BarChartTranslations>;
+};
+export type BarChartRange = Pick<BarChartProps, 'minRange' | 'maxRange'>;
+export type BarChartUnit = Pick<BarChartProps, 'unit'>;
+export {};

package/dist/BarChart/shared/types.js

@@ -0,0 +1 @@
+export {};

package/dist/BarChart/utils/hooks.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import { Colors } from '@codecademy/gamut-styles';
+import { SelectOptions } from '../../Form/inputs/Select';
+import { BarChartContextProps } from '../BarChartProvider';
+import { BarChartTranslations } from '../shared/translations';
+import { BarChartStyles, BarProps, InferBarType } from '../shared/types';
+export interface LabelPosition {
+    value: number;
+    positionPercent: number;
+}
+/**
+ * Hook that calculates label positions for a given range and count
+ * Returns an array of { value, positionPercent } objects
+ */
+export declare const useLabelPositions: ({ min, max, count, }: {
+    min: number;
+    max: number;
+    count: number;
+}) => LabelPosition[];
+export declare const useBarChartContext: () => BarChartContextProps;
+export interface UseBarChartOptions {
+    minRange: number;
+    maxRange: number;
+    xScale?: number;
+    unit?: string;
+    styleConfig?: BarChartStyles;
+    animate?: boolean;
+    barCount?: number;
+    translations: BarChartTranslations;
+}
+export declare const useBarChart: ({ minRange, maxRange, xScale, unit, styleConfig, animate, barCount, translations, }: UseBarChartOptions) => {
+    minRange: number;
+    maxRange: number;
+    xScale: number;
+    unit: string;
+    styleConfig: {
+        textColor: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+        foregroundBarColor: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+        backgroundBarColor: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+        seriesOneLabel: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+        seriesTwoLabel: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+    };
+    animate: boolean;
+    widestLeftLabelWidth: number | null;
+    setWidestLeftLabelWidth: (width: number) => void;
+    widestRightLabelWidth: number | null;
+    setWidestRightLabelWidth: (width: number) => void;
+    isMeasuring: boolean;
+    translations: BarChartTranslations;
+};
+/**
+ * Hook that returns a function to get the highest contrast border color
+ * (white or navy-900) for a given background color.
+ *
+ * Similar to the Background component, this resolves color aliases and
+ * compares contrast ratios to determine the best border color.
+ *
+ * @returns A function that takes a background color and returns either 'white' or 'navy-900'
+ */
+export declare const useBarBorderColor: () => (bg: Colors) => 'white' | 'navy-900';
+export declare const useMeasureLeftLabelWidth: ({ ref, }: {
+    ref: React.RefObject<HTMLElement>;
+}) => void;
+export declare const useMeasureRightLabelWidth: ({ ref, }: {
+    ref: React.RefObject<HTMLElement>;
+}) => void;
+export interface CustomSortOption<TBar extends BarProps = BarProps> {
+    label: string;
+    value: string;
+    sortFn: (bars: TBar[]) => TBar[];
+}
+export interface UseBarChartSortOptions<TBarValues extends BarProps[] | readonly BarProps[] = BarProps[]> {
+    bars: TBarValues;
+    sortFns?: ('alphabetically' | 'numerically' | 'none' | CustomSortOption<InferBarType<TBarValues>>)[];
+    translations: BarChartTranslations;
+}
+export interface UseBarChartSortReturn<TBarValues extends BarProps[] | readonly BarProps[] = BarProps[]> {
+    sortedBars: TBarValues;
+    sortValue: string;
+    onSortChange: (value: string) => void;
+    selectProps: {
+        options: SelectOptions;
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+        id: string;
+    } | null;
+}
+/**
+ * Hook that manages bar sorting state and provides memoized sorted bars.
+ * Supports predefined sort options (via string literals) and custom sort functions.
+ * Only returns selectProps if sortFns is provided.
+ */
+export declare const useBarChartSort: <TBarValues extends BarProps[] | readonly BarProps[] = BarProps[]>({ bars, sortFns, translations, }: UseBarChartSortOptions<TBarValues>) => UseBarChartSortReturn<TBarValues>;