@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/controls/__figma__/TextInput.figma.js

@@ -0,0 +1,130 @@
+const _excluded = ["placeholder"],
+  _excluded2 = ["placeholder", "endIcon"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { figma } from '@figma/code-connect';
+import { HStack } from '../../layout';
+import { Link } from '../../typography';
+import { TextInput } from '../TextInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(TextInput, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=252%3A16679', {
+  imports: ["import { TextInput } from '@coinbase/cds-web/controls/TextInput';"],
+  props: {
+    align: figma.boolean('right align text', {
+      true: 'end',
+      false: undefined
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    label: figma.boolean('show label', {
+      true: figma.string('↳ label string'),
+      false: undefined
+    }),
+    labelVariant: figma.enum('label inside', {
+      inside: 'inside',
+      outside: 'outside'
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('↳ start icon'),
+      false: undefined
+    }),
+    end: figma.boolean('show end', {
+      true: figma.boolean('↳ show end icon', {
+        true: figma.instance('↳ end icon'),
+        false: undefined
+      }),
+      false: undefined
+    }),
+    helperText: figma.boolean('show helper text', {
+      true: 'Assistive message',
+      false: undefined
+    }),
+    placeholder: figma.nestedProps('string.text input', {
+      text: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        Email: figma.textContent('text-input-label'),
+        Password: figma.textContent('text-input-label'),
+        'Legal name': figma.textContent('text-input-label')
+      })
+    }),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    })
+  },
+  example: _ref => {
+    let {
+        placeholder
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(TextInput, _objectSpread({
+      placeholder: placeholder.text
+    }, props));
+  }
+});
+figma.connect(TextInput, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=252%3A16679', {
+  imports: ["import { TextInput } from '@coinbase/cds-web/controls/TextInput';"],
+  variant: {
+    'show end': true,
+    '↳ show suffix': true
+  },
+  props: {
+    align: figma.boolean('right align text', {
+      true: 'end',
+      false: undefined
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    label: figma.boolean('show label', {
+      true: figma.string('↳ label string'),
+      false: undefined
+    }),
+    labelVariant: figma.boolean('label inside', {
+      true: 'inside',
+      false: 'outside'
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('↳ start icon'),
+      false: undefined
+    }),
+    endIcon: figma.instance('↳ end icon'),
+    helperText: figma.boolean('show helper text', {
+      true: 'Assistive message',
+      false: undefined
+    }),
+    placeholder: figma.nestedProps('string.text input', {
+      text: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        Email: figma.textContent('text-input-label'),
+        Password: figma.textContent('text-input-label'),
+        'Legal name': figma.textContent('text-input-label')
+      })
+    }),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    })
+  },
+  example: _ref2 => {
+    let {
+        placeholder,
+        endIcon
+      } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/_jsx(TextInput, _objectSpread({
+      end: /*#__PURE__*/_jsxs(HStack, {
+        children: [/*#__PURE__*/_jsx(Link, {
+          color: "fgPrimary",
+          onClick: () => {},
+          children: "copy"
+        }), endIcon]
+      }),
+      placeholder: placeholder.text
+    }, props));
+  }
+});

package/esm/controls/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const TextInputFocusVariantContext = /*#__PURE__*/createContext(undefined);
+export const useTextInputFocusVariantContent = () => useContext(TextInputFocusVariantContext);

package/esm/controls/index.js

@@ -0,0 +1,15 @@
+export * from './Checkbox';
+export * from './CheckboxCell';
+export * from './CheckboxGroup';
+export * from './ControlGroup';
+export * from './InputIcon';
+export * from './InputIconButton';
+export * from './NativeTextArea';
+export * from './RadioCell';
+export * from './RadioGroup';
+export * from './SearchInput';
+export * from './SegmentedControl';
+export * from './Select';
+export * from './SelectOption';
+export * from './Switch';
+export * from './TextInput';

package/esm/controls/selectContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const defaultContext = {
+  onChange: () => {},
+  value: undefined,
+  handleCloseMenu: undefined
+};
+export const SelectContext = /*#__PURE__*/createContext(defaultContext);
+export const SelectProvider = SelectContext.Provider;
+export const useSelectContext = () => useContext(SelectContext);

package/esm/controls/useHandleRadioSelect.js

@@ -0,0 +1,6 @@
+import { useCallback } from 'react';
+export function useHandleRadioSelect(onChange) {
+  return useCallback(event => {
+    onChange === null || onChange === void 0 || onChange(event.target.value);
+  }, [onChange]);
+}

package/esm/controls/useRefocusTrigger.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+import { FOCUSABLE_ELEMENTS } from '@coinbase/cds-common/tokens/overlays';
+import { isBrowser } from '../utils/browser';
+
+/** Refocuses a pressable that opens a menu after the menu has been opened and then closed */
+export const useRefocusTrigger = shouldRefocus => {
+  const ref = useRef(null);
+  useEffect(() => {
+    //  focuses the element after the menu opens & closes at least once
+    if (shouldRefocus && isBrowser() && ref.current) {
+      var _ref$current$parentNo;
+      const focusableElements = (_ref$current$parentNo = ref.current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.querySelectorAll(FOCUSABLE_ELEMENTS);
+      if (focusableElements !== null && focusableElements !== void 0 && focusableElements.length && focusableElements[0]) {
+        focusableElements[0].focus();
+      }
+    }
+  }, [shouldRefocus, ref]);
+  return ref;
+};

package/esm/controls/useSelectionCellControlHeight.js

@@ -0,0 +1,35 @@
+import { useTheme } from '../hooks/useTheme';
+
+/**
+ * Returns the height of the selection cell control based on the theme's headline line height and font size
+ * @returns The height of the selection cell control
+ */
+export const useSelectionCellControlHeight = () => {
+  const {
+    lineHeight,
+    fontSize
+  } = useTheme();
+  const headlineLineHeight = lineHeight.headline;
+  if (typeof headlineLineHeight === 'string' && headlineLineHeight.endsWith('%')) {
+    // If the line height is a percentage, we need to convert it to a number by timing it to the font size
+    const headlineFontSize = fontSize.headline;
+    // convert the percentage string to a number
+    const headlineLineHeightNumber = Number(headlineLineHeight.replace('%', '')) / 100;
+    if (typeof headlineFontSize === 'number') {
+      // multiply the font size by the line height percentage
+      return headlineFontSize * headlineLineHeightNumber;
+    } else if (headlineFontSize.endsWith('rem')) {
+      // if font size is a rem, we need to convert it to a number by multiplying it by 16
+      const headlineFontSizeNumber = Number(headlineFontSize.replace('rem', '')) * 16;
+      return headlineFontSizeNumber * headlineLineHeightNumber;
+    } else if (headlineFontSize.endsWith('px')) {
+      // if font size is a px, we need to convert it to a number
+      const headlineFontSizeNumber = Number(headlineFontSize.replace('px', ''));
+      return headlineFontSizeNumber * headlineLineHeightNumber;
+    } else {
+      // fall to 24 in all other cases
+      return headlineLineHeightNumber * 24;
+    }
+  }
+  return headlineLineHeight;
+};

package/esm/core/createThemeCssVars.js

@@ -0,0 +1,33 @@
+import { styleVarPrefixes } from './theme';
+
+/** Takes a theme object and formats its keys as CSS variables to be used in inline styles. */
+export const createThemeCssVars = theme => {
+  const themeCss = {};
+  const themeKeys = Object.keys(theme);
+  for (const key of themeKeys) {
+    const themeVars = theme[key];
+    if (!themeVars || key === 'id') continue;
+
+    // Handle activeColorScheme separately
+    if (key === 'activeColorScheme') {
+      themeCss['--activeColorScheme'] = theme.activeColorScheme;
+      continue;
+    }
+    const prefix = styleVarPrefixes[key];
+    const cssVarPrefix = prefix ? "--".concat(prefix, "-") : '--';
+    const varNames = Object.keys(themeVars);
+
+    // Process each var in the themeVars
+    for (const varName of varNames) {
+      const value = themeVars[varName];
+      if (value === undefined) continue;
+
+      // Create CSS variable name, replacing periods with underscores
+      const cssVarName = "".concat(cssVarPrefix).concat(varName).replaceAll('.', '_');
+
+      // Format value (add px to numbers)
+      themeCss[cssVarName] = typeof value !== 'number' ? value : value + 'px';
+    }
+  }
+  return themeCss;
+};

package/esm/core/polymorphism.js

@@ -0,0 +1,6 @@
+/**
+ * Prior art:
+ * https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70361
+ */
+export let Polymorphic;

package/esm/core/theme.js

@@ -0,0 +1,26 @@
+/** Maps our StyleVars to their CSS variable prefixes. For example, the names of CSS vars generated from `iconSize` vars will be prefixed with `--iconSize-`. */
+export const styleVarPrefixes = {
+  lightSpectrum: 'light',
+  darkSpectrum: 'dark',
+  lightColor: 'lightColor',
+  darkColor: 'darkColor',
+  spectrum: '',
+  color: 'color',
+  space: 'space',
+  iconSize: 'iconSize',
+  avatarSize: 'avatarSize',
+  borderWidth: 'borderWidth',
+  borderRadius: 'borderRadius',
+  fontFamily: 'fontFamily',
+  fontFamilyMono: 'fontFamilyMono',
+  fontSize: 'fontSize',
+  fontWeight: 'fontWeight',
+  lineHeight: 'lineHeight',
+  textTransform: 'textTransform',
+  shadow: 'shadow',
+  controlSize: 'controlSize'
+};
+
+/** Used to generate intellisense via ThemeCSSVars below. */
+
+/** A flat object of the CSS variable names of all themeable vars, based on the Theme type. */

package/esm/cx.js

@@ -0,0 +1,49 @@
+/**
+ * This is a copy of the cx function from @linaria/core@3.0.0-beta.22.
+ * We copy it here to avoid the need to depend on @linaria/core@3.0.0-beta.22 at runtime.
+ * https://github.com/callstack/linaria/blob/08ddb916cd944dedb30881fedb997bba185da3a5/packages/core/src/cx.ts
+ */
+
+// eslint-disable-next-line no-restricted-syntax
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
+ *
+ * ```js
+ *  cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+export const cx = function cx() {
+  const presentClassNames = Array.prototype.slice
+  // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
+  const atomicClasses = {};
+  const nonAtomicClasses = [];
+  presentClassNames.forEach(arg => {
+    // className could be the output of a previous cx call, so split by ' ' first
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
+      if (className.startsWith('atm_')) {
+        const [, keyHash] = className.split('_');
+        atomicClasses[keyHash] = className;
+      } else {
+        nonAtomicClasses.push(className);
+      }
+    });
+  });
+  const result = [];
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
+    }
+  }
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
+};

package/esm/dates/Calendar.css

@@ -0,0 +1 @@
+@layer cds{.pressableCss-pb7kwm3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}}

package/esm/dates/Calendar.js

@@ -0,0 +1,271 @@
+const _excluded = ["as", "className", "borderRadius", "width", "height", "background", "children"],
+  _excluded2 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "className", "style", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { generateCalendarMonth } from '@coinbase/cds-common/dates/generateCalendarMonth';
+import { getISOStringLocal } from '@coinbase/cds-common/dates/getISOStringLocal';
+import { getMidnightDate } from '@coinbase/cds-common/dates/getMidnightDate';
+import { getTimesFromDatesAndRanges } from '@coinbase/cds-common/dates/getTimesFromDatesAndRanges';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { cx } from '../cx';
+import { Icon } from '../icons/Icon';
+import { Grid } from '../layout/Grid';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Tooltip } from '../overlays/tooltip/Tooltip';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pressableCss = "pressableCss-pb7kwm3";
+export const calendarPressableDefaultElement = 'button';
+const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      className,
+      borderRadius = 1000,
+      width = 40,
+      height = 40,
+      background = 'transparent',
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : calendarPressableDefaultElement;
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    as: Component,
+    background: background,
+    borderRadius: borderRadius,
+    className: cx(pressableCss, className),
+    height: height,
+    width: width
+  }, props), {}, {
+    children: children
+  }));
+}));
+const getDayAccessibilityLabel = function (date) {
+  let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en-US';
+  return "".concat(date.toLocaleDateString(locale, {
+    weekday: 'long',
+    day: 'numeric'
+  }), " ").concat(date.toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric'
+  }));
+};
+const getDateWithOffset = function (year, month, day) {
+  let monthOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let yearOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let dayOffset = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  const targetYear = year + yearOffset;
+  const targetMonth = month - 1 + monthOffset;
+  const targetDay = day + dayOffset;
+  const lastDayOfTargetMonth = new Date(targetYear, targetMonth + 1, 0).getDate();
+  return new Date(targetYear, targetMonth, Math.min(targetDay, lastDayOfTargetMonth));
+};
+const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    date,
+    active,
+    disabled,
+    highlighted,
+    isToday,
+    isCurrentMonth,
+    onClick,
+    disabledError = 'Date unavailable'
+  } = _ref2;
+  const {
+    locale
+  } = useLocale();
+  const handleClick = useCallback(() => onClick === null || onClick === void 0 ? void 0 : onClick(date), [date, onClick]);
+  const accessibilityLabel = getDayAccessibilityLabel(date, locale);
+  const calendarDayButton = useMemo(() => /*#__PURE__*/_jsx(CalendarPressable, {
+    ref: ref,
+    focusable: true,
+    accessibilityLabel: accessibilityLabel,
+    "aria-current": isToday ? 'date' : undefined,
+    "aria-pressed": active ? 'true' : undefined,
+    background: active ? 'bgPrimary' : 'bg',
+    borderColor: isToday ? 'bgPrimary' : undefined,
+    "data-calendar-date": getISOStringLocal(date),
+    disabled: disabled,
+    onClick: disabled ? undefined : handleClick,
+    tabIndex: date.getDate() === 1 ? undefined : -1,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: active ? 'fgInverse' : highlighted ? 'fgPrimary' : undefined,
+      font: "body",
+      children: date.getDate()
+    })
+  }), [date, active, disabled, highlighted, isToday, accessibilityLabel, handleClick, ref]);
+  if (!isCurrentMonth) return /*#__PURE__*/_jsx("div", {});
+  if (!disabled || disabled && !disabledError) return calendarDayButton;
+  return /*#__PURE__*/_jsx(Tooltip, {
+    disablePortal: true,
+    content: disabledError,
+    children: calendarDayButton
+  });
+}));
+// These could be dynamically generated, but our Calendar and DatePicker aren't localized so there's no point
+const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      selectedDate,
+      seedDate,
+      onPressDate,
+      disabled,
+      hideControls,
+      disabledDates,
+      highlightedDates,
+      minDate,
+      maxDate,
+      disabledDateError = 'Date unavailable',
+      className,
+      style,
+      nextArrowAccessibilityLabel = 'Go to next month',
+      previousArrowAccessibilityLabel = 'Go to previous month'
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  const calendarRef = useRef(null);
+  useImperativeHandle(ref, () => calendarRef.current, []); // Merges forwarded ref with internal calendarRef
+
+  const today = useMemo(() => getMidnightDate(new Date()), []);
+  const [calendarSeedDate, setCalendarSeedDate] = useState(selectedDate || seedDate || new Date());
+  const calendarMonth = useMemo(() => generateCalendarMonth(calendarSeedDate), [calendarSeedDate]);
+  const selectedTime = useMemo(() => selectedDate ? getMidnightDate(selectedDate).getTime() : null, [selectedDate]);
+  const disabledTimes = useMemo(() => getTimesFromDatesAndRanges(disabledDates || []), [disabledDates]);
+  const minTime = useMemo(() => minDate && getMidnightDate(minDate).getTime(), [minDate]);
+  const maxTime = useMemo(() => maxDate && getMidnightDate(maxDate).getTime(), [maxDate]);
+  const highlightedTimes = useMemo(() => getTimesFromDatesAndRanges(highlightedDates || []), [highlightedDates]);
+  const handleGoNextMonth = useCallback(() => setCalendarSeedDate(s => new Date(s.getFullYear(), s.getMonth() + 1, 1)), [setCalendarSeedDate]);
+  const handleGoPreviousMonth = useCallback(() => setCalendarSeedDate(s => new Date(s.getFullYear(), s.getMonth() - 1, 1)), [setCalendarSeedDate]);
+  const disableGoNextMonth = useMemo(() => {
+    if (disabled) return true;
+    const firstDateOfNextMonth = new Date(calendarSeedDate.getFullYear(), calendarSeedDate.getMonth() + 1, 1);
+    return maxTime ? maxTime <= firstDateOfNextMonth.getTime() : false;
+  }, [maxTime, calendarSeedDate, disabled]);
+  const disableGoPreviousMonth = useMemo(() => {
+    if (disabled) return true;
+    const lastDateOfPreviousMonth = new Date(calendarSeedDate.getFullYear(), calendarSeedDate.getMonth(), 0);
+    return minTime ? minTime >= lastDateOfPreviousMonth.getTime() : false;
+  }, [minTime, calendarSeedDate, disabled]);
+  const handleCalendarFocus = useCallback(event => {
+    var _calendarRef$current;
+    const focusedElement = document.activeElement;
+    const focusedDateString = focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.getAttribute('data-calendar-date');
+    if (!focusedDateString || !((_calendarRef$current = calendarRef.current) !== null && _calendarRef$current !== void 0 && _calendarRef$current.contains(focusedElement))) return;
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) event.preventDefault();
+    const [year, month, day] = focusedDateString.split('-').map(s => parseInt(s, 10));
+    const focusedDate = new Date(year, month - 1, day);
+    let newFocusDate = null;
+    if (event.key === 'ArrowUp') newFocusDate = new Date(year, month - 1, day - 7);
+    if (event.key === 'ArrowDown') newFocusDate = new Date(year, month - 1, day + 7);
+    if (event.key === 'ArrowLeft') newFocusDate = new Date(year, month - 1, day - 1);
+    if (event.key === 'ArrowRight') newFocusDate = new Date(year, month - 1, day + 1);
+    if (event.key === 'Home') newFocusDate = new Date(year, month - 1, day - focusedDate.getDay());
+    if (event.key === 'End') newFocusDate = new Date(year, month - 1, day + (6 - focusedDate.getDay()));
+    if (event.key === 'PageUp') {
+      newFocusDate = event.shiftKey ? getDateWithOffset(year, month, day, 0, -1) : getDateWithOffset(year, month, day, -1, 0);
+    }
+    if (event.key === 'PageDown') {
+      newFocusDate = event.shiftKey ? getDateWithOffset(year, month, day, 0, 1) : getDateWithOffset(year, month, day, 1, 0);
+    }
+
+    // Prevent keyboard focus navigation past minDate and maxDate months
+    if (!newFocusDate || minDate && (newFocusDate.getMonth() < minDate.getMonth() || newFocusDate.getFullYear() < minDate.getFullYear()) || maxDate && (newFocusDate.getMonth() > maxDate.getMonth() || newFocusDate.getFullYear() > maxDate.getFullYear())) return;
+    if (newFocusDate.getMonth() !== focusedDate.getMonth() || newFocusDate.getFullYear() !== focusedDate.getFullYear()) setCalendarSeedDate(newFocusDate);
+    setTimeout(() => {
+      var _calendarRef$current2;
+      const dateString = newFocusDate && getISOStringLocal(newFocusDate);
+      (_calendarRef$current2 = calendarRef.current) === null || _calendarRef$current2 === void 0 || (_calendarRef$current2 = _calendarRef$current2.querySelector("[data-calendar-date=\"".concat(dateString, "\"]"))) === null || _calendarRef$current2 === void 0 || _calendarRef$current2.focus();
+    }, 1);
+  }, [minDate, maxDate, setCalendarSeedDate]);
+  useEffect(() => {
+    window.addEventListener('keydown', handleCalendarFocus);
+    return () => window.removeEventListener('keydown', handleCalendarFocus);
+  }, [handleCalendarFocus]);
+  return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+    ref: calendarRef,
+    background: "bg",
+    borderRadius: 400,
+    className: className,
+    opacity: disabled ? accessibleOpacityDisabled : undefined,
+    overflow: "auto",
+    padding: 2,
+    style: style,
+    width: 360
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingBottom: 2,
+      paddingX: 1.5,
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "h3",
+        display: "block",
+        font: "headline",
+        children: calendarSeedDate.toLocaleDateString('en-US', {
+          month: 'long',
+          year: 'numeric'
+        })
+      }), !hideControls && /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        marginEnd: -1,
+        children: [/*#__PURE__*/_jsx(CalendarPressable, {
+          accessibilityLabel: previousArrowAccessibilityLabel,
+          background: "bg",
+          disabled: disableGoPreviousMonth,
+          onClick: disableGoPreviousMonth ? undefined : handleGoPreviousMonth,
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: "fg",
+            name: "backArrow",
+            size: "s"
+          })
+        }), /*#__PURE__*/_jsx(CalendarPressable, {
+          accessibilityLabel: nextArrowAccessibilityLabel,
+          background: "bg",
+          disabled: disableGoNextMonth,
+          onClick: disableGoNextMonth ? undefined : handleGoNextMonth,
+          children: /*#__PURE__*/_jsx(Icon, {
+            color: "fg",
+            name: "forwardArrow",
+            size: "s"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
+      gap: 1,
+      justifyContent: "space-between",
+      templateColumns: "repeat(7, 40px)",
+      children: [daysOfWeek.map(day => /*#__PURE__*/_jsx(VStack, {
+        alignItems: "center",
+        height: 40,
+        justifyContent: "center",
+        width: 40,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          userSelect: "none",
+          children: day.charAt(0)
+        })
+      }, day)), calendarMonth.map(date => {
+        const time = date.getTime();
+        return /*#__PURE__*/_jsx(CalendarDay, {
+          active: time === selectedTime,
+          date: date,
+          disabled: disabled || minTime && time < minTime || maxTime && time > maxTime || disabledTimes.includes(time),
+          disabledError: disabledDateError,
+          highlighted: highlightedTimes.includes(time),
+          isCurrentMonth: date.getMonth() === calendarSeedDate.getMonth(),
+          isToday: time === today.getTime(),
+          onClick: onPressDate
+        }, time);
+      })]
+    })]
+  }));
+}));
+import "./Calendar.css";