@opengovsg/oui 0.0.23 → 0.0.25

package/dist/cjs/tag-field/tag-field.cjs

@@ -3,18 +3,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
+var popover = require('../popover/popover.cjs');
 var tagFieldItem = require('./tag-field-item.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.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 field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
-var popover = require('../popover/popover.cjs');
 
 function TagField({
   classNames,
@@ -99,7 +99,7 @@ function TagField({
       {
         className: styles.list({ className: classNames?.list }),
         itemClassNames: props.itemClassNames,
-        children: ({ key, itemProps, ...props2 }) => children ? children({ key, itemProps, ...props2 }) : /* @__PURE__ */ $670gB$react.createElement(tagFieldItem.TagFieldItem, { ...props2, ...itemProps, key })
+        children: ({ key, itemProps, ...props2 }) => children ? children({ key, itemProps, ...props2 }) : /* @__PURE__ */ react.createElement(tagFieldItem.TagFieldItem, { ...props2, ...itemProps, key })
       }
     ) })
   ] });

package/dist/cjs/tag-field/use-tag-field-state.cjs

@@ -1,14 +1,14 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var react = require('react');
 var form = require('@react-stately/form');
 var utils = require('@react-stately/utils');
 var useControllableState = require('../hooks/use-controllable-state.cjs');
 
 function useTagFieldState(props) {
   const { itemToText, itemToKey, defaultFilter } = props;
-  const itemsByKey = $670gB$react.useMemo(() => {
+  const itemsByKey = react.useMemo(() => {
     const items = props.items ?? props.defaultItems ?? [];
     return items.reduce(
       (acc, item) => {
@@ -18,7 +18,7 @@ function useTagFieldState(props) {
       {}
     ) ?? {};
   }, [itemToKey, props.defaultItems, props.items]);
-  const getSelectedItemsByKey = $670gB$react.useCallback(
+  const getSelectedItemsByKey = react.useCallback(
     (keys) => {
       if (!keys) return;
       return [...keys].map((key) => itemsByKey[key]);
@@ -36,13 +36,13 @@ function useTagFieldState(props) {
     defaultInputValue,
     props.onInputChange
   );
-  const controlledSelectedKeys = $670gB$react.useMemo(
+  const controlledSelectedKeys = react.useMemo(
     () => new Set(selectedItems.map(itemToKey)),
     [itemToKey, selectedItems]
   );
   const validation = form.useFormValidationState({
     ...props,
-    value: $670gB$react.useMemo(
+    value: react.useMemo(
       () => ({
         inputValue,
         selectedKeys: controlledSelectedKeys
@@ -50,7 +50,7 @@ function useTagFieldState(props) {
       [controlledSelectedKeys, inputValue]
     )
   });
-  const filteredItems = $670gB$react.useMemo(
+  const filteredItems = react.useMemo(
     () => (
       // No default filter if items are controlled.
       !!props.items || !defaultFilter ? props.items ?? [] : filterItems({

package/dist/cjs/tag-field/use-tag-field.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var react = require('react');
 var utils = require('@react-aria/utils');
 var reactVirtual = require('@tanstack/react-virtual');
 var downshift = require('downshift');
@@ -23,7 +23,7 @@ function useTagField(props, state) {
     label,
     virtualRowHeight = 40
   } = props;
-  const backupBtnRef = $670gB$react.useRef(null);
+  const backupBtnRef = react.useRef(null);
   buttonRef = buttonRef ?? backupBtnRef;
   const {
     selectedItems,
@@ -48,14 +48,14 @@ function useTagField(props, state) {
       }
     }
   });
-  const disabledKeysSet = $670gB$react.useMemo(() => {
+  const disabledKeysSet = react.useMemo(() => {
     return new Set(disabledKeys);
   }, [disabledKeys]);
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: items.length,
     getScrollElement: () => listBoxRef.current,
     estimateSize: () => virtualRowHeight,
-    getItemKey: $670gB$react.useCallback(
+    getItemKey: react.useCallback(
       (index) => itemToKey(items[index]),
       [itemToKey, items]
     ),

package/dist/cjs/text-area/text-area.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 
-const TextArea = $670gB$react.forwardRef(
+const TextArea = react.forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,

package/dist/cjs/text-area-field/text-area-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var textArea = require('../text-area/text-area.cjs');
 var field = require('../field/field.cjs');
+var textArea = require('../text-area/text-area.cjs');
 
 function TextAreaField({
   label,

package/dist/cjs/text-field/text-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var input = require('../input/input.cjs');
 var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 
 function TextField({
   label,

package/dist/cjs/toggle/toggle.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -21,12 +21,12 @@ const Toggle = ({
     ouiTheme.toggleStyles.variantKeys
   );
   const slots = ouiTheme.toggleStyles(variantProps);
-  const clonedThumbIcon = $670gB$react.useCallback(
+  const clonedThumbIcon = react.useCallback(
     (renderProps) => {
       const baseProps = {
         className: slots.thumbIcon({ className: classNames?.thumbIcon })
       };
-      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && $670gB$react.cloneElement(thumbIcon, baseProps);
+      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
     },
     [classNames?.thumbIcon, slots, thumbIcon]
   );

package/dist/esm/checkbox/checkbox.js

@@ -3,11 +3,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
 import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
 import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
-import { Label, Description, FieldError } from '../field/field.js';
 
 const Checkbox = ({
   classNames,

package/dist/esm/combo-box/combo-box.js

@@ -5,13 +5,13 @@ import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
 import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.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 X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
-import { Popover } from '../popover/popover.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

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

@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
 import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { mapPropsVariants } from '../system/utils.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { mapPropsVariants } from '../system/utils.js';
 
 function DateField(originalProps) {
   const [

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

@@ -4,13 +4,14 @@ 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 { mapPropsVariants } from '../system/utils.js';
-import { DateInput } from '../date-field/date-field.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 { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import '@internationalized/date';
+import { DateInput } from '../date-field/date-field.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Button } from '../button/button.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 { 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 { RangeCalendar } from '../range-calendar/range-calendar.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { DateInput } from '../date-field/date-field.js';
 import { Button } from '../button/button.js';
-import { Popover } from '../popover/popover.js';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/file-dropzone/file-dropzone.js

@@ -7,13 +7,13 @@ import { useField, useId } from 'react-aria';
 import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
 import { useDropzone } from 'react-dropzone';
 import { fileDropzoneStyles, dataAttr } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
+import { useControllableState } from '../hooks/use-controllable-state.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { FileDropzoneStyleContext, FileDropzoneStateContext, useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { FileInfo } from './file-info.js';
 import { formatErrorMessage, formatBytes } from './utils.js';
-import { useControllableState } from '../hooks/use-controllable-state.js';
 import Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.js';
-import { Label, Description, FieldError } from '../field/field.js';
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = mapPropsVariants(

package/dist/esm/hooks/index.js

@@ -1,2 +1,3 @@
 "use strict";
 export { useControllableState } from './use-controllable-state.js';
+export { useDraggable } from './use-draggable.js';

package/dist/esm/hooks/use-draggable.js

@@ -0,0 +1,86 @@
+"use strict";
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import { useMove } from '@react-aria/interactions';
+
+function useDraggable(props) {
+  const { targetRef, isDisabled = false, canOverflow = false } = props;
+  const boundary = useRef({ minLeft: 0, minTop: 0, maxLeft: 0, maxTop: 0 });
+  const isDragging = useRef(false);
+  let transform = { offsetX: 0, offsetY: 0 };
+  const onMoveStart = useCallback(() => {
+    isDragging.current = true;
+    const { offsetX, offsetY } = transform;
+    const targetRect = targetRef?.current?.getBoundingClientRect();
+    const targetLeft = targetRect?.left ?? 0;
+    const targetTop = targetRect?.top ?? 0;
+    const targetWidth = targetRect?.width ?? 0;
+    const targetHeight = targetRect?.height ?? 0;
+    const clientWidth = document.documentElement.clientWidth;
+    const clientHeight = document.documentElement.clientHeight;
+    const minLeft = -targetLeft + offsetX;
+    const minTop = -targetTop + offsetY;
+    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+    const maxTop = clientHeight - targetTop - targetHeight + offsetY;
+    boundary.current = {
+      minLeft,
+      minTop,
+      maxLeft,
+      maxTop
+    };
+  }, [transform, targetRef?.current]);
+  const onMove = useCallback(
+    (e) => {
+      if (isDisabled) {
+        return;
+      }
+      const { offsetX, offsetY } = transform;
+      const { minLeft, minTop, maxLeft, maxTop } = boundary.current;
+      let moveX = offsetX + e.deltaX;
+      let moveY = offsetY + e.deltaY;
+      if (!canOverflow) {
+        moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+        moveY = Math.min(Math.max(moveY, minTop), maxTop);
+      }
+      transform = {
+        offsetX: moveX,
+        offsetY: moveY
+      };
+      if (targetRef?.current) {
+        targetRef.current.style.transform = `translate(${moveX}px, ${moveY}px)`;
+      }
+    },
+    [isDisabled, transform, boundary.current, canOverflow, targetRef?.current]
+  );
+  const onMoveEnd = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const { moveProps } = useMove({
+    onMoveStart,
+    onMove,
+    onMoveEnd
+  });
+  const preventDefault = useCallback((e) => {
+    if (isDragging.current) {
+      e.preventDefault();
+    }
+  }, []);
+  useEffect(() => {
+    if (!isDisabled) {
+      document.body.addEventListener("touchmove", preventDefault, {
+        passive: false
+      });
+    }
+    return () => {
+      document.body.removeEventListener("touchmove", preventDefault);
+    };
+  }, [isDisabled, preventDefault]);
+  return {
+    moveProps: {
+      ...moveProps,
+      style: { cursor: !isDisabled ? "move" : void 0 }
+    }
+  };
+}
+
+export { useDraggable };

package/dist/esm/index.js

@@ -1,11 +1,16 @@
 "use strict";
+export { useControllableState } from './hooks/use-controllable-state.js';
+export { useDraggable } from './hooks/use-draggable.js';
+export { GovtBanner } from './govt-banner/govt-banner.js';
 export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
 export { Spinner } from './spinner/spinner.js';
 export { useSpinner } from './spinner/use-spinner.js';
 export { Toggle } from './toggle/toggle.js';
 export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
+export { Input } from './input/input.js';
 export { TextField } from './text-field/text-field.js';
+export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextAreaField } from './text-area-field/text-area-field.js';
 export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
@@ -17,32 +22,34 @@ 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 { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
-export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
-export { useControllableState } from './hooks/use-controllable-state.js';
-export { Button } from './button/button.js';
-export { GovtBanner } from './govt-banner/govt-banner.js';
-export { Input } from './input/input.js';
-export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
-export { Banner } from './banner/banner.js';
-export { Badge } from './badge/badge.js';
-export { CalendarDate } from '@internationalized/date';
 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';
+export { CalendarDate } from '@internationalized/date';
 export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
 export { Popover } from './popover/popover.js';
+export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
 export { DateField, DateInput } from './date-field/date-field.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { DateRangePicker } from './date-range-picker/date-range-picker.js';
 export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
 export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
-export { PaginationItemType } from './pagination/hooks/use-pagination.js';
 export { Pagination } from './pagination/pagination.js';
 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 { FileDropzone } from './file-dropzone/file-dropzone.js';
 export { FileInfo } from './file-dropzone/file-info.js';
 export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
 export { NumberField } from './number-field/number-field.js';
+export { Modal } from './modal/modal.js';
+export { ModalContent } from './modal/modal-content.js';
+export { ModalFooter } from './modal/modal-footer.js';
+export { ModalBody } from './modal/modal-body.js';
+export { ModalHeader } from './modal/modal-header.js';
+export { ModalVariantContext, useModalVariantContext } from './modal/modal-variant-context.js';
+export { Button } from './button/button.js';
+export { Banner } from './banner/banner.js';
+export { Badge } from './badge/badge.js';

package/dist/esm/menu/menu.js

@@ -4,11 +4,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useMemo, useCallback } from 'react';
 import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
 import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
+import { Popover } from '../popover/popover.js';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
 import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
 import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
 import { createContext } from '../system/react-utils/context.js';
-import { Popover } from '../popover/popover.js';
 
 const [MenuVariantContext, useMenuVariantContext] = createContext({
   name: "MenuVariantContext",

package/dist/esm/modal/i18n.js

@@ -0,0 +1,17 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    dismiss: "Dismiss"
+  },
+  "zh-SG": {
+    dismiss: "\u53D6\u6D88"
+  },
+  "ms-SG": {
+    dismiss: "Tutup"
+  },
+  "ta-SG": {
+    dismiss: "\u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/modal/index.js

@@ -0,0 +1,7 @@
+"use strict";
+export { Modal } from './modal.js';
+export { ModalContent } from './modal-content.js';
+export { ModalFooter } from './modal-footer.js';
+export { ModalBody } from './modal-body.js';
+export { ModalHeader } from './modal-header.js';
+export { ModalVariantContext, useModalVariantContext } from './modal-variant-context.js';

package/dist/esm/modal/modal-body.js

@@ -0,0 +1,24 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { ModalVariantContext } from './modal-variant-context.js';
+
+const ModalBody = forwardRef(function ModalBody2({ as, ...props }, ref) {
+  const { slots, classNames } = useContext(ModalVariantContext);
+  const Component = as || "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: slots.body({
+        className: cn(classNames?.body, props.className)
+      }),
+      ...props
+    }
+  );
+});
+
+export { ModalBody };

package/dist/esm/modal/modal-content.js

@@ -0,0 +1,52 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext, isValidElement } from 'react';
+import { useMessageFormatter } from 'react-aria';
+import { Dialog } from 'react-aria-components';
+import { cn } from '@opengovsg/oui-theme';
+import { i18nStrings } from './i18n.js';
+import { ModalVariantContext } from './modal-variant-context.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';
+import { Button } from '../button/button.js';
+
+function ModalContent({
+  closeButtonContent: closeButtonContentProp,
+  hideCloseButton,
+  closeButtonProps,
+  ...props
+}) {
+  const { slots, classNames, buttonSize } = useContext(ModalVariantContext);
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const closeButtonContent = isValidElement(closeButtonContentProp) ? closeButtonContentProp : /* @__PURE__ */ jsx(X, {});
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ...props,
+      className: slots.dialog({
+        className: props.className ?? classNames?.dialog
+      }),
+      children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        !hideCloseButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            slot: "close",
+            isIconOnly: true,
+            "aria-label": formatMessage("dismiss"),
+            size: buttonSize,
+            variant: "clear",
+            color: "neutral",
+            ...closeButtonProps,
+            className: slots.closeButton({
+              className: cn(classNames?.closeButton, props.className)
+            }),
+            children: closeButtonContent
+          }
+        ),
+        typeof props.children === "function" ? props.children(close) : props.children
+      ] })
+    }
+  );
+}
+
+export { ModalContent };

package/dist/esm/modal/modal-footer.js

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { ModalVariantContext } from './modal-variant-context.js';
+
+const ModalFooter = forwardRef(function ModalFooter2({ as, ...props }, ref) {
+  const { slots, classNames } = useContext(ModalVariantContext);
+  const Component = as || "footer";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: slots.footer({
+        className: cn(classNames?.footer, props.className)
+      }),
+      ...props
+    }
+  );
+});
+ModalFooter.displayName = "ModalFooter";
+
+export { ModalFooter };

package/dist/esm/modal/modal-header.js

@@ -0,0 +1,23 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { Heading } from 'react-aria-components';
+import { cn } from '@opengovsg/oui-theme';
+import { ModalVariantContext } from './modal-variant-context.js';
+
+function ModalHeader(props) {
+  const { slots, classNames } = useContext(ModalVariantContext);
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      slot: "title",
+      ...props,
+      className: slots.header({
+        className: cn(classNames?.header, props.className)
+      })
+    }
+  );
+}
+
+export { ModalHeader };

package/dist/esm/modal/modal-variant-context.js

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [ModalVariantContext, useModalVariantContext] = createContext({
+  name: "ModalVariantContext",
+  strict: true
+});
+
+export { ModalVariantContext, useModalVariantContext };