@codecademy/gamut 68.2.3-alpha.e63333.0 → 68.2.3-alpha.f19d29.0

package/dist/DatePicker/Calendar/utils/elements.js

@@ -0,0 +1,116 @@
+import _styled from "@emotion/styled/base";
+import { css, states, transitionConcat } from '@codecademy/gamut-styles';
+export const CalendarTable = /*#__PURE__*/_styled("table", {
+  target: "eyan6kk2",
+  label: "CalendarTable"
+})(css({
+  /** Row gaps only: 0 between columns, 8px token between rows (incl. under header). */
+  borderCollapse: 'separate',
+  borderSpacing: '0 8px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL3V0aWxzL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJNkIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0RhdGVQaWNrZXIvQ2FsZW5kYXIvdXRpbHMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRyYW5zaXRpb25Db25jYXQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IENhbGVuZGFyVGFibGUgPSBzdHlsZWQudGFibGUoXG4gIGNzcyh7XG4gICAgLyoqIFJvdyBnYXBzIG9ubHk6IDAgYmV0d2VlbiBjb2x1bW5zLCA4cHggdG9rZW4gYmV0d2VlbiByb3dzIChpbmNsLiB1bmRlciBoZWFkZXIpLiAqL1xuICAgIGJvcmRlckNvbGxhcHNlOiAnc2VwYXJhdGUnLFxuICAgIGJvcmRlclNwYWNpbmc6ICcwIDhweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGgoXG4gIGNzcyh7XG4gICAgZm9udFNpemU6IDE0LFxuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5jb25zdCBkYXRlY2VsbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGlzVG9kYXk6IHtcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGJvdHRvbTogNCxcbiAgICAgIC8vIEhhbGYgb2YgZG90IHdpZHRoICg0cHgpIHNvIHRoZSBtYXJrZXIgc2l0cyB1bmRlciB0aGUgY2VudGVyZWQgZGF0ZSBudW1lcmFsLlxuICAgICAgaW5zZXRJbmxpbmVTdGFydDogJ2NhbGMoNTAlIC0gMnB4KScsXG4gICAgICB3aWR0aDogNCxcbiAgICAgIGhlaWdodDogNCxcbiAgICAgIGJvcmRlclJhZGl1czogJ2Z1bGwnLFxuICAgICAgYmc6ICdoeXBlcicsXG4gICAgfSxcbiAgfSxcbiAgaXNTZWxlY3RlZDoge1xuICAgIGJnOiAndGV4dCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzUmFuZ2VTdGFydDoge1xuICAgIGJvcmRlclJhZGl1c1JpZ2h0OiAnbm9uZScsXG4gIH0sXG4gIGlzUmFuZ2VFbmQ6IHtcbiAgICBib3JkZXJSYWRpdXNMZWZ0OiAnbm9uZScsXG4gIH0sXG4gIGlzSW5SYW5nZToge1xuICAgIGJnOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICBib3JkZXJSYWRpdXM6ICdub25lJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzRGlzYWJsZWQ6IHtcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICB1c2VyU2VsZWN0OiAnbm9uZScsXG4gICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICAgY3Vyc29yOiAnbm90LWFsbG93ZWQnLFxuICAgICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIH0sXG4gIH0sXG59KTtcblxudHlwZSBEYXRlQ2VsbFByb3BzID0gU3R5bGVQcm9wczx0eXBlb2YgZGF0ZWNlbGxTdGF0ZXM+O1xuXG5leHBvcnQgY29uc3QgRGF0ZUNlbGwgPSBzdHlsZWQudGQ8RGF0ZUNlbGxQcm9wcz4oXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gICAgaGVpZ2h0OiAnMzJweCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgWydib3JkZXItY29sb3InLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAnZmFzdCcsXG4gICAgICAnZWFzZS1pbidcbiAgICApLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICAgIFsnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAgICdmYXN0JyxcbiAgICAgICAgJ2Vhc2UtaW4nXG4gICAgICApLFxuICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgIH0sXG4gICAgJyY6YWN0aXZlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGluc2V0OiAtMyxcbiAgICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgICAgIGJvcmRlcjogMixcbiAgICAgIG9wYWNpdHk6IDAsXG4gICAgICB6SW5kZXg6IDAsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlOjpiZWZvcmUnOiB7XG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gIH0pLFxuICBkYXRlY2VsbFN0YXRlc1xuKTtcbiJdfQ== */");
+export const TableHeader = /*#__PURE__*/_styled("th", {
+  target: "eyan6kk1",
+  label: "TableHeader"
+})(css({
+  fontSize: 14,
+  fontWeight: 'base',
+  color: 'text-disabled',
+  textAlign: 'center'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL3V0aWxzL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZMkIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0RhdGVQaWNrZXIvQ2FsZW5kYXIvdXRpbHMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRyYW5zaXRpb25Db25jYXQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IENhbGVuZGFyVGFibGUgPSBzdHlsZWQudGFibGUoXG4gIGNzcyh7XG4gICAgLyoqIFJvdyBnYXBzIG9ubHk6IDAgYmV0d2VlbiBjb2x1bW5zLCA4cHggdG9rZW4gYmV0d2VlbiByb3dzIChpbmNsLiB1bmRlciBoZWFkZXIpLiAqL1xuICAgIGJvcmRlckNvbGxhcHNlOiAnc2VwYXJhdGUnLFxuICAgIGJvcmRlclNwYWNpbmc6ICcwIDhweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGgoXG4gIGNzcyh7XG4gICAgZm9udFNpemU6IDE0LFxuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5jb25zdCBkYXRlY2VsbFN0YXRlcyA9IHN0YXRlcyh7XG4gIGlzVG9kYXk6IHtcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGJvdHRvbTogNCxcbiAgICAgIC8vIEhhbGYgb2YgZG90IHdpZHRoICg0cHgpIHNvIHRoZSBtYXJrZXIgc2l0cyB1bmRlciB0aGUgY2VudGVyZWQgZGF0ZSBudW1lcmFsLlxuICAgICAgaW5zZXRJbmxpbmVTdGFydDogJ2NhbGMoNTAlIC0gMnB4KScsXG4gICAgICB3aWR0aDogNCxcbiAgICAgIGhlaWdodDogNCxcbiAgICAgIGJvcmRlclJhZGl1czogJ2Z1bGwnLFxuICAgICAgYmc6ICdoeXBlcicsXG4gICAgfSxcbiAgfSxcbiAgaXNTZWxlY3RlZDoge1xuICAgIGJnOiAndGV4dCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzUmFuZ2VTdGFydDoge1xuICAgIGJvcmRlclJhZGl1c1JpZ2h0OiAnbm9uZScsXG4gIH0sXG4gIGlzUmFuZ2VFbmQ6IHtcbiAgICBib3JkZXJSYWRpdXNMZWZ0OiAnbm9uZScsXG4gIH0sXG4gIGlzSW5SYW5nZToge1xuICAgIGJnOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICBib3JkZXJSYWRpdXM6ICdub25lJyxcbiAgICAnJjpob3ZlciwgJjpmb2N1cyc6IHtcbiAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgfSxcbiAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gIH0sXG4gIGlzRGlzYWJsZWQ6IHtcbiAgICBjb2xvcjogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICB1c2VyU2VsZWN0OiAnbm9uZScsXG4gICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICAgIGJnOiAndHJhbnNwYXJlbnQnLFxuICAgICAgdGV4dERlY29yYXRpb246ICdsaW5lLXRocm91Z2gnLFxuICAgICAgY3Vyc29yOiAnbm90LWFsbG93ZWQnLFxuICAgICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIH0sXG4gIH0sXG59KTtcblxudHlwZSBEYXRlQ2VsbFByb3BzID0gU3R5bGVQcm9wczx0eXBlb2YgZGF0ZWNlbGxTdGF0ZXM+O1xuXG5leHBvcnQgY29uc3QgRGF0ZUNlbGwgPSBzdHlsZWQudGQ8RGF0ZUNlbGxQcm9wcz4oXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gICAgaGVpZ2h0OiAnMzJweCcsXG4gICAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgWydib3JkZXItY29sb3InLCAnY29sb3InLCAnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAnZmFzdCcsXG4gICAgICAnZWFzZS1pbidcbiAgICApLFxuICAgICcmOmhvdmVyJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgYmc6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbiAgICAgIHRyYW5zaXRpb246IHRyYW5zaXRpb25Db25jYXQoXG4gICAgICAgIFsnYmFja2dyb3VuZC1jb2xvcicsICdib3gtc2hhZG93J10sXG4gICAgICAgICdmYXN0JyxcbiAgICAgICAgJ2Vhc2UtaW4nXG4gICAgICApLFxuICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICdzZWNvbmRhcnknLFxuICAgICAgb3V0bGluZTogJ25vbmUnLFxuICAgIH0sXG4gICAgJyY6YWN0aXZlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGluc2V0OiAtMyxcbiAgICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgICAgIGJvcmRlcjogMixcbiAgICAgIG9wYWNpdHk6IDAsXG4gICAgICB6SW5kZXg6IDAsXG4gICAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlOjpiZWZvcmUnOiB7XG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gIH0pLFxuICBkYXRlY2VsbFN0YXRlc1xuKTtcbiJdfQ== */");
+const datecellStates = states({
+  isToday: {
+    position: 'relative',
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      bottom: 4,
+      // Half of dot width (4px) so the marker sits under the centered date numeral.
+      insetInlineStart: 'calc(50% - 2px)',
+      width: 4,
+      height: 4,
+      borderRadius: 'full',
+      bg: 'hyper'
+    }
+  },
+  isSelected: {
+    bg: 'text',
+    color: 'background',
+    '&:hover, &:focus': {
+      bg: 'secondary-hover',
+      color: 'background'
+    },
+    '&::after': {
+      bg: 'background'
+    }
+  },
+  isRangeStart: {
+    borderRadiusRight: 'none'
+  },
+  isRangeEnd: {
+    borderRadiusLeft: 'none'
+  },
+  isInRange: {
+    bg: 'text-disabled',
+    color: 'background',
+    borderRadius: 'none',
+    '&:hover, &:focus': {
+      bg: 'secondary-hover',
+      color: 'background'
+    },
+    '&::after': {
+      bg: 'background'
+    }
+  },
+  isDisabled: {
+    color: 'text-disabled',
+    bg: 'transparent',
+    cursor: 'not-allowed',
+    userSelect: 'none',
+    textDecoration: 'line-through',
+    '&:hover': {
+      color: 'text-disabled',
+      bg: 'transparent',
+      textDecoration: 'line-through',
+      cursor: 'not-allowed',
+      userSelect: 'none'
+    }
+  }
+});
+export const DateCell = /*#__PURE__*/_styled("td", {
+  target: "eyan6kk0",
+  label: "DateCell"
+})(css({
+  fontWeight: 'base',
+  width: '32px',
+  height: '32px',
+  textAlign: 'center',
+  padding: 0,
+  position: 'relative',
+  borderRadius: 'md',
+  transition: transitionConcat(['border-color', 'color', 'background-color', 'box-shadow'], 'fast', 'ease-in'),
+  '&:hover': {
+    color: 'secondary',
+    bg: 'background-hover',
+    transition: transitionConcat(['background-color', 'box-shadow'], 'fast', 'ease-in'),
+    cursor: 'pointer'
+  },
+  '&:focus-visible': {
+    color: 'secondary',
+    outline: 'none'
+  },
+  '&:active': {
+    color: 'text'
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    inset: -3,
+    borderRadius: 'lg',
+    border: 2,
+    opacity: 0,
+    zIndex: 0
+  },
+  '&:focus-visible::before': {
+    opacity: 1
+  }
+}), datecellStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL3V0aWxzL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRndCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL3V0aWxzL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgc3RhdGVzLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBDYWxlbmRhclRhYmxlID0gc3R5bGVkLnRhYmxlKFxuICBjc3Moe1xuICAgIC8qKiBSb3cgZ2FwcyBvbmx5OiAwIGJldHdlZW4gY29sdW1ucywgOHB4IHRva2VuIGJldHdlZW4gcm93cyAoaW5jbC4gdW5kZXIgaGVhZGVyKS4gKi9cbiAgICBib3JkZXJDb2xsYXBzZTogJ3NlcGFyYXRlJyxcbiAgICBib3JkZXJTcGFjaW5nOiAnMCA4cHgnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFRhYmxlSGVhZGVyID0gc3R5bGVkLnRoKFxuICBjc3Moe1xuICAgIGZvbnRTaXplOiAxNCxcbiAgICBmb250V2VpZ2h0OiAnYmFzZScsXG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB9KVxuKTtcblxuY29uc3QgZGF0ZWNlbGxTdGF0ZXMgPSBzdGF0ZXMoe1xuICBpc1RvZGF5OiB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBib3R0b206IDQsXG4gICAgICAvLyBIYWxmIG9mIGRvdCB3aWR0aCAoNHB4KSBzbyB0aGUgbWFya2VyIHNpdHMgdW5kZXIgdGhlIGNlbnRlcmVkIGRhdGUgbnVtZXJhbC5cbiAgICAgIGluc2V0SW5saW5lU3RhcnQ6ICdjYWxjKDUwJSAtIDJweCknLFxuICAgICAgd2lkdGg6IDQsXG4gICAgICBoZWlnaHQ6IDQsXG4gICAgICBib3JkZXJSYWRpdXM6ICdmdWxsJyxcbiAgICAgIGJnOiAnaHlwZXInLFxuICAgIH0sXG4gIH0sXG4gIGlzU2VsZWN0ZWQ6IHtcbiAgICBiZzogJ3RleHQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc1JhbmdlU3RhcnQ6IHtcbiAgICBib3JkZXJSYWRpdXNSaWdodDogJ25vbmUnLFxuICB9LFxuICBpc1JhbmdlRW5kOiB7XG4gICAgYm9yZGVyUmFkaXVzTGVmdDogJ25vbmUnLFxuICB9LFxuICBpc0luUmFuZ2U6IHtcbiAgICBiZzogJ3RleHQtZGlzYWJsZWQnLFxuICAgIGNvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbm9uZScsXG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiZzogJ3NlY29uZGFyeS1ob3ZlcicsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgIH0sXG4gICAgJyY6OmFmdGVyJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgICB9LFxuICB9LFxuICBpc0Rpc2FibGVkOiB7XG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICBjdXJzb3I6ICdub3QtYWxsb3dlZCcsXG4gICAgdXNlclNlbGVjdDogJ25vbmUnLFxuICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgICBiZzogJ3RyYW5zcGFyZW50JyxcbiAgICAgIHRleHREZWNvcmF0aW9uOiAnbGluZS10aHJvdWdoJyxcbiAgICAgIGN1cnNvcjogJ25vdC1hbGxvd2VkJyxcbiAgICAgIHVzZXJTZWxlY3Q6ICdub25lJyxcbiAgICB9LFxuICB9LFxufSk7XG5cbnR5cGUgRGF0ZUNlbGxQcm9wcyA9IFN0eWxlUHJvcHM8dHlwZW9mIGRhdGVjZWxsU3RhdGVzPjtcblxuZXhwb3J0IGNvbnN0IERhdGVDZWxsID0gc3R5bGVkLnRkPERhdGVDZWxsUHJvcHM+KFxuICBjc3Moe1xuICAgIGZvbnRXZWlnaHQ6ICdiYXNlJyxcbiAgICB3aWR0aDogJzMycHgnLFxuICAgIGhlaWdodDogJzMycHgnLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBib3JkZXJSYWRpdXM6ICdtZCcsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChcbiAgICAgIFsnYm9yZGVyLWNvbG9yJywgJ2NvbG9yJywgJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgJ2Zhc3QnLFxuICAgICAgJ2Vhc2UtaW4nXG4gICAgKSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIGJnOiAnYmFja2dyb3VuZC1ob3ZlcicsXG4gICAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFxuICAgICAgICBbJ2JhY2tncm91bmQtY29sb3InLCAnYm94LXNoYWRvdyddLFxuICAgICAgICAnZmFzdCcsXG4gICAgICAgICdlYXNlLWluJ1xuICAgICAgKSxcbiAgICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIGNvbG9yOiAnc2Vjb25kYXJ5JyxcbiAgICAgIG91dGxpbmU6ICdub25lJyxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGNvbG9yOiAndGV4dCcsXG4gICAgfSxcbiAgICAnJjo6YmVmb3JlJzoge1xuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBpbnNldDogLTMsXG4gICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICBib3JkZXI6IDIsXG4gICAgICBvcGFjaXR5OiAwLFxuICAgICAgekluZGV4OiAwLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZTo6YmVmb3JlJzoge1xuICAgICAgb3BhY2l0eTogMSxcbiAgICB9LFxuICB9KSxcbiAgZGF0ZWNlbGxTdGF0ZXNcbik7XG4iXX0= */");

package/dist/DatePicker/Calendar/utils/format.d.ts

@@ -0,0 +1,28 @@
+import type { IsoWeekday } from '../../utils/locale';
+/**
+ * Capitalize the first character of a string using the locale; rest unchanged (e.g. "next month" → "Next month").
+ */
+export declare const capitalizeFirst: (str: string, locale: Intl.Locale) => string;
+/**
+ * Format month and year for the calendar header (e.g. "February 2026").
+ */
+export declare const formatMonthYear: (date: Date, locale: Intl.Locale) => string;
+/**
+ * Get weekday names for column headers or abbr attributes.
+ * Column order follows `firstWeekday` (ISO 1 = Monday … 7 = Sunday), matching `Intl.Locale#getWeekInfo().firstDay`.
+ * @param format - 'short' for abbreviated (e.g. "Su", "Mo"), 'long' for full (e.g. "Sunday", "Monday")
+ */
+export declare const getWeekdayNames: (format: "short" | "long", locale: Intl.Locale, firstWeekday: IsoWeekday) => string[];
+/**
+ * Get localized "next month" and "previous month" labels for calendar nav.
+ * Uses Intl.RelativeTimeFormat with numeric: "auto" (e.g. "next month", "last month").
+ */
+export declare const getRelativeMonthLabels: (locale: Intl.Locale) => {
+    nextMonth: string;
+    lastMonth: string;
+};
+/**
+ * Get localized "today" label (e.g. "today").
+ */
+export declare const getRelativeTodayLabel: (locale: Intl.Locale) => string;
+export declare const formatDateForAriaLabel: (date: Date, locale: Intl.Locale) => string;

package/dist/DatePicker/Calendar/utils/format.js

@@ -0,0 +1,72 @@
+import { stringifyLocale } from '../../utils/locale';
+
+/**
+ * Capitalize the first character of a string using the locale; rest unchanged (e.g. "next month" → "Next month").
+ */
+export const capitalizeFirst = (str, locale) => str.length === 0 ? str : str[0].toLocaleUpperCase(stringifyLocale(locale)) + str.slice(1);
+
+/**
+ * Format month and year for the calendar header (e.g. "February 2026").
+ */
+export const formatMonthYear = (date, locale) => {
+  return new Intl.DateTimeFormat(stringifyLocale(locale), {
+    month: 'long',
+    year: 'numeric'
+  }).format(date);
+};
+
+/**
+ * Get weekday names for column headers or abbr attributes.
+ * Column order follows `firstWeekday` (ISO 1 = Monday … 7 = Sunday), matching `Intl.Locale#getWeekInfo().firstDay`.
+ * @param format - 'short' for abbreviated (e.g. "Su", "Mo"), 'long' for full (e.g. "Sunday", "Monday")
+ */
+export const getWeekdayNames = (format, locale, firstWeekday) => {
+  const formatter = new Intl.DateTimeFormat(stringifyLocale(locale), {
+    weekday: format
+  });
+  const monday = new Date(2024, 0, 8);
+  const namesMonToSun = Array.from({
+    length: 7
+  }, (_, i) => {
+    const date = new Date(monday);
+    date.setDate(monday.getDate() + i);
+    return formatter.format(date);
+  });
+  return Array.from({
+    length: 7
+  }, (_, j) => {
+    const iso = (firstWeekday - 1 + j) % 7 + 1;
+    return namesMonToSun[iso - 1];
+  });
+};
+
+/**
+ * Get localized "next month" and "previous month" labels for calendar nav.
+ * Uses Intl.RelativeTimeFormat with numeric: "auto" (e.g. "next month", "last month").
+ */
+export const getRelativeMonthLabels = locale => {
+  const rtf = new Intl.RelativeTimeFormat(stringifyLocale(locale), {
+    numeric: 'auto'
+  });
+  return {
+    nextMonth: capitalizeFirst(rtf.format(1, 'month'), locale),
+    lastMonth: capitalizeFirst(rtf.format(-1, 'month'), locale)
+  };
+};
+
+/**
+ * Get localized "today" label (e.g. "today").
+ */
+export const getRelativeTodayLabel = locale => {
+  const rtf = new Intl.RelativeTimeFormat(stringifyLocale(locale), {
+    numeric: 'auto'
+  });
+  return capitalizeFirst(rtf.format(0, 'day'), locale);
+};
+export const formatDateForAriaLabel = (date, locale) => {
+  return new Intl.DateTimeFormat(stringifyLocale(locale), {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  }).format(date);
+};

package/dist/DatePicker/Calendar/utils/keyHandler.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarBodyProps } from '../types';
+import { type DateWithRow } from './dateGrid';
+/** Calendar grid props and callbacks used by `keyHandler`, aligned with `CalendarBodyProps`. */
+export type KeyHandlerParams = Pick<CalendarBodyProps, 'onFocusedDateChange' | 'onDateSelect' | 'onDisplayDateChange' | 'onEscapeKeyPress' | 'hasAdjacentMonthRight' | 'hasAdjacentMonthLeft' | 'disabledDates'> & {
+    e: React.KeyboardEvent;
+    /** The date for the day cell that received the key event */
+    date: Date;
+    datesWithRow: DateWithRow[];
+    month: number;
+    year: number;
+};
+export declare const keyHandler: ({ e, date, onFocusedDateChange, datesWithRow, month, year, disabledDates, onDateSelect, onEscapeKeyPress, onDisplayDateChange, hasAdjacentMonthRight, hasAdjacentMonthLeft, }: KeyHandlerParams) => void;

package/dist/DatePicker/Calendar/utils/keyHandler.js

@@ -0,0 +1,126 @@
+import { isDateDisabled } from './dateGrid';
+
+/** Calendar grid props and callbacks used by `keyHandler`, aligned with `CalendarBodyProps`. */
+
+/**
+ * Clamp a day to the last day of the given month (e.g. Jan 31 -> Feb 28).
+ */
+const clampToMonth = (year, month, day) => {
+  const last = new Date(year, month + 1, 0).getDate();
+  return new Date(year, month, Math.min(day, last));
+};
+export const keyHandler = ({
+  e,
+  date,
+  onFocusedDateChange,
+  datesWithRow,
+  month,
+  year,
+  disabledDates = [],
+  onDateSelect,
+  onEscapeKeyPress,
+  onDisplayDateChange,
+  hasAdjacentMonthRight,
+  hasAdjacentMonthLeft
+}) => {
+  const idx = datesWithRow.findIndex(({
+    date: dateWithRow
+  }) => dateWithRow.getTime() === date.getTime());
+  if (idx < 0) return;
+  const currentRow = datesWithRow[idx].rowIndex;
+  const day = date.getDate();
+  const hasRight = !!hasAdjacentMonthRight;
+  const hasLeft = !!hasAdjacentMonthLeft;
+  let newDate = null;
+  let newDisplayDate = null;
+  switch (e.key) {
+    case 'ArrowLeft':
+      e.preventDefault();
+      if (idx > 0) {
+        newDate = datesWithRow[idx - 1].date;
+      } else {
+        const lastDayPrevMonth = new Date(year, month, 0);
+        newDate = lastDayPrevMonth;
+        if (!hasLeft) {
+          newDisplayDate = new Date(year, month - 1, 1);
+        }
+      }
+      break;
+    case 'ArrowRight':
+      e.preventDefault();
+      if (idx < datesWithRow.length - 1) {
+        newDate = datesWithRow[idx + 1].date;
+      } else {
+        newDate = new Date(year, month + 1, 1);
+        if (!hasRight) {
+          newDisplayDate = new Date(year, month + 1, 1);
+        }
+      }
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() - 7);
+      if (newDate.getMonth() !== month || newDate.getFullYear() !== year) {
+        if (!hasLeft) {
+          newDisplayDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+        }
+      }
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() + 7);
+      if (newDate.getMonth() !== month || newDate.getFullYear() !== year) {
+        if (!hasRight) {
+          newDisplayDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+        }
+      }
+      break;
+    case 'Home':
+      e.preventDefault();
+      newDate = datesWithRow.find(({
+        rowIndex
+      }) => rowIndex === currentRow)?.date ?? date;
+      break;
+    case 'End':
+      e.preventDefault();
+      newDate = [...datesWithRow].reverse().find(({
+        rowIndex
+      }) => rowIndex === currentRow)?.date ?? date;
+      break;
+    case 'PageDown':
+      e.preventDefault();
+      if (e.shiftKey) {
+        newDate = clampToMonth(year + 1, month, day);
+      } else {
+        newDate = clampToMonth(year, month + 1, day);
+      }
+      newDisplayDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      break;
+    case 'PageUp':
+      e.preventDefault();
+      if (e.shiftKey) {
+        newDate = clampToMonth(year - 1, month, day);
+      } else {
+        newDate = clampToMonth(year, month - 1, day);
+      }
+      newDisplayDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      if (!isDateDisabled(date, disabledDates)) onDateSelect(date);
+      return;
+    case 'Escape':
+      e.preventDefault();
+      onEscapeKeyPress?.();
+      return;
+    default:
+      return;
+  }
+  if (newDate !== null) {
+    onFocusedDateChange(newDate);
+    if (newDisplayDate !== null) onDisplayDateChange?.(newDisplayDate);
+  }
+};

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,7 @@
+import type { DatePickerProps } from './types';
+/**
+ * DatePicker: single-date or range. Holds shared state and provides it via context.
+ * Single: selectedDate, setSelectedDate. Range: startDate, endDate, setStartDate, setEndDate.
+ * With no children, renders default layout (input + calendar popover).
+ */
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,157 @@
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { Box, FlexBox } from '../Box';
+import { PopoverContainer } from '../PopoverContainer';
+import { DatePickerCalendar } from './DatePickerCalendar';
+import { DatePickerProvider } from './DatePickerContext';
+import { DatePickerInput } from './DatePickerInput';
+import { isRangeProps } from './utils/dateSelect';
+import { useResolvedLocale } from './utils/locale';
+import { DEFAULT_DATE_PICKER_TRANSLATIONS } from './utils/translations';
+
+/**
+ * DatePicker: single-date or range. Holds shared state and provides it via context.
+ * Single: selectedDate, setSelectedDate. Range: startDate, endDate, setStartDate, setEndDate.
+ * With no children, renders default layout (input + calendar popover).
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DatePicker = props => {
+  const {
+    locale,
+    disabledDates = [],
+    placeholder,
+    mode,
+    children,
+    translations: translationsProp,
+    inputSize
+  } = props;
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [focusGridSignal, setFocusGridSignal] = useState(false);
+  const [gridFocusRequested, setGridFocusRequested] = useState(false);
+  const [activeRangePart, setActiveRangePart] = useState(null);
+  const inputRef = useRef(null);
+  const dialogId = useId();
+  const calendarDialogId = `datepicker-dialog-${dialogId.replace(/:/g, '')}`;
+  const clearGridFocusRequest = useCallback(() => {
+    setGridFocusRequested(false);
+  }, []);
+  const resolvedLocale = useResolvedLocale(locale);
+  const openCalendar = useCallback(options => {
+    const moveFocus = options?.moveFocusIntoCalendar ?? false;
+    setIsCalendarOpen(true);
+    if (moveFocus) {
+      setGridFocusRequested(true);
+      setFocusGridSignal(signal => !signal);
+    } else {
+      setGridFocusRequested(false);
+    }
+  }, []);
+  const focusCalendarGrid = useCallback(() => {
+    setGridFocusRequested(true);
+    setFocusGridSignal(signal => !signal);
+  }, []);
+  const closeCalendar = useCallback(() => {
+    setIsCalendarOpen(false);
+    setActiveRangePart(null);
+    setGridFocusRequested(false);
+    const shell = inputRef.current;
+    const toFocus = shell?.querySelector('[role="spinbutton"]') ?? shell;
+    toFocus?.focus();
+  }, []);
+  const startOrSelectedDate = isRangeProps(props) ? props.startDate : props.selectedDate;
+  const endDate = isRangeProps(props) ? props.endDate : null;
+  const setSelection = useCallback((start, end) => {
+    if (isRangeProps(props)) {
+      props.setStartDate(start);
+      props.setEndDate(end ?? null);
+    } else {
+      props.setSelectedDate(start);
+    }
+  }, [props]);
+  const contextValue = useMemo(() => {
+    const translations = {
+      ...DEFAULT_DATE_PICKER_TRANSLATIONS,
+      ...translationsProp
+    };
+    const base = {
+      startOrSelectedDate,
+      setSelection,
+      isCalendarOpen,
+      openCalendar,
+      focusCalendarGrid,
+      focusGridSignal,
+      gridFocusRequested,
+      clearGridFocusRequest,
+      closeCalendar,
+      locale: resolvedLocale,
+      disabledDates,
+      calendarDialogId,
+      translations
+    };
+    return mode === 'range' ? {
+      ...base,
+      mode: 'range',
+      endDate,
+      activeRangePart,
+      setActiveRangePart
+    } : {
+      ...base,
+      mode: 'single'
+    };
+  }, [mode, startOrSelectedDate, endDate, setSelection, activeRangePart, setActiveRangePart, isCalendarOpen, openCalendar, focusCalendarGrid, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, resolvedLocale, disabledDates, calendarDialogId, translationsProp]);
+  const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      gap: inputSize === 'small' ? 4 : 8,
+      ref: inputRef,
+      width: "fit-content",
+      children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(DatePickerInput, {
+          label: props.startLabel,
+          placeholder: placeholder,
+          rangePart: "start",
+          size: inputSize
+        }), /*#__PURE__*/_jsx(Box, {
+          alignSelf: "center",
+          mt: 32,
+          children: /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
+        }), /*#__PURE__*/_jsx(DatePickerInput, {
+          label: props.endLabel,
+          placeholder: placeholder,
+          rangePart: "end",
+          size: inputSize
+        })]
+      }) : /*#__PURE__*/_jsx(DatePickerInput, {
+        label: props.label,
+        placeholder: placeholder
+        // ref={inputRef}
+        ,
+        size: inputSize
+      })
+    }), /*#__PURE__*/_jsx(PopoverContainer, {
+      alignment: "bottom-left",
+      allowPageInteraction: true,
+      focusOnProps: {
+        autoFocus: false,
+        focusLock: false
+      },
+      invertAxis: "x",
+      isOpen: isCalendarOpen,
+      targetRef: inputRef,
+      x: -20,
+      y: -16,
+      onRequestClose: closeCalendar,
+      children: /*#__PURE__*/_jsx("div", {
+        "aria-label": contextValue.translations.calendarDialogAriaLabel,
+        id: calendarDialogId,
+        role: "dialog",
+        children: /*#__PURE__*/_jsx(DatePickerCalendar, {
+          dialogId: calendarDialogId
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx(DatePickerProvider, {
+    value: contextValue,
+    children: content
+  });
+};

package/dist/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,11 @@
+import type { CalendarBodyProps } from './Calendar/types';
+export type DatePickerCalendarProps = Pick<CalendarBodyProps, 'weekStartsOn'> & {
+    /** id for the dialog (for aria-controls from input). */
+    dialogId: string;
+};
+/**
+ * Calendar that composes Calendar, CalendarHeader, CalendarBody, CalendarFooter.
+ * When inside DatePicker: owns local visibleDate and focusedDate; updates shared
+ * state via context. Supports single-date and range modes.
+ */
+export declare const DatePickerCalendar: React.FC<DatePickerCalendarProps>;