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

package/dist/BarChart/GENERIC_EXAMPLE.js

@@ -0,0 +1,333 @@
+/**
+ * Generic Type Example for BarChart with Custom Sorting
+ *
+ * This file demonstrates how the generic types work with custom properties.
+ * TypeScript will automatically infer the bar type from barValues, and
+ * sort functions will receive the correct type with custom properties.
+ *
+ * THIS WILL BE DELETED BEFORE SHIPPING
+ */
+
+import { BarChart } from './index';
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// Example 1: Date-based sorting with automatic type inference
+// ============================================================================
+
+// Define bars with custom dateAdded property
+const barsWithDates = [{
+  yLabel: 'Python',
+  seriesOneValue: 1500,
+  dateAdded: new Date('2023-01-15')
+}, {
+  yLabel: 'JavaScript',
+  seriesOneValue: 2000,
+  dateAdded: new Date('2023-03-20')
+}, {
+  yLabel: 'React',
+  seriesOneValue: 450,
+  dateAdded: new Date('2023-06-10')
+}, {
+  yLabel: 'TypeScript',
+  seriesOneValue: 300,
+  dateAdded: new Date('2023-08-05')
+}, {
+  yLabel: 'SQL',
+  seriesOneValue: 600,
+  dateAdded: new Date('2023-02-28')
+}];
+
+// TypeScript infers the type automatically - no need to specify it!
+export const DateSortingExample = () => {
+  return /*#__PURE__*/_jsx(BarChart, {
+    barValues: barsWithDates,
+    description: "Sort by when each skill was added to your profile",
+    maxRange: 2000,
+    minRange: 0,
+    sortFns: ['none', {
+      label: 'Recently Added',
+      value: 'recent',
+      // bars parameter is automatically typed as:
+      // (BarProps & { dateAdded: Date })[]
+      // No type assertions needed!
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // TypeScript knows dateAdded exists and is a Date!
+          const aDate = a.dateAdded;
+          const bDate = b.dateAdded;
+          if (!aDate && !bDate) return 0;
+          if (!aDate) return 1;
+          if (!bDate) return -1;
+          return bDate.getTime() - aDate.getTime();
+        });
+      }
+    }, {
+      label: 'Oldest First',
+      value: 'oldest',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          const aDate = a.dateAdded;
+          const bDate = b.dateAdded;
+          if (!aDate && !bDate) return 0;
+          if (!aDate) return 1;
+          if (!bDate) return -1;
+          return aDate.getTime() - bDate.getTime();
+        });
+      }
+    }],
+    title: "Skills by Date Added",
+    unit: "XP"
+  });
+};
+
+// ============================================================================
+// Example 2: Category-based sorting with multiple custom properties
+// ============================================================================
+
+const barsWithCategory = [{
+  yLabel: 'Python',
+  seriesOneValue: 1500,
+  category: 'backend',
+  priority: 1
+}, {
+  yLabel: 'JavaScript',
+  seriesOneValue: 2000,
+  category: 'frontend',
+  priority: 2
+}, {
+  yLabel: 'React',
+  seriesOneValue: 450,
+  category: 'frontend',
+  priority: 3
+}, {
+  yLabel: 'TypeScript',
+  seriesOneValue: 300,
+  category: 'frontend',
+  priority: 4
+}, {
+  yLabel: 'SQL',
+  seriesOneValue: 600,
+  category: 'backend',
+  priority: 5
+}];
+export const CategorySortingExample = () => {
+  return /*#__PURE__*/_jsx(BarChart, {
+    barValues: barsWithCategory,
+    description: "Sort by category or priority",
+    maxRange: 2000,
+    minRange: 0,
+    sortFns: ['none', {
+      label: 'By Category',
+      value: 'category',
+      // bars is typed with both category and priority properties
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // TypeScript knows category exists!
+          if (a.category !== b.category) {
+            return a.category.localeCompare(b.category);
+          }
+          // TypeScript knows priority exists!
+          return a.priority - b.priority;
+        });
+      }
+    }, {
+      label: 'High Priority First',
+      value: 'priority',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // Direct access to priority - fully typed!
+          return a.priority - b.priority;
+        });
+      }
+    }],
+    title: "Skills by Category",
+    unit: "XP"
+  });
+};
+
+// ============================================================================
+// Example 3: Complex sorting with nested properties
+// ============================================================================
+
+const barsWithMetadata = [{
+  yLabel: 'Python',
+  seriesOneValue: 1500,
+  metadata: {
+    addedDate: new Date('2023-01-15'),
+    tags: ['backend', 'data-science'],
+    rating: 4.5
+  }
+}, {
+  yLabel: 'JavaScript',
+  seriesOneValue: 2000,
+  metadata: {
+    addedDate: new Date('2023-03-20'),
+    tags: ['frontend', 'backend'],
+    rating: 5.0
+  }
+}, {
+  yLabel: 'React',
+  seriesOneValue: 450,
+  metadata: {
+    addedDate: new Date('2023-06-10'),
+    tags: ['frontend'],
+    rating: 4.8
+  }
+}];
+export const ComplexSortingExample = () => {
+  return /*#__PURE__*/_jsx(BarChart, {
+    barValues: barsWithMetadata,
+    description: "Sort by metadata properties",
+    maxRange: 2000,
+    minRange: 0,
+    sortFns: ['none', {
+      label: 'By Rating',
+      value: 'rating',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // TypeScript knows metadata.rating exists!
+          return b.metadata.rating - a.metadata.rating;
+        });
+      }
+    }, {
+      label: 'By Date Added',
+      value: 'date',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // TypeScript knows metadata.addedDate exists!
+          return b.metadata.addedDate.getTime() - a.metadata.addedDate.getTime();
+        });
+      }
+    }, {
+      label: 'Has Backend Tag',
+      value: 'backend-tag',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // TypeScript knows metadata.tags exists!
+          const aHasBackend = a.metadata.tags.includes('backend');
+          const bHasBackend = b.metadata.tags.includes('backend');
+          if (aHasBackend && !bHasBackend) return -1;
+          if (!aHasBackend && bHasBackend) return 1;
+          return 0;
+        });
+      }
+    }],
+    title: "Skills with Metadata",
+    unit: "XP"
+  });
+};
+
+// ============================================================================
+// Example 4: Explicit type annotation (when needed)
+// ============================================================================
+
+// Sometimes you might want to be explicit about the type
+// The type is automatically inferred from barValues, but you can still
+// explicitly type the array if needed for clarity
+
+const barsWithScore = [{
+  yLabel: 'Python',
+  seriesOneValue: 1500,
+  score: 85,
+  lastUpdated: new Date('2024-01-01')
+}, {
+  yLabel: 'JavaScript',
+  seriesOneValue: 2000,
+  score: 95,
+  lastUpdated: new Date('2024-01-15')
+}];
+export const ExplicitTypeExample = () => {
+  return /*#__PURE__*/_jsx(BarChart, {
+    barValues: barsWithScore,
+    description: "Explicitly typed bars with score and update date",
+    maxRange: 2000,
+    minRange: 0,
+    sortFns: ['none', {
+      label: 'By Score',
+      value: 'score',
+      // TypeScript automatically infers BarWithScore[] from barValues
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // Direct access to score - fully typed!
+          return b.score - a.score;
+        });
+      }
+    }, {
+      label: 'Recently Updated',
+      value: 'updated',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // Direct access to lastUpdated - fully typed!
+          return b.lastUpdated.getTime() - a.lastUpdated.getTime();
+        });
+      }
+    }],
+    title: "Skills with Scores",
+    unit: "XP"
+  });
+};
+
+// ============================================================================
+// Example 6: Purposefully wrong example to show type errors
+// ============================================================================
+
+const barsWithWrongCategory = [{
+  yLabel: 'Python',
+  seriesOneValue: 1500,
+  category: 'backend',
+  priority: 1
+}, {
+  yLabel: 'JavaScript',
+  seriesOneValue: 2000,
+  category: 'frontend',
+  priority: 2
+}, {
+  yLabel: 'React',
+  seriesOneValue: 450,
+  category: 'frontend',
+  priority: 3
+}, {
+  yLabel: 'TypeScript',
+  seriesOneValue: 300,
+  category: 'frontend',
+  priority: 4
+}, {
+  yLabel: 'SQL',
+  seriesOneValue: 600,
+  catty: 'backend',
+  purr: 5
+}];
+export const WrongCategorySortingExample = () => {
+  return /*#__PURE__*/_jsx(BarChart, {
+    barValues: barsWithWrongCategory,
+    description: "Sort by category or priority",
+    maxRange: 2000,
+    minRange: 0,
+    sortFns: ['none', {
+      label: 'By Category',
+      value: 'category',
+      // bars is typed with both category and priority properties
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          if (a.category !== b.category) {
+            // @ts-expect-error - we know this is wrong
+            return a.category.localeCompare(b.category);
+          }
+          // @ts-expect-error - we know priority might not exist
+          return a.priority - b.priority;
+        });
+      }
+    }, {
+      label: 'High Priority First',
+      value: 'priority',
+      sortFn: bars => {
+        return [...bars].sort((a, b) => {
+          // @ts-expect-error - we know priority might not exist
+          return a.priority - b.priority;
+        });
+      }
+    }],
+    title: "Skills by Category",
+    unit: "XP"
+  });
+};

package/dist/BarChart/index.d.ts

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

package/dist/BarChart/index.js

@@ -0,0 +1,156 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { useId, useMemo } from 'react';
+import { Box, FlexBox } from '../Box';
+import { FormGroupLabel } from '../Form';
+import { Select } from '../Form/inputs/Select';
+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 { useBarChart, useBarChartSort } from './utils/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledFormGroupLabel = /*#__PURE__*/_styled(FormGroupLabel, {
+  target: "ey39o7m1",
+  label: "StyledFormGroupLabel"
+})(css({
+  mr: 8,
+  mt: 4
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYXJDaGFydC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0I2QiIsImZpbGUiOiIuLi8uLi9zcmMvQmFyQ2hhcnQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUlkLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVHlwb2dyYXBoeS9UZXh0JztcbmltcG9ydCB7IEJhckNoYXJ0UHJvdmlkZXIgfSBmcm9tICcuL0JhckNoYXJ0UHJvdmlkZXInO1xuaW1wb3J0IHsgQmFyUm93IH0gZnJvbSAnLi9CYXJSb3cnO1xuaW1wb3J0IHsgR3JpZExpbmVzIH0gZnJvbSAnLi9sYXlvdXQvR3JpZExpbmVzJztcbmltcG9ydCB7IFNjYWxlQ2hhcnRIZWFkZXIgfSBmcm9tICcuL2xheW91dC9TY2FsZUNoYXJ0SGVhZGVyJztcbmltcG9ydCB7IEJhcnNMaXN0IH0gZnJvbSAnLi9zaGFyZWQvZWxlbWVudHMnO1xuaW1wb3J0IHtcbiAgQmFyQ2hhcnRUcmFuc2xhdGlvbnMsXG4gIGRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucyxcbn0gZnJvbSAnLi9zaGFyZWQvdHJhbnNsYXRpb25zJztcbmltcG9ydCB7IEJhckNoYXJ0UHJvcHMsIEJhclByb3BzLCBJbmZlckJhclR5cGUgfSBmcm9tICcuL3NoYXJlZC90eXBlcyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydCwgdXNlQmFyQ2hhcnRTb3J0IH0gZnJvbSAnLi91dGlscy9ob29rcyc7XG5cbmV4cG9ydCB0eXBlIHsgQmFyUHJvcHMsIEluZmVyQmFyVHlwZSwgQmFyQ2hhcnRUcmFuc2xhdGlvbnMgfTtcblxuY29uc3QgU3R5bGVkRm9ybUdyb3VwTGFiZWwgPSBzdHlsZWQoRm9ybUdyb3VwTGFiZWwpKFxuICBjc3Moe1xuICAgIG1yOiA4LFxuICAgIG10OiA0LFxuICB9KVxuKTtcbmNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhckNoYXJ0ID0gPFxuICBUQmFyVmFsdWVzIGV4dGVuZHMgQmFyUHJvcHNbXSB8IHJlYWRvbmx5IEJhclByb3BzW10gPSBCYXJQcm9wc1tdXG4+KHtcbiAgJ2FyaWEtbGFiZWxsZWRieSc6IGFyaWFMYWJlbGxlZEJ5LFxuICBhbmltYXRlID0gZmFsc2UsXG4gIGJhclZhbHVlcyxcbiAgZGVzY3JpcHRpb24sXG4gIGhpZGVEZXNjcmlwdGlvbiA9IGZhbHNlLFxuICBoaWRlVGl0bGUgPSBmYWxzZSxcbiAgbWF4UmFuZ2UsXG4gIG1pblJhbmdlLFxuICBzb3J0Rm5zLFxuICBzdHlsZUNvbmZpZyxcbiAgdGl0bGUsXG4gIHRyYW5zbGF0aW9ucyxcbiAgdW5pdCA9ICcnLFxuICB4U2NhbGUsXG59OiBCYXJDaGFydFByb3BzPFRCYXJWYWx1ZXM+KSA9PiB7XG4gIGNvbnN0IG1lcmdlZFRyYW5zbGF0aW9ucyA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKHtcbiAgICAgIC4uLmRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucyxcbiAgICAgIC4uLnRyYW5zbGF0aW9ucyxcbiAgICAgIHNvcnRPcHRpb25zOiB7XG4gICAgICAgIC4uLmRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucy5zb3J0T3B0aW9ucyxcbiAgICAgICAgLi4udHJhbnNsYXRpb25zPy5zb3J0T3B0aW9ucyxcbiAgICAgIH0sXG4gICAgICBhY2Nlc3NpYmlsaXR5OiB7XG4gICAgICAgIC4uLmRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucy5hY2Nlc3NpYmlsaXR5LFxuICAgICAgICAuLi50cmFuc2xhdGlvbnM/LmFjY2Vzc2liaWxpdHksXG4gICAgICB9LFxuICAgIH0pLFxuICAgIFt0cmFuc2xhdGlvbnNdXG4gICk7XG5cbiAgY29uc3QgeyBzb3J0ZWRCYXJzLCBzZWxlY3RQcm9wcyB9ID0gdXNlQmFyQ2hhcnRTb3J0PFRCYXJWYWx1ZXM+KHtcbiAgICBiYXJzOiBiYXJWYWx1ZXMsXG4gICAgc29ydEZucyxcbiAgICB0cmFuc2xhdGlvbnM6IG1lcmdlZFRyYW5zbGF0aW9ucyxcbiAgfSk7XG5cbiAgY29uc3QgY29udGV4dFZhbHVlID0gdXNlQmFyQ2hhcnQoe1xuICAgIG1pblJhbmdlLFxuICAgIG1heFJhbmdlLFxuICAgIHhTY2FsZSxcbiAgICB1bml0LFxuICAgIHN0eWxlQ29uZmlnLFxuICAgIGFuaW1hdGUsXG4gICAgYmFyQ291bnQ6IHNvcnRlZEJhcnM/Lmxlbmd0aCxcbiAgICB0cmFuc2xhdGlvbnM6IG1lcmdlZFRyYW5zbGF0aW9ucyxcbiAgfSk7XG5cbiAgY29uc3QgdGlja0NvdW50ID0gTWF0aC5jZWlsKChtYXhSYW5nZSAtIG1pblJhbmdlKSAvIGNvbnRleHRWYWx1ZS54U2NhbGUpICsgMTtcblxuICBjb25zdCB0aXRsZUlkID0gdXNlSWQoKTtcbiAgY29uc3Qgc29ydFNlbGVjdElkID0gdXNlSWQoKTtcblxuICBjb25zdCB0aXRsZVByb3BzID1cbiAgICB0eXBlb2YgdGl0bGUgPT09ICdzdHJpbmcnXG4gICAgICA/IHtcbiAgICAgICAgICBhczogJ2gyJyBhcyBjb25zdCxcbiAgICAgICAgICBjaGlsZHJlbjogdGl0bGUsXG4gICAgICAgICAgaGlkZGVuOiBoaWRlVGl0bGUsXG4gICAgICAgICAgaWQ6IHRpdGxlSWQsXG4gICAgICAgICAgdmFyaWFudDogJ3RpdGxlLXhzJyBhcyBjb25zdCxcbiAgICAgICAgfVxuICAgICAgOiB0aXRsZVxuICAgICAgPyB7IC4uLnRpdGxlLCBjaGlsZHJlbjogdGl0bGUudGl0bGUsIGhpZGRlbjogaGlkZVRpdGxlLCBpZDogdGl0bGVJZCB9XG4gICAgICA6IG51bGw7XG5cbiAgY29uc3QgdGl0bGVDb250ZW50ID1cbiAgICAodGl0bGUgJiYgIWhpZGVUaXRsZSkgfHwgc2VsZWN0UHJvcHMgPyAoXG4gICAgICA8Qm94XG4gICAgICAgIGJvcmRlckJvdHRvbT17MX1cbiAgICAgICAgYm9yZGVyQ29sb3I9XCJiYWNrZ3JvdW5kLWRpc2FibGVkXCJcbiAgICAgICAgbWI9ezI0fVxuICAgICAgICBwYj17OH1cbiAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgID5cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICAgID5cbiAgICAgICAgICB7dGl0bGVQcm9wcyAmJiA8VGV4dCBtYj17NH0gey4uLnRpdGxlUHJvcHN9IC8+fVxuICAgICAgICAgIHtzZWxlY3RQcm9wcyAmJiAoXG4gICAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgIDxTdHlsZWRGb3JtR3JvdXBMYWJlbFxuICAgICAgICAgICAgICAgIGh0bWxGb3I9e3NvcnRTZWxlY3RJZH1cbiAgICAgICAgICAgICAgICBpc1NvbG9GaWVsZFxuICAgICAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7bWVyZ2VkVHJhbnNsYXRpb25zLnNvcnRMYWJlbH1cbiAgICAgICAgICAgICAgPC9TdHlsZWRGb3JtR3JvdXBMYWJlbD5cbiAgICAgICAgICAgICAgPFdpZHRoU2VsZWN0XG4gICAgICAgICAgICAgICAgc2l6ZVZhcmlhbnQ9XCJzbWFsbFwiXG4gICAgICAgICAgICAgICAgey4uLnNlbGVjdFByb3BzfVxuICAgICAgICAgICAgICAgIGlkPXtzb3J0U2VsZWN0SWR9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgPC9Cb3g+XG4gICAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8QmFyQ2hhcnRQcm92aWRlciB2YWx1ZT17Y29udGV4dFZhbHVlfT5cbiAgICAgIHt0aXRsZUNvbnRlbnR9XG4gICAgICA8Qm94IGFzPVwiZmlndXJlXCIgcG9zaXRpb249XCJyZWxhdGl2ZVwiIHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICA8U2NhbGVDaGFydEhlYWRlclxuICAgICAgICAgIGxhYmVsQ291bnQ9e3RpY2tDb3VudH1cbiAgICAgICAgICBtYXg9e21heFJhbmdlfVxuICAgICAgICAgIG1pbj17bWluUmFuZ2V9XG4gICAgICAgIC8+XG4gICAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiIHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICAgIDxHcmlkTGluZXMgbWF4PXttYXhSYW5nZX0gbWluPXttaW5SYW5nZX0gdGlja0NvdW50PXt0aWNrQ291bnR9IC8+XG4gICAgICAgICAgPEJhcnNMaXN0IGFyaWEtbGFiZWxsZWRieT17YXJpYUxhYmVsbGVkQnkgPz8gdGl0bGVJZH0+XG4gICAgICAgICAgICB7c29ydGVkQmFycy5tYXAoKGJhciwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgICAgY29uc3Qga2V5ID1cbiAgICAgICAgICAgICAgICBiYXIueUxhYmVsICYmIGJhci5zZXJpZXNPbmVWYWx1ZVxuICAgICAgICAgICAgICAgICAgPyBgJHtiYXIueUxhYmVsfS0ke2Jhci5zZXJpZXNPbmVWYWx1ZX0tJHtcbiAgICAgICAgICAgICAgICAgICAgICBiYXIuc2VyaWVzVHdvVmFsdWUgPz8gJydcbiAgICAgICAgICAgICAgICAgICAgfS0ke2luZGV4fWBcbiAgICAgICAgICAgICAgICAgIDogaW5kZXg7XG4gICAgICAgICAgICAgIHJldHVybiA8QmFyUm93IGluZGV4PXtpbmRleH0ga2V5PXtrZXl9IHsuLi5iYXJ9IC8+O1xuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgPC9CYXJzTGlzdD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxUZXh0XG4gICAgICAgICAgYXM9XCJmaWdjYXB0aW9uXCJcbiAgICAgICAgICBjb2xvcj1cInRleHQtZGlzYWJsZWRcIlxuICAgICAgICAgIGhpZGRlbj17aGlkZURlc2NyaXB0aW9ufVxuICAgICAgICAgIG10PXs4fVxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9Cb3g+XG4gICAgPC9CYXJDaGFydFByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */");
+const WidthSelect = /*#__PURE__*/_styled(Select, {
+  target: "ey39o7m0",
+  label: "WidthSelect"
+})(css({
+  width: 'max-content',
+  pr: 12
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYXJDaGFydC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJvQiIsImZpbGUiOiIuLi8uLi9zcmMvQmFyQ2hhcnQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUlkLCB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICcuLi9Cb3gnO1xuaW1wb3J0IHsgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi9Gb3JtJztcbmltcG9ydCB7IFNlbGVjdCB9IGZyb20gJy4uL0Zvcm0vaW5wdXRzL1NlbGVjdCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVHlwb2dyYXBoeS9UZXh0JztcbmltcG9ydCB7IEJhckNoYXJ0UHJvdmlkZXIgfSBmcm9tICcuL0JhckNoYXJ0UHJvdmlkZXInO1xuaW1wb3J0IHsgQmFyUm93IH0gZnJvbSAnLi9CYXJSb3cnO1xuaW1wb3J0IHsgR3JpZExpbmVzIH0gZnJvbSAnLi9sYXlvdXQvR3JpZExpbmVzJztcbmltcG9ydCB7IFNjYWxlQ2hhcnRIZWFkZXIgfSBmcm9tICcuL2xheW91dC9TY2FsZUNoYXJ0SGVhZGVyJztcbmltcG9ydCB7IEJhcnNMaXN0IH0gZnJvbSAnLi9zaGFyZWQvZWxlbWVudHMnO1xuaW1wb3J0IHtcbiAgQmFyQ2hhcnRUcmFuc2xhdGlvbnMsXG4gIGRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucyxcbn0gZnJvbSAnLi9zaGFyZWQvdHJhbnNsYXRpb25zJztcbmltcG9ydCB7IEJhckNoYXJ0UHJvcHMsIEJhclByb3BzLCBJbmZlckJhclR5cGUgfSBmcm9tICcuL3NoYXJlZC90eXBlcyc7XG5pbXBvcnQgeyB1c2VCYXJDaGFydCwgdXNlQmFyQ2hhcnRTb3J0IH0gZnJvbSAnLi91dGlscy9ob29rcyc7XG5cbmV4cG9ydCB0eXBlIHsgQmFyUHJvcHMsIEluZmVyQmFyVHlwZSwgQmFyQ2hhcnRUcmFuc2xhdGlvbnMgfTtcblxuY29uc3QgU3R5bGVkRm9ybUdyb3VwTGFiZWwgPSBzdHlsZWQoRm9ybUdyb3VwTGFiZWwpKFxuICBjc3Moe1xuICAgIG1yOiA4LFxuICAgIG10OiA0LFxuICB9KVxuKTtcbmNvbnN0IFdpZHRoU2VsZWN0ID0gc3R5bGVkKFNlbGVjdCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gICAgcHI6IDEyLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhckNoYXJ0ID0gPFxuICBUQmFyVmFsdWVzIGV4dGVuZHMgQmFyUHJvcHNbXSB8IHJlYWRvbmx5IEJhclByb3BzW10gPSBCYXJQcm9wc1tdXG4+KHtcbiAgJ2FyaWEtbGFiZWxsZWRieSc6IGFyaWFMYWJlbGxlZEJ5LFxuICBhbmltYXRlID0gZmFsc2UsXG4gIGJhclZhbHVlcyxcbiAgZGVzY3JpcHRpb24sXG4gIGhpZGVEZXNjcmlwdGlvbiA9IGZhbHNlLFxuICBoaWRlVGl0bGUgPSBmYWxzZSxcbiAgbWF4UmFuZ2UsXG4gIG1pblJhbmdlLFxuICBzb3J0Rm5zLFxuICBzdHlsZUNvbmZpZyxcbiAgdGl0bGUsXG4gIHRyYW5zbGF0aW9ucyxcbiAgdW5pdCA9ICcnLFxuICB4U2NhbGUsXG59OiBCYXJDaGFydFByb3BzPFRCYXJWYWx1ZXM+KSA9PiB7XG4gIGNvbnN0IG1lcmdlZFRyYW5zbGF0aW9ucyA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKHtcbiAgICAgIC4uLmRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucyxcbiAgICAgIC4uLnRyYW5zbGF0aW9ucyxcbiAgICAgIHNvcnRPcHRpb25zOiB7XG4gICAgICAgIC4uLmRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucy5zb3J0T3B0aW9ucyxcbiAgICAgICAgLi4udHJhbnNsYXRpb25zPy5zb3J0T3B0aW9ucyxcbiAgICAgIH0sXG4gICAgICBhY2Nlc3NpYmlsaXR5OiB7XG4gICAgICAgIC4uLmRlZmF1bHRCYXJDaGFydFRyYW5zbGF0aW9ucy5hY2Nlc3NpYmlsaXR5LFxuICAgICAgICAuLi50cmFuc2xhdGlvbnM/LmFjY2Vzc2liaWxpdHksXG4gICAgICB9LFxuICAgIH0pLFxuICAgIFt0cmFuc2xhdGlvbnNdXG4gICk7XG5cbiAgY29uc3QgeyBzb3J0ZWRCYXJzLCBzZWxlY3RQcm9wcyB9ID0gdXNlQmFyQ2hhcnRTb3J0PFRCYXJWYWx1ZXM+KHtcbiAgICBiYXJzOiBiYXJWYWx1ZXMsXG4gICAgc29ydEZucyxcbiAgICB0cmFuc2xhdGlvbnM6IG1lcmdlZFRyYW5zbGF0aW9ucyxcbiAgfSk7XG5cbiAgY29uc3QgY29udGV4dFZhbHVlID0gdXNlQmFyQ2hhcnQoe1xuICAgIG1pblJhbmdlLFxuICAgIG1heFJhbmdlLFxuICAgIHhTY2FsZSxcbiAgICB1bml0LFxuICAgIHN0eWxlQ29uZmlnLFxuICAgIGFuaW1hdGUsXG4gICAgYmFyQ291bnQ6IHNvcnRlZEJhcnM/Lmxlbmd0aCxcbiAgICB0cmFuc2xhdGlvbnM6IG1lcmdlZFRyYW5zbGF0aW9ucyxcbiAgfSk7XG5cbiAgY29uc3QgdGlja0NvdW50ID0gTWF0aC5jZWlsKChtYXhSYW5nZSAtIG1pblJhbmdlKSAvIGNvbnRleHRWYWx1ZS54U2NhbGUpICsgMTtcblxuICBjb25zdCB0aXRsZUlkID0gdXNlSWQoKTtcbiAgY29uc3Qgc29ydFNlbGVjdElkID0gdXNlSWQoKTtcblxuICBjb25zdCB0aXRsZVByb3BzID1cbiAgICB0eXBlb2YgdGl0bGUgPT09ICdzdHJpbmcnXG4gICAgICA/IHtcbiAgICAgICAgICBhczogJ2gyJyBhcyBjb25zdCxcbiAgICAgICAgICBjaGlsZHJlbjogdGl0bGUsXG4gICAgICAgICAgaGlkZGVuOiBoaWRlVGl0bGUsXG4gICAgICAgICAgaWQ6IHRpdGxlSWQsXG4gICAgICAgICAgdmFyaWFudDogJ3RpdGxlLXhzJyBhcyBjb25zdCxcbiAgICAgICAgfVxuICAgICAgOiB0aXRsZVxuICAgICAgPyB7IC4uLnRpdGxlLCBjaGlsZHJlbjogdGl0bGUudGl0bGUsIGhpZGRlbjogaGlkZVRpdGxlLCBpZDogdGl0bGVJZCB9XG4gICAgICA6IG51bGw7XG5cbiAgY29uc3QgdGl0bGVDb250ZW50ID1cbiAgICAodGl0bGUgJiYgIWhpZGVUaXRsZSkgfHwgc2VsZWN0UHJvcHMgPyAoXG4gICAgICA8Qm94XG4gICAgICAgIGJvcmRlckJvdHRvbT17MX1cbiAgICAgICAgYm9yZGVyQ29sb3I9XCJiYWNrZ3JvdW5kLWRpc2FibGVkXCJcbiAgICAgICAgbWI9ezI0fVxuICAgICAgICBwYj17OH1cbiAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgID5cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICAgID5cbiAgICAgICAgICB7dGl0bGVQcm9wcyAmJiA8VGV4dCBtYj17NH0gey4uLnRpdGxlUHJvcHN9IC8+fVxuICAgICAgICAgIHtzZWxlY3RQcm9wcyAmJiAoXG4gICAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgIDxTdHlsZWRGb3JtR3JvdXBMYWJlbFxuICAgICAgICAgICAgICAgIGh0bWxGb3I9e3NvcnRTZWxlY3RJZH1cbiAgICAgICAgICAgICAgICBpc1NvbG9GaWVsZFxuICAgICAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7bWVyZ2VkVHJhbnNsYXRpb25zLnNvcnRMYWJlbH1cbiAgICAgICAgICAgICAgPC9TdHlsZWRGb3JtR3JvdXBMYWJlbD5cbiAgICAgICAgICAgICAgPFdpZHRoU2VsZWN0XG4gICAgICAgICAgICAgICAgc2l6ZVZhcmlhbnQ9XCJzbWFsbFwiXG4gICAgICAgICAgICAgICAgey4uLnNlbGVjdFByb3BzfVxuICAgICAgICAgICAgICAgIGlkPXtzb3J0U2VsZWN0SWR9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgPC9Cb3g+XG4gICAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8QmFyQ2hhcnRQcm92aWRlciB2YWx1ZT17Y29udGV4dFZhbHVlfT5cbiAgICAgIHt0aXRsZUNvbnRlbnR9XG4gICAgICA8Qm94IGFzPVwiZmlndXJlXCIgcG9zaXRpb249XCJyZWxhdGl2ZVwiIHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICA8U2NhbGVDaGFydEhlYWRlclxuICAgICAgICAgIGxhYmVsQ291bnQ9e3RpY2tDb3VudH1cbiAgICAgICAgICBtYXg9e21heFJhbmdlfVxuICAgICAgICAgIG1pbj17bWluUmFuZ2V9XG4gICAgICAgIC8+XG4gICAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiIHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICAgIDxHcmlkTGluZXMgbWF4PXttYXhSYW5nZX0gbWluPXttaW5SYW5nZX0gdGlja0NvdW50PXt0aWNrQ291bnR9IC8+XG4gICAgICAgICAgPEJhcnNMaXN0IGFyaWEtbGFiZWxsZWRieT17YXJpYUxhYmVsbGVkQnkgPz8gdGl0bGVJZH0+XG4gICAgICAgICAgICB7c29ydGVkQmFycy5tYXAoKGJhciwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgICAgY29uc3Qga2V5ID1cbiAgICAgICAgICAgICAgICBiYXIueUxhYmVsICYmIGJhci5zZXJpZXNPbmVWYWx1ZVxuICAgICAgICAgICAgICAgICAgPyBgJHtiYXIueUxhYmVsfS0ke2Jhci5zZXJpZXNPbmVWYWx1ZX0tJHtcbiAgICAgICAgICAgICAgICAgICAgICBiYXIuc2VyaWVzVHdvVmFsdWUgPz8gJydcbiAgICAgICAgICAgICAgICAgICAgfS0ke2luZGV4fWBcbiAgICAgICAgICAgICAgICAgIDogaW5kZXg7XG4gICAgICAgICAgICAgIHJldHVybiA8QmFyUm93IGluZGV4PXtpbmRleH0ga2V5PXtrZXl9IHsuLi5iYXJ9IC8+O1xuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgPC9CYXJzTGlzdD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxUZXh0XG4gICAgICAgICAgYXM9XCJmaWdjYXB0aW9uXCJcbiAgICAgICAgICBjb2xvcj1cInRleHQtZGlzYWJsZWRcIlxuICAgICAgICAgIGhpZGRlbj17aGlkZURlc2NyaXB0aW9ufVxuICAgICAgICAgIG10PXs4fVxuICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9Cb3g+XG4gICAgPC9CYXJDaGFydFByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */");
+export const BarChart = ({
+  'aria-labelledby': ariaLabelledBy,
+  animate = false,
+  barValues,
+  description,
+  hideDescription = false,
+  hideTitle = false,
+  maxRange,
+  minRange,
+  sortFns,
+  styleConfig,
+  title,
+  translations,
+  unit = '',
+  xScale
+}) => {
+  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({
+    minRange,
+    maxRange,
+    xScale,
+    unit,
+    styleConfig,
+    animate,
+    barCount: sortedBars?.length,
+    translations: mergedTranslations
+  });
+  const tickCount = Math.ceil((maxRange - minRange) / contextValue.xScale) + 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
+        })]
+      })]
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs(BarChartProvider, {
+    value: contextValue,
+    children: [titleContent, /*#__PURE__*/_jsxs(Box, {
+      as: "figure",
+      position: "relative",
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(ScaleChartHeader, {
+        labelCount: tickCount,
+        max: maxRange,
+        min: minRange
+      }), /*#__PURE__*/_jsxs(Box, {
+        position: "relative",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(GridLines, {
+          max: maxRange,
+          min: minRange,
+          tickCount: tickCount
+        }), /*#__PURE__*/_jsx(BarsList, {
+          "aria-labelledby": ariaLabelledBy ?? titleId,
+          children: sortedBars.map((bar, index) => {
+            const key = bar.yLabel && bar.seriesOneValue ? `${bar.yLabel}-${bar.seriesOneValue}-${bar.seriesTwoValue ?? ''}-${index}` : index;
+            return /*#__PURE__*/_jsx(BarRow, {
+              index: index,
+              ...bar
+            }, key);
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        as: "figcaption",
+        color: "text-disabled",
+        hidden: hideDescription,
+        mt: 8,
+        variant: "p-small",
+        children: description
+      })]
+    })]
+  });
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface GridLinesProps {
+    tickCount: number;
+    min: number;
+    max: number;
+}
+export declare const GridLines: React.FC<GridLinesProps>;

package/dist/BarChart/layout/GridLines.js

@@ -0,0 +1,78 @@
+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 { VerticalSpacer } from './VerticalSpacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridLineWrapper = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk2",
+  label: "GridLineWrapper"
+})(css({
+  bottom: 0,
+  left: 0,
+  pointerEvents: 'none',
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  zIndex: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L2xheW91dC9HcmlkTGluZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgdXNlTGFiZWxQb3NpdGlvbnMgfSBmcm9tICcuLi91dGlscy9ob29rcyc7XG5pbXBvcnQgeyBWZXJ0aWNhbFNwYWNlciB9IGZyb20gJy4vVmVydGljYWxTcGFjZXInO1xuXG5jb25zdCBHcmlkTGluZVdyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBib3R0b206IDAsXG4gICAgbGVmdDogMCxcbiAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgcmlnaHQ6IDAsXG4gICAgdG9wOiAwLFxuICAgIHpJbmRleDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lQ29udGFpbmVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm9yZGVyQ29sb3I6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlclJpZ2h0OiAxLFxuICAgIGJvdHRvbTogMCxcbiAgICBkaXNwbGF5OiB7IF86ICdub25lJywgeHM6ICdibG9jaycgfSxcbiAgICBsZWZ0OiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHJpZ2h0OiAwLFxuICAgIHRvcDogMCxcbiAgfSlcbik7XG5cbmNvbnN0IEdyaWRMaW5lID0gc3R5bGVkKEJveCk8eyBwb3NpdGlvblBlcmNlbnQ6IG51bWJlciB9PihcbiAgY3NzKHtcbiAgICBib3JkZXJMZWZ0OiAxLFxuICAgIGJvcmRlckNvbG9yTGVmdDogJ2JhY2tncm91bmQtZGlzYWJsZWQnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICB3aWR0aDogMCxcbiAgfSksXG4gICh7IHBvc2l0aW9uUGVyY2VudCB9KSA9PiAoe1xuICAgIGxlZnQ6IGAke3Bvc2l0aW9uUGVyY2VudH0lYCxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKC01MCUpJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZExpbmVzUHJvcHMge1xuICB0aWNrQ291bnQ6IG51bWJlcjtcbiAgbWluOiBudW1iZXI7XG4gIG1heDogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgR3JpZExpbmVzOiBSZWFjdC5GQzxHcmlkTGluZXNQcm9wcz4gPSAoe1xuICB0aWNrQ291bnQsXG4gIG1pbixcbiAgbWF4LFxufSkgPT4ge1xuICBjb25zdCBsYWJlbFBvc2l0aW9ucyA9IHVzZUxhYmVsUG9zaXRpb25zKHsgbWluLCBtYXgsIGNvdW50OiB0aWNrQ291bnQgfSk7XG5cbiAgY29uc3QgbGluZXMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBsYWJlbFBvc2l0aW9ucy5tYXAoKHsgcG9zaXRpb25QZXJjZW50LCB2YWx1ZSB9KSA9PiAoXG4gICAgICAgIDxHcmlkTGluZVxuICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAga2V5PXtgZ3JpZGxpbmUtJHt2YWx1ZX0tJHtwb3NpdGlvblBlcmNlbnR9YH1cbiAgICAgICAgICBwb3NpdGlvblBlcmNlbnQ9e3Bvc2l0aW9uUGVyY2VudH1cbiAgICAgICAgLz5cbiAgICAgICkpLFxuICAgIFtsYWJlbFBvc2l0aW9uc11cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxHcmlkTGluZVdyYXBwZXIgYXJpYS1oaWRkZW4+XG4gICAgICA8VmVydGljYWxTcGFjZXI+XG4gICAgICAgIDxHcmlkTGluZUNvbnRhaW5lcj57bGluZXN9PC9HcmlkTGluZUNvbnRhaW5lcj5cbiAgICAgIDwvVmVydGljYWxTcGFjZXI+XG4gICAgPC9HcmlkTGluZVdyYXBwZXI+XG4gICk7XG59O1xuIl19 */");
+const GridLineContainer = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk1",
+  label: "GridLineContainer"
+})(css({
+  borderColor: 'background-disabled',
+  borderLeft: 1,
+  borderRight: 1,
+  bottom: 0,
+  display: {
+    _: 'none',
+    xs: 'block'
+  },
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgVmVydGljYWxTcGFjZXIgfSBmcm9tICcuL1ZlcnRpY2FsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm90dG9tOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHJpZ2h0OiAwLFxuICAgIHRvcDogMCxcbiAgICB6SW5kZXg6IDAsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZUNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJSaWdodDogMSxcbiAgICBib3R0b206IDAsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIHhzOiAnYmxvY2snIH0sXG4gICAgbGVmdDogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICByaWdodDogMCxcbiAgICB0b3A6IDAsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEdyaWRMaW5lc1Byb3BzIHtcbiAgdGlja0NvdW50OiBudW1iZXI7XG4gIG1pbjogbnVtYmVyO1xuICBtYXg6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lczogUmVhY3QuRkM8R3JpZExpbmVzUHJvcHM+ID0gKHtcbiAgdGlja0NvdW50LFxuICBtaW4sXG4gIG1heCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7IG1pbiwgbWF4LCBjb3VudDogdGlja0NvdW50IH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgICAgICA8R3JpZExpbmVcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgIC8+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+const GridLine = /*#__PURE__*/_styled(Box, {
+  target: "ejng4zk0",
+  label: "GridLine"
+})(css({
+  borderLeft: 1,
+  borderColorLeft: 'background-disabled',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  width: 0
+}), ({
+  positionPercent
+}) => ({
+  left: `${positionPercent}%`,
+  transform: 'translateX(-50%)'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQ2lCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9CYXJDaGFydC9sYXlvdXQvR3JpZExpbmVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcbmltcG9ydCB7IHVzZUxhYmVsUG9zaXRpb25zIH0gZnJvbSAnLi4vdXRpbHMvaG9va3MnO1xuaW1wb3J0IHsgVmVydGljYWxTcGFjZXIgfSBmcm9tICcuL1ZlcnRpY2FsU3BhY2VyJztcblxuY29uc3QgR3JpZExpbmVXcmFwcGVyID0gc3R5bGVkKEJveCkoXG4gIGNzcyh7XG4gICAgYm90dG9tOiAwLFxuICAgIGxlZnQ6IDAsXG4gICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHJpZ2h0OiAwLFxuICAgIHRvcDogMCxcbiAgICB6SW5kZXg6IDAsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZUNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJvcmRlckNvbG9yOiAnYmFja2dyb3VuZC1kaXNhYmxlZCcsXG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJSaWdodDogMSxcbiAgICBib3R0b206IDAsXG4gICAgZGlzcGxheTogeyBfOiAnbm9uZScsIHhzOiAnYmxvY2snIH0sXG4gICAgbGVmdDogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICByaWdodDogMCxcbiAgICB0b3A6IDAsXG4gIH0pXG4pO1xuXG5jb25zdCBHcmlkTGluZSA9IHN0eWxlZChCb3gpPHsgcG9zaXRpb25QZXJjZW50OiBudW1iZXIgfT4oXG4gIGNzcyh7XG4gICAgYm9yZGVyTGVmdDogMSxcbiAgICBib3JkZXJDb2xvckxlZnQ6ICdiYWNrZ3JvdW5kLWRpc2FibGVkJyxcbiAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgd2lkdGg6IDAsXG4gIH0pLFxuICAoeyBwb3NpdGlvblBlcmNlbnQgfSkgPT4gKHtcbiAgICBsZWZ0OiBgJHtwb3NpdGlvblBlcmNlbnR9JWAsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEdyaWRMaW5lc1Byb3BzIHtcbiAgdGlja0NvdW50OiBudW1iZXI7XG4gIG1pbjogbnVtYmVyO1xuICBtYXg6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lczogUmVhY3QuRkM8R3JpZExpbmVzUHJvcHM+ID0gKHtcbiAgdGlja0NvdW50LFxuICBtaW4sXG4gIG1heCxcbn0pID0+IHtcbiAgY29uc3QgbGFiZWxQb3NpdGlvbnMgPSB1c2VMYWJlbFBvc2l0aW9ucyh7IG1pbiwgbWF4LCBjb3VudDogdGlja0NvdW50IH0pO1xuXG4gIGNvbnN0IGxpbmVzID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgbGFiZWxQb3NpdGlvbnMubWFwKCh7IHBvc2l0aW9uUGVyY2VudCwgdmFsdWUgfSkgPT4gKFxuICAgICAgICA8R3JpZExpbmVcbiAgICAgICAgICBhcmlhLWhpZGRlblxuICAgICAgICAgIGtleT17YGdyaWRsaW5lLSR7dmFsdWV9LSR7cG9zaXRpb25QZXJjZW50fWB9XG4gICAgICAgICAgcG9zaXRpb25QZXJjZW50PXtwb3NpdGlvblBlcmNlbnR9XG4gICAgICAgIC8+XG4gICAgICApKSxcbiAgICBbbGFiZWxQb3NpdGlvbnNdXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8R3JpZExpbmVXcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgPFZlcnRpY2FsU3BhY2VyPlxuICAgICAgICA8R3JpZExpbmVDb250YWluZXI+e2xpbmVzfTwvR3JpZExpbmVDb250YWluZXI+XG4gICAgICA8L1ZlcnRpY2FsU3BhY2VyPlxuICAgIDwvR3JpZExpbmVXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+export const GridLines = ({
+  tickCount,
+  min,
+  max
+}) => {
+  const labelPositions = useLabelPositions({
+    min,
+    max,
+    count: 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(VerticalSpacer, {
+      children: /*#__PURE__*/_jsx(GridLineContainer, {
+        children: lines
+      })
+    })
+  });
+};

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

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