npm - @bigbinary/neeto-slack-frontend - Versions diffs - 2.3.0-beta1 → 3.1.0 - Mend

@bigbinary/neeto-slack-frontend 2.3.0-beta1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -2,17 +2,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var misc = require('@bigbinary/neeto-icons/misc');
-var neetoui = require('@bigbinary/neetoui');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Button = require('@bigbinary/neetoui/Button');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
 var i18next = require('i18next');
+var Toastr = require('@bigbinary/neetoui/Toastr');
 var yup = require('yup');
-var formik = require('@bigbinary/neetoui/formik');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Label = require('@bigbinary/neetoui/Label');
+var Select = require('@bigbinary/neetoui/formik/Select');
+var NeetoUIForm = require('@bigbinary/neetoui/formik/Form');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var React = require('react');
 var classNames = require('classnames');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
@@ -37,9 +44,16 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var NeetoUIForm__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIForm);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
@@ -48,17 +62,20 @@ var Field = function Field(_ref) {
     value = _ref.value,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-mb-3 neeto-ui-w-full ".concat(className)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 neeto-ui-mb-1",
-    style: "h5",
-    weight: "semibold"
-  }, name), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-700",
-    style: "body2",
-    weight: "normal"
-  }, value));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-mb-3 neeto-ui-w-full ".concat(className),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-800 neeto-ui-mb-1",
+      style: "h5",
+      weight: "semibold",
+      children: name
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-700",
+      style: "body2",
+      weight: "normal",
+      children: value
+    })]
+  });
 };
 function _typeof(o) {
@@ -111,43 +128,32 @@ var CHANNEL_NAME_VALIDAITON_SCHEMA = {
   }).required().nullable()
 };
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildValidationSchema = function buildValidationSchema(customValidationSchema) {
-  return yup__namespace.object().shape(_objectSpread$2(_objectSpread$2({}, customValidationSchema), CHANNEL_NAME_VALIDAITON_SCHEMA));
+  return yup__namespace.object().shape(_objectSpread$3(_objectSpread$3({}, customValidationSchema), CHANNEL_NAME_VALIDAITON_SCHEMA));
 };
 var toSlackUrl = function toSlackUrl(teamName) {
   return "https://".concat(teamName === null || teamName === void 0 ? void 0 : teamName.replace(/\s/g, "").toLowerCase(), ".slack.com");
 };
 var slackChannelRefresh = function slackChannelRefresh(channelRefreshHandler) {
   channelRefreshHandler();
-  neetoui.Toastr.success(i18next.t("neetoSlack.slack.channelListRefreshToastr"));
+  Toastr__default["default"].success(i18next.t("neetoSlack.slack.channelListRefreshToastr"));
 };
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
 var ChannelSelectOption = function ChannelSelectOption(_ref) {
   var label = _ref.label,
     isPrivate = _ref.isPrivate;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, label), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-500 italic",
-    style: "body3"
-  }, isPrivate ? "private" : ""));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-500 italic",
+      style: "body3",
+      children: isPrivate ? "private" : ""
+    })]
+  });
 };
 var SlackRefreshChannelListButton = reactUtils.withT(function (_ref) {
@@ -155,21 +161,22 @@ var SlackRefreshChannelListButton = reactUtils.withT(function (_ref) {
     channelRefreshHandler = _ref.channelRefreshHandler,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "pl-1" : _ref$className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "relative top-0 flex justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: className,
-    label: t("neetoSlack.slack.channelListRefreshButton"),
-    style: "link",
-    onClick: function onClick() {
-      return slackChannelRefresh(channelRefreshHandler);
-    }
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "relative top-0 flex justify-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      className: className,
+      label: t("neetoSlack.slack.channelListRefreshButton"),
+      style: "link",
+      onClick: function onClick() {
+        return slackChannelRefresh(channelRefreshHandler);
+      }
+    })
+  });
 });
-var SlackRefreshChannelListButton$1 = /*#__PURE__*/React__default["default"].memo(SlackRefreshChannelListButton);
+var SlackRefreshChannelListButton$1 = /*#__PURE__*/React.memo(SlackRefreshChannelListButton);
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EditPane = function EditPane(_ref) {
   var _ref$isPaneOpen = _ref.isPaneOpen,
     isPaneOpen = _ref$isPaneOpen === void 0 ? false : _ref$isPaneOpen,
@@ -177,7 +184,7 @@ var EditPane = function EditPane(_ref) {
     onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
-    children = _ref.children,
+    _children = _ref.children,
     _ref$initialFormValue = _ref.initialFormValues,
     initialFormValues = _ref$initialFormValue === void 0 ? {} : _ref$initialFormValue,
     _ref$handleSubmit = _ref.handleSubmit,
@@ -195,58 +202,77 @@ var EditPane = function EditPane(_ref) {
   var handleFormSubmit = function handleFormSubmit(values, formikBag) {
     handleSubmit(values, formikBag);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, _extends$1({
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], _objectSpread$2(_objectSpread$2({
     onClose: onClose,
     isOpen: isPaneOpen
-  }, paneProps), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, ramda.isEmpty(title) ? t("neetoSlack.slack.editPane") : title)), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    className: "neeto-ui-w-full",
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: initialFormValues,
-      onSubmit: handleFormSubmit,
-      validationSchema: buildValidationSchema(validationSchema)
-    }
-  }, function (formikProps) {
-    var _formikProps$errors;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-mb-4 neeto-ui-w-full"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "neeto-ui-text-gray-700 neeto-ui-mb-2",
-      style: "body2",
-      weight: "bold"
-    }, t("neetoSlack.slack.configure.sendToDescription"), /*#__PURE__*/React__default["default"].createElement("sup", null, "*"))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "relative flex flex-col items-start gap-y-3"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Select, {
-      isSearchable: true,
-      required: true,
-      className: "w-full",
-      error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
-      name: "selectedChannel",
-      placeholder: t("neetoSlack.slack.placeholder"),
-      size: "large",
-      options: formikProps.values.channels.map(function (_ref2) {
-        var label = _ref2.label,
-          value = _ref2.value,
-          isPrivate = _ref2.isPrivate;
-        return {
-          label: /*#__PURE__*/React__default["default"].createElement(ChannelSelectOption, {
-            isPrivate: isPrivate,
-            label: label
-          }),
-          value: value
-        };
+  }, paneProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        weight: "semibold",
+        children: ramda.isEmpty(title) ? t("neetoSlack.slack.editPane") : title
       })
-    }), /*#__PURE__*/React__default["default"].createElement(SlackRefreshChannelListButton$1, {
-      channelRefreshHandler: channelRefreshHandler
-    }))), ramda.is(Function, children) ? children(_objectSpread$1({}, formikProps)) : children), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
-      cancelButtonProps: {
-        onClick: onClose
+    }), /*#__PURE__*/jsxRuntime.jsx(NeetoUIForm__default["default"], {
+      className: "neeto-ui-w-full",
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: initialFormValues,
+        onSubmit: handleFormSubmit,
+        validationSchema: buildValidationSchema(validationSchema)
       },
-      isSubmitting: isSubmitting || formikProps.isSubmitting
-    })));
+      children: function children(formikProps) {
+        var _formikProps$errors;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Body, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "neeto-ui-mb-4 neeto-ui-w-full",
+              children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
+                children: /*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+                  className: "neeto-ui-text-gray-700 neeto-ui-mb-2",
+                  style: "body2",
+                  weight: "bold",
+                  children: [t("neetoSlack.slack.configure.sendToDescription"), /*#__PURE__*/jsxRuntime.jsx("sup", {
+                    children: "*"
+                  })]
+                })
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "relative flex flex-col items-start gap-y-3",
+                children: [/*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+                  isSearchable: true,
+                  required: true,
+                  className: "w-full",
+                  error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
+                  name: "selectedChannel",
+                  placeholder: t("neetoSlack.slack.placeholder"),
+                  size: "large",
+                  options: formikProps.values.channels.map(function (_ref2) {
+                    var label = _ref2.label,
+                      value = _ref2.value,
+                      isPrivate = _ref2.isPrivate;
+                    return {
+                      label: /*#__PURE__*/jsxRuntime.jsx(ChannelSelectOption, {
+                        isPrivate: isPrivate,
+                        label: label
+                      }),
+                      value: value
+                    };
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx(SlackRefreshChannelListButton$1, {
+                  channelRefreshHandler: channelRefreshHandler
+                })]
+              })]
+            }), ramda.is(Function, _children) ? _children(_objectSpread$2({}, formikProps)) : _children]
+          }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+              cancelButtonProps: {
+                onClick: onClose
+              },
+              isSubmitting: isSubmitting || formikProps.isSubmitting
+            })
+          })]
+        });
+      }
+    })]
   }));
 };
@@ -261,51 +287,57 @@ var Settings = reactUtils.withT(function (_ref) {
     fields = _ref$fields === void 0 ? [] : _ref$fields,
     _ref$onEdit = _ref.onEdit,
     onEdit = _ref$onEdit === void 0 ? neetoCist.noop : _ref$onEdit;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto w-full max-w-3xl"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full border p-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React__default["default"].createElement(misc.Slack, {
-    className: "neeto-ui-text-gray-600",
-    size: 48
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center space-x-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoSlack.slack.settings.title",
-    values: {
-      teamName: teamName
-    },
-    components: {
-      a: /*#__PURE__*/React__default["default"].createElement("a", {
-        className: "neeto-ui-text-primary-800",
-        href: ramda.isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl
-      })
-    }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-success-500 neeto-ui-text-white neeto-ui-rounded-full flex items-center justify-center p-1"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
-    size: 24
-  }))), fields.map(function (field) {
-    return /*#__PURE__*/React__default["default"].createElement(Field, {
-      key: field.name,
-      name: field.name,
-      value: field.value
-    });
-  }), children), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "mt-8",
-    label: t("neetoSlack.common.edit"),
-    onClick: onEdit
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "mx-auto w-full max-w-3xl",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full border p-6",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsxRuntime.jsx(misc.Slack, {
+          className: "neeto-ui-text-gray-600",
+          size: 48
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center space-x-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "h2",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoSlack.slack.settings.title",
+              values: {
+                teamName: teamName
+              },
+              components: {
+                a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  className: "neeto-ui-text-2xl",
+                  href: ramda.isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl,
+                  style: "link"
+                })
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "neeto-ui-bg-success-500 neeto-ui-text-white neeto-ui-rounded-full flex items-center justify-center p-1",
+            children: /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Check, {
+              size: 24
+            })
+          })]
+        }), fields.map(function (field) {
+          return /*#__PURE__*/jsxRuntime.jsx(Field, {
+            name: field.name,
+            value: field.value
+          }, field.name);
+        }), children]
+      }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        className: "mt-8",
+        label: t("neetoSlack.common.edit"),
+        onClick: onEdit
+      })]
+    })
+  });
 });
 Settings.EditPane = EditPane;
 var Configure = reactUtils.withT(function (_ref) {
   var t = _ref.t,
-    children = _ref.children,
+    _children = _ref.children,
     teamName = _ref.teamName,
     _ref$slackUrl = _ref.slackUrl,
     slackUrl = _ref$slackUrl === void 0 ? "" : _ref$slackUrl,
@@ -317,92 +349,107 @@ var Configure = reactUtils.withT(function (_ref) {
     channelRefreshHandler = _ref.channelRefreshHandler,
     _ref$channelSelectLab = _ref.channelSelectLabel,
     channelSelectLabel = _ref$channelSelectLab === void 0 ? "" : _ref$channelSelectLab;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]("neeto-ui-w-full neeto-ui-space-y-6 mx-auto max-w-lg", className)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-mb-6 neeto-ui-w-full"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h3"
-  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoSlack.slack.configure.title",
-    values: {
-      teamName: teamName
-    },
-    components: {
-      a: /*#__PURE__*/React__default["default"].createElement("a", {
-        className: "neeto-ui-text-primary-800",
-        href: ramda.isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl
-      })
-    }
-  }))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    className: "neeto-ui-w-full max-w-md",
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: initialFormValues,
-      onSubmit: handleSubmit,
-      validationSchema: buildValidationSchema(validationSchema)
-    }
-  }, function (formikProps) {
-    var _formikProps$errors;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-mb-4 neeto-ui-w-full"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "neeto-ui-text-gray-700 neeto-ui-mb-3",
-      style: "body2",
-      weight: "normal"
-    }, ramda.isEmpty(channelSelectLabel) ? t("neetoSlack.slack.configure.sendToDescription") : channelSelectLabel, /*#__PURE__*/React__default["default"].createElement("sup", null, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "relative flex flex-col items-start gap-y-3"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Select, {
-      isSearchable: true,
-      required: true,
-      className: "w-full",
-      error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
-      name: "selectedChannel",
-      placeholder: t("neetoSlack.slack.placeholder"),
-      size: "large",
-      options: formikProps.values.channels.map(function (_ref2) {
-        var label = _ref2.label,
-          value = _ref2.value,
-          isPrivate = _ref2.isPrivate;
-        return {
-          label: /*#__PURE__*/React__default["default"].createElement(ChannelSelectOption, {
-            isPrivate: isPrivate,
-            label: label
-          }),
-          value: value
-        };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default["default"]("neeto-ui-w-full neeto-ui-space-y-6 mx-auto max-w-lg", className),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-mb-6 neeto-ui-w-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h3",
+        children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoSlack.slack.configure.title",
+          values: {
+            teamName: teamName
+          },
+          components: {
+            a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              className: "neeto-ui-text-xl",
+              href: ramda.isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl,
+              style: "link"
+            })
+          }
+        })
       })
-    }), /*#__PURE__*/React__default["default"].createElement(SlackRefreshChannelListButton$1, {
-      channelRefreshHandler: channelRefreshHandler
-    }))), ramda.is(Function, children) ? children(formikProps) : children, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      label: t("neetoSlack.common.continue"),
-      loading: isSubmitting,
-      type: "submit"
-    }));
-  }));
+    }), /*#__PURE__*/jsxRuntime.jsx(NeetoUIForm__default["default"], {
+      className: "neeto-ui-w-full max-w-md",
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: initialFormValues,
+        onSubmit: handleSubmit,
+        validationSchema: buildValidationSchema(validationSchema)
+      },
+      children: function children(formikProps) {
+        var _formikProps$errors;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "neeto-ui-mb-4 neeto-ui-w-full",
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+              className: "neeto-ui-text-gray-700 neeto-ui-mb-3",
+              style: "body2",
+              weight: "normal",
+              children: [ramda.isEmpty(channelSelectLabel) ? t("neetoSlack.slack.configure.sendToDescription") : channelSelectLabel, /*#__PURE__*/jsxRuntime.jsx("sup", {
+                children: "*"
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "relative flex flex-col items-start gap-y-3",
+              children: [/*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+                isSearchable: true,
+                required: true,
+                className: "w-full",
+                error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
+                name: "selectedChannel",
+                placeholder: t("neetoSlack.slack.placeholder"),
+                size: "large",
+                options: formikProps.values.channels.map(function (_ref2) {
+                  var label = _ref2.label,
+                    value = _ref2.value,
+                    isPrivate = _ref2.isPrivate;
+                  return {
+                    label: /*#__PURE__*/jsxRuntime.jsx(ChannelSelectOption, {
+                      isPrivate: isPrivate,
+                      label: label
+                    }),
+                    value: value
+                  };
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx(SlackRefreshChannelListButton$1, {
+                channelRefreshHandler: channelRefreshHandler
+              })]
+            })]
+          }), ramda.is(Function, _children) ? _children(formikProps) : _children, /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            label: t("neetoSlack.common.continue"),
+            loading: isSubmitting,
+            type: "submit"
+          })]
+        });
+      }
+    })]
+  });
 });
 var Connect = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     handleRedirectToSlack = _ref.handleRedirectToSlack,
     isAuthorizeUrlFetching = _ref.isAuthorizeUrlFetching;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-w-full mx-auto max-w-lg"
-  }, /*#__PURE__*/React__default["default"].createElement(misc.Slack, {
-    size: 32
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 neeto-ui-mb-0.5 neeto-ui-mt-6",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoSlack.slack.connect.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-700 neeto-ui-mb-4",
-    style: "body1",
-    weight: "normal"
-  }, t("neetoSlack.slack.connect.description")), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoSlack.slack.connect.loginButton"),
-    loading: isAuthorizeUrlFetching,
-    onClick: handleRedirectToSlack
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-w-full mx-auto max-w-lg",
+    children: [/*#__PURE__*/jsxRuntime.jsx(misc.Slack, {
+      size: 32
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-800 neeto-ui-mb-0.5 neeto-ui-mt-6",
+      style: "h2",
+      weight: "semibold",
+      children: t("neetoSlack.slack.connect.title")
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-700 neeto-ui-mb-4",
+      style: "body1",
+      weight: "normal",
+      children: t("neetoSlack.slack.connect.description")
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: t("neetoSlack.slack.connect.loginButton"),
+      loading: isAuthorizeUrlFetching,
+      onClick: handleRedirectToSlack
+    })]
+  });
 });
 var _path, _defs;
@@ -431,6 +478,8 @@ const SvgSuccess = props => /*#__PURE__*/React__namespace.createElement("svg", _
   height: 344
 }))));
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Finish = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     children = _ref.children,
@@ -446,38 +495,40 @@ var Finish = reactUtils.withT(function (_ref) {
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     _ref$secondaryButtonP = _ref.secondaryButtonProps,
     secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-w-full mx-auto max-w-lg"
-  }, /*#__PURE__*/React__default["default"].createElement(SvgSuccess, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 neeto-ui-mb-6 neeto-ui-mt-4",
-    style: "h3",
-    weight: "bold"
-  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoSlack.slack.finish.title",
-    values: {
-      teamName: teamName
-    }
-  })), neetoCist.isNotEmpty(fields) && fields.map(function (field, index) {
-    return /*#__PURE__*/React__default["default"].createElement(Field, {
-      key: field.name,
-      name: field.name,
-      value: field.value,
-      className: classNames__default["default"]("neeto-ui-pt-3 neeto-ui-border-gray-300", {
-        "border-t": index !== 0
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-w-full mx-auto max-w-lg",
+    children: [/*#__PURE__*/jsxRuntime.jsx(SvgSuccess, {}), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-800 neeto-ui-mb-6 neeto-ui-mt-4",
+      style: "h3",
+      weight: "bold",
+      children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoSlack.slack.finish.title",
+        values: {
+          teamName: teamName
+        }
       })
-    });
-  }), children, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-row neeto-ui-mt-6"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
-    className: "neeto-ui-my-1",
-    label: t("neetoSlack.common.done"),
-    onClick: onSuccess
-  }, buttonProps)), neetoCist.isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
-    className: "neeto-ui-my-1 neeto-ui-ml-2",
-    label: t("neetoSlack.common.edit"),
-    style: "secondary",
-    onClick: onBack
-  }, secondaryButtonProps))));
+    }), neetoCist.isNotEmpty(fields) && fields.map(function (field, index) {
+      return /*#__PURE__*/jsxRuntime.jsx(Field, {
+        name: field.name,
+        value: field.value,
+        className: classNames__default["default"]("neeto-ui-pt-3 neeto-ui-border-gray-300", {
+          "border-t": index !== 0
+        })
+      }, field.name);
+    }), children, /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-row neeto-ui-mt-6",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], _objectSpread$1({
+        className: "neeto-ui-my-1",
+        label: t("neetoSlack.common.done"),
+        onClick: onSuccess
+      }, buttonProps)), neetoCist.isNotEmpty(secondaryButtonProps) && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], _objectSpread$1({
+        className: "neeto-ui-my-1 neeto-ui-ml-2",
+        label: t("neetoSlack.common.edit"),
+        style: "secondary",
+        onClick: onBack
+      }, secondaryButtonProps))]
+    })]
+  });
 });
 function _objectWithoutPropertiesLoose(source, excluded) {