@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/node/lib/components/card/CardNotification.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIcons = require("@festo-ui/react-icons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CardNotification(_ref) {
+  let {
+    className,
+    title,
+    message
+  } = _ref;
+  const classes = (0, _classnames.default)("fwe-card-notification", className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconWarning, {
+      size: 24
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-card-title",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {
+        children: title
+      }), message && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: message
+      })]
+    })]
+  });
+}
+var _default = exports.default = CardNotification;

package/node/lib/components/chips/chip/Chip.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChipType = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let ChipType = exports.ChipType = /*#__PURE__*/function (ChipType) {
+  ChipType[ChipType["Choice"] = 0] = "Choice";
+  ChipType[ChipType["Category"] = 1] = "Category";
+  ChipType[ChipType["Filter"] = 2] = "Filter";
+  ChipType[ChipType["Readonly"] = 3] = "Readonly";
+  return ChipType;
+}({});
+function Chip(_ref) {
+  let {
+    type = ChipType.Choice,
+    selected = false,
+    disabled = false,
+    large = false,
+    icon,
+    children,
+    onClick,
+    className
+  } = _ref;
+  const classes = (0, _classnames.default)("fr-chip", "fwe-chip", {
+    "fwe-selected": selected
+  }, {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-chip-lg": large
+  }, {
+    "fwe-category": type === ChipType.Category
+  }, {
+    "fwe-filter": type === ChipType.Filter
+  }, {
+    "fwe-readonly": type === ChipType.Readonly
+  }, className);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsxs)("div", {
+      className: classes,
+      onClick: onClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+        icon: icon
+      }), children]
+    })
+  );
+}
+var _default = exports.default = Chip;

package/node/lib/components/chips/chip-container/ChipContainer.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ChipContainer(_ref) {
+  let {
+    large = false,
+    children,
+    className
+  } = _ref;
+  const classes = (0, _classnames.default)("fwe-chip-container", {
+    "fwe-chip-container-lg": large
+  }, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes,
+    children: children
+  });
+}
+var _default = exports.default = ChipContainer;

package/node/lib/components/icon-wrapper/IconWrapper.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconWrapper;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconWrapper(_ref) {
+  let {
+    icon
+  } = _ref;
+  if (!icon) return null;
+  if (typeof icon === "string") {
+    let iconName = icon;
+    if (!icon.startsWith("fwe-icon-")) {
+      iconName = `fwe-icon-${icon}`;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: `fwe-icon ${iconName}`
+    });
+  }
+  return icon;
+}

package/node/lib/components/link-button/LinkButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _IconWrapper = _interopRequireDefault(require("../icon-wrapper/IconWrapper.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LinkButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    icon,
+    onClick,
+    disabled = false,
+    children,
+    iconOnly = false,
+    className,
+    ...props
+  } = _ref;
+  const classes = (0, _classnames.default)("fwe-btn", "fwe-btn-link", {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-btn-icon": iconOnly
+  }, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    onClick: onClick,
+    type: "button",
+    className: classes,
+    disabled: disabled,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+      icon: icon
+    }), !iconOnly && children]
+  });
+});
+var _default = exports.default = LinkButton;

package/node/lib/components/loading-indicator/LoadingIndicator.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LoadingIndicator = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size = "large",
+    children,
+    className,
+    ...props
+  } = _ref;
+  const classes = (0, _classnames.default)("fwe-waiting-indicator", {
+    "fwe-waiting-indicator-md": size === "medium"
+  }, {
+    "fwe-waiting-indicator-sm": size === "small"
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)("fwe-waiting-container", {
+      "fwe-waiting-container-sm": size === "small"
+    }, className),
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-waiting-circle-1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-waiting-circle-2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-waiting-circle-3"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-waiting-circle-4"
+      })]
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-waiting-content-container",
+      children: children
+    })]
+  });
+});
+var _default = exports.default = LoadingIndicator;

package/node/lib/components/mobile-flyout/MobileFlyout.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside.js"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+var _MobileFlyoutContext = _interopRequireDefault(require("./MobileFlyoutContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultVisibleValue = ["root"];
+const MobileFlyout = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    children,
+    open,
+    onOpenChange,
+    onVisibleChange,
+    defaultOpen,
+    visible,
+    defaultVisible = defaultVisibleValue,
+    back,
+    ...props
+  } = _ref;
+  const [openState, setOpen] = (0, _useControlled.default)({
+    controlled: open,
+    default: defaultOpen
+  });
+  const [visibleState, setVisible] = (0, _useControlled.default)({
+    controlled: visible,
+    default: defaultVisible
+  });
+  const innerRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(ref, innerRef);
+  const handleVisibleChange = (0, _react.useCallback)(v => {
+    if (visibleState !== undefined) {
+      if (visibleState.includes(v)) {
+        const newArray = visibleState.filter(entry => entry !== v);
+        setVisible(newArray);
+      } else {
+        const newArray = [...visibleState, v];
+        setVisible(newArray);
+      }
+    }
+    onVisibleChange?.(v);
+  }, [onVisibleChange, setVisible, visibleState]);
+  const handleOpenChange = (0, _react.useCallback)(v => {
+    setOpen(v);
+    onOpenChange?.(v);
+  }, [onOpenChange, setOpen]);
+  function handleClickOutside() {
+    handleOpenChange(false);
+  }
+  function toggle() {
+    const newOpen = !openState;
+    handleOpenChange(newOpen);
+  }
+  (0, _useOnClickOutside.default)(innerRef, handleClickOutside);
+  const contextValue = (0, _react.useMemo)(() => ({
+    visible: visibleState ?? defaultVisibleValue,
+    setVisible: handleVisibleChange,
+    setOpen: handleOpenChange,
+    back
+  }), [handleVisibleChange, visibleState, back, handleOpenChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)("fwe-mobile-flyout", className),
+    ...props,
+    ref: combinedRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      "aria-label": "menu",
+      type: "button",
+      className: openState ? "fwe-close-button" : "fwe-burger-button",
+      onClick: toggle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("fwe-mobile-flyout-container", {
+        "fwe-opened": openState
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileFlyoutContext.default.Provider, {
+        value: contextValue,
+        children: children
+      })
+    })]
+  });
+});
+var _default = exports.default = MobileFlyout;

package/node/lib/components/mobile-flyout/MobileFlyoutContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _default = exports.default = /*#__PURE__*/(0, _react.createContext)(null);

package/node/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _reactIcons = require("@festo-ui/react-icons");
+var _MobileFlyoutContext = _interopRequireDefault(require("../MobileFlyoutContext.js"));
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * Augment `forwardRef` only for this module so that storybook can infer controls
+ * (despite component being wrapped in forwardRef)
+ * https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
+ * https://github.com/microsoft/TypeScript/pull/30215
+ */
+
+const MobileFlyoutItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    component,
+    children,
+    pageLink,
+    icon,
+    onClick,
+    active,
+    ...props
+  } = _ref;
+  const Component = component || "a";
+  const {
+    setVisible,
+    setOpen
+  } = (0, _react.useContext)(_MobileFlyoutContext.default);
+  function handleClick(e) {
+    if (pageLink) {
+      setVisible(pageLink);
+    } else {
+      setOpen(false);
+    }
+    onClick?.(e);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
+    className: "fwe-mobile-flyout-item fwe-bb",
+    ...props,
+    ref: ref,
+    onClick: handleClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+      icon: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("fwe-flex-grow-1", {
+        "fwe-color-hero": active
+      }, {
+        "fwe-ml-xxs": !!icon
+      }),
+      children: children
+    }), pageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconRight2, {})]
+  });
+});
+var _default = exports.default = MobileFlyoutItem;

package/node/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _MobileFlyoutContext = _interopRequireDefault(require("../MobileFlyoutContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MobileFlyoutPage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    back,
+    children,
+    name,
+    root,
+    ...props
+  } = _ref;
+  const {
+    visible,
+    setVisible,
+    back: backContext
+  } = (0, _react.useContext)(_MobileFlyoutContext.default);
+  const innerVisible = root || name && visible.includes(name);
+  const innerBack = back ?? backContext ?? "Back";
+  function handleChange() {
+    if (name) {
+      setVisible(name);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)("fwe-mobile-flyout-page", {
+      "fwe-opened": innerVisible
+    }),
+    ref: ref,
+    ...props,
+    children: [!root && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-page-back",
+      onClick: handleChange,
+      onKeyUp: handleChange,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: innerBack
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-mobile-flyout-item-container",
+      children: children
+    })]
+  });
+});
+var _default = exports.default = MobileFlyoutPage;

package/node/lib/components/modals/AlertModal.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Modal = _interopRequireDefault(require("./Modal.js"));
+var _ModalFooter = _interopRequireDefault(require("./ModalFooter.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function AlertModal(_ref) {
+  let {
+    title,
+    subtitle,
+    alertType,
+    strong,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    className,
+    body,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    className: (0, _classnames.default)({
+      "fwe-modal--with-indicator-bar": strong,
+      "fwe-modal--warning": alertType === "warning",
+      "fwe-modal--error": alertType === "error",
+      "fwe-modal--info": alertType === "info"
+    }, className),
+    head: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: typeof body === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: body
+    }) : body,
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalFooter.default, {
+      children: [cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: (0, _classnames.default)("fwe-btn fwe-btn-lg", {
+          "fwe-btn-link": strong
+        }),
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: (0, _classnames.default)("fwe-btn fwe-btn-lg", {
+          "fwe-btn-hero": !strong
+        }),
+        onClick: onOk,
+        children: ok
+      })]
+    })
+  });
+}
+var _default = exports.default = AlertModal;

package/node/lib/components/modals/ConfirmModal.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Modal = _interopRequireDefault(require("./Modal.js"));
+var _ModalFooter = _interopRequireDefault(require("./ModalFooter.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ConfirmModal(_ref) {
+  let {
+    title,
+    subtitle,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    large,
+    body,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    className: (0, _classnames.default)({
+      "fwe-modal--large": large
+    }, className),
+    head: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: typeof body === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: body
+    }) : body,
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalFooter.default, {
+      children: [cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn fwe-btn-lg",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+        onClick: onOk,
+        children: ok
+      })]
+    })
+  });
+}
+var _default = exports.default = ConfirmModal;

package/node/lib/components/modals/CustomModal.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _ModalBase = _interopRequireDefault(require("./ModalBase.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CustomModal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    large,
+    title,
+    subtitle,
+    className,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalBase.default, {
+    className: (0, _classnames.default)({
+      "fwe-modal--large": large
+    }, className),
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fwe-modal-close-btn",
+      type: "button",
+      "aria-label": "Close",
+      onClick: props.onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-sr-only",
+        children: "Close"
+      })
+    }), title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-modal-header",
+      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }), children]
+  });
+});
+var _default = exports.default = CustomModal;

package/node/lib/components/modals/Modal.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ModalBase = _interopRequireDefault(require("./ModalBase.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    head,
+    body,
+    className,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalBase.default, {
+    className: className,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fwe-modal-close-btn",
+      type: "button",
+      "aria-label": "Close",
+      onClick: props.onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-sr-only",
+        children: "Close"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-header",
+      children: head
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-body",
+      children: body
+    }), children]
+  });
+});
+var _default = exports.default = Modal;