@opengovsg/oui 0.0.8 → 0.0.10

package/dist/cjs/button/button.cjs

@@ -7,9 +7,9 @@ var react = require('react');
 var utils = require('@react-aria/utils');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var ripple = require('../ripple/ripple.cjs');
 var useRipple = require('../ripple/use-ripple.cjs');
 var spinner = require('../spinner/spinner.cjs');
-var ripple = require('../ripple/ripple.cjs');
 
 const Button = react.forwardRef(
   ({

package/dist/cjs/calendar/agnostic-calendar-state-context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [AgnosticCalendarStateContext, useAgnosticCalendarStateContext] = context.createContext({
+  name: "AgnosticCalendarStateContext",
+  strict: true
+});
+
+exports.AgnosticCalendarStateContext = AgnosticCalendarStateContext;
+exports.useAgnosticCalendarStateContext = useAgnosticCalendarStateContext;

package/dist/cjs/calendar/calendar-bottom-content.cjs

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var date = require('@internationalized/date');
+var button = require('../button/button.cjs');
+var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
+var calendarStyleContext = require('./calendar-style-context.cjs');
+var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
+
+const CalendarBottomContent = ({
+  bottomContent,
+  showTodayButton
+}) => {
+  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
+  const formatMessage = useCalendarI18n.useCalendarI18n();
+  if (bottomContent) {
+    return bottomContent;
+  }
+  if (!showTodayButton) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: slots.bottomContentWrapper({
+        className: classNames?.bottomContentWrapper
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          isDisabled: state.isDisabled,
+          variant: "clear",
+          color: "sub",
+          size,
+          slot: null,
+          className: slots.todayButton({ className: classNames?.todayButton }),
+          onPress: () => {
+            state.setFocusedDate(date.today(date.getLocalTimeZone()));
+          },
+          children: formatMessage("today")
+        }
+      )
+    }
+  );
+};
+
+exports.CalendarBottomContent = CalendarBottomContent;

package/dist/cjs/calendar/calendar-grid-header.cjs

@@ -0,0 +1,28 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var calendarStyleContext = require('./calendar-style-context.cjs');
+
+function CalendarGridHeader() {
+  const { slots, classNames } = calendarStyleContext.useCalendarStyleContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.CalendarGridHeader,
+    {
+      className: slots.gridHeader({ className: classNames?.gridHeader }),
+      children: (day) => /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.CalendarHeaderCell,
+        {
+          className: slots.gridHeaderCell({
+            className: classNames?.gridHeaderCell
+          }),
+          children: day
+        }
+      )
+    }
+  );
+}
+
+exports.CalendarGridHeader = CalendarGridHeader;

package/dist/cjs/calendar/calendar-header.cjs

@@ -0,0 +1,74 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var button = require('../button/button.cjs');
+var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
+var calendarMonthDaySelector = require('./calendar-month-day-selector.cjs');
+var calendarStyleContext = require('./calendar-style-context.cjs');
+var utils = require('./utils.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 chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
+
+function CalendarHeader({ offsetMonths = 0 }) {
+  const { direction } = reactAriaComponents.useLocale();
+  const { slots, classNames, size } = calendarStyleContext.useCalendarStyleContext();
+  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const monthYearTitle = utils.useLocalizedMonthYear(
+    state.visibleRange.start.add({ months: offsetMonths }),
+    state.timeZone
+  );
+  if (offsetMonths === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(calendarMonthDaySelector.CalendarMonthDaySelector, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        reactAriaComponents.Group,
+        {
+          className: slots.buttonGroup({ className: classNames?.buttonGroup }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                size,
+                isIconOnly: true,
+                variant: "clear",
+                color: "sub",
+                slot: "previous",
+                className: slots.prevButton({ className: classNames?.prevButton }),
+                children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                size,
+                variant: "clear",
+                color: "sub",
+                isIconOnly: true,
+                slot: "next",
+                className: slots.nextButton({
+                  className: classNames?.nextButton
+                }),
+                children: direction === "rtl" ? /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(chevronRight.default, { "aria-hidden": true })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Heading,
+    {
+      className: slots.header({ className: classNames?.header }),
+      "aria-hidden": true,
+      level: 2,
+      children: monthYearTitle
+    }
+  );
+}
+
+exports.CalendarHeader = CalendarHeader;

package/dist/cjs/calendar/calendar-month-day-selector.cjs

@@ -0,0 +1,86 @@
+"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 select = require('../select/select.cjs');
+var selectItem = require('../select/select-item.cjs');
+var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
+var calendarStyleContext = require('./calendar-style-context.cjs');
+var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
+var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
+
+const CalendarMonthDaySelector = () => {
+  const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();
+  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const { months, years, datePartOrder } = useCalendarSelectors.useCalendarSelectors(state);
+  const formatMessage = useCalendarI18n.useCalendarI18n();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
+    if (part === "month") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        select.Select,
+        {
+          isDisabled: state.isDisabled,
+          size,
+          items: months,
+          variant: "clear",
+          classNames: {
+            trigger: slots.monthSelector({
+              className: classNames?.monthSelector
+            }),
+            list: slots.monthList({ className: classNames?.monthList }),
+            selectedText: slots.selectorText({
+              className: classNames?.selectorText
+            }),
+            popover: "min-w-[12ch]"
+          },
+          selectedKey: state.visibleRange.start.month,
+          "aria-label": formatMessage("selectMonth"),
+          onSelectionChange: (month) => {
+            state.setFocusedDate(
+              new date.CalendarDate(state.focusedDate.year, Number(month), 1)
+            );
+          },
+          children: (month) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: month.textValue })
+        },
+        part
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      select.Select,
+      {
+        isDisabled: state.isDisabled,
+        size,
+        variant: "clear",
+        items: years,
+        classNames: {
+          trigger: slots.yearSelector({
+            className: classNames?.yearSelector
+          }),
+          list: slots.yearList({ className: classNames?.yearList }),
+          selectedText: slots.selectorText({
+            className: classNames?.selectorText
+          })
+        },
+        selectedKey: state.visibleRange.start.year,
+        "aria-label": formatMessage("selectYear"),
+        onSelectionChange: (year) => {
+          state.setFocusedDate(
+            new date.CalendarDate(
+              Number(year),
+              state.focusedDate.month,
+              state.focusedDate.day
+            )
+          );
+        },
+        children: (year) => /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { children: year.textValue })
+      },
+      part
+    );
+  }) });
+};
+
+exports.CalendarMonthDaySelector = CalendarMonthDaySelector;

package/dist/cjs/calendar/calendar-style-context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [CalendarStyleContext, useCalendarStyleContext] = context.createContext({
+  name: "CalendarStyleContext",
+  strict: true
+});
+
+exports.CalendarStyleContext = CalendarStyleContext;
+exports.useCalendarStyleContext = useCalendarStyleContext;

package/dist/cjs/calendar/calendar.cjs

@@ -0,0 +1,155 @@
+"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 utils = require('../system/utils.cjs');
+var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
+var calendarBottomContent = require('./calendar-bottom-content.cjs');
+var calendarGridHeader = require('./calendar-grid-header.cjs');
+var calendarHeader = require('./calendar-header.cjs');
+var calendarStyleContext = require('./calendar-style-context.cjs');
+
+const Calendar = utils.forwardRef(function Calendar2(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),
+    [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.Calendar,
+    {
+      pageBehavior: "single",
+      ...restProps,
+      ref,
+      minValue,
+      maxValue,
+      className: reactAriaComponents.composeRenderProps(
+        className,
+        (className2, renderProps) => slots.base({
+          className: ouiTheme.cn(classNames?.base, className2),
+          ...renderProps
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarStateWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Provider, { values: [[calendarStyleContext.CalendarStyleContext, context]], 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(
+                                reactAriaComponents.CalendarCell,
+                                {
+                                  className: reactAriaComponents.composeRenderProps(
+                                    classNames?.cell,
+                                    (className2, renderProps) => slots.cell({
+                                      className: className2,
+                                      isMultipleMonths: numberOfVisibleMonths >= 2,
+                                      ...renderProps
+                                    })
+                                  ),
+                                  "data-highlighted": ouiTheme.dataAttr(
+                                    dateToHighlight ? date.compare(dateToHighlight) === 0 : false
+                                  ),
+                                  date
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                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 CalendarStateWrapper = ({
+  children
+}) => {
+  const state = react.useContext(reactAriaComponents.CalendarStateContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[agnosticCalendarStateContext.AgnosticCalendarStateContext, state]], children });
+};
+
+exports.Calendar = Calendar;
+exports.CalendarStateWrapper = CalendarStateWrapper;

package/dist/cjs/calendar/hooks/index.cjs

@@ -0,0 +1,11 @@
+"use strict";
+'use strict';
+
+var useCalendarI18n = require('./use-calendar-i18n.cjs');
+var useCalendarSelectors = require('./use-calendar-selectors.cjs');
+
+
+
+exports.i18nStrings = useCalendarI18n.i18nStrings;
+exports.useCalendarI18n = useCalendarI18n.useCalendarI18n;
+exports.useCalendarSelectors = useCalendarSelectors.useCalendarSelectors;

package/dist/cjs/calendar/hooks/use-calendar-i18n.cjs

@@ -0,0 +1,33 @@
+"use strict";
+'use strict';
+
+var reactAria = require('react-aria');
+
+const i18nStrings = {
+  "en-SG": {
+    selectMonth: "Select month",
+    selectYear: "Select year",
+    today: "Today"
+  },
+  "zh-SG": {
+    selectMonth: "\u9009\u62E9\u6708\u4EFD",
+    selectYear: "\u9009\u62E9\u5E74\u4EFD",
+    today: "\u4ECA\u5929"
+  },
+  "ms-SG": {
+    selectMonth: "Pilih bulan",
+    selectYear: "Pilih tahun",
+    today: "Hari ini"
+  },
+  "ta-SG": {
+    selectMonth: "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
+    selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
+    today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
+  }
+};
+const useCalendarI18n = () => {
+  return reactAria.useMessageFormatter(i18nStrings);
+};
+
+exports.i18nStrings = i18nStrings;
+exports.useCalendarI18n = useCalendarI18n;

package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs

@@ -0,0 +1,41 @@
+"use strict";
+"use client";
+'use strict';
+
+var react = require('react');
+var reactAria = require('react-aria');
+var utils = require('../utils.cjs');
+
+const useCalendarSelectors = (state) => {
+  const yearRange = react.useMemo(() => {
+    const start = state.minValue.year ?? 1900;
+    const end = state.maxValue.year ?? 2100;
+    return { start, end };
+  }, [state.maxValue, state.minValue]);
+  const dateFormatter = reactAria.useDateFormatter(state);
+  const datePartOrder = react.useMemo(() => {
+    const parts = dateFormatter.formatToParts(
+      state.visibleRange.start.toDate(state.timeZone)
+    );
+    const filteredParts = parts.filter(
+      (part) => ["year", "month"].includes(part.type)
+    );
+    const filteredPartNames = filteredParts.map((part) => part.type);
+    return filteredPartNames;
+  }, [dateFormatter, state.timeZone, state.visibleRange.start]);
+  const months = utils.useGenerateLocalizedMonths(state.timeZone);
+  const years = utils.useGenerateLocalizedYears(
+    yearRange.start,
+    yearRange.end,
+    state.timeZone
+  );
+  return react.useMemo(() => {
+    return {
+      months,
+      years,
+      datePartOrder
+    };
+  }, [datePartOrder, months, years]);
+};
+
+exports.useCalendarSelectors = useCalendarSelectors;

package/dist/cjs/calendar/index.cjs

@@ -0,0 +1,22 @@
+"use strict";
+'use strict';
+
+var calendar = require('./calendar.cjs');
+var calendarStyleContext = require('./calendar-style-context.cjs');
+var utils = require('./utils.cjs');
+var date = require('@internationalized/date');
+
+
+
+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;
+Object.defineProperty(exports, "CalendarDate", {
+	enumerable: true,
+	get: function () { return date.CalendarDate; }
+});

package/dist/cjs/calendar/types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+'use strict';
+

package/dist/cjs/calendar/utils.cjs

@@ -0,0 +1,62 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var date = require('@internationalized/date');
+var i18n = require('@react-aria/i18n');
+
+function getEraFormat(date) {
+  return date?.calendar.identifier === "gregory" && date.era === "BC" ? "short" : void 0;
+}
+function useLocalizedMonthYear(date, timeZone) {
+  const era = getEraFormat(date);
+  const monthFormatter = i18n.useDateFormatter({
+    month: "long",
+    year: "numeric",
+    era,
+    calendar: date.calendar.identifier,
+    timeZone
+  });
+  return monthFormatter.format(date.toDate(timeZone));
+}
+function useGenerateLocalizedMonths(timeZone, formatterOptions) {
+  const formatter = i18n.useDateFormatter({
+    month: "long",
+    timeZone,
+    ...formatterOptions
+  });
+  return react.useMemo(() => {
+    return Array.from({ length: 12 }, (_, i) => {
+      const id = i + 1;
+      return {
+        id,
+        textValue: formatter.format(
+          new date.CalendarDate(2020, id, 1).toDate(timeZone)
+        )
+      };
+    });
+  }, [formatter, timeZone]);
+}
+function useGenerateLocalizedYears(yearStart, yearEnd, timeZone, formatterOptions) {
+  const formatter = i18n.useDateFormatter({
+    year: "numeric",
+    timeZone,
+    ...formatterOptions
+  });
+  return react.useMemo(() => {
+    return Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => {
+      const year = yearStart + i;
+      return {
+        id: year,
+        textValue: formatter.format(
+          new date.CalendarDate(year, 1, 1).toDate(timeZone)
+        )
+      };
+    });
+  }, [formatter, yearStart, yearEnd, timeZone]);
+}
+
+exports.getEraFormat = getEraFormat;
+exports.useGenerateLocalizedMonths = useGenerateLocalizedMonths;
+exports.useGenerateLocalizedYears = useGenerateLocalizedYears;
+exports.useLocalizedMonthYear = useLocalizedMonthYear;

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

@@ -81,7 +81,7 @@ function ComboBoxFuzzy(originalProps) {
     },
     [onInputChangeProp, preparedItems]
   );
-  const comboboxItemStyles = ouiTheme.comboBoxItemStyles(variantProps);
+  const itemStyles = ouiTheme.listBoxItemStyles(variantProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
     comboBox.ComboBox,
     {
@@ -95,7 +95,7 @@ function ComboBoxFuzzy(originalProps) {
         /* @__PURE__ */ jsxRuntime.jsx(
           reactAriaComponents.Text,
           {
-            className: comboboxItemStyles.label({
+            className: itemStyles.label({
               className: itemClassNames?.label
             }),
             slot: "label",
@@ -114,7 +114,7 @@ function ComboBoxFuzzy(originalProps) {
         item.description && /* @__PURE__ */ jsxRuntime.jsx(
           reactAriaComponents.Text,
           {
-            className: comboboxItemStyles.description({
+            className: itemStyles.description({
               className: itemClassNames?.description
             }),
             slot: "description",

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

@@ -18,8 +18,8 @@ const ComboBoxItem = utils.forwardRef(function ComboBoxItem2(originalProps, ref)
   const [
     { className, description, children, classNames, ...props },
     variantProps
-  ] = utils.mapPropsVariants(originalProps, ouiTheme.comboBoxItemStyles.variantKeys);
-  const styles = ouiTheme.comboBoxItemStyles(variantProps);
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.listBoxItemStyles.variantKeys);
+  const styles = ouiTheme.listBoxItemStyles(variantProps);
   const defaultTextValue = react.useMemo(() => {
     if (props.textValue) {
       return props.textValue;