@bigbinary/neeto-molecules 1.0.89 → 1.0.90-beta

package/dist/IntegrationWalkthroughModal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationWalkthroughModal.cjs.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { Modal, Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst IntegrationWalkthroughModal = ({\n  isOpen,\n  onClose,\n  videoUrl,\n  children,\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <Modal isOpen={isOpen} size=\"large\" onClose={onClose}>\n      <Modal.Header>\n        <Typography style=\"h2\" weight=\"semibold\">\n          {t(\"neetoMolecules.integrationWalkthroughModal.header\")}\n        </Typography>\n      </Modal.Header>\n      <Modal.Body>\n        <div className=\"w-full py-10\">\n          <video\n            autoPlay\n            controls\n            muted\n            className=\"cursor-pointer\"\n            id=\"walkthrough-video\"\n          >\n            <source src={videoUrl} />\n          </video>\n          {children}\n        </div>\n      </Modal.Body>\n      <Modal.Footer>\n        <Button\n          label={t(\"neetoMolecules.integrationWalkthroughModal.continue\")}\n          onClick={onClose}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n};\n\nIntegrationWalkthroughModal.propTypes = {\n  /**\n   * To specify video URL of integration walkthrough that will be embedded.\n   */\n  videoUrl: PropTypes.string,\n  /**\n   * To specify whether the integration modal should be opened or closed.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Handler function that is triggered when the continue or close button is clicked.\n   */\n  onClose: PropTypes.func,\n};\n\nexport default IntegrationWalkthroughModal;\n"],"names":["IntegrationWalkthroughModal","_ref","isOpen","onClose","videoUrl","children","_useTranslation","useTranslation","t","React","createElement","Modal","size","Header","Typography","style","weight","Body","className","autoPlay","controls","muted","id","src","Footer","Button","label","onClick"],"mappings":";;;;;;;;;;AAMA,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAK3B;AAAA,EAAA,IAJJC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,IAAAC,eAAA,GAAcC,2BAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,yBAAA,CAAAC,aAAA,CAACC,aAAK,EAAA;AAACT,IAAAA,MAAM,EAAEA,MAAO;AAACU,IAAAA,IAAI,EAAC,OAAO;AAACT,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eACnDM,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,yBAAA,CAAAC,aAAA,CAACI,kBAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrCR,CAAC,CAAC,mDAAmD,CAAC,CAC5C,CACA,eACfC,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,cAAA;GACbT,eAAAA,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,gBAAgB;AAC1BI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,yBAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEnB,QAAAA;AAAS,GAAA,CAAG,CACnB,EACPC,QAAQ,CACL,CACK,eACbI,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACa,MAAM,EAAA,IAAA,eACXf,yBAAA,CAAAC,aAAA,CAACe,cAAM,EAAA;AACLC,IAAAA,KAAK,EAAElB,CAAC,CAAC,qDAAqD,CAAE;AAChEmB,IAAAA,OAAO,EAAExB,OAAAA;AAAQ,GAAA,CACjB,CACW,CACT,CAAA;AAEZ;;;;"}
+{"version":3,"file":"IntegrationWalkthroughModal.cjs.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { noop } from \"neetocommons/pure\";\nimport { withT } from \"neetocommons/react-utils\";\nimport { Modal, Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst IntegrationWalkthroughModal = ({\n  t,\n  isOpen = false,\n  onClose = noop,\n  videoUrl = \"\",\n  children,\n}) => (\n  <Modal {...{ isOpen, onClose }} size=\"large\">\n    <Modal.Header>\n      <Typography style=\"h2\" weight=\"semibold\">\n        {t(\"neetoMolecules.integrationWalkthroughModal.header\")}\n      </Typography>\n    </Modal.Header>\n    <Modal.Body>\n      <div className=\"w-full py-10\">\n        <video\n          autoPlay\n          controls\n          muted\n          className=\"cursor-pointer\"\n          id=\"walkthrough-video\"\n        >\n          <source src={videoUrl} />\n        </video>\n        {children}\n      </div>\n    </Modal.Body>\n    <Modal.Footer>\n      <Button\n        label={t(\"neetoMolecules.integrationWalkthroughModal.continue\")}\n        onClick={onClose}\n      />\n    </Modal.Footer>\n  </Modal>\n);\n\nIntegrationWalkthroughModal.propTypes = {\n  /**\n   * To specify video URL of integration walkthrough that will be embedded.\n   */\n  videoUrl: PropTypes.string,\n  /**\n   * To specify whether the integration modal should be opened or closed.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Handler function that is triggered when the continue or close button is clicked.\n   */\n  onClose: PropTypes.func,\n};\n\nconst WrappedIntegrationWalkthroughModal = withT(IntegrationWalkthroughModal);\nWrappedIntegrationWalkthroughModal.displayName = \"IntegrationWalkthroughModal\";\n\nexport { IntegrationWalkthroughModal };\nexport default WrappedIntegrationWalkthroughModal;\n"],"names":["IntegrationWalkthroughModal","_ref","t","_ref$isOpen","isOpen","_ref$onClose","onClose","noop","_ref$videoUrl","videoUrl","children","React","createElement","Modal","size","Header","Typography","style","weight","Body","className","autoPlay","controls","muted","id","src","Footer","Button","label","onClick","WrappedIntegrationWalkthroughModal","withT","displayName"],"mappings":";;;;;;;;;;;;;AAOA,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC/BC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAAC,WAAA,GAAAF,IAAA,CACDG,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,WAAA;IAAAE,YAAA,GAAAJ,IAAA,CACdK,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAGE,KAAAA,CAAAA,GAAAA,SAAI,GAAAF,YAAA;IAAAG,aAAA,GAAAP,IAAA,CACdQ,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,aAAA;IACbE,QAAQ,GAAAT,IAAA,CAARS,QAAQ,CAAA;AAAA,EAAA,oBAERC,yBAAA,CAAAC,aAAA,CAACC,aAAK,EAAA;AAAOT,IAAAA,MAAM,EAANA,MAAM;AAAEE,IAAAA,OAAO,EAAPA,OAAO;AAAIQ,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,eAC1CH,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,yBAAA,CAAAC,aAAA,CAACI,kBAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrChB,CAAC,CAAC,mDAAmD,CAAC,CAC5C,CACA,eACfS,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,cAAA;GACbT,eAAAA,yBAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,gBAAgB;AAC1BI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,yBAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEhB,QAAAA;AAAS,GAAA,CAAG,CACnB,EACPC,QAAQ,CACL,CACK,eACbC,yBAAA,CAAAC,aAAA,CAACC,aAAK,CAACa,MAAM,EAAA,IAAA,eACXf,yBAAA,CAAAC,aAAA,CAACe,cAAM,EAAA;AACLC,IAAAA,KAAK,EAAE1B,CAAC,CAAC,qDAAqD,CAAE;AAChE2B,IAAAA,OAAO,EAAEvB,OAAAA;AAAQ,GAAA,CACjB,CACW,CACT,CAAA;AAAA,EACT;AAiBD,IAAMwB,kCAAkC,GAAGC,gBAAK,CAAC/B,2BAA2B,EAAC;AAC7E8B,kCAAkC,CAACE,WAAW,GAAG,6BAA6B;;;;;"}

package/dist/IntegrationWalkthroughModal.js

@@ -1,18 +1,21 @@
 import React from 'react';
+import { noop } from '@bigbinary/neeto-commons-frontend/pure';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Modal, Typography, Button } from '@bigbinary/neetoui';
-import { useTranslation } from 'react-i18next';
 
 var IntegrationWalkthroughModal = function IntegrationWalkthroughModal(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    videoUrl = _ref.videoUrl,
+  var t = _ref.t,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    _ref$videoUrl = _ref.videoUrl,
+    videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
     children = _ref.children;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   return /*#__PURE__*/React.createElement(Modal, {
     isOpen: isOpen,
-    size: "large",
-    onClose: onClose
+    onClose: onClose,
+    size: "large"
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2",
     weight: "semibold"
@@ -31,6 +34,8 @@ var IntegrationWalkthroughModal = function IntegrationWalkthroughModal(_ref) {
     onClick: onClose
   })));
 };
+var WrappedIntegrationWalkthroughModal = withT(IntegrationWalkthroughModal);
+WrappedIntegrationWalkthroughModal.displayName = "IntegrationWalkthroughModal";
 
-export { IntegrationWalkthroughModal as default };
+export { IntegrationWalkthroughModal, WrappedIntegrationWalkthroughModal as default };
 //# sourceMappingURL=IntegrationWalkthroughModal.js.map

package/dist/IntegrationWalkthroughModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationWalkthroughModal.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { Modal, Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst IntegrationWalkthroughModal = ({\n  isOpen,\n  onClose,\n  videoUrl,\n  children,\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <Modal isOpen={isOpen} size=\"large\" onClose={onClose}>\n      <Modal.Header>\n        <Typography style=\"h2\" weight=\"semibold\">\n          {t(\"neetoMolecules.integrationWalkthroughModal.header\")}\n        </Typography>\n      </Modal.Header>\n      <Modal.Body>\n        <div className=\"w-full py-10\">\n          <video\n            autoPlay\n            controls\n            muted\n            className=\"cursor-pointer\"\n            id=\"walkthrough-video\"\n          >\n            <source src={videoUrl} />\n          </video>\n          {children}\n        </div>\n      </Modal.Body>\n      <Modal.Footer>\n        <Button\n          label={t(\"neetoMolecules.integrationWalkthroughModal.continue\")}\n          onClick={onClose}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n};\n\nIntegrationWalkthroughModal.propTypes = {\n  /**\n   * To specify video URL of integration walkthrough that will be embedded.\n   */\n  videoUrl: PropTypes.string,\n  /**\n   * To specify whether the integration modal should be opened or closed.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Handler function that is triggered when the continue or close button is clicked.\n   */\n  onClose: PropTypes.func,\n};\n\nexport default IntegrationWalkthroughModal;\n"],"names":["IntegrationWalkthroughModal","_ref","isOpen","onClose","videoUrl","children","_useTranslation","useTranslation","t","React","createElement","Modal","size","Header","Typography","style","weight","Body","className","autoPlay","controls","muted","id","src","Footer","Button","label","onClick"],"mappings":";;;;AAMA,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAK3B;AAAA,EAAA,IAJJC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAER,IAAAC,eAAA,GAAcC,cAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC,CAAA;AAET,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAACT,IAAAA,MAAM,EAAEA,MAAO;AAACU,IAAAA,IAAI,EAAC,OAAO;AAACT,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,eACnDM,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,KAAA,CAAAC,aAAA,CAACI,UAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrCR,CAAC,CAAC,mDAAmD,CAAC,CAC5C,CACA,eACfC,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,cAAA;GACbT,eAAAA,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,gBAAgB;AAC1BI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEnB,QAAAA;AAAS,GAAA,CAAG,CACnB,EACPC,QAAQ,CACL,CACK,eACbI,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACa,MAAM,EAAA,IAAA,eACXf,KAAA,CAAAC,aAAA,CAACe,MAAM,EAAA;AACLC,IAAAA,KAAK,EAAElB,CAAC,CAAC,qDAAqD,CAAE;AAChEmB,IAAAA,OAAO,EAAExB,OAAAA;AAAQ,GAAA,CACjB,CACW,CACT,CAAA;AAEZ;;;;"}
+{"version":3,"file":"IntegrationWalkthroughModal.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { noop } from \"neetocommons/pure\";\nimport { withT } from \"neetocommons/react-utils\";\nimport { Modal, Button, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst IntegrationWalkthroughModal = ({\n  t,\n  isOpen = false,\n  onClose = noop,\n  videoUrl = \"\",\n  children,\n}) => (\n  <Modal {...{ isOpen, onClose }} size=\"large\">\n    <Modal.Header>\n      <Typography style=\"h2\" weight=\"semibold\">\n        {t(\"neetoMolecules.integrationWalkthroughModal.header\")}\n      </Typography>\n    </Modal.Header>\n    <Modal.Body>\n      <div className=\"w-full py-10\">\n        <video\n          autoPlay\n          controls\n          muted\n          className=\"cursor-pointer\"\n          id=\"walkthrough-video\"\n        >\n          <source src={videoUrl} />\n        </video>\n        {children}\n      </div>\n    </Modal.Body>\n    <Modal.Footer>\n      <Button\n        label={t(\"neetoMolecules.integrationWalkthroughModal.continue\")}\n        onClick={onClose}\n      />\n    </Modal.Footer>\n  </Modal>\n);\n\nIntegrationWalkthroughModal.propTypes = {\n  /**\n   * To specify video URL of integration walkthrough that will be embedded.\n   */\n  videoUrl: PropTypes.string,\n  /**\n   * To specify whether the integration modal should be opened or closed.\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Handler function that is triggered when the continue or close button is clicked.\n   */\n  onClose: PropTypes.func,\n};\n\nconst WrappedIntegrationWalkthroughModal = withT(IntegrationWalkthroughModal);\nWrappedIntegrationWalkthroughModal.displayName = \"IntegrationWalkthroughModal\";\n\nexport { IntegrationWalkthroughModal };\nexport default WrappedIntegrationWalkthroughModal;\n"],"names":["IntegrationWalkthroughModal","_ref","t","_ref$isOpen","isOpen","_ref$onClose","onClose","noop","_ref$videoUrl","videoUrl","children","React","createElement","Modal","size","Header","Typography","style","weight","Body","className","autoPlay","controls","muted","id","src","Footer","Button","label","onClick","WrappedIntegrationWalkthroughModal","withT","displayName"],"mappings":";;;;;AAOA,IAAMA,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC/BC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAAC,WAAA,GAAAF,IAAA,CACDG,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,WAAA;IAAAE,YAAA,GAAAJ,IAAA,CACdK,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAGE,KAAAA,CAAAA,GAAAA,IAAI,GAAAF,YAAA;IAAAG,aAAA,GAAAP,IAAA,CACdQ,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,aAAA;IACbE,QAAQ,GAAAT,IAAA,CAARS,QAAQ,CAAA;AAAA,EAAA,oBAERC,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAAOT,IAAAA,MAAM,EAANA,MAAM;AAAEE,IAAAA,OAAO,EAAPA,OAAO;AAAIQ,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,eAC1CH,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,KAAA,CAAAC,aAAA,CAACI,UAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrChB,CAAC,CAAC,mDAAmD,CAAC,CAC5C,CACA,eACfS,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,cAAA;GACbT,eAAAA,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,gBAAgB;AAC1BI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEhB,QAAAA;AAAS,GAAA,CAAG,CACnB,EACPC,QAAQ,CACL,CACK,eACbC,KAAA,CAAAC,aAAA,CAACC,KAAK,CAACa,MAAM,EAAA,IAAA,eACXf,KAAA,CAAAC,aAAA,CAACe,MAAM,EAAA;AACLC,IAAAA,KAAK,EAAE1B,CAAC,CAAC,qDAAqD,CAAE;AAChE2B,IAAAA,OAAO,EAAEvB,OAAAA;AAAQ,GAAA,CACjB,CACW,CACT,CAAA;AAAA,EACT;AAiBD,IAAMwB,kCAAkC,GAAGC,KAAK,CAAC/B,2BAA2B,EAAC;AAC7E8B,kCAAkC,CAACE,WAAW,GAAG,6BAA6B;;;;"}

package/dist/IpRestriction.cjs.js

@@ -1,9 +1,10 @@
 'use strict';
 
 var React = require('react');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
-var neetoIcons = require('@bigbinary/neeto-icons');
 var formik = require('@bigbinary/neetoui/formik');
 var reactQuery = require('react-query');
 var axios = require('axios');
@@ -37,6 +38,61 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -165,61 +221,6 @@ var PageLoader = function PageLoader(_ref) {
 };
 var PageLoader$1 = /*#__PURE__*/React__default["default"].memo(PageLoader);
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var IP_RESTRICTIONS_ENGINE_BASE_URL = "ip_restrictions/api/v1";
 var INITIAL_VALUES = {
   ipStart: "",
@@ -3471,20 +3472,20 @@ var FormRow = function FormRow(_ref) {
   }, function (_ref2) {
     var isSubmitting = _ref2.isSubmitting;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-bg-white flex w-full flex-row justify-between px-2 py-2"
+      className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 gap-4 p-3"
     }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       autoFocus: true,
-      className: "w-5/12 flex-grow px-3 py-2 text-left",
+      className: "col-span-5 text-left",
       "data-cy": "ip-start-text-field",
       name: "ipStart",
       placeholder: t("neetoMolecules.ipRestriction.ipStart")
     }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-      className: "w-5/12 flex-grow px-3 py-2 text-left",
+      className: "col-span-5 text-left",
       "data-cy": "ip-end-text-field",
       name: "ipEnd",
       placeholder: t("neetoMolecules.ipRestriction.ipEnd")
     }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-5/12 flex-grow px-3 py-2 text-center"
+      className: "col-span-2 flex items-start justify-center gap-1"
     }, /*#__PURE__*/React__default["default"].createElement(formik.Button, {
       "data-cy": "save-changes-button",
       disabled: isSubmitting,
@@ -3527,14 +3528,14 @@ var Row = function Row(_ref) {
     setIsDeleteIpRangeAlertOpen(false);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-white flex w-full flex-row justify-between px-1 py-2",
+    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 items-center gap-4 p-3",
     "data-cy": "ip-range-row"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
     content: data.ipStart,
     disabled: data.ipStart.length < TRUNCATE_LENGTH,
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "flex w-4/12 flex-grow items-center px-3 py-2 text-left",
+    className: "col-span-5",
     "data-cy": "ip-range-start-value",
     style: "body2"
   }, pure.truncate(data.ipStart, TRUNCATE_LENGTH))), /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
@@ -3542,14 +3543,14 @@ var Row = function Row(_ref) {
     disabled: data.ipEnd.length < TRUNCATE_LENGTH,
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "flex w-4/12 flex-grow items-center px-3 py-2 text-left",
+    className: "col-span-5",
     "data-cy": "ip-range-end-value",
     style: "body2"
   }, pure.truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-4/12 flex-grow px-3 py-2 text-center"
+    className: "col-span-2 flex justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
     buttonStyle: "text",
-    icon: neetoIcons.MenuVertical,
+    icon: neetoIcons.MenuHorizontal,
     position: "bottom-end"
   }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
     "data-cy": "ip-range-edit-button",
@@ -3596,43 +3597,27 @@ var AllowedIpRanges = function AllowedIpRanges() {
   var _useFetchAllowedIpRan = useFetchAllowedIpRanges(),
     allowedIpRanges = _useFetchAllowedIpRan.data;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-4",
+    className: "space-y-6",
     "data-cy": "allowed-ip-range-container"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-row items-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     "data-cy": "allowed-ip-range-heading",
-    style: "h3"
-  }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "ml-2",
-    "data-cy": "add-allowed-ip-range-button",
-    disabled: showAddNew,
-    icon: neetoIcons.Plus,
-    size: "small",
-    tooltipProps: {
-      content: "Add",
-      position: "top"
-    },
-    onClick: function onClick() {
-      return setShowAddNew(true);
-    }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-text-gray-500 flex w-full flex-row justify-between"
+    style: "h4"
+  }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "grid grid-cols-12 gap-4 px-3"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "w-4/12 flex-grow px-3 py-2 text-left"
+    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    style: "h6"
   }, t("neetoMolecules.ipRestriction.ipStart")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "w-4/12 flex-grow px-3 py-2 text-left"
+    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    style: "h6"
   }, t("neetoMolecules.ipRestriction.ipEnd")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "w-4/12 flex-grow px-3 py-2 text-center"
+    className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
+    style: "h6"
   }, t("neetoMolecules.ipRestriction.actions"))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "items-between flex w-full flex-col space-y-2"
-  }, showAddNew && /*#__PURE__*/React__default["default"].createElement(FormRow, {
-    isAddNew: true,
-    data: INITIAL_VALUES,
-    onCollapse: function onCollapse() {
-      return setShowAddNew(false);
-    }
-  }), allowedIpRanges === null || allowedIpRanges === void 0 ? void 0 : allowedIpRanges.map(function (allowedIpRange) {
+    className: "w-full space-y-2"
+  }, allowedIpRanges === null || allowedIpRanges === void 0 ? void 0 : allowedIpRanges.map(function (allowedIpRange) {
     return editingRow === allowedIpRange.id ? /*#__PURE__*/React__default["default"].createElement(FormRow, {
       data: allowedIpRange,
       isAddNew: false,
@@ -3645,6 +3630,20 @@ var AllowedIpRanges = function AllowedIpRanges() {
       key: allowedIpRange.id,
       setEditingRow: setEditingRow
     });
+  }), showAddNew && /*#__PURE__*/React__default["default"].createElement(FormRow, {
+    isAddNew: true,
+    data: INITIAL_VALUES,
+    onCollapse: function onCollapse() {
+      return setShowAddNew(false);
+    }
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "add-allowed-ip-range-button",
+    disabled: showAddNew,
+    label: t("neetoMolecules.ipRestriction.addNew"),
+    style: "link",
+    onClick: function onClick() {
+      return setShowAddNew(true);
+    }
   })));
 };
 var AllowedIpRanges$1 = /*#__PURE__*/React__default["default"].memo(AllowedIpRanges);
@@ -3672,15 +3671,16 @@ var CurrentIp = function CurrentIp() {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-1",
+    className: "flex flex-wrap items-baseline gap-1",
     "data-cy": "current-ip-container"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    "data-cy": "current-ip-heading"
+    "data-cy": "current-ip-heading",
+    style: "body2"
   }, t("neetoMolecules.ipRestriction.currentIpTitle")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     "data-cy": "current-ip-value",
+    style: "h4",
     weight: "semibold"
   }, isLoading ? "..." : data.ip), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "pt-2",
     "data-cy": "current-ip-description",
     style: "body2"
   }, t("neetoMolecules.ipRestriction.currentIpDescription")));
@@ -3717,46 +3717,96 @@ var useUpdateIpRestriction = function useUpdateIpRestriction() {
 };
 
 var IpRestriction = function IpRestriction() {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useShowIpRestriction = useShowIpRestriction(),
     data = _useShowIpRestriction.data,
     isFetching = _useShowIpRestriction.isLoading;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAlertOpen = _useState2[0],
+    setIsAlertOpen = _useState2[1];
+  var _useStateWithDependen = reactUtils.useStateWithDependency((data === null || data === void 0 ? void 0 : data.isIpRestrictionEnabled) || false, [data]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    isIpRestrictionVisible = _useStateWithDependen2[0],
+    setIsIpRestrictionVisible = _useStateWithDependen2[1];
   var _useUpdateIpRestricti = useUpdateIpRestriction(),
     updateIpRestriction = _useUpdateIpRestricti.mutate,
     isUpdating = _useUpdateIpRestricti.isLoading;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleSwitchButtonChange = function handleSwitchButtonChange(e) {
-    var payload = {
-      isIpRestrictionEnabled: e.target.checked
-    };
-    updateIpRestriction(payload);
-  };
   if (isFetching) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "h-screen"
     }, /*#__PURE__*/React__default["default"].createElement(PageLoader$1, null));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
-    React__default["default"].createElement("div", {
-      className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-sm mx-auto mb-4 w-full space-y-4 border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
-      "data-cy": "ip-restrictions-card"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "space-y-1 p-4"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, {
-      checked: data.isIpRestrictionEnabled,
-      "data-cy": "enable-ip-restriction-switch",
-      disabled: isFetching || isUpdating,
-      label: t("neetoMolecules.ipRestriction.switchLabel"),
-      onChange: handleSwitchButtonChange
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      "data-cy": "ip-restriction-description",
-      style: "body3"
-    }, t("neetoMolecules.ipRestriction.description"))), data.isIpRestrictionEnabled && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-bg-gray-100 w-full space-y-4 p-4"
-    }, /*#__PURE__*/React__default["default"].createElement(CurrentIp$1, null), /*#__PURE__*/React__default["default"].createElement(AllowedIpRanges$1, null)))
-  );
+  var updateIpRestrictionStatus = function updateIpRestrictionStatus() {
+    return updateIpRestriction({
+      isIpRestrictionEnabled: isIpRestrictionVisible
+    }, {
+      onSuccess: function onSuccess() {
+        return setIsAlertOpen(false);
+      }
+    });
+  };
+  var handleOnChange = function handleOnChange() {
+    if (data.isIpRestrictionEnabled) {
+      updateIpRestriction({
+        isIpRestrictionEnabled: false
+      }, {
+        onSuccess: function onSuccess() {
+          return setIsIpRestrictionVisible(false);
+        }
+      });
+    } else {
+      setIsIpRestrictionVisible(function (previousState) {
+        return !previousState;
+      });
+    }
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-lg mx-auto mb-4 w-full overflow-hidden border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
+    "data-cy": "ip-restrictions-card"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-2 p-6"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+    checked: isIpRestrictionVisible,
+    className: "flex-grow-0",
+    "data-cy": "enable-ip-restriction-checkbox",
+    disabled: isFetching || isUpdating,
+    onChange: handleOnChange
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h3"
+  }, t("neetoMolecules.ipRestriction.switchLabel"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "ip-restriction-description",
+    style: "body2"
+  }, t("neetoMolecules.ipRestriction.description"))), isIpRestrictionVisible && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-100 w-full space-y-6 p-6"
+  }, /*#__PURE__*/React__default["default"].createElement(CurrentIp$1, null), /*#__PURE__*/React__default["default"].createElement(AllowedIpRanges$1, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
+    icon: neetoIcons.Warning,
+    style: "warning"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "leading-2 block whitespace-pre-wrap py-1"
+  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    i18nKey: "neetoMolecules.ipRestriction.warningMessage"
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    label: t("neetoMolecules.common.actions.saveChanges"),
+    onClick: function onClick() {
+      return setIsAlertOpen(true);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+    isOpen: isAlertOpen,
+    isSubmitting: isUpdating,
+    title: t("neetoMolecules.ipRestriction.enableAlert.title"),
+    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+      i18nKey: "neetoMolecules.ipRestriction.enableAlert.message"
+    }),
+    submitButtonLabel: t("neetoMolecules.ipRestriction.enableAlert.submitButtonLabel"),
+    onClose: function onClose() {
+      return setIsAlertOpen(false);
+    },
+    onSubmit: updateIpRestrictionStatus
+  })));
 };
 var index = /*#__PURE__*/React__default["default"].memo(IpRestriction);