@opengovsg/oui 0.0.8 → 0.0.10

package/dist/cjs/combo-box/combo-box.cjs

@@ -13,6 +13,7 @@ var field = require('../field/field.cjs');
 var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
+var popover = require('../popover/popover.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
@@ -46,7 +47,7 @@ function ComboBoxEmptyState({
   size,
   className
 }) {
-  const styles = ouiTheme.comboBoxItemStyles({ size });
+  const styles = ouiTheme.listBoxItemStyles({ size });
   const formatMessage = reactAria.useMessageFormatter(i18nStrings);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -194,7 +195,7 @@ function ComboBox(originalProps) {
         description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
         /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          reactAriaComponents.Popover,
+          popover.Popover,
           {
             className: ouiTheme.composeRenderProps(
               classNames?.popover,

package/dist/cjs/index.cjs

@@ -1,10 +1,6 @@
 "use strict";
 'use strict';
 
-var input = require('./input/input.cjs');
-var useControllableState = require('./hooks/use-controllable-state.cjs');
-var button = require('./button/button.cjs');
-var govtBanner = require('./govt-banner/govt-banner.cjs');
 var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
 var spinner = require('./spinner/spinner.cjs');
@@ -12,26 +8,34 @@ var useSpinner = require('./spinner/use-spinner.cjs');
 var toggle = require('./toggle/toggle.cjs');
 var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
 var textField = require('./text-field/text-field.cjs');
-var field = require('./field/field.cjs');
 var textArea = require('./text-area/text-area.cjs');
 var textAreaField = require('./text-area-field/text-area-field.cjs');
+var tagField = require('./tag-field/tag-field.cjs');
+var tagFieldItem = require('./tag-field/tag-field-item.cjs');
+var select = require('./select/select.cjs');
+var selectItem = require('./select/select-item.cjs');
+var selectVariantContext = require('./select/select-variant-context.cjs');
+var useControllableState = require('./hooks/use-controllable-state.cjs');
+var button = require('./button/button.cjs');
+var govtBanner = require('./govt-banner/govt-banner.cjs');
+var input = require('./input/input.cjs');
+var field = require('./field/field.cjs');
 var comboBox = require('./combo-box/combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
 var comboBoxItem = require('./combo-box/combo-box-item.cjs');
 var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
 var banner = require('./banner/banner.cjs');
-var tagField = require('./tag-field/tag-field.cjs');
-var select = require('./select/select.cjs');
-var selectItem = require('./select/select-item.cjs');
-var selectVariantContext = require('./select/select-variant-context.cjs');
 var badge = require('./badge/badge.cjs');
+var date = require('@internationalized/date');
+var calendar = require('./calendar/calendar.cjs');
+var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
+var utils = require('./calendar/utils.cjs');
+var rangeCalendar = require('./range-calendar/range-calendar.cjs');
+var menu = require('./menu/menu.cjs');
+var popover = require('./popover/popover.cjs');
 
 
 
-exports.Input = input.Input;
-exports.useControllableState = useControllableState.useControllableState;
-exports.Button = button.Button;
-exports.GovtBanner = govtBanner.GovtBanner;
 exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
 exports.Spinner = spinner.Spinner;
@@ -39,12 +43,22 @@ exports.useSpinner = useSpinner.useSpinner;
 exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
 exports.TextField = textField.TextField;
+exports.TextArea = textArea.TextArea;
+exports.TextAreaField = textAreaField.TextAreaField;
+exports.TagField = tagField.TagField;
+exports.TagFieldItem = tagFieldItem.TagFieldItem;
+exports.Select = select.Select;
+exports.SelectItem = selectItem.SelectItem;
+exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
+exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
+exports.useControllableState = useControllableState.useControllableState;
+exports.Button = button.Button;
+exports.GovtBanner = govtBanner.GovtBanner;
+exports.Input = input.Input;
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
 exports.FieldGroup = field.FieldGroup;
 exports.Label = field.Label;
-exports.TextArea = textArea.TextArea;
-exports.TextAreaField = textAreaField.TextAreaField;
 exports.ComboBox = comboBox.ComboBox;
 exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
 exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
@@ -52,9 +66,28 @@ exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
 exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
 exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
 exports.Banner = banner.Banner;
-exports.TagField = tagField.TagField;
-exports.Select = select.Select;
-exports.SelectItem = selectItem.SelectItem;
-exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
-exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
 exports.Badge = badge.Badge;
+Object.defineProperty(exports, "CalendarDate", {
+	enumerable: true,
+	get: function () { return date.CalendarDate; }
+});
+exports.Calendar = calendar.Calendar;
+exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
+exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
+exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
+exports.getEraFormat = utils.getEraFormat;
+exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
+exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
+exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
+exports.RangeCalendar = rangeCalendar.RangeCalendar;
+exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
+exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
+exports.Menu = menu.Menu;
+exports.MenuItem = menu.MenuItem;
+exports.MenuSection = menu.MenuSection;
+exports.MenuSeparator = menu.MenuSeparator;
+exports.MenuTrigger = menu.MenuTrigger;
+exports.MenuVariantContext = menu.MenuVariantContext;
+exports.SubmenuTrigger = menu.SubmenuTrigger;
+exports.useMenuVariantContext = menu.useMenuVariantContext;
+exports.Popover = popover.Popover;

package/dist/cjs/menu/index.cjs

@@ -0,0 +1,15 @@
+"use strict";
+'use strict';
+
+var menu = require('./menu.cjs');
+
+
+
+exports.Menu = menu.Menu;
+exports.MenuItem = menu.MenuItem;
+exports.MenuSection = menu.MenuSection;
+exports.MenuSeparator = menu.MenuSeparator;
+exports.MenuTrigger = menu.MenuTrigger;
+exports.MenuVariantContext = menu.MenuVariantContext;
+exports.SubmenuTrigger = menu.SubmenuTrigger;
+exports.useMenuVariantContext = menu.useMenuVariantContext;

package/dist/cjs/menu/menu.cjs

@@ -0,0 +1,229 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
+var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
+var context = require('../system/react-utils/context.cjs');
+var popover = require('../popover/popover.cjs');
+
+const [MenuVariantContext, useMenuVariantContext] = context.createContext({
+  name: "MenuVariantContext",
+  strict: false
+});
+function MenuInner(originalProps, ref) {
+  [originalProps, ref] = reactAriaComponents.useContextProps(
+    originalProps,
+    ref,
+    MenuVariantContext
+  );
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.menuStyles.variantKeys
+  );
+  const { className, classNames, placement, ...rest } = props;
+  const styles = ouiTheme.menuStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[MenuVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Popover,
+    {
+      placement,
+      className: styles.popover({ className: classNames?.popover }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Menu,
+        {
+          ...rest,
+          ref,
+          className: reactAriaComponents.composeRenderProps(
+            className ?? classNames?.base,
+            (className2, renderProps) => styles.base({
+              className: className2,
+              ...renderProps
+            })
+          )
+        }
+      )
+    }
+  ) });
+}
+const Menu = utils.forwardRefGeneric(MenuInner);
+const MenuItem = react.forwardRef(function MenuItem2(originalProps, ref) {
+  [originalProps, ref] = reactAriaComponents.useContextProps(
+    originalProps,
+    ref,
+    MenuVariantContext
+  );
+  const [
+    {
+      classNames,
+      className,
+      multipleSelectionIcon: multipleSelectionIconProp,
+      singleSelectionIcon: singleSelectionIconProp,
+      startContent,
+      endContent,
+      ...props
+    },
+    variantProps
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.listBoxItemStyles.variantKeys);
+  const styles = ouiTheme.menuItemStyles(variantProps);
+  const multipleSelectionIcon = react.useMemo(() => {
+    if (multipleSelectionIconProp !== void 0) {
+      return multipleSelectionIconProp;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      check.default,
+      {
+        "aria-hidden": true,
+        className: styles.icon({ className: classNames?.icon })
+      }
+    );
+  }, [classNames?.icon, multipleSelectionIconProp, styles]);
+  const singleSelectionIcon = react.useMemo(() => {
+    if (singleSelectionIconProp !== void 0) {
+      return singleSelectionIconProp;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      check.default,
+      {
+        "aria-hidden": true,
+        className: styles.icon({ className: classNames?.icon })
+      }
+    );
+  }, [classNames?.icon, singleSelectionIconProp, styles]);
+  const showIconContainer = react.useCallback(
+    (selectionMode) => {
+      switch (selectionMode) {
+        case "none":
+          return false;
+        case "multiple":
+          return !!multipleSelectionIcon;
+        case "single":
+          return !!singleSelectionIcon;
+      }
+    },
+    [multipleSelectionIcon, singleSelectionIcon]
+  );
+  const defaultTextValue = react.useMemo(() => {
+    if (props.textValue) {
+      return props.textValue;
+    }
+    if (typeof props.children === "string") {
+      return props.children;
+    }
+    return void 0;
+  }, [props.children, props.textValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.MenuItem,
+    {
+      ref,
+      textValue: defaultTextValue,
+      ...props,
+      isDisabled: variantProps.isDisabled,
+      className: reactAriaComponents.composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({
+          className: className2,
+          ...renderProps
+        })
+      ),
+      children: reactAriaComponents.composeRenderProps(
+        props.children,
+        (children, { selectionMode, isSelected, hasSubmenu }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          startContent,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: styles.label({
+                className: classNames?.label
+              }),
+              children
+            }
+          ),
+          showIconContainer(selectionMode) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: styles.iconContainer({
+                className: classNames?.iconContainer
+              }),
+              children: [
+                isSelected && selectionMode === "multiple" && multipleSelectionIcon,
+                isSelected && selectionMode === "single" && singleSelectionIcon
+              ]
+            }
+          ),
+          endContent,
+          hasSubmenu && /* @__PURE__ */ jsxRuntime.jsx(
+            chevronRight.default,
+            {
+              "aria-hidden": true,
+              className: styles.icon({
+                className: classNames?.icon
+              })
+            }
+          )
+        ] })
+      )
+    }
+  );
+});
+function MenuSeparator(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Separator,
+    {
+      ...props,
+      className: ouiTheme.menuDividerStyles({
+        className: props.className
+      })
+    }
+  );
+}
+function MenuSectionInner(originalProps, ref) {
+  [originalProps, ref] = reactAriaComponents.useContextProps(
+    originalProps,
+    ref,
+    MenuVariantContext
+  );
+  const [{ title, classNames, ...props }, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.menuSectionStyles.variantKeys
+  );
+  const styles = ouiTheme.menuSectionStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.MenuSection,
+    {
+      ref,
+      className: styles.base({
+        className: props.className ?? classNames?.base
+      }),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Header,
+          {
+            className: styles.header({
+              className: classNames?.header
+            }),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: props.items, children: props.children })
+      ]
+    }
+  );
+}
+const MenuSection = utils.forwardRefGeneric(MenuSectionInner);
+const MenuTrigger = reactAriaComponents.MenuTrigger;
+const SubmenuTrigger = reactAriaComponents.SubmenuTrigger;
+
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.MenuSection = MenuSection;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;
+exports.MenuVariantContext = MenuVariantContext;
+exports.SubmenuTrigger = SubmenuTrigger;
+exports.useMenuVariantContext = useMenuVariantContext;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/{chevrons-up-down.cjs → chevron-left.cjs}

@@ -12,11 +12,8 @@ var createLucideIcon = require('../createLucideIcon.cjs');
  */
 
 
-const __iconNode = [
-  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
-  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
-];
-const ChevronsUpDown = createLucideIcon.default("ChevronsUpDown", __iconNode);
+const __iconNode = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon.default("ChevronLeft", __iconNode);
 
 exports.__iconNode = __iconNode;
-exports.default = ChevronsUpDown;
+exports.default = ChevronLeft;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon.default("ChevronRight", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = ChevronRight;

package/dist/cjs/popover/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var popover = require('./popover.cjs');
+
+
+
+exports.Popover = popover.Popover;

package/dist/cjs/popover/popover.cjs

@@ -0,0 +1,46 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+
+const Popover = ({
+  children,
+  showArrow,
+  className,
+  classNames,
+  ...props
+}) => {
+  const popoverContext = reactAriaComponents.useSlottedContext(reactAriaComponents.PopoverContext);
+  const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
+  let offset = showArrow ? 12 : 8;
+  offset = isSubmenu ? offset - 6 : offset;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Popover,
+    {
+      offset,
+      ...props,
+      className: reactAriaComponents.composeRenderProps(
+        className ?? classNames?.base,
+        (className2, renderProps) => ouiTheme.popoverStyles({ ...renderProps, className: className2 })
+      ),
+      children: [
+        showArrow && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.OverlayArrow, { className: "group", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: 12,
+            height: 12,
+            viewBox: "0 0 12 12",
+            className: ouiTheme.popoverArrowStyles({ className: classNames?.arrow }),
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0 L6 6 L12 0" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+};
+
+exports.Popover = Popover;

package/dist/cjs/range-calendar/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+'use strict';
+
+var rangeCalendar = require('./range-calendar.cjs');
+
+
+
+exports.RangeCalendar = rangeCalendar.RangeCalendar;
+exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
+exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;

package/dist/cjs/range-calendar/range-calendar.cjs

@@ -0,0 +1,188 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var date = require('@internationalized/date');
+var reactAriaComponents = require('react-aria-components');
+var useDeepCompare = require('use-deep-compare');
+var ouiTheme = require('@opengovsg/oui-theme');
+var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
+var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
+var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
+var calendarHeader = require('../calendar/calendar-header.cjs');
+var utils = require('../system/utils.cjs');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
+
+const RangeCalendar = react.forwardRef(function RangeCalendar2(originalProps, ref) {
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.calendarStyles.variantKeys
+  );
+  const {
+    className,
+    classNames,
+    weekdayStyle = "narrow",
+    minValue = new date.CalendarDate(1900, 0, 1),
+    maxValue = new date.CalendarDate(2100, 12, 31),
+    bottomContent,
+    showTodayButton = true,
+    errorMessage,
+    ...restProps
+  } = props;
+  const slots = useDeepCompare.useDeepCompareMemo(
+    () => ouiTheme.calendarStyles({ ...variantProps, isRange: true }),
+    [variantProps]
+  );
+  const context = react.useMemo(
+    () => ({
+      slots,
+      classNames,
+      className,
+      size: variantProps.size ?? ouiTheme.calendarStyles.defaultVariants.size
+    }),
+    [className, classNames, slots, variantProps.size]
+  );
+  const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
+  const dateToHighlight = react.useMemo(() => {
+    if (props.defaultFocusedValue !== void 0) {
+      return props.defaultFocusedValue;
+    }
+    return date.today(date.getLocalTimeZone());
+  }, [props.defaultFocusedValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.RangeCalendar,
+    {
+      ...restProps,
+      ref,
+      minValue,
+      maxValue,
+      className: ouiTheme.composeRenderProps(
+        className,
+        (className2, renderProps) => slots.base({
+          className: ouiTheme.cn(classNames?.base, className2),
+          ...renderProps
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[calendarStyleContext.CalendarStyleContext, context]], children: /* @__PURE__ */ jsxRuntime.jsxs(RangeCalendarStateWrapper, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: slots.gridWrapper({
+                className: classNames?.gridWrapper
+              }),
+              children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: slots.calendar({ className: classNames?.calendar }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(calendarHeader.CalendarHeader, { offsetMonths: index }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactAriaComponents.CalendarGrid,
+                      {
+                        className: slots.grid({ className: classNames?.grid }),
+                        weekdayStyle,
+                        offset: { months: index },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(calendarGridHeader.CalendarGridHeader, {}),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            reactAriaComponents.CalendarGridBody,
+                            {
+                              className: slots.gridBody({
+                                className: classNames?.gridBody
+                              }),
+                              children: (date) => /* @__PURE__ */ jsxRuntime.jsx(
+                                RangeCalendarCell,
+                                {
+                                  firstDayOfWeek: props.firstDayOfWeek,
+                                  dateToHighlight,
+                                  date,
+                                  isMultipleMonths: numberOfVisibleMonths >= 2
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                index
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            calendarBottomContent.CalendarBottomContent,
+            {
+              bottomContent,
+              showTodayButton
+            }
+          )
+        ] }) }),
+        errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Text,
+          {
+            className: slots.errorMessage({
+              className: classNames?.errorMessage
+            }),
+            slot: "errorMessage",
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  );
+});
+const RangeCalendarStateWrapper = ({
+  children
+}) => {
+  const state = react.useContext(reactAriaComponents.RangeCalendarStateContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[agnosticCalendarStateContext.AgnosticCalendarStateContext, state]], children });
+};
+const RangeCalendarCell = ({
+  date: date$1,
+  isMultipleMonths,
+  dateToHighlight,
+  firstDayOfWeek
+}) => {
+  const { classNames, slots } = calendarStyleContext.useCalendarStyleContext();
+  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const { locale } = reactAriaComponents.useLocale();
+  const dataAttributes = react.useMemo(() => {
+    const isDateHighlighted = dateToHighlight ? date$1.compare(dateToHighlight) === 0 : false;
+    const isSelected = state.isSelected(date$1);
+    const isDisabled = state.isCellDisabled(date$1);
+    const isInvalid = state.isInvalid(date$1);
+    const isFirstSelectedAfterDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date$1.subtract({ days: 1 }));
+    const isLastSelectedBeforeDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date$1.add({ days: 1 }));
+    const dayOfWeek = date.getDayOfWeek(date$1, locale, firstDayOfWeek);
+    const isRangeStart = isSelected && (isFirstSelectedAfterDisabled || dayOfWeek === 0 || date$1.day === 1);
+    const isRangeEnd = isSelected && (isLastSelectedBeforeDisabled || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
+    return {
+      "data-highlighted": ouiTheme.dataAttr(isDateHighlighted),
+      "data-range-end": ouiTheme.dataAttr(isRangeEnd),
+      "data-range-start": ouiTheme.dataAttr(isRangeStart)
+    };
+  }, [date$1, dateToHighlight, firstDayOfWeek, locale, state]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.CalendarCell,
+    {
+      className: ouiTheme.composeRenderProps(
+        classNames?.cell,
+        (className, renderProps) => slots.cell({
+          className,
+          isMultipleMonths,
+          ...renderProps
+        })
+      ),
+      ...dataAttributes,
+      date: date$1
+    }
+  );
+};
+
+exports.RangeCalendar = RangeCalendar;
+exports.RangeCalendarCell = RangeCalendarCell;
+exports.RangeCalendarStateWrapper = RangeCalendarStateWrapper;