@codecademy/gamut 68.1.5-alpha.fbf911.0 → 68.2.0

package/dist/BarChart/layout/LabelSpacer.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: "e9z677g1",
+  label: "SpacerContainer"
+})(css({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  gap: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvTGFiZWxTcGFjZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L0xhYmVsU3BhY2VyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBiYXJMaXN0SXRlbVBhZGRpbmcgfSBmcm9tICcuLi9zaGFyZWQvc3R5bGVzJztcbmltcG9ydCB7IHVzZUJhckNoYXJ0Q29udGV4dCB9IGZyb20gJy4uL3V0aWxzL2hvb2tzJztcblxuY29uc3QgU3BhY2VyQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgZ2FwOiAwLFxuICB9KVxuKTtcblxuY29uc3QgQ29udGVudEFyZWEgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBmbGV4OiAxLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICB9KVxuKTtcblxuZXhwb3J0IGludGVyZmFjZSBMYWJlbFNwYWNlclByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xufVxuXG5jb25zdCBQcmVMYWJlbFNwYWNlcjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IHsgd2lkZXN0Q2F0ZWdvcnlMYWJlbFdpZHRoIH0gPSB1c2VCYXJDaGFydENvbnRleHQoKTtcbiAgY29uc3Qgd2lkdGggPVxuICAgIHdpZGVzdENhdGVnb3J5TGFiZWxXaWR0aCA9PT0gbnVsbFxuICAgICAgPyAnbWluLWNvbnRlbnQnXG4gICAgICA6IHdpZGVzdENhdGVnb3J5TGFiZWxXaWR0aDtcblxuICByZXR1cm4gPEJveCBmbGV4U2hyaW5rPXswfSBtaW5XaWR0aD17d2lkdGh9IG1sPXtiYXJMaXN0SXRlbVBhZGRpbmd9IC8+O1xufTtcblxuY29uc3QgUG9zdExhYmVsU3BhY2VyOiBSZWFjdC5GQyA9ICgpID0+IHtcbiAgY29uc3QgeyB3aWRlc3RUb3RhbFZhbHVlTGFiZWxXaWR0aCB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IHdpZHRoID1cbiAgICB3aWRlc3RUb3RhbFZhbHVlTGFiZWxXaWR0aCA9PT0gbnVsbFxuICAgICAgPyAnbWluLWNvbnRlbnQnXG4gICAgICA6IHdpZGVzdFRvdGFsVmFsdWVMYWJlbFdpZHRoO1xuXG4gIHJldHVybiA8Qm94IGZsZXhTaHJpbms9ezB9IG1pbldpZHRoPXt3aWR0aH0gbXI9e2Jhckxpc3RJdGVtUGFkZGluZ30gLz47XG59O1xuXG5leHBvcnQgY29uc3QgTGFiZWxTcGFjZXI6IFJlYWN0LkZDPExhYmVsU3BhY2VyUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNsYXNzTmFtZSxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3BhY2VyQ29udGFpbmVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgIDxQcmVMYWJlbFNwYWNlciAvPlxuICAgICAgPENvbnRlbnRBcmVhPntjaGlsZHJlbn08L0NvbnRlbnRBcmVhPlxuICAgICAgPFBvc3RMYWJlbFNwYWNlciAvPlxuICAgIDwvU3BhY2VyQ29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
+const ContentArea = /*#__PURE__*/_styled(Box, {
+  target: "e9z677g0",
+  label: "ContentArea"
+})(css({
+  flex: 1,
+  position: 'relative',
+  height: '100%'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvTGFiZWxTcGFjZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9MYWJlbFNwYWNlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgYmFyTGlzdEl0ZW1QYWRkaW5nIH0gZnJvbSAnLi4vc2hhcmVkL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydENvbnRleHQgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5cbmNvbnN0IFNwYWNlckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIGdhcDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IENvbnRlbnRBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgZmxleDogMSxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGFiZWxTcGFjZXJQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbn1cblxuY29uc3QgUHJlTGFiZWxTcGFjZXI6IFJlYWN0LkZDID0gKCkgPT4ge1xuICBjb25zdCB7IHdpZGVzdENhdGVnb3J5TGFiZWxXaWR0aCB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IHdpZHRoID1cbiAgICB3aWRlc3RDYXRlZ29yeUxhYmVsV2lkdGggPT09IG51bGxcbiAgICAgID8gJ21pbi1jb250ZW50J1xuICAgICAgOiB3aWRlc3RDYXRlZ29yeUxhYmVsV2lkdGg7XG5cbiAgcmV0dXJuIDxCb3ggZmxleFNocmluaz17MH0gbWluV2lkdGg9e3dpZHRofSBtbD17YmFyTGlzdEl0ZW1QYWRkaW5nfSAvPjtcbn07XG5cbmNvbnN0IFBvc3RMYWJlbFNwYWNlcjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IHsgd2lkZXN0VG90YWxWYWx1ZUxhYmVsV2lkdGggfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCB3aWR0aCA9XG4gICAgd2lkZXN0VG90YWxWYWx1ZUxhYmVsV2lkdGggPT09IG51bGxcbiAgICAgID8gJ21pbi1jb250ZW50J1xuICAgICAgOiB3aWRlc3RUb3RhbFZhbHVlTGFiZWxXaWR0aDtcblxuICByZXR1cm4gPEJveCBmbGV4U2hyaW5rPXswfSBtaW5XaWR0aD17d2lkdGh9IG1yPXtiYXJMaXN0SXRlbVBhZGRpbmd9IC8+O1xufTtcblxuZXhwb3J0IGNvbnN0IExhYmVsU3BhY2VyOiBSZWFjdC5GQzxMYWJlbFNwYWNlclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjbGFzc05hbWUsXG59KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFNwYWNlckNvbnRhaW5lciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICA8UHJlTGFiZWxTcGFjZXIgLz5cbiAgICAgIDxDb250ZW50QXJlYT57Y2hpbGRyZW59PC9Db250ZW50QXJlYT5cbiAgICAgIDxQb3N0TGFiZWxTcGFjZXIgLz5cbiAgICA8L1NwYWNlckNvbnRhaW5lcj5cbiAgKTtcbn07XG4iXX0= */");
+const PreLabelSpacer = () => {
+  const {
+    widestCategoryLabelWidth
+  } = useBarChartContext();
+  const width = widestCategoryLabelWidth === null ? 'min-content' : widestCategoryLabelWidth;
+  return /*#__PURE__*/_jsx(Box, {
+    flexShrink: 0,
+    minWidth: width,
+    ml: barListItemPadding
+  });
+};
+const PostLabelSpacer = () => {
+  const {
+    widestTotalValueLabelWidth
+  } = useBarChartContext();
+  const width = widestTotalValueLabelWidth === null ? 'min-content' : widestTotalValueLabelWidth;
+  return /*#__PURE__*/_jsx(Box, {
+    flexShrink: 0,
+    minWidth: width,
+    mr: barListItemPadding
+  });
+};
+export const LabelSpacer = ({
+  children,
+  className
+}) => {
+  return /*#__PURE__*/_jsxs(SpacerContainer, {
+    className: className,
+    children: [/*#__PURE__*/_jsx(PreLabelSpacer, {}), /*#__PURE__*/_jsx(ContentArea, {
+      children: children
+    }), /*#__PURE__*/_jsx(PostLabelSpacer, {})]
+  });
+};

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

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

package/dist/BarChart/layout/ScaleChartHeader.js

@@ -0,0 +1,87 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import React, { useMemo } from 'react';
+import { Box, FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { formatNumberUnitCompact } from '../utils';
+import { useBarChartContext, useLabelPositions } from '../utils/hooks';
+import { LabelSpacer } from './LabelSpacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledLabelText = /*#__PURE__*/_styled(Text, {
+  target: "e1ssd1i12",
+  label: "StyledLabelText"
+})(css({
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  m: 0,
+  p: 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV3dCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vLi4vVHlwb2dyYXBoeSc7XG5pbXBvcnQgeyBTY2FsZUF4aXNMYXlvdXRQcm9wcyB9IGZyb20gJy4uL3NoYXJlZC90eXBlcyc7XG5pbXBvcnQgeyBmb3JtYXROdW1iZXJVbml0Q29tcGFjdCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHVzZUJhckNoYXJ0Q29udGV4dCwgdXNlTGFiZWxQb3NpdGlvbnMgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5pbXBvcnQgeyBMYWJlbFNwYWNlciB9IGZyb20gJy4vTGFiZWxTcGFjZXInO1xuXG5jb25zdCBTdHlsZWRMYWJlbFRleHQgPSBzdHlsZWQoVGV4dCk8e1xuICBwb3NpdGlvblBlcmNlbnQ6IG51bWJlcjtcbiAgdGV4dEFsaWduOiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCc7XG59PihcbiAgY3NzKHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICBtOiAwLFxuICAgIHA6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQsIHRleHRBbGlnbiB9KSA9PiB7XG4gICAgbGV0IHRyYW5zZm9ybSA9ICcnO1xuICAgIGlmICh0ZXh0QWxpZ24gPT09ICdsZWZ0Jykge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoMCknO1xuICAgIH0gZWxzZSBpZiAodGV4dEFsaWduID09PSAncmlnaHQnKSB7XG4gICAgICB0cmFuc2Zvcm0gPSAndHJhbnNsYXRlWCgtMTAwJSknO1xuICAgIH0gZWxzZSB7XG4gICAgICB0cmFuc2Zvcm0gPSAndHJhbnNsYXRlWCgtNTAlKSc7XG4gICAgfVxuICAgIHJldHVybiB7XG4gICAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgICB0cmFuc2Zvcm0sXG4gICAgfTtcbiAgfVxuKTtcblxuY29uc3QgU3R5bGVkSGVhZGVyQ29udGFpbmVyID0gc3R5bGVkKEZsZXhCb3gpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9KVxuKTtcblxuY29uc3QgSGVhZGVyTGFiZWxBcmVhID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgbWluSGVpZ2h0OiAnMjRweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU2NhbGVDaGFydEhlYWRlcjogUmVhY3QuRkM8U2NhbGVBeGlzTGF5b3V0UHJvcHM+ID0gKHtcbiAgbWF4U2NhbGVWYWx1ZSxcbiAgdGlja0NvdW50LFxufSkgPT4ge1xuICBjb25zdCB7IHRyYW5zbGF0aW9ucyB9ID0gdXNlQmFyQ2hhcnRDb250ZXh0KCk7XG4gIGNvbnN0IGxhYmVsUG9zaXRpb25zID0gdXNlTGFiZWxQb3NpdGlvbnMoe1xuICAgIG1heFNjYWxlVmFsdWUsXG4gICAgdGlja0NvdW50LFxuICB9KTtcblxuICBjb25zdCBzY2FsZUxhYmVscyA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIGxhYmVsUG9zaXRpb25zLm1hcCgoeyB2YWx1ZSwgcG9zaXRpb25QZXJjZW50IH0pID0+IChcbiAgICAgICAgPFN0eWxlZExhYmVsVGV4dFxuICAgICAgICAgIGtleT17YGxhYmVsLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgICAgdGV4dEFsaWduPVwiY2VudGVyXCJcbiAgICAgICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgICAgID5cbiAgICAgICAgICB7Zm9ybWF0TnVtYmVyVW5pdENvbXBhY3Qoe1xuICAgICAgICAgICAgbnVtOiB2YWx1ZSxcbiAgICAgICAgICAgIGxvY2FsZTogdHJhbnNsYXRpb25zLmxvY2FsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9TdHlsZWRMYWJlbFRleHQ+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnMsIHRyYW5zbGF0aW9ucy5sb2NhbGVdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsxMn0gd2lkdGg9ezF9PlxuICAgICAgPFN0eWxlZEhlYWRlckNvbnRhaW5lclxuICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgY194czogJ2Jsb2NrJyB9fVxuICAgICAgPlxuICAgICAgICA8TGFiZWxTcGFjZXI+XG4gICAgICAgICAgPEhlYWRlckxhYmVsQXJlYT57c2NhbGVMYWJlbHN9PC9IZWFkZXJMYWJlbEFyZWE+XG4gICAgICAgIDwvTGFiZWxTcGFjZXI+XG4gICAgICA8L1N0eWxlZEhlYWRlckNvbnRhaW5lcj5cbiAgICA8L0JveD5cbiAgKTtcbn07XG4iXX0= */");
+const StyledHeaderContainer = /*#__PURE__*/_styled(FlexBox, {
+  target: "e1ssd1i11",
+  label: "StyledHeaderContainer"
+})(css({
+  alignItems: 'center',
+  position: 'relative'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUM4QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgU2NhbGVBeGlzTGF5b3V0UHJvcHMgfSBmcm9tICcuLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgZm9ybWF0TnVtYmVyVW5pdENvbXBhY3QgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydENvbnRleHQsIHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgU3R5bGVkTGFiZWxUZXh0ID0gc3R5bGVkKFRleHQpPHtcbiAgcG9zaXRpb25QZXJjZW50OiBudW1iZXI7XG4gIHRleHRBbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcicgfCAncmlnaHQnO1xufT4oXG4gIGNzcyh7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgbTogMCxcbiAgICBwOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50LCB0ZXh0QWxpZ24gfSkgPT4ge1xuICAgIGxldCB0cmFuc2Zvcm0gPSAnJztcbiAgICBpZiAodGV4dEFsaWduID09PSAnbGVmdCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDApJztcbiAgICB9IGVsc2UgaWYgKHRleHRBbGlnbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTEwMCUpJztcbiAgICB9IGVsc2Uge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTUwJSknO1xuICAgIH1cbiAgICByZXR1cm4ge1xuICAgICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgICAgdHJhbnNmb3JtLFxuICAgIH07XG4gIH1cbik7XG5cbmNvbnN0IFN0eWxlZEhlYWRlckNvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEhlYWRlckxhYmVsQXJlYSA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIG1pbkhlaWdodDogJzI0cHgnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNjYWxlQ2hhcnRIZWFkZXI6IFJlYWN0LkZDPFNjYWxlQXhpc0xheW91dFByb3BzPiA9ICh7XG4gIG1heFNjYWxlVmFsdWUsXG4gIHRpY2tDb3VudCxcbn0pID0+IHtcbiAgY29uc3QgeyB0cmFuc2xhdGlvbnMgfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHtcbiAgICBtYXhTY2FsZVZhbHVlLFxuICAgIHRpY2tDb3VudCxcbiAgfSk7XG5cbiAgY29uc3Qgc2NhbGVMYWJlbHMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBsYWJlbFBvc2l0aW9ucy5tYXAoKHsgdmFsdWUsIHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoXG4gICAgICAgIDxTdHlsZWRMYWJlbFRleHRcbiAgICAgICAgICBrZXk9e2BsYWJlbC0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAgIHRleHRBbGlnbj1cImNlbnRlclwiXG4gICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICA+XG4gICAgICAgICAge2Zvcm1hdE51bWJlclVuaXRDb21wYWN0KHtcbiAgICAgICAgICAgIG51bTogdmFsdWUsXG4gICAgICAgICAgICBsb2NhbGU6IHRyYW5zbGF0aW9ucy5sb2NhbGUsXG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkTGFiZWxUZXh0PlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zLCB0cmFuc2xhdGlvbnMubG9jYWxlXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEJveCBtYj17MTJ9IHdpZHRoPXsxfT5cbiAgICAgIDxTdHlsZWRIZWFkZXJDb250YWluZXJcbiAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCJcbiAgICAgICAgZGlzcGxheT17eyBfOiAnbm9uZScsIGNfeHM6ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPExhYmVsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L0xhYmVsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvU2NhbGVDaGFydEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEN3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvbGF5b3V0L1NjYWxlQ2hhcnRIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uLy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgU2NhbGVBeGlzTGF5b3V0UHJvcHMgfSBmcm9tICcuLi9zaGFyZWQvdHlwZXMnO1xuaW1wb3J0IHsgZm9ybWF0TnVtYmVyVW5pdENvbXBhY3QgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydENvbnRleHQsIHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgTGFiZWxTcGFjZXIgfSBmcm9tICcuL0xhYmVsU3BhY2VyJztcblxuY29uc3QgU3R5bGVkTGFiZWxUZXh0ID0gc3R5bGVkKFRleHQpPHtcbiAgcG9zaXRpb25QZXJjZW50OiBudW1iZXI7XG4gIHRleHRBbGlnbjogJ2xlZnQnIHwgJ2NlbnRlcicgfCAncmlnaHQnO1xufT4oXG4gIGNzcyh7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgbTogMCxcbiAgICBwOiAwLFxuICB9KSxcbiAgKHsgcG9zaXRpb25QZXJjZW50LCB0ZXh0QWxpZ24gfSkgPT4ge1xuICAgIGxldCB0cmFuc2Zvcm0gPSAnJztcbiAgICBpZiAodGV4dEFsaWduID09PSAnbGVmdCcpIHtcbiAgICAgIHRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDApJztcbiAgICB9IGVsc2UgaWYgKHRleHRBbGlnbiA9PT0gJ3JpZ2h0Jykge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTEwMCUpJztcbiAgICB9IGVsc2Uge1xuICAgICAgdHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoLTUwJSknO1xuICAgIH1cbiAgICByZXR1cm4ge1xuICAgICAgbGVmdDogYCR7cG9zaXRpb25QZXJjZW50fSVgLFxuICAgICAgdHJhbnNmb3JtLFxuICAgIH07XG4gIH1cbik7XG5cbmNvbnN0IFN0eWxlZEhlYWRlckNvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgfSlcbik7XG5cbmNvbnN0IEhlYWRlckxhYmVsQXJlYSA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIG1pbkhlaWdodDogJzI0cHgnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFNjYWxlQ2hhcnRIZWFkZXI6IFJlYWN0LkZDPFNjYWxlQXhpc0xheW91dFByb3BzPiA9ICh7XG4gIG1heFNjYWxlVmFsdWUsXG4gIHRpY2tDb3VudCxcbn0pID0+IHtcbiAgY29uc3QgeyB0cmFuc2xhdGlvbnMgfSA9IHVzZUJhckNoYXJ0Q29udGV4dCgpO1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHtcbiAgICBtYXhTY2FsZVZhbHVlLFxuICAgIHRpY2tDb3VudCxcbiAgfSk7XG5cbiAgY29uc3Qgc2NhbGVMYWJlbHMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBsYWJlbFBvc2l0aW9ucy5tYXAoKHsgdmFsdWUsIHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoXG4gICAgICAgIDxTdHlsZWRMYWJlbFRleHRcbiAgICAgICAgICBrZXk9e2BsYWJlbC0ke3ZhbHVlfS0ke3Bvc2l0aW9uUGVyY2VudH1gfVxuICAgICAgICAgIHBvc2l0aW9uUGVyY2VudD17cG9zaXRpb25QZXJjZW50fVxuICAgICAgICAgIHRleHRBbGlnbj1cImNlbnRlclwiXG4gICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICA+XG4gICAgICAgICAge2Zvcm1hdE51bWJlclVuaXRDb21wYWN0KHtcbiAgICAgICAgICAgIG51bTogdmFsdWUsXG4gICAgICAgICAgICBsb2NhbGU6IHRyYW5zbGF0aW9ucy5sb2NhbGUsXG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkTGFiZWxUZXh0PlxuICAgICAgKSksXG4gICAgW2xhYmVsUG9zaXRpb25zLCB0cmFuc2xhdGlvbnMubG9jYWxlXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEJveCBtYj17MTJ9IHdpZHRoPXsxfT5cbiAgICAgIDxTdHlsZWRIZWFkZXJDb250YWluZXJcbiAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCJcbiAgICAgICAgZGlzcGxheT17eyBfOiAnbm9uZScsIGNfeHM6ICdibG9jaycgfX1cbiAgICAgID5cbiAgICAgICAgPExhYmVsU3BhY2VyPlxuICAgICAgICAgIDxIZWFkZXJMYWJlbEFyZWE+e3NjYWxlTGFiZWxzfTwvSGVhZGVyTGFiZWxBcmVhPlxuICAgICAgICA8L0xhYmVsU3BhY2VyPlxuICAgICAgPC9TdHlsZWRIZWFkZXJDb250YWluZXI+XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuIl19 */");
+export const ScaleChartHeader = ({
+  maxScaleValue,
+  tickCount
+}) => {
+  const {
+    translations
+  } = useBarChartContext();
+  const labelPositions = useLabelPositions({
+    maxScaleValue,
+    tickCount
+  });
+  const scaleLabels = useMemo(() => labelPositions.map(({
+    value,
+    positionPercent
+  }) => /*#__PURE__*/_jsx(StyledLabelText, {
+    positionPercent: positionPercent,
+    textAlign: "center",
+    variant: "p-small",
+    children: formatNumberUnitCompact({
+      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',
+        c_xs: 'block'
+      },
+      children: /*#__PURE__*/_jsx(LabelSpacer, {
+        children: /*#__PURE__*/_jsx(HeaderLabelArea, {
+          children: scaleLabels
+        })
+      })
+    })
+  });
+};

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,69 @@
+/** Shared context fields for accessibility summary functions. */
+type BarChartSummaryContextBase = {
+    unit: string;
+    locale: string;
+};
+/**
+ * Context passed to the stacked-bar summary function (stackedBarSummary).
+ * Used for rows that have seriesTwoValue (two values per row).
+ */
+export type BarChartStackedSummaryContext = BarChartSummaryContextBase & {
+    categoryLabel: string;
+    seriesOneValue: number;
+    seriesTwoValue: number;
+    /** Precomputed: seriesTwoValue - seriesOneValue. Use in the summary string (e.g. "50 XP gained - now at 150 XP"). */
+    gained: number;
+};
+/**
+ * Context passed to the single-value bar summary function (singleValueBarSummary).
+ * Used for all single-bar rows (no seriesTwoValue). The component uses the returned string as aria-label (when row is link/button) or screenreader-only text (when row is a div).
+ */
+export type BarChartSingleValueBarSummaryContext = BarChartSummaryContextBase & {
+    categoryLabel: string;
+    value: number;
+};
+/**
+ * BarChart translation configuration for internationalization.
+ *
+ * **accessibility** is function-only. Two optional summary functions; when omitted, default English summaries are used.
+ * - **stackedBarSummary**: Used for stacked (two-value) rows. Context includes `gained` (seriesTwoValue - seriesOneValue).
+ * - **singleValueBarSummary**: Used for all single-value rows. Return value is placed as aria-label (when row is link/button) or screenreader-only text (when not).
+ *
+ * **sortLabel**, **sortOptions**, and **locale** are always strings.
+ */
+export type BarChartTranslations = {
+    sortLabel: string;
+    sortOptions: {
+        none: string;
+        labelAsc: string;
+        labelDesc: string;
+        valueAsc: string;
+        valueDesc: string;
+    };
+    accessibility: {
+        /** Used for stacked (two-value) rows. Context includes `gained` for the numeric difference. */
+        stackedBarSummary?: (ctx: BarChartStackedSummaryContext) => string;
+        /** Used for all single-value rows. Same return value is placed as aria-label (when row is link/button) or screenreader-only text (when not). */
+        singleValueBarSummary?: (ctx: BarChartSingleValueBarSummaryContext) => string;
+    };
+    /** For Intl.NumberFormat (e.g. 'en', 'es', 'fr'). */
+    locale: string;
+};
+/**
+ * Partial translations for BarChart. Nested `accessibility` and `sortOptions` may
+ * override individual keys; they are merged with defaults at runtime.
+ */
+export type PartialBarChartTranslations = Partial<Omit<BarChartTranslations, 'accessibility' | 'sortOptions'>> & {
+    sortOptions?: Partial<BarChartTranslations['sortOptions']>;
+    accessibility?: Partial<BarChartTranslations['accessibility']>;
+};
+/**
+ * Default stacked-bar summary (English).
+ */
+export declare const getDefaultStackedBarSummary: (ctx: BarChartStackedSummaryContext) => string;
+/**
+ * Default single-value bar summary (English).
+ */
+export declare const getDefaultSingleValueBarSummary: (ctx: BarChartSingleValueBarSummaryContext) => string;
+export declare const defaultBarChartTranslations: BarChartTranslations;
+export {};

package/dist/BarChart/shared/translations.js

@@ -0,0 +1,57 @@
+/** Shared context fields for accessibility summary functions. */
+
+/**
+ * Context passed to the stacked-bar summary function (stackedBarSummary).
+ * Used for rows that have seriesTwoValue (two values per row).
+ */
+
+/**
+ * Context passed to the single-value bar summary function (singleValueBarSummary).
+ * Used for all single-bar rows (no seriesTwoValue). The component uses the returned string as aria-label (when row is link/button) or screenreader-only text (when row is a div).
+ */
+
+/**
+ * BarChart translation configuration for internationalization.
+ *
+ * **accessibility** is function-only. Two optional summary functions; when omitted, default English summaries are used.
+ * - **stackedBarSummary**: Used for stacked (two-value) rows. Context includes `gained` (seriesTwoValue - seriesOneValue).
+ * - **singleValueBarSummary**: Used for all single-value rows. Return value is placed as aria-label (when row is link/button) or screenreader-only text (when not).
+ *
+ * **sortLabel**, **sortOptions**, and **locale** are always strings.
+ */
+
+/**
+ * Partial translations for BarChart. Nested `accessibility` and `sortOptions` may
+ * override individual keys; they are merged with defaults at runtime.
+ */
+
+/**
+ * Default stacked-bar summary (English).
+ */
+export const getDefaultStackedBarSummary = ctx => {
+  const unitText = ctx.unit ? ` ${ctx.unit}` : '';
+  return `Starting value - ${ctx.seriesOneValue}${unitText}. ${ctx.gained}${unitText} gained - now at ${ctx.seriesTwoValue}${unitText} in ${ctx.categoryLabel}`;
+};
+
+/**
+ * Default single-value bar summary (English).
+ */
+export const getDefaultSingleValueBarSummary = ctx => {
+  const unitText = ctx.unit ? ` ${ctx.unit}` : '';
+  return `${ctx.value}${unitText} in ${ctx.categoryLabel}`;
+};
+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: {
+    stackedBarSummary: getDefaultStackedBarSummary,
+    singleValueBarSummary: getDefaultSingleValueBarSummary
+  },
+  locale: 'en'
+};

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

@@ -0,0 +1,100 @@
+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 { PartialBarChartTranslations } 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 = {
+    'aria-labelledby': string;
+    hideTitle?: true;
+    title?: never;
+};
+type BarChartLabel = BarChartAriaLabel | BarChartAriaLabelledBy;
+/** Props for components that lay out the scale axis (header labels or grid lines) */
+export type ScaleAxisLayoutProps = {
+    maxScaleValue: number;
+    tickCount: number;
+};
+/** Maximum value for the value scale (min is always 0) */
+export type MaxScaleValue = ScaleAxisLayoutProps['maxScaleValue'];
+/** Number of labels/ticks on the scale axis. Must be at least 1. */
+export type ScaleTickCount = ScaleAxisLayoutProps['tickCount'];
+export type BarChartStyles = {
+    /** Color for text labels. Defaults to 'text' */
+    textColor?: ColorAlias;
+    /** Color for the series one bar (seriesOneValue: overlay in stacked charts, only bar in simple charts). Defaults to 'text' */
+    seriesOneBarColor?: ColorAlias;
+    /** Color for the series two bar (seriesTwoValue: full bar in stacked charts; unused in simple). Defaults to 'primary' */
+    seriesTwoBarColor?: ColorAlias;
+    /** Color for the series one label (first total value label when stacked, or displayValue when not stacked). Defaults to 'text-secondary' */
+    seriesOneLabel?: ColorAlias;
+    /** Color for the series two label (displayValue when stacked). Defaults to 'primary' */
+    seriesTwoLabel?: ColorAlias;
+};
+type BarPropsBase = {
+    /** Label displayed for this category (e.g. on the y-axis) */
+    categoryLabel: 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>;
+};
+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 value scale */
+    maxScaleValue: MaxScaleValue;
+    /** Unit label to display (e.g., "XP") */
+    unit?: string;
+    /** Style configuration for colors */
+    styleConfig?: BarChartStyles;
+    /** Interval for the value scale markers */
+    scaleInterval?: 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 are merged with defaults.
+     * Accessibility is function-only. Two optional keys: stackedBarSummary, singleValueBarSummary.
+     * stackedBarSummary: used for stacked (two-value) rows; context includes gained (seriesTwoValue - seriesOneValue).
+     * singleValueBarSummary: used for all single-value rows; the returned string is set as aria-label on the row's link/button when interactive, or rendered in screenreader-only text when not.
+     */
+    translations?: PartialBarChartTranslations;
+};
+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,89 @@
+/// <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, MaxScaleValue, ScaleTickCount } from '../shared/types';
+export interface LabelPosition {
+    value: number;
+    positionPercent: number;
+}
+/**
+ * Hook that calculates label positions for a given maxScaleValue and tickCount (scale min is always 0).
+ * Returns an array of { value, positionPercent } objects.
+ */
+export declare const useLabelPositions: ({ maxScaleValue, tickCount, }: {
+    maxScaleValue: MaxScaleValue;
+    tickCount: ScaleTickCount;
+}) => LabelPosition[];
+export declare const useBarChartContext: () => BarChartContextProps;
+export interface UseBarChartOptions {
+    maxScaleValue: MaxScaleValue;
+    scaleInterval?: number;
+    unit?: string;
+    styleConfig?: BarChartStyles;
+    animate?: boolean;
+    barCount?: number;
+    translations: BarChartTranslations;
+}
+export declare const useBarChart: ({ maxScaleValue, scaleInterval, unit, styleConfig, animate, barCount, translations, }: UseBarChartOptions) => {
+    maxScaleValue: number;
+    scaleInterval: 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";
+        seriesOneBarColor: "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";
+        seriesTwoBarColor: "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;
+    widestCategoryLabelWidth: number | null;
+    setWidestCategoryLabelWidth: (width: number) => void;
+    widestTotalValueLabelWidth: number | null;
+    setWidestTotalValueLabelWidth: (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 useMeasureCategoryLabelWidth: ({ ref, }: {
+    ref: React.RefObject<HTMLElement>;
+}) => void;
+export declare const useMeasureTotalValueLabelWidth: ({ 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;
+    } | 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>;