@opengovsg/oui 0.0.0-snapshot-20251103063040 → 0.0.0-snapshot-20251203091804

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

@@ -0,0 +1,309 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, useMemo, useEffect } from 'react';
+import { useFormValidationState } from '@react-stately/form';
+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 Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.js';
+
+const FileDropzone = (originalProps) => {
+  const [props, variantProps] = mapPropsVariants(
+    originalProps,
+    fileDropzoneStyles.variantKeys
+  );
+  const {
+    name,
+    allowedMimeTypes = [],
+    maxFileSize = Number.POSITIVE_INFINITY,
+    minFileSize = 0,
+    showFileSizeText = true,
+    maxFiles = 1,
+    isDisabled,
+    isReadOnly,
+    classNames,
+    itemClassNames,
+    validator,
+    showRejectedFiles,
+    onError,
+    errorMessage,
+    label,
+    description,
+    children,
+    hideDropzoneOnValue = maxFiles === 1,
+    imagePreview = "small"
+  } = props;
+  const [value, setValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue || [],
+    onChange: props.onChange
+  });
+  const [rejections, setRejections] = useControllableState({
+    value: props.rejections,
+    defaultValue: [],
+    onChange: props.onRejection
+  });
+  const validationState = useFormValidationState({
+    ...props,
+    value
+  });
+  const { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+    ...props,
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  const slots = fileDropzoneStyles(variantProps);
+  const fileSizeTextId = useId();
+  const formatError = useCallback(
+    (error) => formatErrorMessage(error, {
+      maxFileSize,
+      minFileSize,
+      maxFiles
+    }),
+    [maxFileSize, maxFiles, minFileSize]
+  );
+  const onDrop = useCallback(
+    (acceptedFiles, fileRejections) => {
+      const files = acceptedFiles;
+      if (showRejectedFiles) {
+        const invalidFiles = fileRejections.map(({ file, errors }) => {
+          file.errors = errors;
+          return file;
+        });
+        setRejections(invalidFiles);
+      }
+      setValue(files);
+      if (onError && fileRejections.length > 0) {
+        const firstError = fileRejections[0].errors[0];
+        onError(formatError(firstError));
+      }
+    },
+    [formatError, onError, setRejections, setValue, showRejectedFiles]
+  );
+  const handleRemoveFile = useCallback(
+    (fileName) => {
+      setValue((files) => files.filter((file) => file.name !== fileName));
+    },
+    [setValue]
+  );
+  const handleRemoveRejection = useCallback(
+    (fileName) => {
+      setRejections(
+        (rejections2) => rejections2.filter((file) => file.name !== fileName)
+      );
+    },
+    [setRejections]
+  );
+  const { getInputProps, ...dropzoneState } = useDropzone({
+    validator,
+    accept: allowedMimeTypes.reduce(
+      (acc, type) => ({ ...acc, [type]: [] }),
+      {}
+    ),
+    onError: (e) => onError?.(e.message),
+    onDrop,
+    disabled: isDisabled,
+    noDrag: isReadOnly,
+    // Prevent ref hijack when there is a label
+    noClick: true,
+    noKeyboard: true,
+    maxSize: maxFileSize,
+    minSize: minFileSize,
+    maxFiles,
+    multiple: maxFiles !== 1
+  });
+  const fileSizeText = useMemo(() => {
+    const notDefaultMaxFileSize = maxFileSize !== Number.POSITIVE_INFINITY;
+    const notDefaultMinFileSize = minFileSize !== 0;
+    const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
+    if (!shouldShow) return null;
+    if (notDefaultMaxFileSize && notDefaultMinFileSize) {
+      return `File size must be between ${formatBytes(minFileSize, 2)} and ${formatBytes(
+        maxFileSize,
+        2
+      )}`;
+    }
+    if (notDefaultMaxFileSize) {
+      return `Maximum file size: ${formatBytes(maxFileSize, 2)}`;
+    }
+    if (notDefaultMinFileSize) {
+      return `Minimum file size: ${formatBytes(minFileSize, 2)}`;
+    }
+    return null;
+  }, [maxFileSize, minFileSize, showFileSizeText]);
+  const triggerFileSelector = useCallback(() => {
+    if (isDisabled || isReadOnly) return;
+    dropzoneState.inputRef.current?.click();
+  }, [dropzoneState, isDisabled, isReadOnly]);
+  useEffect(() => {
+    if (value.length <= maxFiles) {
+      let changed = false;
+      const newFiles = value.map((file) => {
+        if (file.errors?.some((e) => e.code === "too-many-files")) {
+          file.errors = file.errors.filter((e) => e.code !== "too-many-files");
+          changed = true;
+        }
+        return file;
+      });
+      if (changed) {
+        setValue(newFiles);
+      }
+    }
+  }, [maxFiles, setValue, value]);
+  const inputProps = useMemo(() => {
+    const inputProps2 = { ...fieldProps, name };
+    if (fileSizeText) {
+      inputProps2["aria-describedby"] = inputProps2["aria-describedby"] ? `${inputProps2["aria-describedby"]} ${fileSizeTextId}` : fileSizeTextId;
+    }
+    return getInputProps(inputProps2);
+  }, [fieldProps, getInputProps, fileSizeTextId, name, fileSizeText]);
+  const showDropzone = useMemo(() => {
+    if (hideDropzoneOnValue) {
+      return value.length < maxFiles;
+    }
+    return true;
+  }, [hideDropzoneOnValue, maxFiles, value.length]);
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      values: [
+        [
+          FileDropzoneStyleContext,
+          { slots, classNames, itemClassNames, ...variantProps }
+        ],
+        [
+          FileDropzoneStateContext,
+          {
+            isDisabled,
+            isReadOnly,
+            maxFiles,
+            maxFileSize,
+            showDropzone,
+            files: value,
+            handleRemoveFile,
+            handleRemoveRejection,
+            formatError,
+            inputProps,
+            triggerFileSelector,
+            ...dropzoneState
+          }
+        ],
+        [LabelContext, labelProps],
+        [
+          GroupContext,
+          {
+            role: "presentation",
+            isInvalid,
+            isDisabled: props.isDisabled || false
+          }
+        ],
+        [
+          TextContext,
+          {
+            slots: {
+              fileSize: {},
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }
+        ],
+        [FieldErrorContext, { isInvalid, validationErrors, validationDetails }]
+      ],
+      children: /* @__PURE__ */ jsxs(Group, { className: slots.base({ className: classNames?.base }), children: [
+        label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, children: label }),
+        showDropzone && /* @__PURE__ */ jsx(FileDropzoneDropzone, {}),
+        value.map((file) => {
+          if (typeof children === "function") {
+            return children({
+              file,
+              removeFile: () => handleRemoveFile(file.name)
+            });
+          }
+          return /* @__PURE__ */ jsx(FileInfo, { imagePreview, file }, file.name);
+        }),
+        rejections.length >= 1 && rejections.map((rj) => /* @__PURE__ */ jsx(FileInfo, { imagePreview, file: rj }, rj.name)),
+        fileSizeText && /* @__PURE__ */ jsx(
+          Description,
+          {
+            size: variantProps.size,
+            id: fileSizeTextId,
+            slot: "fileSize",
+            children: fileSizeText
+          }
+        ),
+        description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
+        errorMessage && /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
+      ] })
+    }
+  );
+};
+const FileDropzoneDropzone = () => {
+  const {
+    maxFiles,
+    getRootProps,
+    inputProps,
+    triggerFileSelector,
+    isDisabled,
+    isDragActive
+  } = useFileDropzoneStateContext();
+  const { slots, classNames } = useFileDropzoneStyleContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getRootProps({
+        "aria-disabled": isDisabled,
+        className: slots.group({
+          className: classNames?.group
+        })
+      }),
+      tabIndex: isDisabled ? void 0 : 0,
+      onClick: triggerFileSelector,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          triggerFileSelector();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("input", { ...inputProps }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-dragging": dataAttr(isDragActive),
+            className: slots.dropzone({ className: classNames?.dropzone }),
+            children: [
+              /* @__PURE__ */ jsx(Upload, { className: slots.icon({ className: classNames?.icon }) }),
+              /* @__PURE__ */ jsxs("div", { className: slots.text({ className: classNames?.text }), children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: slots.dropzoneHighlight({
+                      className: classNames?.dropzoneHighlight
+                    }),
+                    children: [
+                      "Choose ",
+                      maxFiles === 1 ? `file` : `files`
+                    ]
+                  }
+                ),
+                " ",
+                "or drag and drop here"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { FileDropzone };

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

@@ -0,0 +1,144 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { fileInfoDropzoneStyles, cn } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
+import { formatBytes } from './utils.js';
+import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.js';
+
+const FileInfo = ({ file, imagePreview, classNames }) => {
+  const {
+    handleRemoveFile,
+    handleRemoveRejection,
+    formatError,
+    isDisabled,
+    isReadOnly
+  } = useFileDropzoneStateContext();
+  const { size, variant, itemClassNames } = useFileDropzoneStyleContext();
+  const readableFileSize = formatBytes(file.size, 2);
+  const styles = fileInfoDropzoneStyles({
+    size,
+    variant,
+    imagePreview: imagePreview ?? void 0
+  });
+  const [previewSrc, setPreviewSrc] = useState("");
+  useEffect(() => {
+    let objectUrl = "";
+    if (file.type.startsWith("image/")) {
+      objectUrl = URL.createObjectURL(file);
+      setPreviewSrc(objectUrl);
+    }
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.base({
+        className: cn(itemClassNames?.base, classNames?.base)
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sr-only", children: [
+          "File attached: ",
+          file.name,
+          " with file size of ",
+          readableFileSize
+        ] }),
+        imagePreview && previewSrc && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.imageContainer({
+              className: cn(
+                itemClassNames?.imageContainer,
+                classNames?.imageContainer
+              )
+            }),
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: previewSrc,
+                alt: `Image preview of uploaded file: ${file.name}`,
+                className: styles.image({
+                  className: cn(itemClassNames?.image, classNames?.image)
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.container({
+              className: cn(itemClassNames?.container, classNames?.container)
+            }),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles.textContainer({
+                    className: cn(
+                      itemClassNames?.textContainer,
+                      classNames?.textContainer
+                    )
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        title: file.name,
+                        className: styles.name({
+                          className: cn(itemClassNames?.name, classNames?.name)
+                        }),
+                        children: file.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: styles.size({
+                          className: cn(itemClassNames?.size, classNames?.size)
+                        }),
+                        children: readableFileSize
+                      }
+                    ),
+                    file.errors?.length && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: styles.error({
+                          className: cn(itemClassNames?.error, classNames?.error)
+                        }),
+                        children: file.errors.map(formatError).join(", ")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  isDisabled: isDisabled || isReadOnly,
+                  isIconOnly: !file.errors?.length,
+                  size: size === "md" ? "md" : "xs",
+                  variant: "clear",
+                  color: file.errors?.length ? "main" : "critical",
+                  "aria-label": "Remove file",
+                  className: styles.actionButton({
+                    className: cn(
+                      itemClassNames?.actionButton,
+                      classNames?.actionButton
+                    )
+                  }),
+                  onPress: () => file.errors?.length ? handleRemoveRejection(file.name) : handleRemoveFile(file.name),
+                  children: file.errors?.length ? "Dismiss" : /* @__PURE__ */ jsx(Trash2, {})
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { FileInfo };

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

@@ -0,0 +1,4 @@
+"use strict";
+export { FileDropzone } from './file-dropzone.js';
+export { FileInfo } from './file-info.js';
+export { formatBytes, formatErrorMessage } from './utils.js';

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+import { ErrorCode } from 'react-dropzone';
+
+const formatBytes = (bytes, decimals = 2, size) => {
+  const k = 1e3;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  if (bytes === 0 || bytes === void 0)
+    return size !== void 0 ? `0 ${size}` : "0 bytes";
+  const i = size !== void 0 ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+const formatErrorMessage = (error, config) => {
+  const { maxFileSize, minFileSize, maxFiles } = config;
+  switch (error.code) {
+    case ErrorCode.FileTooLarge:
+      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2)}`;
+    case ErrorCode.FileTooSmall:
+      return `Please upload a file above ${formatBytes(minFileSize, 2)}`;
+    case ErrorCode.TooManyFiles:
+      return `Maximum number of files allowed is ${maxFiles}.`;
+    default: {
+      return error.message;
+    }
+  }
+};
+
+export { formatBytes, formatErrorMessage };

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,5 +1,7 @@
 "use strict";
 export { useControllableState } from './hooks/use-controllable-state.js';
+export { useDraggable } from './hooks/use-draggable.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';
@@ -9,18 +11,24 @@ 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, FieldGroup, Label } from './field/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';
 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';
+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';
@@ -35,10 +43,13 @@ 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';
-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 { 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';

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 };