musae 0.2.26 → 0.3.1

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

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var picker = require('../picker/picker.cjs');
+var calendar = require('../calendar/calendar.cjs');
+var hooks = require('./hooks.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var input = require('../input/input.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var DatePicker = function DatePicker(props) {
+  var _value$format;
+  var ref = React.useRef(null);
+  var _useValue = hooks.useValue([props.value, props.onChange, ref]),
+    onChange = _useValue.onChange,
+    value = _useValue.value;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.DatePicker);
+  var styled = {
+    input: stylex.default.props(input.styles.input),
+    calendar: {
+      className: "musaex-1pgy25r"
+    }
+  };
+  return /*#__PURE__*/React.createElement(picker.default, {
+    ref: ref,
+    className: classNames[className.DatePickerClassToken.Picker],
+    pickable: /*#__PURE__*/React.createElement(calendar.default, {
+      className: styled.calendar.className,
+      style: styled.calendar.style,
+      value: value,
+      onClick: onChange
+    }),
+    popupWidth: false
+  }, /*#__PURE__*/React.createElement("input", {
+    className: relax.clsx(classNames[className.DatePickerClassToken.Input], styled.input.className),
+    style: styled.input.style,
+    value: (_value$format = value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD")) !== null && _value$format !== void 0 ? _value$format : "",
+    readOnly: true
+  }));
+};
+
+exports.default = DatePicker;

package/dist/components/date-picker/{date-picker.js → date-picker.mjs}

@@ -1,23 +1,23 @@
 import React, { useRef } from 'react';
-import Picker from '../picker/picker.js';
-import Calendar from '../calendar/calendar.js';
-import { useValue } from './hooks.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { DatePickerClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Picker from '../picker/picker.mjs';
+import Calendar from '../calendar/calendar.mjs';
+import { useValue } from './hooks.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { DatePickerClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { clsx } from '@aiszlab/relax';
-import { styles } from '../input/input.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { styles } from '../input/input.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
-var DatePicker = function DatePicker(props$1) {
+var DatePicker = function DatePicker(props) {
   var _value$format;
   var ref = useRef(null);
-  var _useValue = useValue([props$1.value, props$1.onChange, ref]),
+  var _useValue = useValue([props.value, props.onChange, ref]),
     onChange = _useValue.onChange,
     value = _useValue.value;
   var classNames = useClassNames(ComponentToken.DatePicker);
   var styled = {
-    input: props(styles.input),
+    input: _stylex.props(styles.input),
     calendar: {
       className: "musaex-1pgy25r"
     }
@@ -39,6 +39,5 @@ var DatePicker = function DatePicker(props$1) {
     readOnly: true
   }));
 };
-var DatePicker$1 = DatePicker;
 
-export { DatePicker$1 as default };
+export { DatePicker as default };

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

@@ -0,0 +1,31 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * value
+ */
+var useValue = function useValue(_ref2) {
+  var _ref3 = _slicedToArray(_ref2, 3),
+    _value = _ref3[0],
+    _change = _ref3[1],
+    _ref = _ref3[2];
+  var _useControlledState = relax.useControlledState(_value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  /// change handler
+  var onChange = React.useCallback(function (_value) {
+    var _ref$current;
+    setValue(_value);
+    _change === null || _change === void 0 || _change(_value);
+    (_ref$current = _ref.current) === null || _ref$current === void 0 || _ref$current.close();
+  }, [_change, setValue, _ref]);
+  return {
+    value: value,
+    onChange: onChange
+  };
+};
+
+exports.useValue = useValue;

package/dist/components/date-picker/hooks.d.ts

@@ -1,6 +1,6 @@
 import type { DatePickerProps } from "./types";
 import { type RefObject } from "react";
-import { type PickerRef } from "../picker";
+import type { PickerRef } from "musae/types/picker";
 /**
  * @description
  * value

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

@@ -0,0 +1,56 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var picker = require('../picker/picker.cjs');
+var hooks = require('./hooks.cjs');
+var calendar = require('../calendar/calendar.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+var swapHoriz = require('../icon/icons/action/swap-horiz.cjs');
+
+var DateRangePicker = function DateRangePicker(props) {
+  var ref = React.useRef(null);
+  var _useValue = hooks.useValue([props.value, props.onChange, ref]),
+    onChange = _useValue.onChange,
+    value = _useValue.value;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.DateRangePicker);
+  // picked date
+  var picked = React.useMemo(function () {
+    var _value = _slicedToArray(value, 2),
+      from = _value[0],
+      to = _value[1];
+    var styled = {
+      picker: {
+        className: "musaex-98rzlu musaex-78zum5 musaex-21kgnr musaex-6s0dn4"
+      },
+      trigger: {
+        className: "musaex-1iyjqo2 musaex-s83m0k musaex-4y2jaj musaex-uxw1ft musaex-b3r6kr musaex-lyipyv musaex-1kc4xvm"
+      }
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: relax.clsx(styled.picker.className, classNames[className.DateRangePickerClassToken.Picker]),
+      style: styled.picker.style
+    }, /*#__PURE__*/React.createElement("span", {
+      className: relax.clsx(styled.trigger.className, classNames[className.DateRangePickerClassToken.Input]),
+      style: styled.trigger.style
+    }, from === null || from === void 0 ? void 0 : from.format("YYYY-MM-DD")), /*#__PURE__*/React.createElement(swapHoriz.default, {
+      className: classNames[className.DateRangePickerClassToken.Separator]
+    }), /*#__PURE__*/React.createElement("span", {
+      className: relax.clsx(styled.trigger.className, classNames[className.DateRangePickerClassToken.Input]),
+      style: styled.trigger.style
+    }, to === null || to === void 0 ? void 0 : to.format("YYYY-MM-DD")));
+  }, [value, classNames]);
+  return /*#__PURE__*/React.createElement(picker.default, {
+    ref: ref,
+    pickable: /*#__PURE__*/React.createElement(calendar.default, {
+      value: value,
+      onClick: onChange
+    }),
+    popupWidth: false
+  }, picked);
+};
+
+exports.default = DateRangePicker;

package/dist/components/date-range-picker/{date-range-picker.js → date-range-picker.mjs}

@@ -1,13 +1,13 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useMemo } from 'react';
-import Picker from '../picker/picker.js';
-import { useValue } from './hooks.js';
-import Calendar from '../calendar/calendar.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { DateRangePickerClassToken } from '../../utils/class-name.js';
+import Picker from '../picker/picker.mjs';
+import { useValue } from './hooks.mjs';
+import Calendar from '../calendar/calendar.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { DateRangePickerClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
-import SwapHoriz from '../icon/icons/action/swap-horiz.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import SwapHoriz from '../icon/icons/action/swap-horiz.mjs';
 
 var DateRangePicker = function DateRangePicker(props) {
   var ref = useRef(null);
@@ -50,6 +50,5 @@ var DateRangePicker = function DateRangePicker(props) {
     popupWidth: false
   }, picked);
 };
-var DateRangePicker$1 = DateRangePicker;
 
-export { DateRangePicker$1 as default };
+export { DateRangePicker as default };

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

@@ -0,0 +1,41 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * value
+ */
+var useValue = function useValue(_ref) {
+  var _ref2 = _slicedToArray(_ref, 3),
+    _value = _ref2[0],
+    _change = _ref2[1],
+    ref = _ref2[2];
+  var _useControlledState = relax.useControlledState(_value, {
+      defaultState: [void 0, void 0]
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  var onChange = React.useCallback(function (_value) {
+    var _value$filter$length, _value$filter, _ref$current;
+    // click first time
+    if (new Set([0, 2]).has((_value$filter$length = (_value$filter = value.filter(function (_value) {
+      return !!_value;
+    })) === null || _value$filter === void 0 ? void 0 : _value$filter.length) !== null && _value$filter$length !== void 0 ? _value$filter$length : 0)) {
+      setValue([_value, void 0]);
+      return;
+    }
+    // click twice
+    var _range = [value[0], _value];
+    setValue(_range);
+    _change === null || _change === void 0 || _change(_range);
+    (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.close();
+  }, [value, setValue, _change, ref]);
+  return {
+    value: value,
+    onChange: onChange
+  };
+};
+
+exports.useValue = useValue;

package/dist/components/date-range-picker/hooks.d.ts

@@ -1,7 +1,7 @@
 import type { DateRangePickerProps } from "./types";
 import { type RefObject } from "react";
 import { Dayjs } from "dayjs";
-import { type PickerRef } from "../picker";
+import type { PickerRef } from "musae/types/picker";
 /**
  * @description
  * value

package/dist/components/dialog/dialog.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var portal = require('../portal/portal.cjs');
+var React = require('react');
+var popup = require('./popup.cjs');
+var relax = require('@aiszlab/relax');
+
+var _excluded = ["open", "closable"];
+var Dialog = function Dialog(_ref) {
+  var open = _ref.open,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // `Portal` should disappear after `Dialog` disappear animation completely
+  var _useBoolean = relax.useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    _isVisible = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  React.useEffect(function () {
+    if (open) {
+      turnOn();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return /*#__PURE__*/React.createElement(portal.default, {
+    open: open || _isVisible,
+    lockable: true
+  }, /*#__PURE__*/React.createElement(popup.default, _objectSpread(_objectSpread({}, props), {}, {
+    closable: closable,
+    open: open,
+    onClosed: turnOff
+  })));
+};
+
+exports.default = Dialog;

package/dist/components/dialog/{dialog.js → dialog.mjs}

@@ -1,9 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import Portal from '../portal/portal.js';
+import Portal from '../portal/portal.mjs';
 import React, { useEffect } from 'react';
-import Popup from './popup.js';
+import Popup from './popup.mjs';
 import { useBoolean } from '@aiszlab/relax';
 
 var _excluded = ["open", "closable"];
@@ -34,6 +34,5 @@ var Dialog = function Dialog(_ref) {
     onClosed: turnOff
   })));
 };
-var Dialog$1 = Dialog;
 
-export { Dialog$1 as default };
+export { Dialog as default };

package/dist/components/dialog/hooks.cjs

@@ -0,0 +1,32 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var space = require('../space/space.cjs');
+var button = require('../button/button.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+/**
+ * @description
+ * footer
+ */
+var useFooter = function useFooter(_ref) {
+  var _ref2 = _slicedToArray(_ref, 3),
+    footer = _ref2[0],
+    onConfirm = _ref2[1],
+    onClose = _ref2[2];
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Dialog),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  return React.useMemo(function () {
+    return footer !== null && footer !== void 0 ? footer : (/*#__PURE__*/React.createElement(space.default, null, /*#__PURE__*/React.createElement(button.Button, {
+      onClick: onClose,
+      color: "secondary",
+      variant: "text"
+    }, locale.confirm), /*#__PURE__*/React.createElement(button.Button, {
+      onClick: onConfirm,
+      variant: "text"
+    }, locale.cancel)));
+  }, [footer, onConfirm, onClose, locale]);
+};
+
+exports.useFooter = useFooter;

package/dist/components/dialog/{hooks.js → hooks.mjs}

@@ -1,9 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo } from 'react';
-import Space from '../space/space.js';
-import Button from '../button/button.js';
-import { useLocale } from '../../locale/use-locale.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Space from '../space/space.mjs';
+import { Button } from '../button/button.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 /**
  * @description

package/dist/components/dialog/popup.cjs

@@ -0,0 +1,216 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var hooks$1 = require('./hooks.cjs');
+var framerMotion = require('framer-motion');
+var className = require('../../utils/class-name.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+var relax = require('@aiszlab/relax');
+var dom = require('@aiszlab/relax/dom');
+var useClosable = require('../../hooks/use-closable.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["onClose", "open", "closable", "onClosed", "className"];
+var styles = {
+  header: {
+    paddingInline: "musaex-ei3nwd",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingTop: "musaex-3v2l2l",
+    $$css: true
+  },
+  overlay: function overlay(props) {
+    return [{
+      position: "musaex-10l6tqk",
+      top: "musaex-13vifvy",
+      left: "musaex-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      width: "musaex-n9wirt",
+      height: "musaex-1dr59a3",
+      pointerEvents: "musaex-67bb7w",
+      zIndex: "musaex-1fvqctp",
+      backgroundColor: "musaex-q1mx2j",
+      opacity: "musaex-g01cxk",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  panel: function panel(props) {
+    return [{
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      gap: "musaex-xwi3i9",
+      rowGap: null,
+      columnGap: null,
+      minWidth: "musaex-15cq3s0",
+      maxHeight: "musaex-fi9ciw",
+      margin: "musaex-r4q1pu",
+      marginInline: null,
+      marginInlineStart: null,
+      marginLeft: null,
+      marginInlineEnd: null,
+      marginRight: null,
+      marginBlock: null,
+      marginTop: null,
+      marginBottom: null,
+      borderRadius: "musaex-ur7f20",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      pointerEvents: "musaex-67bb7w",
+      backgroundColor: "musaex-q1mx2j",
+      zIndex: "musaex-1fvqctp",
+      opacity: "musaex-g01cxk",
+      position: "musaex-1n2onr6",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  body: {
+    paddingInline: "musaex-ei3nwd",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    flex: "musaex-98rzlu",
+    flexGrow: null,
+    flexShrink: null,
+    flexBasis: null,
+    wordBreak: "musaex-13faqbe",
+    overflow: "musaex-ysyzu8",
+    overflowX: null,
+    overflowY: null,
+    $$css: true
+  }
+};
+var Popup = function Popup(_ref) {
+  var _props$styles, _props$styles2;
+  var onClose = _ref.onClose,
+    open = _ref.open,
+    closable = _ref.closable,
+    onClosed = _ref.onClosed,
+    className$1 = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Dialog);
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    scope = _useAnimate2[0],
+    animate = _useAnimate2[1];
+  var theme$1 = hooks.useTheme();
+  var panelRef = React.useRef(null);
+  var overlayRef = React.useRef(null);
+  // children render hooks
+  var footer = hooks$1.useFooter([props.footer, props.onConfirm, onClose]);
+  var _useClosable = useClosable.useClosable({
+      closable: closable,
+      onClose: onClose
+    }),
+    closer = _useClosable.closer,
+    onKeyDown = _useClosable.onKeyDown,
+    onOverlayClick = _useClosable.onOverlayClick;
+  React.useEffect(function () {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!open) {
+              _context.next = 5;
+              break;
+            }
+            scope.current.style.display = "flex";
+            _context.next = 4;
+            return Promise.all([panelRef.current && animate(panelRef.current, {
+              opacity: 1
+            }), overlayRef.current && animate(overlayRef.current, {
+              opacity: 0.8
+            })]);
+          case 4:
+            return _context.abrupt("return");
+          case 5:
+            _context.next = 7;
+            return Promise.all([panelRef.current && animate(panelRef.current, {
+              opacity: 0
+            }), overlayRef.current && animate(overlayRef.current, {
+              opacity: 0
+            })]);
+          case 7:
+            scope.current.style.display = "none";
+            onClosed === null || onClosed === void 0 || onClosed();
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  // when open, try focus dialog
+  React.useEffect(function () {
+    if (!open) return;
+    if (dom.contains(scope.current, document.activeElement)) return;
+    scope.current.focus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  var styled = {
+    popup: {
+      className: "musaex-ixxii4 musaex-13vifvy musaex-u96u03 musaex-n9wirt musaex-1dr59a3 musaex-47corl musaex-1fvqctp musaex-78zum5 musaex-l56j7k musaex-6s0dn4"
+    },
+    overlay: stylex.default.props(styles.overlay({
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceDim]
+    })),
+    panel: stylex.default.props(styles.panel({
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerLowest]
+    })),
+    header: stylex.default.props(styles.header, theme.typography.headline.small),
+    body: stylex.default.props(theme.typography.body.medium, styles.body),
+    footer: {
+      className: "musaex-ei3nwd musaex-1feqyr7 musaex-78zum5 musaex-dt5ytf musaex-uk3077"
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: scope,
+    className: relax.clsx(classNames[className.DialogClassToken.Dialog], className$1, styled.popup.className),
+    style: styled.popup.style,
+    tabIndex: -1,
+    onKeyDown: onKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.DialogClassToken.Overlay], styled.overlay.className),
+    style: styled.overlay.style,
+    onClick: onOverlayClick,
+    ref: overlayRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.DialogClassToken.Panel], styled.panel.className),
+    style: _objectSpread(_objectSpread({}, styled.panel.style), (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.panel),
+    ref: panelRef
+  }, closer, !!props.title && (/*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.DialogClassToken.Header], styled.header.className),
+    style: styled.header.style
+  }, props.title)), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.DialogClassToken.Body], styled.body.className),
+    style: _objectSpread(_objectSpread({}, styled.body.style), (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.body)
+  }, props.children), !!footer && (/*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.DialogClassToken.Footer], styled.footer.className),
+    style: styled.footer.style
+  }, footer))));
+};
+
+exports.default = Popup;