@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.72

package/lib/components/chips/chip/Chip.d.ts

@@ -1,19 +1,19 @@
-import React from 'react';
-import { ClassNamePropsWithChildren } from '../../../helper/types';
-export declare enum ChipType {
-    Choice = 0,
-    Category = 1,
-    Filter = 2,
-    Action = 3,
-    Readonly = 4
-}
-interface ChipProps extends ClassNamePropsWithChildren {
-    type?: ChipType;
-    icon?: string;
-    selected?: boolean;
-    disabled?: boolean;
-    large?: boolean;
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-}
-declare function Chip({ type, selected, disabled, large, icon, children, onClick, className }: ChipProps): JSX.Element;
-export default Chip;
+/// <reference types="react" />
+import { ClassNamePropsWithChildren } from '../../../helper/types';
+export declare enum ChipType {
+    Choice = 0,
+    Category = 1,
+    Filter = 2,
+    Action = 3,
+    Readonly = 4
+}
+interface ChipProps extends ClassNamePropsWithChildren {
+    type?: ChipType;
+    icon?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    large?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+declare function Chip({ type, selected, disabled, large, icon, children, onClick, className, }: ChipProps): JSX.Element;
+export default Chip;

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

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import DeleteIcon from './DeleteIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export let ChipType;
+(function (ChipType) {
+  ChipType[ChipType["Choice"] = 0] = "Choice";
+  ChipType[ChipType["Category"] = 1] = "Category";
+  ChipType[ChipType["Filter"] = 2] = "Filter";
+  ChipType[ChipType["Action"] = 3] = "Action";
+  ChipType[ChipType["Readonly"] = 4] = "Readonly";
+})(ChipType || (ChipType = {}));
+function Chip(_ref) {
+  let {
+    type = ChipType.Choice,
+    selected = false,
+    disabled = false,
+    large = false,
+    icon,
+    children,
+    onClick,
+    className
+  } = _ref;
+  const classes = classNames('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__*/_jsxs("div", {
+    className: classes,
+    children: [icon && /*#__PURE__*/_jsx("i", {
+      className: `fwe-icon fwe-icon-${icon}`
+    }), children, type === ChipType.Category && /*#__PURE__*/_jsx(DeleteIcon, {
+      onClick: e => onClick ? onClick(e) : undefined
+    })]
+  });
+}
+export default Chip;

package/lib/components/chips/chip/DeleteIcon.d.ts

@@ -0,0 +1,2 @@
+import { ComponentPropsWithoutRef } from 'react';
+export default function DeleteIcon(props: ComponentPropsWithoutRef<'i'>): JSX.Element;

package/lib/components/chips/chip/DeleteIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DeleteIcon(props) {
+  return /*#__PURE__*/_jsx("i", {
+    ...props,
+    className: "fwe-icon fwe-icon-menu-close"
+  });
+}

package/lib/components/chips/chip-container/ChipContainer.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { ClassNamePropsWithChildren } from '../../../helper/types';
-import './ChipContainer.scss';
-interface ChipContainerProps extends ClassNamePropsWithChildren {
-    large?: boolean;
-}
-declare function ChipContainer({ large, children, className }: ChipContainerProps): JSX.Element;
-export default ChipContainer;
+/// <reference types="react" />
+import { ClassNamePropsWithChildren } from '../../../helper/types';
+import './ChipContainer.scss';
+interface ChipContainerProps extends ClassNamePropsWithChildren {
+    large?: boolean;
+}
+declare function ChipContainer({ large, children, className }: ChipContainerProps): JSX.Element;
+export default ChipContainer;

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

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChipContainer(_ref) {
+  let {
+    large = false,
+    children,
+    className
+  } = _ref;
+  const classes = classNames('fwe-chip-container', {
+    'fwe-chip-container-lg': large
+  }, className);
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: children
+  });
+}
+export default ChipContainer;

package/lib/components/link-button/LinkButton.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ClassNamePropsWithChildren } from '../../helper/types';
-interface LinkButtonProps extends ClassNamePropsWithChildren {
-    disabled?: boolean;
-    icon?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    iconOnly?: boolean;
-}
-declare function LinkButton({ icon, onClick, disabled, children, iconOnly, className }: LinkButtonProps): JSX.Element;
-export default LinkButton;
+/// <reference types="react" />
+import { ClassNamePropsWithChildren } from '../../helper/types';
+interface LinkButtonProps extends ClassNamePropsWithChildren {
+    disabled?: boolean;
+    icon?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    iconOnly?: boolean;
+}
+declare function LinkButton({ icon, onClick, disabled, children, iconOnly, className, }: LinkButtonProps): JSX.Element;
+export default LinkButton;

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

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function LinkButton(_ref) {
+  let {
+    icon,
+    onClick,
+    disabled = false,
+    children,
+    iconOnly = false,
+    className
+  } = _ref;
+  const classes = classNames('fwe-btn', 'fwe-btn-link', {
+    'fwe-disabled': disabled
+  }, className);
+  return /*#__PURE__*/_jsxs("button", {
+    onClick: onClick,
+    type: "button",
+    className: classes,
+    disabled: disabled,
+    children: [/*#__PURE__*/_jsx("i", {
+      className: `fwe-icon fwe-icon-${icon}`
+    }), !iconOnly && children]
+  });
+}
+export default LinkButton;

package/lib/components/loading-indicator/LoadingIndicator.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef } from 'react';
-import './LoadingIndicator.scss';
-interface LoadingIndicatorProps extends ComponentPropsWithRef<'div'> {
-    size: 'large' | 'medium' | 'small';
-}
-export declare const LoadingIndicator: React.ForwardRefExoticComponent<Pick<LoadingIndicatorProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size"> & React.RefAttributes<HTMLDivElement>>;
-export default LoadingIndicator;
+import { ComponentPropsWithRef } from 'react';
+import './LoadingIndicator.scss';
+interface LoadingIndicatorProps extends ComponentPropsWithRef<'div'> {
+    size: 'large' | 'medium' | 'small';
+}
+export declare const LoadingIndicator: import("react").ForwardRefExoticComponent<Pick<LoadingIndicatorProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size"> & import("react").RefAttributes<HTMLDivElement>>;
+export default LoadingIndicator;

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

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import cn from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const LoadingIndicator = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size = 'large',
+    children,
+    className,
+    ...props
+  } = _ref;
+  const classes = cn('fwe-waiting-indicator', {
+    'fwe-waiting-indicator-md': size === 'medium'
+  }, {
+    'fwe-waiting-indicator-sm': size === 'small'
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn('fwe-waiting-container', {
+      'fwe-waiting-container-sm': size === 'small'
+    }, className),
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classes,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-1"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-2"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-3"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-4"
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-waiting-content-container",
+      children: children
+    })]
+  });
+});
+export default LoadingIndicator;

package/lib/components/modals/AlertModal.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { ModalProps } from './Modal';
-interface AlertModalProps extends Omit<ModalProps, 'head' | 'children'> {
-    strong?: boolean;
-    subtitle?: string;
-    alertType: 'info' | 'warning' | 'error';
-    title: string;
-    cancel?: string;
-    ok?: string;
-    onCancel?: () => void;
-    onOk?: () => void;
-}
-declare function AlertModal({ alertType, title, className, body, strong, subtitle, cancel, ok, onCancel, onOk, ...props }: AlertModalProps): JSX.Element;
-export default AlertModal;
+/// <reference types="react" />
+import { ModalProps } from './Modal';
+interface AlertModalProps extends Omit<ModalProps, 'head' | 'children'> {
+    strong?: boolean;
+    subtitle?: string;
+    alertType: 'info' | 'warning' | 'error';
+    title: string;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk?: () => void;
+}
+declare function AlertModal({ alertType, title, className, body, strong, subtitle, cancel, ok, onCancel, onOk, ...props }: AlertModalProps): JSX.Element;
+export default AlertModal;

package/lib/components/modals/AlertModal.js

@@ -0,0 +1,76 @@
+import cn from 'classnames';
+import Modal from './Modal';
+import ModalFooter from './ModalFooter';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function AlertModal(_ref) {
+  let {
+    alertType,
+    title,
+    className,
+    body,
+    strong,
+    subtitle,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Modal, {
+    className: cn({
+      'fwe-modal--with-indicator-bar': strong,
+      'fwe-modal--warning': alertType === 'warning',
+      'fwe-modal--error': alertType === 'error',
+      'fwe-modal--info': alertType === 'info'
+    }, className),
+    head: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subtitle && /*#__PURE__*/_jsxs("h2", {
+        className: "fwe-modal-h2",
+        children: [/*#__PURE__*/_jsx("i", {
+          className: cn({
+            'fwe-icon': true,
+            'fwe-icon-status-warning': alertType === 'warning',
+            'fwe-icon-status-failure': alertType === 'error',
+            'fwe-icon-status-check-status': alertType === 'info'
+          })
+        }), subtitle]
+      }), /*#__PURE__*/_jsxs("h1", {
+        className: "fwe-modal-h1",
+        children: [/*#__PURE__*/_jsx("i", {
+          className: cn({
+            'fwe-icon': true,
+            'fwe-icon-status-warning': alertType === 'warning',
+            'fwe-icon-status-failure': alertType === 'error',
+            'fwe-icon-status-check-status': alertType === 'info'
+          })
+        }), title]
+      })]
+    }),
+    body: typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
+      children: body
+    }) : body,
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {
+      children: [cancel && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: cn('fwe-btn fwe-btn-lg', {
+          'fwe-btn-link': strong
+        }),
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: cn('fwe-btn fwe-btn-lg', {
+          'fwe-btn-hero': !strong
+        }),
+        onClick: onOk,
+        children: ok
+      })]
+    })
+  });
+}
+export default AlertModal;

package/lib/components/modals/ConfirmModal.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { ModalProps } from './Modal';
-interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'> {
-    title: string;
-    subtitle?: string;
-    cancel?: string;
-    ok?: string;
-    onCancel?: () => void;
-    onOk?: () => void;
-    large?: boolean;
-}
-declare function ConfirmModal({ title, subtitle, body, className, cancel, ok, onCancel, onOk, isOpen, large, ...props }: ConfirmModalProps): JSX.Element;
-export default ConfirmModal;
+/// <reference types="react" />
+import { ModalProps } from './Modal';
+interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'> {
+    title: string;
+    subtitle?: string;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk?: () => void;
+    large?: boolean;
+}
+declare function ConfirmModal({ title, subtitle, body, className, cancel, ok, onCancel, onOk, isOpen, large, ...props }: ConfirmModalProps): JSX.Element;
+export default ConfirmModal;

package/lib/components/modals/ConfirmModal.js

@@ -0,0 +1,56 @@
+import cn from 'classnames';
+import Modal from './Modal';
+import ModalFooter from './ModalFooter';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ConfirmModal(_ref) {
+  let {
+    title,
+    subtitle,
+    body,
+    className,
+    cancel,
+    ok,
+    onCancel,
+    onOk,
+    isOpen,
+    large,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Modal, {
+    className: cn({
+      'fwe-modal--large': large
+    }, className),
+    head: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
+      children: body
+    }) : body,
+    isOpen: isOpen,
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {
+      children: [cancel && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn fwe-btn-lg",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+        onClick: onOk,
+        children: ok
+      })]
+    })
+  });
+}
+export default ConfirmModal;

package/lib/components/modals/Modal.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { ClassNamePropsWithChildren } from '../../helper/types';
-import './Modal.scss';
-export interface ModalProps extends ClassNamePropsWithChildren {
-    isOpen: boolean;
-    body: React.ReactNode;
-    onClose?: () => void;
-    head: React.ReactNode;
-}
-declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
-export default Modal;
+import React from 'react';
+import { ClassNamePropsWithChildren } from '../../helper/types';
+import './Modal.scss';
+export interface ModalProps extends ClassNamePropsWithChildren {
+    isOpen: boolean;
+    body: React.ReactNode;
+    onClose?: () => void;
+    head: React.ReactNode;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/lib/components/modals/Modal.js

@@ -0,0 +1,76 @@
+import React, { useRef, forwardRef } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import OutsideClickHandler from 'react-outside-click-handler';
+import useForkRef from '../../helper/useForkRef';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    head,
+    isOpen,
+    body,
+    onClose,
+    className,
+    children
+  } = _ref;
+  const backdropRef = useRef(null);
+  const modalRef = useRef(null);
+  const combinedRef = useForkRef(ref, modalRef);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CSSTransition, {
+      nodeRef: backdropRef,
+      unmountOnExit: true,
+      timeout: {
+        exit: 600
+      },
+      in: isOpen,
+      classNames: "fr-modal-backdrop",
+      appear: true,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: backdropRef,
+        className: "fr-modal-backdrop fwe-modal-backdrop"
+      })
+    }), /*#__PURE__*/_jsx(OutsideClickHandler, {
+      onOutsideClick: () => onClose ? onClose() : undefined,
+      children: /*#__PURE__*/_jsx(CSSTransition, {
+        ref: modalRef,
+        unmountOnExit: true,
+        classNames: "fr-modal",
+        appear: true,
+        in: isOpen,
+        timeout: {
+          exit: 600
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          ref: combinedRef,
+          className: classNames('fr-modal fwe-modal', className),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "fwe-modal-close",
+            children: /*#__PURE__*/_jsxs("button", {
+              type: "button",
+              "aria-label": "Close",
+              className: "fwe-btn fwe-btn-link fwe-dark",
+              onClick: onClose,
+              children: [/*#__PURE__*/_jsx("i", {
+                "aria-hidden": "true",
+                className: "fwe-icon fwe-icon-close-small"
+              }), /*#__PURE__*/_jsx("span", {
+                className: "fwe-sr-only",
+                children: "Close"
+              })]
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "fwe-modal-header",
+            children: head
+          }), /*#__PURE__*/_jsx("div", {
+            className: "fwe-modal-body",
+            children: body
+          }), children]
+        })
+      })
+    })]
+  });
+});
+export default Modal;

package/lib/components/modals/ModalFooter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { ClassNamePropsWithChildren } from '../../helper/types';
-declare const ModalFooter: React.ForwardRefExoticComponent<ClassNamePropsWithChildren & React.RefAttributes<HTMLDivElement>>;
-export default ModalFooter;
+/// <reference types="react" />
+import { ClassNamePropsWithChildren } from '../../helper/types';
+declare const ModalFooter: import("react").ForwardRefExoticComponent<ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalFooter;

package/lib/components/modals/ModalFooter.js

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import cn from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ModalFooter = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: cn('fwe-modal-footer', className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cn('fwe-modal-buttons'),
+      children: children
+    })
+  });
+});
+export default ModalFooter;

package/lib/components/modals/Prompt.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-import { ModalProps } from './Modal';
-interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children'> {
-    title: string;
-    subtitle?: string;
-    hint?: string;
-    label?: string;
-    value?: string;
-    onChange: (event: React.FormEvent<HTMLInputElement>) => void;
-    cancel?: string;
-    ok?: string;
-    onCancel?: () => void;
-    onOk: (value: string) => void;
-}
-export default function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }: PromptProps): JSX.Element;
-export {};
+import React from 'react';
+import { ModalProps } from './Modal';
+interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children'> {
+    title: string;
+    subtitle?: string;
+    hint?: string;
+    label?: string;
+    value?: string;
+    onChange: (event: React.FormEvent<HTMLInputElement>) => void;
+    cancel?: string;
+    ok?: string;
+    onCancel?: () => void;
+    onOk: (value: string | undefined) => void;
+}
+export default function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }: PromptProps): JSX.Element;
+export {};