@react-spectrum/s2 1.0.0 → 1.1.0

package/dist/Calendar.css.map

@@ -1 +1 @@
-{"mappings":"ACwEuB;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+IE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgEH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BR;;;;EAAA;;;;EAAA;;;;EAkEa;;;;EACA;;;;EAAA;;;;EAetB;;;;EAAA;;;;EAAA;;;;EAqGS;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAveG;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CD;;;;EAAA;;;;;AAvDJ;EASK;;;;EAAA;;;;EA8CD;;;;;AAvDJ;EASK;;;;EAAA;;;;EA8CD;;;;;AAvDJ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAuDI;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0JI;;;;IAAA","sources":["2295035483c3fe80","packages/@react-spectrum/s2/src/Calendar.tsx"],"sourcesContent":["@import \"a4515f5bffb5f062\";\n@import \"92a594e88a8aef1b\";\n@import \"690c8ff771746c3e\";\n@import \"61eae6535d6fcdf4\";\n@import \"45a026ed74f55e85\";\n@import \"948f79e4cbbbc206\";\n@import \"6fbf78b81e66a464\";\n@import \"98b3aa52e9389b9d\";\n@import \"b5160d992ac49c4a\";\n@import \"84221aa63b6aa322\";\n@import \"898fc73cd9eb6ae4\";\n@import \"b3de9a7ca57d6dcd\";\n@import \"630d2c7b496b99dc\";\n@import \"4ba51db32e5676ac\";\n@import \"956185cd03a3f917\";\n@import \"b1221915ab95cea2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';\nimport {\n  Calendar as AriaCalendar,\n  CalendarCell as AriaCalendarCell,\n  CalendarContext as AriaCalendarContext,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  CalendarProps as AriaCalendarProps,\n  ButtonProps,\n  CalendarCellProps,\n  CalendarCellRenderProps,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCellProps,\n  CalendarState,\n  CalendarStateContext,\n  ContextValue,\n  DateValue,\n  Provider,\n  RangeCalendarContext,\n  RangeCalendarState,\n  RangeCalendarStateContext,\n  Text,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AriaCalendarGridProps} from '@react-aria/calendar';\nimport {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n  CalendarDate,\n  getDayOfWeek,\n  startOfMonth\n} from '@internationalized/date';\nimport ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';\nimport ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {helpTextStyles} from './Field';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface CalendarProps<T extends DateValue>\n  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | 'children' | keyof GlobalDOMAttributes>,\n  StyleProps {\n  /**\n   * The error message to display when the calendar is invalid.\n   */\n  errorMessage?: ReactNode,\n  /**\n   * The number of months to display at once.\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\nexport const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);\n\nconst calendarStyles = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 24,\n  width: 'fit',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst headerStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  width: 'full'\n});\n\nconst headingStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  margin: 0,\n  width: 'full'\n});\n\nconst titleStyles = style({\n  font: 'title-lg',\n  textAlign: 'center',\n  flexGrow: 1,\n  flexShrink: 0,\n  flexBasis: '0%',\n  minWidth: 0\n});\n\nconst headerCellStyles = style({\n  font: 'title-sm',\n  cursor: 'default',\n  textAlign: 'center',\n  paddingStart: {\n    default: 4,\n    ':first-child': 0\n  },\n  paddingEnd: {\n    default: 4,\n    ':last-child': 0\n  },\n  paddingBottom: 12\n});\n\nconst cellStyles = style({\n  outlineStyle: 'none',\n  '--cell-gap': {\n    type: 'paddingStart',\n    value: 4\n  },\n  paddingStart: {\n    default: 4,\n    isFirstChild: 0\n  },\n  paddingEnd: {\n    default: 4,\n    isLastChild: 0\n  },\n  paddingTop: {\n    default: 2,\n    isFirstWeek: 0\n  },\n  paddingBottom: 2,\n  position: 'relative',\n  width: 32,\n  height: 32,\n  display: {\n    default: 'flex',\n    isOutsideMonth: 'none'\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  disableTapHighlight: true\n});\n\nconst cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({\n  ...focusRing(),\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  outlineOffset: {\n    default: -2,\n    isToday: 2,\n    isSelected: {\n      selectionMode: {\n        single: 2,\n        range: -2\n      }\n    },\n    isSelectionStart: 2,\n    isSelectionEnd: 2\n  },\n  position: 'relative',\n  font: 'body-sm',\n  cursor: 'default',\n  width: 'full',\n  height: 32,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: {\n      default: 'gray-100',\n      isUnavailable: 'transparent'\n    },\n    isPressed: 'gray-100',\n    isDisabled: 'transparent',\n    isToday: {\n      default: baseColor('gray-300'),\n      isDisabled: 'disabled'\n    },\n    isSelected: {\n      selectionMode: {\n        single: {\n          default: lightDark('accent-900', 'accent-700'),\n          isHovered: lightDark('accent-1000', 'accent-600'),\n          isPressed: lightDark('accent-1000', 'accent-600'),\n          isFocusVisible: lightDark('accent-1000', 'accent-600'),\n          isDisabled: 'transparent',\n          isInvalid: {\n            default: lightDark('negative-900', 'negative-700'),\n            isHovered: lightDark('negative-1000', 'negative-600'),\n            isPressed: lightDark('negative-1000', 'negative-600'),\n            isFocusVisible: lightDark('negative-1000', 'negative-600')\n          }\n        },\n        range: {\n          isHovered: {\n            default: 'blue-500',\n            isInvalid: {\n              default: 'negative-300',\n              isUnavailable: 'transparent'\n            }\n          }\n        }\n      }\n    },\n    isSelectionStart: {\n      default: lightDark('accent-900', 'accent-700'),\n      isHovered: lightDark('accent-1000', 'accent-600'),\n      isPressed: lightDark('accent-1000', 'accent-600'),\n      isFocusVisible: lightDark('accent-1000', 'accent-600'),\n      isDisabled: 'transparent',\n      isInvalid: {\n        default: lightDark('negative-900', 'negative-700'),\n        isHovered: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        },\n        isPressed: lightDark('negative-1000', 'negative-600'),\n        isFocusVisible: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        }\n      }\n    },\n    isSelectionEnd: {\n      default: lightDark('accent-900', 'accent-700'),\n      isHovered: lightDark('accent-1000', 'accent-600'),\n      isPressed: lightDark('accent-1000', 'accent-600'),\n      isFocusVisible: lightDark('accent-1000', 'accent-600'),\n      isDisabled: 'transparent',\n      isInvalid: {\n        default: lightDark('negative-900', 'negative-700'),\n        isHovered: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        },\n        isPressed: lightDark('negative-1000', 'negative-600'),\n        isFocusVisible: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        }\n      }\n    },\n    forcedColors: {\n      default: 'transparent',\n      isToday: 'ButtonFace',\n      isHovered: 'Highlight',\n      isSelected: {\n        selectionMode: {\n          single: 'Highlight',\n          range: {\n            isHovered: 'Highlight'\n          }\n        }\n      },\n      isSelectionStart: 'Highlight',\n      isSelectionEnd: 'Highlight',\n      isUnavailable: 'transparent'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'white',\n      selectionMode: {\n        range: 'neutral'\n      }\n    },\n    isSelectionStart: 'white',\n    isSelectionEnd: 'white',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isToday: 'ButtonFace',\n      isSelected: 'HighlightText',\n      isSelectionStart: 'HighlightText',\n      isSelectionEnd: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  }\n});\n\nconst unavailableStyles = style({\n  position: 'absolute',\n  top: 'calc(50% - 1px)',\n  left: 'calc(25% - 1px)',\n  right: 'calc(25% - 1px)',\n  height: 2,\n  transform: 'rotate(-16deg)',\n  borderRadius: 'full',\n  backgroundColor: '[currentColor]'\n});\n\nconst selectionSpanStyles = style<{isInvalid?: boolean}>({\n  position: 'absolute',\n  zIndex: -1,\n  top: 0,\n  insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',\n  insetEnd: 0,\n  bottom: 0,\n  borderWidth: 2,\n  borderStyle: 'dashed',\n  borderColor: {\n    default: 'blue-800', // focus-indicator-color\n    isInvalid: 'negative-900',\n    forcedColors: {\n      default: 'ButtonText'\n    }\n  },\n  borderStartRadius: 'full',\n  borderEndRadius: 'full',\n  backgroundColor: {\n    default: 'blue-subtle',\n    isInvalid: 'negative-100',\n    forcedColors: {\n      default: 'Highlight'\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\n/**\n * Calendars display a grid of days in one or more months and allow users to select a single date.\n */\nexport const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);\n  let {\n    visibleMonths = 1,\n    errorMessage,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...otherProps\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <AriaCalendar\n      {...otherProps}\n      ref={ref}\n      visibleDuration={{months: visibleMonths}}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + calendarStyles(null, styles)}>\n      {({isInvalid, isDisabled}) => {\n        return (\n          <>\n            <Provider\n              values={[\n                [HeaderContext, null],\n                [HeadingContext, null]\n              ]}>\n              <Header styles={headerStyles}>\n                <CalendarButton slot=\"previous\"><ChevronLeftIcon /></CalendarButton>\n                <CalendarHeading />\n                <CalendarButton slot=\"next\"><ChevronRightIcon /></CalendarButton>\n              </Header>\n            </Provider>\n            <div\n              className={style({\n                display: 'flex',\n                flexDirection: 'row',\n                gap: 24,\n                width: 'full',\n                alignItems: 'start'\n              })}>\n              {Array.from({length: visibleMonths}).map((_, i) => (\n                <CalendarGrid months={i} key={i} />\n              ))}\n            </div>\n            {isInvalid && (\n              <Text slot=\"errorMessage\" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>\n                {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}\n              </Text>\n            )}\n          </>\n        );\n      }}\n    </AriaCalendar>\n  );\n});\n\nexport const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {\n  let rangeCalendarProps = useSlottedContext(RangeCalendarContext);\n  let calendarProps = useSlottedContext(AriaCalendarContext);\n  let firstDayOfWeek = rangeCalendarProps?.firstDayOfWeek ?? calendarProps?.firstDayOfWeek;\n\n   // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.\n  return (\n    <AriaCalendarGrid\n      className={style({\n        borderCollapse: 'collapse',\n        borderSpacing: 0,\n        isolation: 'isolate'\n      })}\n      offset={{months: props.months}}>\n      <CalendarGridHeader className=\"\">\n        {(day) => (\n          <CalendarHeaderCell>\n            {day}\n          </CalendarHeaderCell>\n        )}\n      </CalendarGridHeader>\n      <CalendarGridBody className=\"\">\n        {(date) => (\n          <CalendarCell date={date} firstDayOfWeek={firstDayOfWeek} />\n        )}\n      </CalendarGridBody>\n    </AriaCalendarGrid>\n  );\n};\n\n// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.\n// However, we want to show each month individually.\nexport const CalendarHeading = (): ReactElement => {\n  let calendarStateContext = useContext(CalendarStateContext);\n  let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n  let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};\n  let currentMonth = visibleRange?.start ?? visibleRange?.end;\n  let monthFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,\n    calendar: visibleRange?.start.calendar.identifier,\n    timeZone\n  });\n  let months = useMemo(() => {\n    if (!visibleRange) {\n      return [];\n    }\n    let months: string[] = [];\n    for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {\n      // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.\n      // there has to be a better way to do this...\n      if (i.month === visibleRange.start.month) {\n        i = i.add({weeks: 1});\n      }\n      months.push(monthFormatter.format(i.toDate(timeZone!)));\n    }\n    return months;\n  }, [visibleRange, monthFormatter, timeZone]);\n\n  return (\n    <Heading styles={headingStyles}>\n      {months.map((month, i) => {\n        if (i === 0) {\n          return (\n            <Fragment key={month}>\n              <div className={titleStyles}>{month}</div>\n            </Fragment>\n          );\n        } else {\n          return (\n            <Fragment key={month}>\n              {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}\n              <div className={style({visibility: 'hidden', width: 32})} />\n              <div className={style({visibility: 'hidden', width: 24})} />\n              <div className={style({visibility: 'hidden', width: 32})} />\n              <div className={titleStyles}>{month}</div>\n            </Fragment>\n          );\n        }\n      })}\n    </Heading>\n  );\n};\n\nexport const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {\n  let {direction} = useLocale();\n  return (\n    <div\n      className={\n        style({\n          scale: {\n            direction: {\n              rtl: -1\n            }\n          }\n        })({direction})\n      }>\n      <ActionButton\n        {...props}\n        isQuiet>\n        {props.children}\n      </ActionButton>\n    </div>\n  );\n};\n\nconst CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {\n  return (\n    <AriaCalendarHeaderCell className={headerCellStyles}>\n      {props.children}\n    </AriaCalendarHeaderCell>\n  );\n};\n\nconst CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {\n  let {locale} = useLocale();\n  let firstDayOfWeek = props.firstDayOfWeek;\n  // Calculate the day and week index based on the date.\n  let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);\n\n  let calendarStateContext = useContext(CalendarStateContext);\n  let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n  let state = (calendarStateContext ?? rangeCalendarStateContext)!;\n\n  let isFirstWeek = weekIndex === 0;\n  let isFirstChild = dayIndex === 0;\n  let isLastChild = dayIndex === 6;\n\n  return (\n    <AriaCalendarCell\n      date={props.date}\n      className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>\n      {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}\n    </AriaCalendarCell>\n  );\n};\n\nconst CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {\n  let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;\n  let {getDatesInWeek} = state;\n  let ref = useRef<HTMLDivElement>(null);\n  let {isUnavailable, formattedDate, isSelected, isSelectionStart, isSelectionEnd, isInvalid} = renderProps!;\n  // only apply the selection start/end styles if the start/end date is actually selectable (aka not unavailable)\n  // or if the range is invalid and thus we still want to show the styles even if the start/end date is an unavailable one\n  isSelectionStart = isSelectionStart && (!isUnavailable || isInvalid);\n  isSelectionEnd = isSelectionEnd && (!isUnavailable || isInvalid);\n\n  let startDate = startOfMonth(date);\n  let datesInWeek = getDatesInWeek(weekIndex, startDate);\n\n  let isDateInRange = (checkDate: CalendarDate) => {\n    if (!('highlightedRange' in state) || !state.highlightedRange) {\n      return state.isSelected(checkDate);\n    }\n    // if invalid, check if date is within the full range boundaries\n    if (isInvalid) {\n      return checkDate.compare(state.highlightedRange.start) >= 0 &&\n             checkDate.compare(state.highlightedRange.end) <= 0;\n    }\n\n    return state.isSelected(checkDate);\n  };\n\n  // Starting from the current day, find the first day before it in the current week that is not selected.\n  // Then, the span of selected days is the current day minus the first unselected day.\n  let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {\n    return date && i > 0 && (!isDateInRange(date) || date.month !== props.date.month);\n  });\n\n  let selectionSpan = -1;\n  if (firstUnselectedInRangeInWeek > -1 && isSelected) {\n    selectionSpan = firstUnselectedInRangeInWeek - 1;\n  } else if (isSelected) {\n    selectionSpan = dayIndex;\n  }\n  let prevDay = date.subtract({days: 1});\n  let nextDay = date.add({days: 1});\n\n  // when invalid, show background for all selected dates (including unavailable) to make continuous range appearance\n  // when valid, only show background for available selected dates\n  let isBackgroundStyleApplied = (\n    isSelected\n    && isRangeSelection\n    && (isInvalid || !isUnavailable)\n    && (isDateInRange(prevDay)\n      || (nextDay.month === date.month && isDateInRange(nextDay)))\n    );\n\n  return (\n    <div\n      className={style({\n        position: 'relative',\n        width: 32,\n        '--cell-width': {\n          type: 'width',\n          value: '[self(width)]'\n        }\n      })}>\n      <div\n        ref={ref}\n        style={pressScale(ref, {})(renderProps!)}\n        className={cellInnerStyles({...renderProps!, isSelectionStart, isSelectionEnd, selectionMode: isRangeSelection ? 'range' : 'single'})}>\n        <div>\n          {formattedDate}\n        </div>\n        {isUnavailable && <div className={unavailableStyles} role=\"presentation\" />}\n      </div>\n      {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles({isInvalid})} role=\"presentation\" />}\n    </div>\n  );\n};\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\n/**\n * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.\n * @param date - The date to calculate indices for.\n * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').\n * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).\n * @returns Object with weekIndex and dayIndex.\n */\nfunction useWeekAndDayIndices(\n  date: CalendarDate,\n  locale: string,\n  firstDayOfWeek?: DayOfWeek\n) {\n  let {dayIndex, weekIndex} = useMemo(() => {\n    // Get the day index within the week (0-6)\n    const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);\n\n    const monthStart = startOfMonth(date);\n\n    // Calculate the week index by finding which week this date falls into\n    // within the month's calendar grid\n    const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);\n    const dayOfMonth = date.day;\n\n    const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);\n\n    return {\n      weekIndex,\n      dayIndex\n    };\n  }, [date, locale, firstDayOfWeek]);\n\n  return {dayIndex, weekIndex};\n}\n"],"names":[],"version":3,"file":"Calendar.css.map"}
+{"mappings":"ACwEuB;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+IE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgEH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BR;;;;EAAA;;;;EAAA;;;;EAkEa;;;;EACA;;;;EAAA;;;;EAetB;;;;EAAA;;;;EAAA;;;;EAqGS;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAveG;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CD;;;;EAAA;;;;;AAvDJ;EASK;;;;EAAA;;;;EA8CD;;;;;AAvDJ;EASK;;;;EAAA;;;;EA8CD;;;;;AAvDJ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAuDI;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IA0JI;;;;IAAA","sources":["2295035483c3fe80","packages/@react-spectrum/s2/src/Calendar.tsx"],"sourcesContent":["@import \"a4515f5bffb5f062\";\n@import \"92a594e88a8aef1b\";\n@import \"690c8ff771746c3e\";\n@import \"61eae6535d6fcdf4\";\n@import \"45a026ed74f55e85\";\n@import \"948f79e4cbbbc206\";\n@import \"6fbf78b81e66a464\";\n@import \"98b3aa52e9389b9d\";\n@import \"b5160d992ac49c4a\";\n@import \"84221aa63b6aa322\";\n@import \"898fc73cd9eb6ae4\";\n@import \"b3de9a7ca57d6dcd\";\n@import \"630d2c7b496b99dc\";\n@import \"4ba51db32e5676ac\";\n@import \"956185cd03a3f917\";\n@import \"b1221915ab95cea2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';\nimport {\n  Calendar as AriaCalendar,\n  CalendarCell as AriaCalendarCell,\n  CalendarContext as AriaCalendarContext,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  CalendarProps as AriaCalendarProps,\n  ButtonProps,\n  CalendarCellProps,\n  CalendarCellRenderProps,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCellProps,\n  CalendarState,\n  CalendarStateContext,\n  ContextValue,\n  DateValue,\n  Provider,\n  RangeCalendarContext,\n  RangeCalendarState,\n  RangeCalendarStateContext,\n  Text,\n  useSlottedContext\n} from 'react-aria-components';\nimport {AriaCalendarGridProps} from '@react-aria/calendar';\nimport {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n  CalendarDate,\n  getDayOfWeek,\n  startOfMonth\n} from '@internationalized/date';\nimport ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';\nimport ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {helpTextStyles} from './Field';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface CalendarProps<T extends DateValue>\n  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'render' | 'styles' | 'children' | keyof GlobalDOMAttributes>,\n  StyleProps {\n  /**\n   * The error message to display when the calendar is invalid.\n   */\n  errorMessage?: ReactNode,\n  /**\n   * The number of months to display at once.\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\nexport const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);\n\nconst calendarStyles = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 24,\n  width: 'fit',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst headerStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  width: 'full'\n});\n\nconst headingStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  margin: 0,\n  width: 'full'\n});\n\nconst titleStyles = style({\n  font: 'title-lg',\n  textAlign: 'center',\n  flexGrow: 1,\n  flexShrink: 0,\n  flexBasis: '0%',\n  minWidth: 0\n});\n\nconst headerCellStyles = style({\n  font: 'title-sm',\n  cursor: 'default',\n  textAlign: 'center',\n  paddingStart: {\n    default: 4,\n    ':first-child': 0\n  },\n  paddingEnd: {\n    default: 4,\n    ':last-child': 0\n  },\n  paddingBottom: 12\n});\n\nconst cellStyles = style({\n  outlineStyle: 'none',\n  '--cell-gap': {\n    type: 'paddingStart',\n    value: 4\n  },\n  paddingStart: {\n    default: 4,\n    isFirstChild: 0\n  },\n  paddingEnd: {\n    default: 4,\n    isLastChild: 0\n  },\n  paddingTop: {\n    default: 2,\n    isFirstWeek: 0\n  },\n  paddingBottom: 2,\n  position: 'relative',\n  width: 32,\n  height: 32,\n  display: {\n    default: 'flex',\n    isOutsideMonth: 'none'\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  disableTapHighlight: true\n});\n\nconst cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({\n  ...focusRing(),\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  outlineOffset: {\n    default: -2,\n    isToday: 2,\n    isSelected: {\n      selectionMode: {\n        single: 2,\n        range: -2\n      }\n    },\n    isSelectionStart: 2,\n    isSelectionEnd: 2\n  },\n  position: 'relative',\n  font: 'body-sm',\n  cursor: 'default',\n  width: 'full',\n  height: 32,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: 'transparent',\n    isHovered: {\n      default: 'gray-100',\n      isUnavailable: 'transparent'\n    },\n    isPressed: 'gray-100',\n    isDisabled: 'transparent',\n    isToday: {\n      default: baseColor('gray-300'),\n      isDisabled: 'disabled'\n    },\n    isSelected: {\n      selectionMode: {\n        single: {\n          default: lightDark('accent-900', 'accent-700'),\n          isHovered: lightDark('accent-1000', 'accent-600'),\n          isPressed: lightDark('accent-1000', 'accent-600'),\n          isFocusVisible: lightDark('accent-1000', 'accent-600'),\n          isDisabled: 'transparent',\n          isInvalid: {\n            default: lightDark('negative-900', 'negative-700'),\n            isHovered: lightDark('negative-1000', 'negative-600'),\n            isPressed: lightDark('negative-1000', 'negative-600'),\n            isFocusVisible: lightDark('negative-1000', 'negative-600')\n          }\n        },\n        range: {\n          isHovered: {\n            default: 'blue-500',\n            isInvalid: {\n              default: 'negative-300',\n              isUnavailable: 'transparent'\n            }\n          }\n        }\n      }\n    },\n    isSelectionStart: {\n      default: lightDark('accent-900', 'accent-700'),\n      isHovered: lightDark('accent-1000', 'accent-600'),\n      isPressed: lightDark('accent-1000', 'accent-600'),\n      isFocusVisible: lightDark('accent-1000', 'accent-600'),\n      isDisabled: 'transparent',\n      isInvalid: {\n        default: lightDark('negative-900', 'negative-700'),\n        isHovered: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        },\n        isPressed: lightDark('negative-1000', 'negative-600'),\n        isFocusVisible: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        }\n      }\n    },\n    isSelectionEnd: {\n      default: lightDark('accent-900', 'accent-700'),\n      isHovered: lightDark('accent-1000', 'accent-600'),\n      isPressed: lightDark('accent-1000', 'accent-600'),\n      isFocusVisible: lightDark('accent-1000', 'accent-600'),\n      isDisabled: 'transparent',\n      isInvalid: {\n        default: lightDark('negative-900', 'negative-700'),\n        isHovered: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        },\n        isPressed: lightDark('negative-1000', 'negative-600'),\n        isFocusVisible: {\n          default: lightDark('negative-1000', 'negative-600'),\n          isUnavailable: lightDark('negative-900', 'negative-700')\n        }\n      }\n    },\n    forcedColors: {\n      default: 'transparent',\n      isToday: 'ButtonFace',\n      isHovered: 'Highlight',\n      isSelected: {\n        selectionMode: {\n          single: 'Highlight',\n          range: {\n            isHovered: 'Highlight'\n          }\n        }\n      },\n      isSelectionStart: 'Highlight',\n      isSelectionEnd: 'Highlight',\n      isUnavailable: 'transparent'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'white',\n      selectionMode: {\n        range: 'neutral'\n      }\n    },\n    isSelectionStart: 'white',\n    isSelectionEnd: 'white',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isToday: 'ButtonFace',\n      isSelected: 'HighlightText',\n      isSelectionStart: 'HighlightText',\n      isSelectionEnd: 'HighlightText',\n      isDisabled: 'GrayText'\n    }\n  }\n});\n\nconst unavailableStyles = style({\n  position: 'absolute',\n  top: 'calc(50% - 1px)',\n  left: 'calc(25% - 1px)',\n  right: 'calc(25% - 1px)',\n  height: 2,\n  transform: 'rotate(-16deg)',\n  borderRadius: 'full',\n  backgroundColor: '[currentColor]'\n});\n\nconst selectionSpanStyles = style<{isInvalid?: boolean}>({\n  position: 'absolute',\n  zIndex: -1,\n  top: 0,\n  insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',\n  insetEnd: 0,\n  bottom: 0,\n  borderWidth: 2,\n  borderStyle: 'dashed',\n  borderColor: {\n    default: 'blue-800', // focus-indicator-color\n    isInvalid: 'negative-900',\n    forcedColors: {\n      default: 'ButtonText'\n    }\n  },\n  borderStartRadius: 'full',\n  borderEndRadius: 'full',\n  backgroundColor: {\n    default: 'blue-subtle',\n    isInvalid: 'negative-100',\n    forcedColors: {\n      default: 'Highlight'\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\n/**\n * Calendars display a grid of days in one or more months and allow users to select a single date.\n */\nexport const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);\n  let {\n    visibleMonths = 1,\n    errorMessage,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...otherProps\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  return (\n    <AriaCalendar\n      {...otherProps}\n      ref={ref}\n      visibleDuration={{months: visibleMonths}}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + calendarStyles(null, styles)}>\n      {({isInvalid, isDisabled}) => {\n        return (\n          <>\n            <Provider\n              values={[\n                [HeaderContext, null],\n                [HeadingContext, null]\n              ]}>\n              <Header styles={headerStyles}>\n                <CalendarButton slot=\"previous\"><ChevronLeftIcon /></CalendarButton>\n                <CalendarHeading />\n                <CalendarButton slot=\"next\"><ChevronRightIcon /></CalendarButton>\n              </Header>\n            </Provider>\n            <div\n              className={style({\n                display: 'flex',\n                flexDirection: 'row',\n                gap: 24,\n                width: 'full',\n                alignItems: 'start'\n              })}>\n              {Array.from({length: visibleMonths}).map((_, i) => (\n                <CalendarGrid months={i} key={i} />\n              ))}\n            </div>\n            {isInvalid && (\n              <Text slot=\"errorMessage\" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>\n                {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}\n              </Text>\n            )}\n          </>\n        );\n      }}\n    </AriaCalendar>\n  );\n});\n\nexport const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {\n  let rangeCalendarProps = useSlottedContext(RangeCalendarContext);\n  let calendarProps = useSlottedContext(AriaCalendarContext);\n  let firstDayOfWeek = rangeCalendarProps?.firstDayOfWeek ?? calendarProps?.firstDayOfWeek;\n\n   // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.\n  return (\n    <AriaCalendarGrid\n      className={style({\n        borderCollapse: 'collapse',\n        borderSpacing: 0,\n        isolation: 'isolate'\n      })}\n      offset={{months: props.months}}>\n      <CalendarGridHeader className=\"\">\n        {(day) => (\n          <CalendarHeaderCell>\n            {day}\n          </CalendarHeaderCell>\n        )}\n      </CalendarGridHeader>\n      <CalendarGridBody className=\"\">\n        {(date) => (\n          <CalendarCell date={date} firstDayOfWeek={firstDayOfWeek} />\n        )}\n      </CalendarGridBody>\n    </AriaCalendarGrid>\n  );\n};\n\n// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.\n// However, we want to show each month individually.\nexport const CalendarHeading = (): ReactElement => {\n  let calendarStateContext = useContext(CalendarStateContext);\n  let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n  let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};\n  let currentMonth = visibleRange?.start ?? visibleRange?.end;\n  let monthFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,\n    calendar: visibleRange?.start.calendar.identifier,\n    timeZone\n  });\n  let months = useMemo(() => {\n    if (!visibleRange) {\n      return [];\n    }\n    let months: string[] = [];\n    for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {\n      // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.\n      // there has to be a better way to do this...\n      if (i.month === visibleRange.start.month) {\n        i = i.add({weeks: 1});\n      }\n      months.push(monthFormatter.format(i.toDate(timeZone!)));\n    }\n    return months;\n  }, [visibleRange, monthFormatter, timeZone]);\n\n  return (\n    <Heading styles={headingStyles}>\n      {months.map((month, i) => {\n        if (i === 0) {\n          return (\n            <Fragment key={month}>\n              <div className={titleStyles}>{month}</div>\n            </Fragment>\n          );\n        } else {\n          return (\n            <Fragment key={month}>\n              {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}\n              <div className={style({visibility: 'hidden', width: 32})} />\n              <div className={style({visibility: 'hidden', width: 24})} />\n              <div className={style({visibility: 'hidden', width: 32})} />\n              <div className={titleStyles}>{month}</div>\n            </Fragment>\n          );\n        }\n      })}\n    </Heading>\n  );\n};\n\nexport const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {\n  let {direction} = useLocale();\n  return (\n    <div\n      className={\n        style({\n          scale: {\n            direction: {\n              rtl: -1\n            }\n          }\n        })({direction})\n      }>\n      <ActionButton\n        {...props}\n        isQuiet>\n        {props.children}\n      </ActionButton>\n    </div>\n  );\n};\n\nconst CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {\n  return (\n    <AriaCalendarHeaderCell className={headerCellStyles}>\n      {props.children}\n    </AriaCalendarHeaderCell>\n  );\n};\n\nconst CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {\n  let {locale} = useLocale();\n  let firstDayOfWeek = props.firstDayOfWeek;\n  // Calculate the day and week index based on the date.\n  let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);\n\n  let calendarStateContext = useContext(CalendarStateContext);\n  let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n  let state = (calendarStateContext ?? rangeCalendarStateContext)!;\n\n  let isFirstWeek = weekIndex === 0;\n  let isFirstChild = dayIndex === 0;\n  let isLastChild = dayIndex === 6;\n\n  return (\n    <AriaCalendarCell\n      date={props.date}\n      className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>\n      {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}\n    </AriaCalendarCell>\n  );\n};\n\nconst CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {\n  let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;\n  let {getDatesInWeek} = state;\n  let ref = useRef<HTMLDivElement>(null);\n  let {isUnavailable, formattedDate, isSelected, isSelectionStart, isSelectionEnd, isInvalid} = renderProps!;\n  // only apply the selection start/end styles if the start/end date is actually selectable (aka not unavailable)\n  // or if the range is invalid and thus we still want to show the styles even if the start/end date is an unavailable one\n  isSelectionStart = isSelectionStart && (!isUnavailable || isInvalid);\n  isSelectionEnd = isSelectionEnd && (!isUnavailable || isInvalid);\n\n  let startDate = startOfMonth(date);\n  let datesInWeek = getDatesInWeek(weekIndex, startDate);\n\n  let isDateInRange = (checkDate: CalendarDate) => {\n    if (!('highlightedRange' in state) || !state.highlightedRange) {\n      return state.isSelected(checkDate);\n    }\n    // if invalid, check if date is within the full range boundaries\n    if (isInvalid) {\n      return checkDate.compare(state.highlightedRange.start) >= 0 &&\n             checkDate.compare(state.highlightedRange.end) <= 0;\n    }\n\n    return state.isSelected(checkDate);\n  };\n\n  // Starting from the current day, find the first day before it in the current week that is not selected.\n  // Then, the span of selected days is the current day minus the first unselected day.\n  let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {\n    return date && i > 0 && (!isDateInRange(date) || date.month !== props.date.month);\n  });\n\n  let selectionSpan = -1;\n  if (firstUnselectedInRangeInWeek > -1 && isSelected) {\n    selectionSpan = firstUnselectedInRangeInWeek - 1;\n  } else if (isSelected) {\n    selectionSpan = dayIndex;\n  }\n  let prevDay = date.subtract({days: 1});\n  let nextDay = date.add({days: 1});\n\n  // when invalid, show background for all selected dates (including unavailable) to make continuous range appearance\n  // when valid, only show background for available selected dates\n  let isBackgroundStyleApplied = (\n    isSelected\n    && isRangeSelection\n    && (isInvalid || !isUnavailable)\n    && (isDateInRange(prevDay)\n      || (nextDay.month === date.month && isDateInRange(nextDay)))\n    );\n\n  return (\n    <div\n      className={style({\n        position: 'relative',\n        width: 32,\n        '--cell-width': {\n          type: 'width',\n          value: '[self(width)]'\n        }\n      })}>\n      <div\n        ref={ref}\n        style={pressScale(ref, {})(renderProps!)}\n        className={cellInnerStyles({...renderProps!, isSelectionStart, isSelectionEnd, selectionMode: isRangeSelection ? 'range' : 'single'})}>\n        <div>\n          {formattedDate}\n        </div>\n        {isUnavailable && <div className={unavailableStyles} role=\"presentation\" />}\n      </div>\n      {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles({isInvalid})} role=\"presentation\" />}\n    </div>\n  );\n};\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\n/**\n * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.\n * @param date - The date to calculate indices for.\n * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').\n * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).\n * @returns Object with weekIndex and dayIndex.\n */\nfunction useWeekAndDayIndices(\n  date: CalendarDate,\n  locale: string,\n  firstDayOfWeek?: DayOfWeek\n) {\n  let {dayIndex, weekIndex} = useMemo(() => {\n    // Get the day index within the week (0-6)\n    const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);\n\n    const monthStart = startOfMonth(date);\n\n    // Calculate the week index by finding which week this date falls into\n    // within the month's calendar grid\n    const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);\n    const dayOfMonth = date.day;\n\n    const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);\n\n    return {\n      weekIndex,\n      dayIndex\n    };\n  }, [date, locale, firstDayOfWeek]);\n\n  return {dayIndex, weekIndex};\n}\n"],"names":[],"version":3,"file":"Calendar.css.map"}

package/dist/Calendar.mjs

@@ -42,205 +42,205 @@ const $f06f4d5597ad704c$export$3b805cea1f178355 = /*#__PURE__*/ (0, $gwkOZ$creat
 const $f06f4d5597ad704c$var$calendarStyles = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    rules += ' sd1';
-    rules += ' _ta1';
-    rules += ' Uj1';
-    rules += ' qj1';
-    if (!width) rules += ' ZJ1';
-    rules += ' __ca1';
+    rules += ' sd11';
+    rules += ' _ta11';
+    rules += ' Uj11';
+    rules += ' qj11';
+    if (!width) rules += ' ZJ11';
+    rules += ' __ca11';
     return rules;
 };
-const $f06f4d5597ad704c$var$headerStyles = " sd1 eb1 _Ce1 Za1";
-const $f06f4d5597ad704c$var$headingStyles = " sd1 eb1 _Ce1 Jy1 Gy1 Iy1 Hy1 Za1";
-const $f06f4d5597ad704c$var$titleStyles = " uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-e1 vx1 xd1 _xa1 xX0cczbc1 _xX0cczba1 xfd1 _xfa1 xfX0cczbc1 _xfX0cczba1 _Fd1 _FnuYUweb1 po1 _Wa1 _ub1 _va1 _sa1 Na1";
-const $f06f4d5597ad704c$var$headerCellStyles = " uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-c1 vx1 xd1 _xa1 xX0cczbc1 _xX0cczba1 xfd1 _xfa1 xfX0cczbc1 _xfX0cczba1 _Fd1 _FnuYUweb1 po1 ri1 _Wa1 Sp1 Sbd1 Rp1 Rkd1 Qe1";
+const $f06f4d5597ad704c$var$headerStyles = " sd11 eb11 _Ce11 Za11";
+const $f06f4d5597ad704c$var$headingStyles = " sd11 eb11 _Ce11 Jy11 Gy11 Iy11 Hy11 Za11";
+const $f06f4d5597ad704c$var$titleStyles = " uk11 ucJ9TBTb11 ud3Euai11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-e11 vx11 xd11 _xa11 xX0cczbc11 _xX0cczba11 xfd11 _xfa11 xfX0cczbc11 _xfX0cczba11 _Fd11 _FnuYUweb11 po11 _Wa11 _ub11 _va11 _sa11 Na11";
+const $f06f4d5597ad704c$var$headerCellStyles = " uk11 ucJ9TBTb11 ud3Euai11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-c11 vx11 xd11 _xa11 xX0cczbc11 _xX0cczba11 xfd11 _xfa11 xfX0cczbc11 _xfX0cczba11 _Fd11 _FnuYUweb11 po11 ri11 _Wa11 Sp11 Sbd11 Rp11 Rkd11 Qe11";
 const $f06f4d5597ad704c$var$cellStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' _Le1';
-    rules += ' -uq4sQ-Sp1';
-    if (props.isFirstChild) rules += ' Sd1';
-    else rules += ' Sp1';
-    if (props.isLastChild) rules += ' Rd1';
-    else rules += ' Rp1';
-    if (props.isFirstWeek) rules += ' Td1';
-    else rules += ' Tj1';
-    rules += ' Qj1';
-    rules += ' _Pc1';
-    rules += ' ZC1';
-    rules += ' Fx1';
-    if (props.isOutsideMonth) rules += ' sk1';
-    else rules += ' sd1';
-    rules += ' eb1';
-    rules += ' _Ca1';
-    rules += ' __ca1';
+    rules += ' _Le11';
+    rules += ' -uq4sQ-Sp11';
+    if (props.isFirstChild) rules += ' Sd11';
+    else rules += ' Sp11';
+    if (props.isLastChild) rules += ' Rd11';
+    else rules += ' Rp11';
+    if (props.isFirstWeek) rules += ' Td11';
+    else rules += ' Tj11';
+    rules += ' Qj11';
+    rules += ' _Pc11';
+    rules += ' ZC11';
+    rules += ' Fx11';
+    if (props.isOutsideMonth) rules += ' sk11';
+    else rules += ' sd11';
+    rules += ' eb11';
+    rules += ' _Ca11';
+    rules += ' __ca11';
     return rules;
 };
 const $f06f4d5597ad704c$var$cellInnerStyles = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf1';
-    else rules += ' _Le1';
-    rules += ' Oh1';
-    rules += ' Olc1';
-    rules += ' _Mc1';
-    if (props.isSelectionEnd) rules += ' _Kd1';
-    else if (props.isSelectionStart) rules += ' _Kd1';
+    if (props.isFocusVisible) rules += ' _Lf11';
+    else rules += ' _Le11';
+    rules += ' Oh11';
+    rules += ' Olc11';
+    rules += ' _Mc11';
+    if (props.isSelectionEnd) rules += ' _Kd11';
+    else if (props.isSelectionStart) rules += ' _Kd11';
     else if (props.isSelected) {
-        if (props.selectionMode === "range") rules += ' _Kb1';
-        else if (props.selectionMode === "single") rules += ' _Kd1';
-    } else if (props.isToday) rules += ' _Kd1';
-    else rules += ' _Kb1';
-    rules += ' Yd1';
-    rules += ' Yle1';
-    rules += ' Xb1';
-    rules += ' Xlb1';
-    rules += ' _2b1';
-    rules += ' _2lb1';
-    rules += ' _Pc1';
-    rules += ' uk1';
-    rules += ' ucJ9TBTb1';
-    rules += ' ud3Euai1';
-    rules += ' uea1';
-    rules += ' ugb1';
-    rules += ' uhd1';
-    rules += ' uje1';
-    rules += ' u2NhKxcl1';
-    rules += ' uic1';
-    rules += ' -_6BNtrc-c1';
-    rules += ' vx1';
-    rules += ' xb1';
-    rules += ' _xa1';
-    rules += ' _Fb1';
-    rules += ' _FnuYUwec1';
-    if (props.isDisabled) rules += ' pp1';
-    else if (props.isSelectionEnd) rules += ' px1';
-    else if (props.isSelectionStart) rules += ' px1';
+        if (props.selectionMode === "range") rules += ' _Kb11';
+        else if (props.selectionMode === "single") rules += ' _Kd11';
+    } else if (props.isToday) rules += ' _Kd11';
+    else rules += ' _Kb11';
+    rules += ' Yd11';
+    rules += ' Yle11';
+    rules += ' Xb11';
+    rules += ' Xlb11';
+    rules += ' _2b11';
+    rules += ' _2lb11';
+    rules += ' _Pc11';
+    rules += ' uk11';
+    rules += ' ucJ9TBTb11';
+    rules += ' ud3Euai11';
+    rules += ' uea11';
+    rules += ' ugb11';
+    rules += ' uhd11';
+    rules += ' uje11';
+    rules += ' u2NhKxcl11';
+    rules += ' uic11';
+    rules += ' -_6BNtrc-c11';
+    rules += ' vx11';
+    rules += ' xb11';
+    rules += ' _xa11';
+    rules += ' _Fb11';
+    rules += ' _FnuYUwec11';
+    if (props.isDisabled) rules += ' pp11';
+    else if (props.isSelectionEnd) rules += ' px11';
+    else if (props.isSelectionStart) rules += ' px11';
     else if (props.isSelected) {
-        if (props.selectionMode === "range") rules += ' pt1';
-        else rules += ' px1';
-    } else rules += ' pt1';
-    if (props.isDisabled) rules += ' plc1';
-    else if (props.isSelectionEnd) rules += ' ple1';
-    else if (props.isSelectionStart) rules += ' ple1';
-    else if (props.isSelected) rules += ' ple1';
-    else if (props.isToday) rules += ' pla1';
-    else rules += ' plb1';
-    rules += ' ri1';
-    rules += ' Za1';
-    rules += ' Fx1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
-    rules += ' sd1';
-    rules += ' eb1';
-    rules += ' _Ca1';
-    rules += ' _yb1';
+        if (props.selectionMode === "range") rules += ' pt11';
+        else rules += ' px11';
+    } else rules += ' pt11';
+    if (props.isDisabled) rules += ' plc11';
+    else if (props.isSelectionEnd) rules += ' ple11';
+    else if (props.isSelectionStart) rules += ' ple11';
+    else if (props.isSelected) rules += ' ple11';
+    else if (props.isToday) rules += ' pla11';
+    else rules += ' plb11';
+    rules += ' ri11';
+    rules += ' Za11';
+    rules += ' Fx11';
+    rules += ' og11';
+    rules += ' ng11';
+    rules += ' kg11';
+    rules += ' jg11';
+    rules += ' sd11';
+    rules += ' eb11';
+    rules += ' _Ca11';
+    rules += ' _yb11';
     if (props.isSelectionEnd) {
         if (props.isInvalid) {
             if (props.isFocusVisible) {
-                if (props.isUnavailable) rules += ' g7aei81';
-                else rules += ' gYvV9s1';
-            } else if (props.isPressed) rules += ' gYvV9s1';
+                if (props.isUnavailable) rules += ' g7aei811';
+                else rules += ' gYvV9s11';
+            } else if (props.isPressed) rules += ' gYvV9s11';
             else if (props.isHovered) {
-                if (props.isUnavailable) rules += ' g7aei81';
-                else rules += ' gYvV9s1';
-            } else rules += ' g7aei81';
-        } else if (props.isDisabled) rules += ' g91';
-        else if (props.isFocusVisible) rules += ' gUgARdd1';
-        else if (props.isPressed) rules += ' gUgARdd1';
-        else if (props.isHovered) rules += ' gUgARdd1';
-        else rules += ' g5qAiPc1';
+                if (props.isUnavailable) rules += ' g7aei811';
+                else rules += ' gYvV9s11';
+            } else rules += ' g7aei811';
+        } else if (props.isDisabled) rules += ' g911';
+        else if (props.isFocusVisible) rules += ' gUgARdd11';
+        else if (props.isPressed) rules += ' gUgARdd11';
+        else if (props.isHovered) rules += ' gUgARdd11';
+        else rules += ' g5qAiPc11';
     } else if (props.isSelectionStart) {
         if (props.isInvalid) {
             if (props.isFocusVisible) {
-                if (props.isUnavailable) rules += ' g7aei81';
-                else rules += ' gYvV9s1';
-            } else if (props.isPressed) rules += ' gYvV9s1';
+                if (props.isUnavailable) rules += ' g7aei811';
+                else rules += ' gYvV9s11';
+            } else if (props.isPressed) rules += ' gYvV9s11';
             else if (props.isHovered) {
-                if (props.isUnavailable) rules += ' g7aei81';
-                else rules += ' gYvV9s1';
-            } else rules += ' g7aei81';
-        } else if (props.isDisabled) rules += ' g91';
-        else if (props.isFocusVisible) rules += ' gUgARdd1';
-        else if (props.isPressed) rules += ' gUgARdd1';
-        else if (props.isHovered) rules += ' gUgARdd1';
-        else rules += ' g5qAiPc1';
+                if (props.isUnavailable) rules += ' g7aei811';
+                else rules += ' gYvV9s11';
+            } else rules += ' g7aei811';
+        } else if (props.isDisabled) rules += ' g911';
+        else if (props.isFocusVisible) rules += ' gUgARdd11';
+        else if (props.isPressed) rules += ' gUgARdd11';
+        else if (props.isHovered) rules += ' gUgARdd11';
+        else rules += ' g5qAiPc11';
     } else if (props.isSelected) {
         if (props.selectionMode === "range") {
             if (props.isHovered) {
                 if (props.isInvalid) {
-                    if (props.isUnavailable) rules += ' g91';
-                    else rules += ' gJj9Tpd1';
-                } else rules += ' gNAacne1';
+                    if (props.isUnavailable) rules += ' g911';
+                    else rules += ' gJj9Tpd11';
+                } else rules += ' gNAacne11';
             }
         } else if (props.selectionMode === "single") {
             if (props.isInvalid) {
-                if (props.isFocusVisible) rules += ' gYvV9s1';
-                else if (props.isPressed) rules += ' gYvV9s1';
-                else if (props.isHovered) rules += ' gYvV9s1';
-                else rules += ' g7aei81';
-            } else if (props.isDisabled) rules += ' g91';
-            else if (props.isFocusVisible) rules += ' gUgARdd1';
-            else if (props.isPressed) rules += ' gUgARdd1';
-            else if (props.isHovered) rules += ' gUgARdd1';
-            else rules += ' g5qAiPc1';
+                if (props.isFocusVisible) rules += ' gYvV9s11';
+                else if (props.isPressed) rules += ' gYvV9s11';
+                else if (props.isHovered) rules += ' gYvV9s11';
+                else rules += ' g7aei811';
+            } else if (props.isDisabled) rules += ' g911';
+            else if (props.isFocusVisible) rules += ' gUgARdd11';
+            else if (props.isPressed) rules += ' gUgARdd11';
+            else if (props.isHovered) rules += ' gUgARdd11';
+            else rules += ' g5qAiPc11';
         }
     } else if (props.isToday) {
-        if (props.isDisabled) rules += ' gH1';
+        if (props.isDisabled) rules += ' gH11';
         else {
-            if (props.isPressed) rules += ' gw1';
-            else if (props.isFocusVisible) rules += ' gw1';
-            else if (props.isHovered) rules += ' gw1';
-            else rules += ' gE1';
+            if (props.isPressed) rules += ' gw11';
+            else if (props.isFocusVisible) rules += ' gw11';
+            else if (props.isHovered) rules += ' gw11';
+            else rules += ' gE11';
         }
-    } else if (props.isDisabled) rules += ' g91';
-    else if (props.isPressed) rules += ' gH1';
+    } else if (props.isDisabled) rules += ' g911';
+    else if (props.isPressed) rules += ' gH11';
     else if (props.isHovered) {
-        if (props.isUnavailable) rules += ' g91';
-        else rules += ' gH1';
-    } else rules += ' g91';
-    if (props.isUnavailable) rules += ' gl91';
-    else if (props.isSelectionEnd) rules += ' gle1';
-    else if (props.isSelectionStart) rules += ' gle1';
+        if (props.isUnavailable) rules += ' g911';
+        else rules += ' gH11';
+    } else rules += ' g911';
+    if (props.isUnavailable) rules += ' gl911';
+    else if (props.isSelectionEnd) rules += ' gle11';
+    else if (props.isSelectionStart) rules += ' gle11';
     else if (props.isSelected) {
         if (props.selectionMode === "range") {
-            if (props.isHovered) rules += ' gle1';
-        } else if (props.selectionMode === "single") rules += ' gle1';
-    } else if (props.isHovered) rules += ' gle1';
-    else if (props.isToday) rules += ' glb1';
-    else rules += ' gl91';
+            if (props.isHovered) rules += ' gle11';
+        } else if (props.selectionMode === "single") rules += ' gle11';
+    } else if (props.isHovered) rules += ' gle11';
+    else if (props.isToday) rules += ' glb11';
+    else rules += ' gl911';
     return rules;
 };
-const $f06f4d5597ad704c$var$unavailableStyles = " _Pa1 WzErnCb1 _EjhYzGc1 _RjhYzGc1 FlAZvq1 _ZN7ydnb1 og1 ng1 kg1 jg1 g5ZbAob1";
+const $f06f4d5597ad704c$var$unavailableStyles = " _Pa11 WzErnCb11 _EjhYzGc11 _RjhYzGc11 FlAZvq11 _ZN7ydnb11 og11 ng11 kg11 jg11 g5ZbAob11";
 const $f06f4d5597ad704c$var$selectionSpanStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa1';
-    rules += ' _9a1';
-    rules += ' Wr1';
-    rules += ' _AOJNuv1';
-    rules += ' _zr1';
-    rules += ' _lr1';
-    rules += ' _kc1';
-    rules += ' hc1';
-    rules += ' mc1';
-    rules += ' lc1';
-    rules += ' _ja1';
-    if (props.isInvalid) rules += ' ip1';
-    else rules += ' ix1';
-    rules += ' ilb1';
-    rules += ' og1';
-    rules += ' kg1';
-    rules += ' ng1';
-    rules += ' jg1';
-    if (props.isInvalid) rules += ' gZbQnx1';
-    else rules += ' gG1';
-    rules += ' gle1';
-    rules += ' _yb1';
+    rules += ' _Pa11';
+    rules += ' _9a11';
+    rules += ' Wr11';
+    rules += ' _AOJNuv11';
+    rules += ' _zr11';
+    rules += ' _lr11';
+    rules += ' _kc11';
+    rules += ' hc11';
+    rules += ' mc11';
+    rules += ' lc11';
+    rules += ' _ja11';
+    if (props.isInvalid) rules += ' ip11';
+    else rules += ' ix11';
+    rules += ' ilb11';
+    rules += ' og11';
+    rules += ' kg11';
+    rules += ' ng11';
+    rules += ' jg11';
+    if (props.isInvalid) rules += ' gZbQnx11';
+    else rules += ' gG11';
+    rules += ' gle11';
+    rules += ' _yb11';
     return rules;
 };
 const $f06f4d5597ad704c$export$e1aef45b828286de = /*#__PURE__*/ (0, $gwkOZ$forwardRef)(function Calendar(props, ref) {
@@ -285,7 +285,7 @@ const $f06f4d5597ad704c$export$e1aef45b828286de = /*#__PURE__*/ (0, $gwkOZ$forwa
                         })
                     }),
                     /*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
-                        className: " sd1 _tc1 Uj1 qj1 Za1 ed1",
+                        className: " sd11 _tc11 Uj11 qj11 Za11 ed11",
                         children: Array.from({
                             length: visibleMonths
                         }).map((_, i)=>/*#__PURE__*/ (0, $gwkOZ$jsx)($f06f4d5597ad704c$export$5bd780d491cfc46c, {
@@ -314,7 +314,7 @@ const $f06f4d5597ad704c$export$5bd780d491cfc46c = (props)=>{
     let firstDayOfWeek = rangeCalendarProps?.firstDayOfWeek ?? calendarProps?.firstDayOfWeek;
     // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.
     return /*#__PURE__*/ (0, $gwkOZ$jsxs)((0, $gwkOZ$CalendarGrid), {
-        className: " __na1 __oe1 _Bb1",
+        className: " __na11 __oe11 _Bb11",
         offset: {
             months: props.months
         },
@@ -378,13 +378,13 @@ const $f06f4d5597ad704c$export$77af08ed164baa7 = ()=>{
             else return /*#__PURE__*/ (0, $gwkOZ$jsxs)((0, $gwkOZ$Fragment1), {
                 children: [
                     /*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
-                        className: " _6b1 ZC1"
+                        className: " _6b11 ZC11"
                     }),
                     /*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
-                        className: " _6b1 Zo1"
+                        className: " _6b11 Zo11"
                     }),
                     /*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
-                        className: " _6b1 ZC1"
+                        className: " _6b11 ZC11"
                     }),
                     /*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
                         className: $f06f4d5597ad704c$var$titleStyles,
@@ -401,12 +401,12 @@ const $f06f4d5597ad704c$export$adb29da0ac001538 = (props1)=>{
         className: function anonymous(props) {
             let rules = " ";
             if (props.direction === "rtl") {
-                rules += ' -Z4Pn4c-a1';
-                rules += ' __Ha1';
+                rules += ' -Z4Pn4c-a11';
+                rules += ' __Ha11';
             }
             if (props.direction === "rtl") {
-                rules += ' -_04Pn4c-a1';
-                rules += ' __Ha1';
+                rules += ' -_04Pn4c-a11';
+                rules += ' __Ha11';
             }
             return rules;
         }({
@@ -489,7 +489,7 @@ const $f06f4d5597ad704c$var$CalendarCellInner = (props)=>{
     // when valid, only show background for available selected dates
     let isBackgroundStyleApplied = isSelected && isRangeSelection && (isInvalid || !isUnavailable) && (isDateInRange(prevDay) || nextDay.month === date.month && isDateInRange(nextDay));
     return /*#__PURE__*/ (0, $gwkOZ$jsxs)("div", {
-        className: " _Pc1 ZvFFGYc1 -_4Isswc-ZvFFGYc1 -Z_-ZC1",
+        className: " _Pc11 ZvFFGYc11 -_4Isswc-ZvFFGYc11 -Z_-ZC11",
         children: [
             /*#__PURE__*/ (0, $gwkOZ$jsxs)("div", {
                 ref: ref,