@bigbinary/neeto-molecules 1.2.0-beta1 → 1.2.0-beta3

package/dist/cjs/Onboarding.js

@@ -1,140 +1,30 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('./extends-1b35a664.js');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
-var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
 var neetoui = require('@bigbinary/neetoui');
-var index = require('./index-248c4f4c.js');
-var injectCss = require('./inject-css-80a5faa3.js');
-var useBreakpoints = require('@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints');
-var reactI18next = require('react-i18next');
+var _extends = require('@babel/runtime/helpers/extends');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
-var defineProperty = require('./defineProperty-886ed289.js');
+var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
+var injectCss = require('./inject-css-80a5faa3.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var i18next = require('i18next');
+var useBreakpoints = require('@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var reactI18next = require('react-i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var useBreakpoints__default = /*#__PURE__*/_interopDefaultLegacy(useBreakpoints);
 
-var css$1 = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}";
-injectCss.n(css$1,{});
-
-var CompletedScreen$1 = withT__default["default"](function (_ref) {
-  var t = _ref.t,
-    title = _ref.title,
-    description = _ref.description,
-    children = _ref.children,
-    buttonProps = _ref.buttonProps,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-molecules-onboarding__wrapper", className),
-    "data-testid": "onboarding-congratulations-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto mb-6 w-full max-w-2xl space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-center",
-    "data-cy": "onboarding-congratulations-emoji",
-    style: "h1"
-  }, "\uD83C\uDF89"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-center",
-    "data-cy": "onboarding-congratulations-title",
-    "data-testid": "onboarding-congratulations-title",
-    style: "h1"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "neeto-ui-text-success-500"
-  }, t("neetoMolecules.onboarding.congratulations")), /*#__PURE__*/React__default["default"].createElement("br", null), title), description && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-center",
-    "data-cy": "onboarding-congratulations-description",
-    "data-testid": "onboarding-congratulations-description",
-    lineHeight: "normal",
-    style: "body1"
-  }, description), children), neetoCist.isPresent(buttonProps) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
-    "data-cy": "onboarding-congratulations-button",
-    "data-testid": "onboarding-congratulations-button",
-    label: t("neetoMolecules.onboarding.startUsing")
-  }, buttonProps)));
-});
-CompletedScreen$1.propTypes = {
-  /**
-   * To specify external classnames as overrides.
-   */
-  className: index.propTypes.exports.string,
-  /**
-   * Title of the completed screen
-   */
-  title: index.propTypes.exports.string,
-  /**
-   * Description of the completed screen
-   */
-  description: index.propTypes.exports.oneOfType([index.propTypes.exports.string, index.propTypes.exports.node]),
-  /**
-   * Additional children elements to be rendered within the completed screen.
-   */
-  children: index.propTypes.exports.node,
-  /**
-   * Additional props that can be passed on to the button
-   */
-  buttonProps: index.propTypes.exports.object
-};
-
-var HelpScreen$1 = function HelpScreen(_ref) {
-  var buttonProps = _ref.buttonProps,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    _ref$standalone = _ref.standalone,
-    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useBreakpoints = useBreakpoints__default["default"](),
-    isSize = _useBreakpoints.isSize;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-molecules-onboarding__wrapper", className),
-    "data-testid": "onboarding-help-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto w-full max-w-2xl space-y-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    component: "h1",
-    "data-cy": "onboarding-help-title",
-    "data-testid": "onboarding-help-title",
-    style: "h2"
-  }, standalone ? t("neetoMolecules.onboarding.helpScreen.welcomeToTitle", {
-    appName: globalProps.appName
-  }) : t("neetoMolecules.onboarding.helpScreen.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    "data-cy": "onboarding-help-description",
-    "data-testid": "onboarding-help-description",
-    lineHeight: "normal",
-    style: "body1"
-  }, t("neetoMolecules.onboarding.helpScreen.description")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full overflow-hidden"
-  }, isSize("mobile") ? /*#__PURE__*/React__default["default"].createElement("img", {
-    alt: "",
-    src: "https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg"
-  }) : /*#__PURE__*/React__default["default"].createElement("img", {
-    alt: "",
-    src: "https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg"
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
-    "data-cy": "onboarding-help-button",
-    "data-testid": "onboarding-help-button",
-    label: standalone ? t("neetoMolecules.onboarding.helpScreen.startUsingButton", {
-      appName: globalProps.appName
-    }) : t("neetoMolecules.onboarding.helpScreen.continueButton")
-  }, buttonProps))));
-};
-
-var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}.neeto-molecules-onboarding__container{display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;width:100%}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:8px 16px;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}";
-injectCss.n(css,{});
-
 var CompletedScreen = withT__default["default"](function (_ref) {
   var t = _ref.t,
     completeButtonProps = _ref.completeButtonProps;
@@ -156,7 +46,7 @@ var CompletedScreen = withT__default["default"](function (_ref) {
     className: "neeto-ui-text-success-500"
   }, t("neetoMolecules.onboarding.congratulations")), /*#__PURE__*/React__default["default"].createElement("br", null), t("neetoMolecules.onboarding.readyToUse", {
     appName: initializers.globalProps.appName
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends__default["default"]({
     "data-cy": "onboarding-congratulations-button",
     "data-testid": "onboarding-congratulations-button",
     label: t("neetoMolecules.onboarding.helpScreen.startUsingButton", {
@@ -165,15 +55,19 @@ var CompletedScreen = withT__default["default"](function (_ref) {
   }, completeButtonProps)));
 });
 
+var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:15vh 32px 32px;width:100%}.neeto-molecules-onboarding__container{display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;width:100%}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:8px 16px;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}.neeto-molecules-onboarding__content--forward{animation:slideInRight .4s ease backwards}.neeto-molecules-onboarding__content--backward{animation:slideInLeft .4s ease backwards}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}";
+injectCss.n(css,{});
+
 var HelpScreen = function HelpScreen(_ref) {
   var setCurrentStep = _ref.setCurrentStep,
-    currentStep = _ref.currentStep;
+    currentStep = _ref.currentStep,
+    helpScreenClassName = _ref.helpScreenClassName;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useBreakpoints = useBreakpoints__default["default"](),
     isSize = _useBreakpoints.isSize;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto w-full max-w-2xl space-y-6 p-4"
+    className: classnames__default["default"]("mx-auto w-full max-w-2xl space-y-6 p-4", helpScreenClassName)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-3"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -207,12 +101,13 @@ var HelpScreen = function HelpScreen(_ref) {
 };
 
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName) {
   var helpStep = {
     label: i18next.t("neetoMolecules.onboarding.helpLabel"),
     element: /*#__PURE__*/React__default["default"].createElement(HelpScreen, {
       currentStep: currentStep,
+      helpScreenClassName: helpScreenClassName,
       setCurrentStep: setCurrentStep
     })
   };
@@ -223,7 +118,7 @@ var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentS
   });
 };
 
-var WelcomeScreen$1 = withT__default["default"](function (_ref) {
+var WelcomeScreen = withT__default["default"](function (_ref) {
   var t = _ref.t,
     setCurrentStep = _ref.setCurrentStep,
     currentStep = _ref.currentStep;
@@ -259,7 +154,6 @@ var WelcomeScreen$1 = withT__default["default"](function (_ref) {
 });
 
 var Onboarding = function Onboarding(_ref) {
-  var _steps;
   var _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
     _ref$setCurrentStep = _ref.setCurrentStep,
@@ -267,12 +161,20 @@ var Onboarding = function Onboarding(_ref) {
     _ref$onboardingSteps = _ref.onboardingSteps,
     onboardingSteps = _ref$onboardingSteps === void 0 ? [] : _ref$onboardingSteps,
     _ref$completeButtonPr = _ref.completeButtonProps,
-    completeButtonProps = _ref$completeButtonPr === void 0 ? {} : _ref$completeButtonPr;
+    completeButtonProps = _ref$completeButtonPr === void 0 ? {} : _ref$completeButtonPr,
+    _ref$helpScreenClassN = _ref.helpScreenClassName,
+    helpScreenClassName = _ref$helpScreenClassN === void 0 ? "" : _ref$helpScreenClassN,
+    _ref$isAnimated = _ref.isAnimated,
+    isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated;
   var steps = React.useMemo(function () {
-    return createSteps(onboardingSteps, setCurrentStep, currentStep);
+    return createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName);
   }, [onboardingSteps]);
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    direction = _useState2[0],
+    setDirection = _useState2[1];
   if (currentStep === 0) {
-    return /*#__PURE__*/React__default["default"].createElement(WelcomeScreen$1, {
+    return /*#__PURE__*/React__default["default"].createElement(WelcomeScreen, {
       currentStep: currentStep,
       setCurrentStep: setCurrentStep
     });
@@ -283,7 +185,9 @@ var Onboarding = function Onboarding(_ref) {
     });
   }
   var handleStepChange = function handleStepChange(index) {
-    return setCurrentStep(index + 1);
+    var nextStep = index + 1;
+    setDirection(currentStep > nextStep ? "backward" : "forward");
+    setCurrentStep(nextStep);
   };
   var isStepperVisible = steps.length > 1;
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -296,62 +200,17 @@ var Onboarding = function Onboarding(_ref) {
     steps: steps,
     activeIndex: currentStep - 1,
     setActiveIndex: handleStepChange
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-onboarding__content"
-  }, (_steps = steps[currentStep - 1]) === null || _steps === void 0 ? void 0 : _steps.element));
-};
-
-var WelcomeScreen = withT__default["default"](function (_ref) {
-  var t = _ref.t,
-    title = _ref.title,
-    description = _ref.description,
-    buttonProps = _ref.buttonProps,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-molecules-onboarding__wrapper", className),
-    "data-testid": "onboarding-welcome-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto mb-6 w-full max-w-2xl space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-center",
-    "data-cy": "onboarding-welcome-title",
-    "data-testid": "onboarding-welcome-title",
-    style: "h1"
-  }, title), description && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "text-center",
-    "data-cy": "onboarding-welcome-description",
-    "data-testid": "onboarding-welcome-description",
-    lineHeight: "normal",
-    style: "body1"
-  }, description)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
-    "data-cy": "onboarding-welcome-button",
-    "data-testid": "onboarding-welcome-button",
-    icon: neetoIcons.RightArrow,
-    label: t("neetoMolecules.onboarding.getStarted")
-  }, buttonProps)));
-});
-WelcomeScreen.propTypes = {
-  /**
-   * To specify external classnames as overrides.
-   */
-  className: index.propTypes.exports.string,
-  /**
-   * Title of the welcome screen
-   */
-  title: index.propTypes.exports.string,
-  /**
-   * Description of the welcome screen
-   */
-  description: index.propTypes.exports.string,
-  /**
-   * Additional props that can be passed on to the button
-   */
-  buttonProps: index.propTypes.exports.object
+  })), steps.map(function (step, index) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: index,
+      className: classnames__default["default"]("neeto-molecules-onboarding__content", {
+        "neeto-molecules-onboarding__content--forward overflow-x-hidden": isAnimated && direction === "forward",
+        "neeto-molecules-onboarding__content--backward overflow-x-hidden": isAnimated && direction === "backward",
+        hidden: currentStep - 1 !== index
+      })
+    }, step === null || step === void 0 ? void 0 : step.element);
+  }));
 };
 
-exports.CompletedScreen = CompletedScreen$1;
-exports.HelpScreen = HelpScreen$1;
-exports.WelcomeScreen = WelcomeScreen;
-exports["default"] = Onboarding;
+module.exports = Onboarding;
 //# sourceMappingURL=Onboarding.js.map

package/dist/cjs/Onboarding.js.map

@@ -1 +1 @@
-{"version":3,"file":"Onboarding.js","sources":["../../src/components/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/HelpScreen.jsx","../../src/components/Onboarding/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/Onboarding/HelpScreen.jsx","../../src/components/Onboarding/Onboarding/utils.jsx","../../src/components/Onboarding/Onboarding/WelcomeScreen.jsx","../../src/components/Onboarding/Onboarding/index.jsx","../../src/components/Onboarding/WelcomeScreen.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst CompletedScreen = withT(\n  ({ t, title, description, children, buttonProps, className = \"\" }) => (\n    <div\n      className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n      data-testid=\"onboarding-congratulations-wrapper\"\n    >\n      <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n        <Typography\n          className=\"text-center\"\n          data-cy=\"onboarding-congratulations-emoji\"\n          style=\"h1\"\n        >\n          🎉\n        </Typography>\n        <Typography\n          className=\"text-center\"\n          data-cy=\"onboarding-congratulations-title\"\n          data-testid=\"onboarding-congratulations-title\"\n          style=\"h1\"\n        >\n          <span className=\"neeto-ui-text-success-500\">\n            {t(\"neetoMolecules.onboarding.congratulations\")}\n          </span>\n          <br />\n          {title}\n        </Typography>\n        {description && (\n          <Typography\n            className=\"text-center\"\n            data-cy=\"onboarding-congratulations-description\"\n            data-testid=\"onboarding-congratulations-description\"\n            lineHeight=\"normal\"\n            style=\"body1\"\n          >\n            {description}\n          </Typography>\n        )}\n        {children}\n      </div>\n      {isPresent(buttonProps) && (\n        <Button\n          data-cy=\"onboarding-congratulations-button\"\n          data-testid=\"onboarding-congratulations-button\"\n          label={t(\"neetoMolecules.onboarding.startUsing\")}\n          {...buttonProps}\n        />\n      )}\n    </div>\n  )\n);\n\nCompletedScreen.propTypes = {\n  /**\n   * To specify external classnames as overrides.\n   */\n  className: PropTypes.string,\n  /**\n   * Title of the completed screen\n   */\n  title: PropTypes.string,\n  /**\n   * Description of the completed screen\n   */\n  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  /**\n   * Additional children elements to be rendered within the completed screen.\n   */\n  children: PropTypes.node,\n  /**\n   * Additional props that can be passed on to the button\n   */\n  buttonProps: PropTypes.object,\n};\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport \"./onboarding.scss\";\n\nconst HelpScreen = ({ buttonProps, className = \"\", standalone = false }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div\n      className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n      data-testid=\"onboarding-help-wrapper\"\n    >\n      <div className=\"mx-auto w-full max-w-2xl space-y-6\">\n        <div className=\"space-y-3\">\n          <Typography\n            component=\"h1\"\n            data-cy=\"onboarding-help-title\"\n            data-testid=\"onboarding-help-title\"\n            style=\"h2\"\n          >\n            {standalone\n              ? t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n                  appName: globalProps.appName,\n                })\n              : t(\"neetoMolecules.onboarding.helpScreen.title\")}\n          </Typography>\n          <Typography\n            data-cy=\"onboarding-help-description\"\n            data-testid=\"onboarding-help-description\"\n            lineHeight=\"normal\"\n            style=\"body1\"\n          >\n            {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n          </Typography>\n          <div className=\"w-full overflow-hidden\">\n            {isSize(\"mobile\") ? (\n              <img\n                alt=\"\"\n                src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n              />\n            ) : (\n              <img\n                alt=\"\"\n                src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n              />\n            )}\n          </div>\n        </div>\n        <Button\n          data-cy=\"onboarding-help-button\"\n          data-testid=\"onboarding-help-button\"\n          label={\n            standalone\n              ? t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n                  appName: globalProps.appName,\n                })\n              : t(\"neetoMolecules.onboarding.helpScreen.continueButton\")\n          }\n          {...buttonProps}\n        />\n      </div>\n    </div>\n  );\n};\n\nHelpScreen.propTypes = {\n  /**\n   * To specify external classnames as overrides.\n   */\n  className: PropTypes.string,\n  /**\n   * Additional props that can be passed on to the button\n   */\n  buttonProps: PropTypes.object,\n  /**\n   * To specify if the help screen is standalone or not.\n   */\n  standalone: PropTypes.bool,\n};\n\nexport default HelpScreen;\n","import React from \"react\";\n\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\n\nimport \"./onboarding.scss\";\n\nconst CompletedScreen = withT(({ t, completeButtonProps }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-congratulations-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-emoji\"\n        style=\"h1\"\n      >\n        🎉\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-title\"\n        data-testid=\"onboarding-congratulations-title\"\n        style=\"h1\"\n      >\n        <span className=\"neeto-ui-text-success-500\">\n          {t(\"neetoMolecules.onboarding.congratulations\")}\n        </span>\n        <br />\n        {t(\"neetoMolecules.onboarding.readyToUse\", {\n          appName: globalProps.appName,\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-congratulations-button\"\n      data-testid=\"onboarding-congratulations-button\"\n      label={t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n        appName: globalProps.appName,\n      })}\n      {...completeButtonProps}\n    />\n  </div>\n));\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport { useTranslation } from \"react-i18next\";\n\nconst HelpScreen = ({ setCurrentStep, currentStep }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div className=\"mx-auto w-full max-w-2xl space-y-6 p-4\">\n      <div className=\"space-y-3\">\n        <Typography\n          component=\"h1\"\n          data-cy=\"onboarding-help-title\"\n          data-testid=\"onboarding-help-title\"\n          style=\"h2\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n        </Typography>\n        <Typography\n          data-cy=\"onboarding-help-description\"\n          data-testid=\"onboarding-help-description\"\n          lineHeight=\"normal\"\n          style=\"body1\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n        </Typography>\n        <div className=\"w-full\">\n          {isSize(\"mobile\") ? (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n            />\n          ) : (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n            />\n          )}\n        </div>\n      </div>\n      <Button\n        data-cy=\"onboarding-help-button\"\n        data-testid=\"onboarding-help-button\"\n        icon={RightArrow}\n        iconPosition=\"right\"\n        label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n        onClick={() => setCurrentStep(currentStep + 1)}\n      />\n    </div>\n  );\n};\n\nexport default HelpScreen;\n","import React from \"react\";\n\nimport { t } from \"i18next\";\n\nimport HelpScreen from \"./HelpScreen\";\n\nexport const createSteps = (onboardingSteps, setCurrentStep, currentStep) => {\n  const helpStep = {\n    label: t(\"neetoMolecules.onboarding.helpLabel\"),\n    element: <HelpScreen {...{ currentStep, setCurrentStep }} />,\n  };\n\n  return onboardingSteps\n    .concat(helpStep)\n    .map((step, idx) => ({ ...step, id: idx + 1 }));\n};\n","import React from \"react\";\n\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\n\nimport \"./onboarding.scss\";\n\nconst WelcomeScreen = withT(({ t, setCurrentStep, currentStep }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-welcome-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-title\"\n        data-testid=\"onboarding-welcome-title\"\n        style=\"h1\"\n      >\n        {t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n          appName: globalProps.appName,\n        })}\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-description\"\n        data-testid=\"onboarding-welcome-description\"\n        lineHeight=\"normal\"\n        style=\"body1\"\n      >\n        {t(\"neetoMolecules.onboarding.letUsCustomize\", {\n          appName: globalProps.appName,\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-welcome-button\"\n      data-testid=\"onboarding-welcome-button\"\n      icon={RightArrow}\n      label={t(\"neetoMolecules.onboarding.getStarted\")}\n      onClick={() => setCurrentStep(currentStep + 1)}\n    />\n  </div>\n));\n\nexport default WelcomeScreen;\n","import React, { useMemo } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Stepper } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport CompletedScreen from \"./CompletedScreen\";\nimport { createSteps } from \"./utils\";\nimport WelcomeScreen from \"./WelcomeScreen\";\n\nconst Onboarding = ({\n  currentStep = 0,\n  setCurrentStep = noop,\n  onboardingSteps = [],\n  completeButtonProps = {},\n}) => {\n  const steps = useMemo(\n    () => createSteps(onboardingSteps, setCurrentStep, currentStep),\n    [onboardingSteps]\n  );\n\n  if (currentStep === 0) {\n    return <WelcomeScreen {...{ currentStep, setCurrentStep }} />;\n  }\n\n  if (currentStep === steps.length + 1) {\n    return <CompletedScreen {...{ completeButtonProps }} />;\n  }\n\n  const handleStepChange = index => setCurrentStep(index + 1);\n\n  const isStepperVisible = steps.length > 1;\n\n  return (\n    <div\n      className={classNames(\"neeto-molecules-onboarding__container\", {\n        \"neeto-molecules-onboarding__wrapper\": !isStepperVisible,\n      })}\n    >\n      {isStepperVisible && (\n        <div className=\"neeto-molecules-onboarding__stepper-wrapper\">\n          <Stepper\n            {...{ steps }}\n            activeIndex={currentStep - 1}\n            setActiveIndex={handleStepChange}\n          />\n        </div>\n      )}\n      <div className=\"neeto-molecules-onboarding__content\">\n        {steps[currentStep - 1]?.element}\n      </div>\n    </div>\n  );\n};\n\nOnboarding.propTypes = {\n  /**\n   * To specify the current step of the onboarding\n   */\n  currentStep: PropTypes.number,\n  /**\n   * List of Custom components for the onboarding\n   */\n  onboardingSteps: PropTypes.array,\n  /**\n   * Props for the complete button\n   */\n  completeButtonProps: PropTypes.object,\n  /**\n   * To set the step of the onboarding\n   */\n  setCurrentStep: PropTypes.func,\n};\n\nexport default Onboarding;\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./onboarding.scss\";\n\nconst WelcomeScreen = withT(\n  ({ t, title, description, buttonProps, className = \"\" }) => (\n    <div\n      className={classnames(\"neeto-molecules-onboarding__wrapper\", className)}\n      data-testid=\"onboarding-welcome-wrapper\"\n    >\n      <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n        <Typography\n          className=\"text-center\"\n          data-cy=\"onboarding-welcome-title\"\n          data-testid=\"onboarding-welcome-title\"\n          style=\"h1\"\n        >\n          {title}\n        </Typography>\n        {description && (\n          <Typography\n            className=\"text-center\"\n            data-cy=\"onboarding-welcome-description\"\n            data-testid=\"onboarding-welcome-description\"\n            lineHeight=\"normal\"\n            style=\"body1\"\n          >\n            {description}\n          </Typography>\n        )}\n      </div>\n      <Button\n        data-cy=\"onboarding-welcome-button\"\n        data-testid=\"onboarding-welcome-button\"\n        icon={RightArrow}\n        label={t(\"neetoMolecules.onboarding.getStarted\")}\n        {...buttonProps}\n      />\n    </div>\n  )\n);\n\nWelcomeScreen.propTypes = {\n  /**\n   * To specify external classnames as overrides.\n   */\n  className: PropTypes.string,\n  /**\n   * Title of the welcome screen\n   */\n  title: PropTypes.string,\n  /**\n   * Description of the welcome screen\n   */\n  description: PropTypes.string,\n  /**\n   * Additional props that can be passed on to the button\n   */\n  buttonProps: PropTypes.object,\n};\n\nexport default WelcomeScreen;\n"],"names":["CompletedScreen","withT","_ref","t","title","description","children","buttonProps","_ref$className","className","React","createElement","classnames","Typography","style","lineHeight","isPresent","Button","_extends","label","propTypes","PropTypes","string","oneOfType","node","object","HelpScreen","_ref$standalone","standalone","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","component","appName","globalProps","alt","src","completeButtonProps","setCurrentStep","currentStep","icon","RightArrow","iconPosition","onClick","createSteps","onboardingSteps","helpStep","element","concat","map","step","idx","_objectSpread","id","WelcomeScreen","Onboarding","_steps","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","steps","useMemo","length","handleStepChange","index","isStepperVisible","classNames","Stepper","activeIndex","setActiveIndex"],"mappings":"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"}
+{"version":3,"file":"Onboarding.js","sources":["../../src/components/Onboarding/CompletedScreen.jsx","../../src/components/Onboarding/HelpScreen.jsx","../../src/components/Onboarding/utils.jsx","../../src/components/Onboarding/WelcomeScreen.jsx","../../src/components/Onboarding/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Button, Typography } from \"neetoui\";\n\nconst CompletedScreen = withT(({ t, completeButtonProps }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-congratulations-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-emoji\"\n        style=\"h1\"\n      >\n        🎉\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-congratulations-title\"\n        data-testid=\"onboarding-congratulations-title\"\n        style=\"h1\"\n      >\n        <span className=\"neeto-ui-text-success-500\">\n          {t(\"neetoMolecules.onboarding.congratulations\")}\n        </span>\n        <br />\n        {t(\"neetoMolecules.onboarding.readyToUse\", {\n          appName: globalProps.appName,\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-congratulations-button\"\n      data-testid=\"onboarding-congratulations-button\"\n      label={t(\"neetoMolecules.onboarding.helpScreen.startUsingButton\", {\n        appName: globalProps.appName,\n      })}\n      {...completeButtonProps}\n    />\n  </div>\n));\n\nexport default CompletedScreen;\n","import React from \"react\";\n\nimport classNames from \"classnames\";\nimport useBreakpoints from \"neetocommons/react-utils/useBreakpoints\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\nimport { useTranslation } from \"react-i18next\";\n\nconst HelpScreen = ({ setCurrentStep, currentStep, helpScreenClassName }) => {\n  const { t } = useTranslation();\n  const { isSize } = useBreakpoints();\n\n  return (\n    <div\n      className={classNames(\n        \"mx-auto w-full max-w-2xl space-y-6 p-4\",\n        helpScreenClassName\n      )}\n    >\n      <div className=\"space-y-3\">\n        <Typography\n          component=\"h1\"\n          data-cy=\"onboarding-help-title\"\n          data-testid=\"onboarding-help-title\"\n          style=\"h2\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.title\")}\n        </Typography>\n        <Typography\n          data-cy=\"onboarding-help-description\"\n          data-testid=\"onboarding-help-description\"\n          lineHeight=\"normal\"\n          style=\"body1\"\n        >\n          {t(\"neetoMolecules.onboarding.helpScreen.description\")}\n        </Typography>\n        <div className=\"w-full\">\n          {isSize(\"mobile\") ? (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-mobile_FpB8LKYj4.svg\"\n            />\n          ) : (\n            <img\n              alt=\"\"\n              src=\"https://ik.imagekit.io/d9mvewbju/Commons/help-desktop_aVe6ENdX97.svg\"\n            />\n          )}\n        </div>\n      </div>\n      <Button\n        data-cy=\"onboarding-help-button\"\n        data-testid=\"onboarding-help-button\"\n        icon={RightArrow}\n        iconPosition=\"right\"\n        label={t(\"neetoMolecules.onboarding.helpScreen.continueButton\")}\n        onClick={() => setCurrentStep(currentStep + 1)}\n      />\n    </div>\n  );\n};\n\nexport default HelpScreen;\n","import React from \"react\";\n\nimport { t } from \"i18next\";\n\nimport HelpScreen from \"./HelpScreen\";\n\nexport const createSteps = (\n  onboardingSteps,\n  setCurrentStep,\n  currentStep,\n  helpScreenClassName\n) => {\n  const helpStep = {\n    label: t(\"neetoMolecules.onboarding.helpLabel\"),\n    element: (\n      <HelpScreen {...{ currentStep, helpScreenClassName, setCurrentStep }} />\n    ),\n  };\n\n  return onboardingSteps\n    .concat(helpStep)\n    .map((step, idx) => ({ ...step, id: idx + 1 }));\n};\n","import React from \"react\";\n\nimport { globalProps } from \"neetocommons/initializers\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { RightArrow } from \"neetoicons\";\nimport { Button, Typography } from \"neetoui\";\n\nconst WelcomeScreen = withT(({ t, setCurrentStep, currentStep }) => (\n  <div\n    className=\"neeto-molecules-onboarding__wrapper\"\n    data-testid=\"onboarding-welcome-wrapper\"\n  >\n    <div className=\"mx-auto mb-6 w-full max-w-2xl space-y-2\">\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-title\"\n        data-testid=\"onboarding-welcome-title\"\n        style=\"h1\"\n      >\n        {t(\"neetoMolecules.onboarding.helpScreen.welcomeToTitle\", {\n          appName: globalProps.appName,\n        })}\n      </Typography>\n      <Typography\n        className=\"text-center\"\n        data-cy=\"onboarding-welcome-description\"\n        data-testid=\"onboarding-welcome-description\"\n        lineHeight=\"normal\"\n        style=\"body1\"\n      >\n        {t(\"neetoMolecules.onboarding.letUsCustomize\", {\n          appName: globalProps.appName,\n        })}\n      </Typography>\n    </div>\n    <Button\n      data-cy=\"onboarding-welcome-button\"\n      data-testid=\"onboarding-welcome-button\"\n      icon={RightArrow}\n      label={t(\"neetoMolecules.onboarding.getStarted\")}\n      onClick={() => setCurrentStep(currentStep + 1)}\n    />\n  </div>\n));\n\nexport default WelcomeScreen;\n","import React, { useMemo, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Stepper } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport CompletedScreen from \"./CompletedScreen\";\nimport \"./onboarding.scss\";\nimport { createSteps } from \"./utils\";\nimport WelcomeScreen from \"./WelcomeScreen\";\n\nconst Onboarding = ({\n  currentStep = 0,\n  setCurrentStep = noop,\n  onboardingSteps = [],\n  completeButtonProps = {},\n  helpScreenClassName = \"\",\n  isAnimated = true,\n}) => {\n  const steps = useMemo(\n    () =>\n      createSteps(\n        onboardingSteps,\n        setCurrentStep,\n        currentStep,\n        helpScreenClassName\n      ),\n    [onboardingSteps]\n  );\n  const [direction, setDirection] = useState(\"\");\n\n  if (currentStep === 0) {\n    return <WelcomeScreen {...{ currentStep, setCurrentStep }} />;\n  }\n\n  if (currentStep === steps.length + 1) {\n    return <CompletedScreen {...{ completeButtonProps }} />;\n  }\n\n  const handleStepChange = index => {\n    const nextStep = index + 1;\n    setDirection(currentStep > nextStep ? \"backward\" : \"forward\");\n    setCurrentStep(nextStep);\n  };\n\n  const isStepperVisible = steps.length > 1;\n\n  return (\n    <div\n      className={classNames(\"neeto-molecules-onboarding__container\", {\n        \"neeto-molecules-onboarding__wrapper\": !isStepperVisible,\n      })}\n    >\n      {isStepperVisible && (\n        <div className=\"neeto-molecules-onboarding__stepper-wrapper\">\n          <Stepper\n            {...{ steps }}\n            activeIndex={currentStep - 1}\n            setActiveIndex={handleStepChange}\n          />\n        </div>\n      )}\n      {steps.map((step, index) => (\n        <div\n          key={index}\n          className={classNames(\"neeto-molecules-onboarding__content\", {\n            \"neeto-molecules-onboarding__content--forward overflow-x-hidden\":\n              isAnimated && direction === \"forward\",\n            \"neeto-molecules-onboarding__content--backward overflow-x-hidden\":\n              isAnimated && direction === \"backward\",\n            hidden: currentStep - 1 !== index,\n          })}\n        >\n          {step?.element}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nOnboarding.propTypes = {\n  /**\n   * To specify the current step of the onboarding\n   */\n  currentStep: PropTypes.number,\n  /**\n   * List of Custom components for the onboarding\n   */\n  onboardingSteps: PropTypes.array,\n  /**\n   * Props for the complete button\n   */\n  completeButtonProps: PropTypes.object,\n  /**\n   * To set the step of the onboarding\n   */\n  setCurrentStep: PropTypes.func,\n  /**\n   * To pass additional classes to the help screen\n   */\n  helpScreenClassName: PropTypes.string,\n  /**\n   * A boolean value to enable or disable the animation for the stepper.\n   */\n  isAnimated: PropTypes.bool,\n};\n\nexport default Onboarding;\n"],"names":["CompletedScreen","withT","_ref","t","completeButtonProps","React","createElement","className","Typography","style","appName","globalProps","Button","_extends","label","HelpScreen","setCurrentStep","currentStep","helpScreenClassName","_useTranslation","useTranslation","_useBreakpoints","useBreakpoints","isSize","classNames","component","lineHeight","alt","src","icon","RightArrow","iconPosition","onClick","createSteps","onboardingSteps","helpStep","element","concat","map","step","idx","_objectSpread","id","WelcomeScreen","Onboarding","_ref$currentStep","_ref$setCurrentStep","noop","_ref$onboardingSteps","_ref$completeButtonPr","_ref$helpScreenClassN","_ref$isAnimated","isAnimated","steps","useMemo","_useState","useState","_useState2","_slicedToArray","direction","setDirection","length","handleStepChange","index","nextStep","isStepperVisible","Stepper","activeIndex","setActiveIndex","key","hidden"],"mappings":"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"}

package/dist/cjs/OptionFields.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var _extends = require('./extends-1b35a664.js');
-var slicedToArray = require('./slicedToArray-f320d9e7.js');
+var _extends = require('@babel/runtime/helpers/extends');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var dnd = require('@hello-pangea/dnd');
 var neetoCist = require('@bigbinary/neeto-cist');
@@ -10,18 +10,22 @@ var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var toConsumableArray = require('./toConsumableArray-9abb3858.js');
-var defineProperty = require('./defineProperty-886ed289.js');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var formik = require('formik');
 var i18next = require('i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 
 var DragHandle = function DragHandle(props) {
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
     className: "neeto-ui-text-gray-400 absolute bottom-0 left-0 top-0 my-auto -ml-6 h-6 cursor-grab opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100",
     "data-cy": "drag-handle",
     "data-testid": "drag-handle"
@@ -42,7 +46,7 @@ var BlockOption = reactUtils.withT(function (_ref) {
     index = _ref.index,
     onEdit = _ref.onEdit,
     handleDeleteClick = _ref.handleDeleteClick;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
     ref: innerRef
   }, draggableProps, dragHandleProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-border-gray-400 hover:neeto-ui-bg-gray-200 neeto-ui-rounded-sm shadow-xs group relative mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-colors duration-300 ease-in-out",
@@ -95,7 +99,7 @@ var BulkOptionModal = function BulkOptionModal(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(""),
-    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
     optionsString = _useState2[0],
     setOptionsString = _useState2[1];
   var handleSave = function handleSave() {
@@ -165,7 +169,7 @@ var randomId = function randomId() {
 };
 
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var attachPosition = function attachPosition(options) {
   return options.map(function (option, index) {
     return _objectSpread(_objectSpread({}, option), {}, {
@@ -183,7 +187,7 @@ var useOptionFields = function useOptionFields(_ref) {
     _ref$itemLabel = _ref.itemLabel,
     itemLabel = _ref$itemLabel === void 0 ? DEFAULT_OPTION_LABEL : _ref$itemLabel;
   var _useState = React.useState(false),
-    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
     shouldFocus = _useState2[0],
     setShouldFocus = _useState2[1];
   var deletedOptions = options.filter(function (option) {
@@ -199,7 +203,7 @@ var useOptionFields = function useOptionFields(_ref) {
       return ramda.assocPath([index, "label"], isOnBlur ? ((_path$index = ramda.path(name.split("."), initialValues)[index]) === null || _path$index === void 0 ? void 0 : _path$index.label) || ((_path$index2 = ramda.path(name.split("."), draftAttributes)[index]) === null || _path$index2 === void 0 ? void 0 : _path$index2.label) : value, filterDeletedRecords(options));
     };
     if (isOnBlur && !ramda.isEmpty(value)) return;
-    onChange([].concat(toConsumableArray._toConsumableArray(deletedOptions), toConsumableArray._toConsumableArray(getNextOptions())));
+    onChange([].concat(_toConsumableArray__default["default"](deletedOptions), _toConsumableArray__default["default"](getNextOptions())));
   };
   var generateLabel = function generateLabel(opts, count) {
     var labelCount = count || opts.length + 1;
@@ -215,7 +219,7 @@ var useOptionFields = function useOptionFields(_ref) {
       nextOptions = ramda.remove(index, 1, options);
       nextOptions = attachPosition(nextOptions);
     }
-    onChange([].concat(toConsumableArray._toConsumableArray(deletedOptions), toConsumableArray._toConsumableArray(nextOptions)));
+    onChange([].concat(_toConsumableArray__default["default"](deletedOptions), _toConsumableArray__default["default"](nextOptions)));
   };
   var handleDragEnd = function handleDragEnd(_ref2) {
     var source = _ref2.source,
@@ -225,7 +229,7 @@ var useOptionFields = function useOptionFields(_ref) {
     var filteredOptions = filterDeletedRecords(options);
     var nextOptions = ramda.move(source.index, destination.index, filteredOptions);
     var finalOptions = attachPosition(nextOptions);
-    onChange([].concat(toConsumableArray._toConsumableArray(deletedOptions), toConsumableArray._toConsumableArray(finalOptions)));
+    onChange([].concat(_toConsumableArray__default["default"](deletedOptions), _toConsumableArray__default["default"](finalOptions)));
   };
   var handleAddOption = function handleAddOption() {
     setShouldFocus(true);
@@ -251,7 +255,7 @@ var useOptionFields = function useOptionFields(_ref) {
         position: position + index
       };
     });
-    onChange([].concat(toConsumableArray._toConsumableArray(options), toConsumableArray._toConsumableArray(newOptions)));
+    onChange([].concat(_toConsumableArray__default["default"](options), _toConsumableArray__default["default"](newOptions)));
   };
   var handleKeyDown = function handleKeyDown() {
     return function (event) {
@@ -298,7 +302,7 @@ var InputOption = function InputOption(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var Component = isTextArea ? neetoui.Textarea : neetoui.Input;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
     ref: innerRef
   }, draggableProps, dragHandleProps, {
     "data-cy": "form-block-options"
@@ -386,7 +390,7 @@ var OptionFields = function OptionFields(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
-    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
     isBulkOptionModalOpen = _useState2[0],
     setIsBulkOptionModalOpen = _useState2[1];
   var _useOptionFields = useOptionFields({
@@ -435,7 +439,7 @@ var OptionFields = function OptionFields(_ref) {
     var innerRef = _ref3.innerRef,
       droppableProps = _ref3.droppableProps,
       placeholder = _ref3.placeholder;
-    return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
+    return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
       ref: innerRef
     }, droppableProps), visibleOptions.map(function (option, index) {
       return /*#__PURE__*/React__default["default"].createElement(dnd.Draggable, {
@@ -480,7 +484,7 @@ var OptionFields = function OptionFields(_ref) {
     }, error), placeholder);
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mt-4 flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends__default["default"]({
     "data-cy": "add-option-link",
     "data-testid": "add-option-link",
     disabled: !isEditable,