@festo-ui/react 3.1.0-pre-20220328.2 → 3.1.0-pre-20220331.4

package/index.esm.css

@@ -7,8 +7,8 @@
   align-items: center;
   height: 48px;
   padding: 0 16px 0 24px;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--fwe-font-size-md);
+  font-weight: var(--fwe-font-weight-bold);
   color: var(--fwe-text);
   border-bottom: 1px solid var(--fwe-gray-100);
 }
@@ -24,7 +24,7 @@
   top: 24px;
   right: 24px;
   color: var(--fwe-caerul);
-  font-size: 14px;
+  font-size: var(--fwe-font-size-md);
   pointer-events: none;
   display: none;
 }
@@ -43,8 +43,8 @@
   top: 21px;
   right: 16px;
   display: block;
-  font-family: "festo_icons-32";
-  font-size: 32px;
+  font-family: var(--fwe-font-family-icons-32);
+  font-size: var(--fwe-font-size-xxl);
   content: "";
   height: 32px;
   line-height: 32px;
@@ -52,7 +52,7 @@
   pointer-events: none;
 }
 .fr-accordion-item--expanded .fr-accordion-item-header {
-  font-weight: 700;
+  font-weight: var(--fwe-font-weight-bold);
 }
 .fr-accordion-item--expanded .fr-accordion-item-body {
   height: auto;
@@ -67,7 +67,7 @@
   height: 0px;
 }
 .fr-accordion-item--collapsed .fr-accordion-item-header {
-  font-weight: 400;
+  font-weight: var(--fwe-font-weight-normal);
 }
 @charset "UTF-8";
 .fr-accordion-item-body {
@@ -107,8 +107,8 @@
   top: 12px;
   right: 4px;
   color: var(--fwe-caerul);
-  font-family: "festo_icons-16";
-  font-size: 16px;
+  font-family: var(--fwe-font-family-icons-16);
+  font-size: var(--fwe-font-size-base);
   content: "";
   height: 16px;
   line-height: 16px;
@@ -127,7 +127,7 @@
     padding-right: 168px;
   }
   .fr-accordion-item-body .fr-accordion-item-link {
-    font-size: 16px;
+    font-size: var(--fwe-font-size-base);
     top: 24px;
     max-width: 128px;
     white-space: nowrap;
@@ -181,15 +181,15 @@
   right: 5px;
   top: 3px;
   color: #333;
-  font-size: 16px;
-  line-height: 16px;
+  font-size: var(--fwe-font-size-base);
+  line-height: var(--fwe-font-size-base);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin-left: 0;
   padding-right: 0;
 }
 .fwe-chip-container .fr-chip .fwe-icon-menu-close::before {
-  font-family: festo_icons-32;
+  font-family: var(--fwe-font-family-icons-32);
 }
 .fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category::after {
   content: none;
@@ -252,7 +252,7 @@
 .fwe-color-indicator .fwe-popover-container .fwe-popover {
   background-color: var(--fwe-white);
   padding: 8px 16px 16px 16px;
-  font-size: 14px;
+  font-size: var(--fwe-font-size-md);
   line-height: 1rem;
   box-shadow: 0px 1px 4px #33333333;
   border-radius: 8px;
@@ -262,8 +262,8 @@
 }
 .fwe-color-indicator .fwe-color-label {
   height: 18px;
-  font-size: 12px;
-  font-weight: bold;
+  font-size: var(--fwe-font-size-small);
+  font-weight: var(--fwe-font-weight-bold);
   margin-bottom: 4px;
 }
 .fwe-color-indicator .fwe-color-container {
@@ -318,7 +318,7 @@
 
 .fwe-popover {
   padding: 8px;
-  font-size: 14px;
+  font-size: var(--fwe-font-size-md);
   line-height: 1rem;
 }
 
@@ -365,7 +365,7 @@
 }
 
 .fwe-popover.fwe-popover-menu {
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   line-height: 1.5rem;
   padding: 16px;
 }
@@ -493,9 +493,9 @@
   display: flex;
 }
 .fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type {
-  font-size: 12px;
-  line-height: 17px;
-  font-weight: bold;
+  font-size: var(--fwe-font-size-small);
+  line-height: calc(var(--fwe-font-size-small) + 5px);
+  font-weight: var(--fwe-font-weight-bold);
 }
 .fwe-color-picker .fwe-type-select .fwe-type-indicator:hover {
   color: var(--fwe-hero);
@@ -663,7 +663,7 @@
   margin-bottom: 0;
   margin-top: 0;
   list-style: none;
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
 }
 .fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width {
   width: 100%;
@@ -904,7 +904,7 @@
   display: none;
 }
 .fwe-checkbox-container {
-  font-family: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--fwe-font-family-sans-serif);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -1072,7 +1072,7 @@
   color: var(--fwe-text-disabled);
 }
 .fwe-select-wrapper .fwe-select-options-container {
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   position: absolute;
   top: 56px;
   left: 0px;
@@ -1134,7 +1134,7 @@ label.fwe-slider.fr-slider-label {
 }
 label.fwe-slider .fr-slider-value {
   color: var(--fwe-text);
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   margin-bottom: 0px;
   position: absolute;
   bottom: 0px;
@@ -1191,12 +1191,12 @@ label.fwe-slider .fr-slider-value {
 }
 label.fwe-input-text .fwe-input-text-count {
   display: block;
-  line-height: 1.5;
+  line-height: var(--fwe-line-height-base);
   position: absolute;
   right: 0px;
   bottom: 0px;
   color: var(--fwe-text-disabled);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fr-textarea {
   overflow: visible;
@@ -2938,13 +2938,13 @@ label.fwe-input-text {
 }
 label.fwe-input-text .fwe-input-text-count {
   display: block;
-  line-height: 1.5;
+  line-height: var(--fwe-line-height-base);
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 1;
   color: var(--fwe-text-disabled);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fwe-input-text-label {
   order: -1;
@@ -2954,14 +2954,14 @@ label.fwe-input-text .fwe-text-editor-info {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
-  line-height: 1.5;
+  line-height: var(--fwe-line-height-base);
   position: absolute;
   left: 0;
   top: unset;
   bottom: 0;
   z-index: 2;
   color: var(--fwe-text-disabled);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fwe-text-editor-invalid {
   line-height: 1.5;
@@ -2970,7 +2970,7 @@ label.fwe-input-text .fwe-text-editor-invalid {
   bottom: 0;
   z-index: 2;
   color: var(--fwe-red);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fwe-text-editor-invalid ~ .fwe-text-editor-info {
   display: none;
@@ -2992,7 +2992,7 @@ label.fwe-input-text.fwe-disabled .fwe-divider-y {
 }
 
 .fwe-text-bold {
-  font-weight: 700;
+  font-weight: var(--fwe-font-weight-bold);
 }
 
 .fwe-text-italic {
@@ -3008,8 +3008,8 @@ label.fwe-input-text.fwe-disabled .fwe-divider-y {
 }
 
 .ql-editor {
-  font-family: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 16px;
+  font-family: var(--fwe-font-family-sans-serif);
+  font-size: var(--fwe-font-size-base);
   padding: 0;
   min-height: 72px;
   overflow-x: hidden;
@@ -3134,11 +3134,11 @@ label.fwe-input-text.fwe-disabled .ql-toolbar button {
   background: #fff;
   line-height: 1.5rem;
   padding: 16px;
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   box-shadow: 0px 1px 4px #33333333;
 }
 .fwe-popover-menu .fwe-popover {
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   line-height: 1.5rem;
   padding: 16px;
 }

package/index.esm.js

@@ -363,7 +363,6 @@ const Modal = /*#__PURE__*/forwardRef(({
 });
 
 const ModalFooter = /*#__PURE__*/forwardRef(({
-  fullWidth,
   children,
   className
 }, ref) => {
@@ -372,9 +371,7 @@ const ModalFooter = /*#__PURE__*/forwardRef(({
     className: classNames('fwe-modal-footer', className)
   }, {
     children: jsx("div", Object.assign({
-      className: classNames('fwe-modal-buttons', {
-        'fwe-modal-buttons--full-width': fullWidth
-      })
+      className: classNames('fwe-modal-buttons')
     }, {
       children: children
     }), void 0)
@@ -432,9 +429,7 @@ function AlertModal(_a) {
       children: body
     }, void 0)
   }, props, {
-    children: (cancel || ok) && jsxs(ModalFooter, Object.assign({
-      fullWidth: true
-    }, {
+    children: (cancel || ok) && jsxs(ModalFooter, {
       children: [cancel && jsx("button", Object.assign({
         type: "button",
         "aria-label": "Cancel",
@@ -454,7 +449,7 @@ function AlertModal(_a) {
       }, {
         children: ok
       }), void 0)]
-    }), void 0)
+    }, void 0)
   }), void 0);
 }
 
@@ -1624,24 +1619,14 @@ function ConfirmModal(_a) {
     ok,
     onCancel,
     onOk,
-    isOpen
+    isOpen,
+    large
   } = _a,
-      props = __rest(_a, ["title", "subtitle", "body", "className", "cancel", "ok", "onCancel", "onOk", "isOpen"]);
+      props = __rest(_a, ["title", "subtitle", "body", "className", "cancel", "ok", "onCancel", "onOk", "isOpen", "large"]);
 
-  const [hasScrollableContent, setScrollableContent] = useState(false);
-  const ref = useCallback(node => {
-    if (node !== null) {
-      setScrollableContent(node.scrollHeight > node.getBoundingClientRect().height);
-    }
-  }, []);
-  useEffect(() => {
-    if (!isOpen) {
-      setScrollableContent(false);
-    }
-  }, [isOpen]);
   return jsx(Modal, Object.assign({
     className: classNames({
-      'fwe-modal--with-scrollable-content': hasScrollableContent
+      'fwe-modal--large': large
     }, className),
     head: jsxs(Fragment, {
       children: [subtitle && jsx("h2", Object.assign({
@@ -1654,15 +1639,12 @@ function ConfirmModal(_a) {
         children: title
       }), void 0)]
     }, void 0),
-    ref: ref,
     body: jsx("p", {
       children: body
     }, void 0),
     isOpen: isOpen
   }, props, {
-    children: (cancel || ok) && jsxs(ModalFooter, Object.assign({
-      fullWidth: !hasScrollableContent
-    }, {
+    children: (cancel || ok) && jsxs(ModalFooter, {
       children: [cancel && jsx("button", Object.assign({
         type: "button",
         "aria-label": "Cancel",
@@ -1678,7 +1660,7 @@ function ConfirmModal(_a) {
       }, {
         children: ok
       }), void 0)]
-    }), void 0)
+    }, void 0)
   }), void 0);
 }
 

package/index.umd.css

@@ -7,8 +7,8 @@
   align-items: center;
   height: 48px;
   padding: 0 16px 0 24px;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--fwe-font-size-md);
+  font-weight: var(--fwe-font-weight-bold);
   color: var(--fwe-text);
   border-bottom: 1px solid var(--fwe-gray-100);
 }
@@ -24,7 +24,7 @@
   top: 24px;
   right: 24px;
   color: var(--fwe-caerul);
-  font-size: 14px;
+  font-size: var(--fwe-font-size-md);
   pointer-events: none;
   display: none;
 }
@@ -43,8 +43,8 @@
   top: 21px;
   right: 16px;
   display: block;
-  font-family: "festo_icons-32";
-  font-size: 32px;
+  font-family: var(--fwe-font-family-icons-32);
+  font-size: var(--fwe-font-size-xxl);
   content: "";
   height: 32px;
   line-height: 32px;
@@ -52,7 +52,7 @@
   pointer-events: none;
 }
 .fr-accordion-item--expanded .fr-accordion-item-header {
-  font-weight: 700;
+  font-weight: var(--fwe-font-weight-bold);
 }
 .fr-accordion-item--expanded .fr-accordion-item-body {
   height: auto;
@@ -67,7 +67,7 @@
   height: 0px;
 }
 .fr-accordion-item--collapsed .fr-accordion-item-header {
-  font-weight: 400;
+  font-weight: var(--fwe-font-weight-normal);
 }
 @charset "UTF-8";
 .fr-accordion-item-body {
@@ -107,8 +107,8 @@
   top: 12px;
   right: 4px;
   color: var(--fwe-caerul);
-  font-family: "festo_icons-16";
-  font-size: 16px;
+  font-family: var(--fwe-font-family-icons-16);
+  font-size: var(--fwe-font-size-base);
   content: "";
   height: 16px;
   line-height: 16px;
@@ -127,7 +127,7 @@
     padding-right: 168px;
   }
   .fr-accordion-item-body .fr-accordion-item-link {
-    font-size: 16px;
+    font-size: var(--fwe-font-size-base);
     top: 24px;
     max-width: 128px;
     white-space: nowrap;
@@ -181,15 +181,15 @@
   right: 5px;
   top: 3px;
   color: #333;
-  font-size: 16px;
-  line-height: 16px;
+  font-size: var(--fwe-font-size-base);
+  line-height: var(--fwe-font-size-base);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin-left: 0;
   padding-right: 0;
 }
 .fwe-chip-container .fr-chip .fwe-icon-menu-close::before {
-  font-family: festo_icons-32;
+  font-family: var(--fwe-font-family-icons-32);
 }
 .fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category::after {
   content: none;
@@ -252,7 +252,7 @@
 .fwe-color-indicator .fwe-popover-container .fwe-popover {
   background-color: var(--fwe-white);
   padding: 8px 16px 16px 16px;
-  font-size: 14px;
+  font-size: var(--fwe-font-size-md);
   line-height: 1rem;
   box-shadow: 0px 1px 4px #33333333;
   border-radius: 8px;
@@ -262,8 +262,8 @@
 }
 .fwe-color-indicator .fwe-color-label {
   height: 18px;
-  font-size: 12px;
-  font-weight: bold;
+  font-size: var(--fwe-font-size-small);
+  font-weight: var(--fwe-font-weight-bold);
   margin-bottom: 4px;
 }
 .fwe-color-indicator .fwe-color-container {
@@ -318,7 +318,7 @@
 
 .fwe-popover {
   padding: 8px;
-  font-size: 14px;
+  font-size: var(--fwe-font-size-md);
   line-height: 1rem;
 }
 
@@ -365,7 +365,7 @@
 }
 
 .fwe-popover.fwe-popover-menu {
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   line-height: 1.5rem;
   padding: 16px;
 }
@@ -493,9 +493,9 @@
   display: flex;
 }
 .fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type {
-  font-size: 12px;
-  line-height: 17px;
-  font-weight: bold;
+  font-size: var(--fwe-font-size-small);
+  line-height: calc(var(--fwe-font-size-small) + 5px);
+  font-weight: var(--fwe-font-weight-bold);
 }
 .fwe-color-picker .fwe-type-select .fwe-type-indicator:hover {
   color: var(--fwe-hero);
@@ -663,7 +663,7 @@
   margin-bottom: 0;
   margin-top: 0;
   list-style: none;
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
 }
 .fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width {
   width: 100%;
@@ -904,7 +904,7 @@
   display: none;
 }
 .fwe-checkbox-container {
-  font-family: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--fwe-font-family-sans-serif);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -1072,7 +1072,7 @@
   color: var(--fwe-text-disabled);
 }
 .fwe-select-wrapper .fwe-select-options-container {
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   position: absolute;
   top: 56px;
   left: 0px;
@@ -1134,7 +1134,7 @@ label.fwe-slider.fr-slider-label {
 }
 label.fwe-slider .fr-slider-value {
   color: var(--fwe-text);
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   margin-bottom: 0px;
   position: absolute;
   bottom: 0px;
@@ -1191,12 +1191,12 @@ label.fwe-slider .fr-slider-value {
 }
 label.fwe-input-text .fwe-input-text-count {
   display: block;
-  line-height: 1.5;
+  line-height: var(--fwe-line-height-base);
   position: absolute;
   right: 0px;
   bottom: 0px;
   color: var(--fwe-text-disabled);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fr-textarea {
   overflow: visible;
@@ -2938,13 +2938,13 @@ label.fwe-input-text {
 }
 label.fwe-input-text .fwe-input-text-count {
   display: block;
-  line-height: 1.5;
+  line-height: var(--fwe-line-height-base);
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 1;
   color: var(--fwe-text-disabled);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fwe-input-text-label {
   order: -1;
@@ -2954,14 +2954,14 @@ label.fwe-input-text .fwe-text-editor-info {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
-  line-height: 1.5;
+  line-height: var(--fwe-line-height-base);
   position: absolute;
   left: 0;
   top: unset;
   bottom: 0;
   z-index: 2;
   color: var(--fwe-text-disabled);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fwe-text-editor-invalid {
   line-height: 1.5;
@@ -2970,7 +2970,7 @@ label.fwe-input-text .fwe-text-editor-invalid {
   bottom: 0;
   z-index: 2;
   color: var(--fwe-red);
-  font-size: 12px;
+  font-size: var(--fwe-font-size-small);
 }
 label.fwe-input-text .fwe-text-editor-invalid ~ .fwe-text-editor-info {
   display: none;
@@ -2992,7 +2992,7 @@ label.fwe-input-text.fwe-disabled .fwe-divider-y {
 }
 
 .fwe-text-bold {
-  font-weight: 700;
+  font-weight: var(--fwe-font-weight-bold);
 }
 
 .fwe-text-italic {
@@ -3008,8 +3008,8 @@ label.fwe-input-text.fwe-disabled .fwe-divider-y {
 }
 
 .ql-editor {
-  font-family: "MetaPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 16px;
+  font-family: var(--fwe-font-family-sans-serif);
+  font-size: var(--fwe-font-size-base);
   padding: 0;
   min-height: 72px;
   overflow-x: hidden;
@@ -3134,11 +3134,11 @@ label.fwe-input-text.fwe-disabled .ql-toolbar button {
   background: #fff;
   line-height: 1.5rem;
   padding: 16px;
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   box-shadow: 0px 1px 4px #33333333;
 }
 .fwe-popover-menu .fwe-popover {
-  font-size: 16px;
+  font-size: var(--fwe-font-size-base);
   line-height: 1.5rem;
   padding: 16px;
 }

package/index.umd.js

@@ -394,17 +394,14 @@
     });
 
     var ModalFooter = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-      var fullWidth = _a.fullWidth,
-          children = _a.children,
+      var children = _a.children,
           className = _a.className;
       return jsxRuntime.jsx("div", __assign({
         ref: ref,
         className: classNames__default["default"]('fwe-modal-footer', className)
       }, {
         children: jsxRuntime.jsx("div", __assign({
-          className: classNames__default["default"]('fwe-modal-buttons', {
-            'fwe-modal-buttons--full-width': fullWidth
-          })
+          className: classNames__default["default"]('fwe-modal-buttons')
         }, {
           children: children
         }), void 0)
@@ -460,9 +457,7 @@
           children: body
         }, void 0)
       }, props, {
-        children: (cancel || ok) && jsxRuntime.jsxs(ModalFooter, __assign({
-          fullWidth: true
-        }, {
+        children: (cancel || ok) && jsxRuntime.jsxs(ModalFooter, {
           children: [cancel && jsxRuntime.jsx("button", __assign({
             type: "button",
             "aria-label": "Cancel",
@@ -482,7 +477,7 @@
           }, {
             children: ok
           }), void 0)]
-        }), void 0)
+        }, void 0)
       }), void 0);
     }
 
@@ -1765,25 +1760,12 @@
           onCancel = _a.onCancel,
           onOk = _a.onOk,
           isOpen = _a.isOpen,
-          props = __rest(_a, ["title", "subtitle", "body", "className", "cancel", "ok", "onCancel", "onOk", "isOpen"]);
-
-      var _b = React.useState(false),
-          hasScrollableContent = _b[0],
-          setScrollableContent = _b[1];
+          large = _a.large,
+          props = __rest(_a, ["title", "subtitle", "body", "className", "cancel", "ok", "onCancel", "onOk", "isOpen", "large"]);
 
-      var ref = React.useCallback(function (node) {
-        if (node !== null) {
-          setScrollableContent(node.scrollHeight > node.getBoundingClientRect().height);
-        }
-      }, []);
-      React.useEffect(function () {
-        if (!isOpen) {
-          setScrollableContent(false);
-        }
-      }, [isOpen]);
       return jsxRuntime.jsx(Modal, __assign({
         className: classNames__default["default"]({
-          'fwe-modal--with-scrollable-content': hasScrollableContent
+          'fwe-modal--large': large
         }, className),
         head: jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [subtitle && jsxRuntime.jsx("h2", __assign({
@@ -1796,15 +1778,12 @@
             children: title
           }), void 0)]
         }, void 0),
-        ref: ref,
         body: jsxRuntime.jsx("p", {
           children: body
         }, void 0),
         isOpen: isOpen
       }, props, {
-        children: (cancel || ok) && jsxRuntime.jsxs(ModalFooter, __assign({
-          fullWidth: !hasScrollableContent
-        }, {
+        children: (cancel || ok) && jsxRuntime.jsxs(ModalFooter, {
           children: [cancel && jsxRuntime.jsx("button", __assign({
             type: "button",
             "aria-label": "Cancel",
@@ -1820,7 +1799,7 @@
           }, {
             children: ok
           }), void 0)]
-        }), void 0)
+        }, void 0)
       }), void 0);
     }
 

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

@@ -7,6 +7,7 @@ interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'> {
     ok?: string;
     onCancel?: () => void;
     onOk?: () => void;
+    large?: boolean;
 }
-declare function ConfirmModal({ title, subtitle, body, className, cancel, ok, onCancel, onOk, isOpen, ...props }: ConfirmModalProps): JSX.Element;
+declare function ConfirmModal({ title, subtitle, body, className, cancel, ok, onCancel, onOk, isOpen, large, ...props }: ConfirmModalProps): JSX.Element;
 export default ConfirmModal;

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

@@ -1,7 +1,4 @@
 import React from 'react';
 import { ClassNamePropsWithChildren } from '../../helper/types';
-interface ModalFooterProps extends ClassNamePropsWithChildren {
-    fullWidth?: boolean;
-}
-declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const ModalFooter: React.ForwardRefExoticComponent<ClassNamePropsWithChildren & React.RefAttributes<HTMLDivElement>>;
 export default ModalFooter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "3.1.0-pre-20220328.2",
+  "version": "3.1.0-pre-20220331.4",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "peerDependencies": {
@@ -19,7 +19,7 @@
     "@popperjs/core": "^2.11.0",
     "react-draggable": "^4.4.4",
     "flatpickr": "^4.6.9",
-    "quill": "~1.3.7",
+    "quill": "1.3.7",
     "xss": "^1.0.10"
   }
 }