@opengovsg/oui 0.0.14 → 0.0.15

package/dist/cjs/banner/banner.cjs

@@ -7,9 +7,9 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
 var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
 var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.cjs');
+var button = require('../button/button.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');
 
 const i18nStrings = {

package/dist/cjs/date-picker/date-picker.cjs

@@ -6,7 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
 var calendar$1 = require('../calendar/calendar.cjs');
 require('@internationalized/date');
 var dateField = require('../date-field/date-field.cjs');
@@ -14,6 +13,7 @@ var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
+var button = require('../button/button.cjs');
 
 function DatePicker(originalProps) {
   const [

package/dist/cjs/date-range-picker/date-range-picker.cjs

@@ -7,13 +7,13 @@ var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
 var dateField = require('../date-field/date-field.cjs');
 var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var rangeCalendar = require('../range-calendar/range-calendar.cjs');
 var utils = require('../system/utils.cjs');
 var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
+var button = require('../button/button.cjs');
 
 function DateRangePicker(originalProps) {
   const [

package/dist/cjs/index.cjs

@@ -2,7 +2,6 @@
 'use strict';
 
 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');
@@ -19,13 +18,11 @@ 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 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 badge = require('./badge/badge.cjs');
 var calendar = require('./calendar/calendar.cjs');
 var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
 var utils = require('./calendar/utils.cjs');
@@ -44,11 +41,13 @@ var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
 var usePagination = require('./pagination/hooks/use-pagination.cjs');
 var usePagination$1 = require('./pagination/use-pagination.cjs');
+var button = require('./button/button.cjs');
+var banner = require('./banner/banner.cjs');
+var badge = require('./badge/badge.cjs');
 
 
 
 exports.useControllableState = useControllableState.useControllableState;
-exports.Button = button.Button;
 exports.GovtBanner = govtBanner.GovtBanner;
 exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
@@ -70,14 +69,12 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
 exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
 exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
 exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
-exports.Banner = banner.Banner;
 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.Badge = badge.Badge;
 exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
@@ -122,3 +119,6 @@ exports.PaginationItem = paginationItem.PaginationItem;
 exports.PaginationItemType = usePagination.PaginationItemType;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination$1.usePagination;
+exports.Button = button.Button;
+exports.Banner = banner.Banner;
+exports.Badge = badge.Badge;

package/dist/cjs/select/select.cjs

@@ -6,12 +6,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
 var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.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 button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
@@ -47,11 +47,11 @@ function Select({
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[selectVariantContext.SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsxs(
     reactAriaComponents.Select,
     {
+      ...props,
       className: ouiTheme.composeRenderProps(
-        props.className,
+        props.className ?? classNames?.base,
         (className, renderProps) => styles.base({ className, ...renderProps })
       ),
-      ...props,
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/esm/banner/banner.js

@@ -5,9 +5,9 @@ import { useMemo, useRef } from 'react';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } from '@opengovsg/oui-theme';
-import { Button } from '../button/button.js';
 import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
+import { Button } from '../button/button.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const i18nStrings = {

package/dist/esm/date-picker/date-picker.js

@@ -4,7 +4,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
 import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Button } from '../button/button.js';
 import { Calendar as Calendar$1 } from '../calendar/calendar.js';
 import '@internationalized/date';
 import { DateInput } from '../date-field/date-field.js';
@@ -12,6 +11,7 @@ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
+import { Button } from '../button/button.js';
 
 function DatePicker(originalProps) {
   const [

package/dist/esm/date-range-picker/date-range-picker.js

@@ -5,13 +5,13 @@ import { useMemo } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
 import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Button } from '../button/button.js';
 import { DateInput } from '../date-field/date-field.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { RangeCalendar } from '../range-calendar/range-calendar.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
+import { Button } from '../button/button.js';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/index.js

@@ -1,6 +1,5 @@
 "use strict";
 export { useControllableState } from './hooks/use-controllable-state.js';
-export { Button } from './button/button.js';
 export { GovtBanner } from './govt-banner/govt-banner.js';
 export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
@@ -17,13 +16,11 @@ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
 export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
 export { ComboBoxItem } from './combo-box/combo-box-item.js';
 export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
-export { Banner } from './banner/banner.js';
 export { TagField } from './tag-field/tag-field.js';
 export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
-export { Badge } from './badge/badge.js';
 export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
 export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
 export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
@@ -42,3 +39,6 @@ export { PaginationCursor } from './pagination/pagination-cursor.js';
 export { PaginationItem } from './pagination/pagination-item.js';
 export { PaginationItemType } from './pagination/hooks/use-pagination.js';
 export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
+export { Button } from './button/button.js';
+export { Banner } from './banner/banner.js';
+export { Badge } from './badge/badge.js';

package/dist/esm/select/select.js

@@ -4,12 +4,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Provider, Select as Select$1, SelectValue, Virtualizer, ListLayout, ListBox } from 'react-aria-components';
 import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { Button } from '../button/button.js';
 import { Label, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { SelectVariantContext } from './select-variant-context.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import { Button } from '../button/button.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
@@ -45,11 +45,11 @@ function Select({
   return /* @__PURE__ */ jsx(Provider, { values: [[SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxs(
     Select$1,
     {
+      ...props,
       className: composeRenderProps(
-        props.className,
+        props.className ?? classNames?.base,
         (className, renderProps) => styles.base({ className, ...renderProps })
       ),
-      ...props,
       children: [
         label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, className: classNames?.label, children: label }),
         /* @__PURE__ */ jsxs(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -44,10 +44,11 @@
     "lucide-react": "^0.475.0",
     "motion": "^12.18.1",
     "prettier": "^3.5.3",
+    "react": "^19.0.0",
     "storybook": "9.1.1",
     "tsx": "^4.20.3",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.14",
+    "@opengovsg/oui-theme": "0.0.15",
     "@oui/chromatic": "0.0.0",
     "@oui/eslint-config": "0.0.0",
     "@oui/prettier-config": "0.0.0",
@@ -69,7 +70,6 @@
     "fuzzysort": "^3.1.0",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.1.5",
-    "react": "^19.0.0",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
     "react-stately": "^3.39.0",
@@ -81,8 +81,9 @@
   "prettier": "@oui/prettier-config",
   "peerDependencies": {
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
+    "react": ">= 18",
     "react-aria-components": "^1.10.1",
-    "@opengovsg/oui-theme": "0.0.14"
+    "@opengovsg/oui-theme": "0.0.15"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",