@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

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 { noop } from \"neetocist\";\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,CAC5C,CACA,CAAC,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,GAAE,CACnB,CAAC,EACPC,QACE,CACK,CAAC,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;GACV,CACW,CACT,CAAC,CAAA;AAAA,EACT;AAiBD,IAAMwB,kCAAkC,GAAGC,KAAK,CAAC/B,2BAA2B,EAAC;AAC7E8B,kCAAkC,CAACE,WAAW,GAAG,6BAA6B;;;;"}
+{"version":3,"file":"IntegrationWalkthroughModal.js","sources":["../src/components/IntegrationWalkthroughModal/index.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { noop } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\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-6\">\n        <video\n          autoPlay\n          controls\n          muted\n          className=\"neeto-ui-rounded-md w-full 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,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAAOT,IAAAA,MAAM,EAANA,MAAM;AAAEE,IAAAA,OAAO,EAAPA,OAAO;AAAIQ,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,eAC1CH,cAAA,CAAAC,aAAA,CAACC,KAAK,CAACE,MAAM,EAAA,IAAA,eACXJ,cAAA,CAAAC,aAAA,CAACI,UAAU,EAAA;AAACC,IAAAA,KAAK,EAAC,IAAI;AAACC,IAAAA,MAAM,EAAC,UAAA;AAAU,GAAA,EACrChB,CAAC,CAAC,mDAAmD,CAC5C,CACA,CAAC,eACfS,cAAA,CAAAC,aAAA,CAACC,KAAK,CAACM,IAAI,EACTR,IAAAA,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKQ,IAAAA,SAAS,EAAC,aAAA;GACbT,eAAAA,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACES,QAAQ,EAAA,IAAA;IACRC,QAAQ,EAAA,IAAA;IACRC,KAAK,EAAA,IAAA;AACLH,IAAAA,SAAS,EAAC,2CAA2C;AACrDI,IAAAA,EAAE,EAAC,mBAAA;GAEHb,eAAAA,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQa,IAAAA,GAAG,EAAEhB,QAAAA;AAAS,GAAE,CACnB,CAAC,EACPC,QACE,CACK,CAAC,eACbC,cAAA,CAAAC,aAAA,CAACC,KAAK,CAACa,MAAM,EAAA,IAAA,eACXf,cAAA,CAAAC,aAAA,CAACe,MAAM,EAAA;AACLC,IAAAA,KAAK,EAAE1B,CAAC,CAAC,qDAAqD,CAAE;AAChE2B,IAAAA,OAAO,EAAEvB,OAAAA;GACV,CACW,CACT,CAAC,CAAA;AAAA,EACT;AAiBD,IAAMwB,kCAAkC,GAAGC,KAAK,CAAC/B,2BAA2B,EAAC;AAC7E8B,kCAAkC,CAACE,WAAW,GAAG,6BAA6B;;;;"}

package/dist/IpRestriction.js

@@ -1,204 +1,24 @@
-import * as React from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default, { useState } from 'react';
-import { Delete, Warning } from '@bigbinary/neeto-icons';
-import { Typography, Button, Callout, Alert } from '@bigbinary/neetoui';
+import { Button, Typography, Callout, Alert } from '@bigbinary/neetoui';
 import { Input, Select, Form, BlockNavigation, Checkbox, Button as Button$1 } from '@bigbinary/neetoui/formik';
 import { Trans, useTranslation } from 'react-i18next';
+import PageLoader from './PageLoader.js';
 import { FieldArray } from 'formik';
-import { withT, useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { t as t$1 } from 'i18next';
+import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import { Delete } from '@bigbinary/neeto-icons';
+import { t } from 'i18next';
 import * as yup from 'yup';
 import { Validator, IPv4, IPv6 } from 'ip-num';
 import { isNil, isNotNil, assoc } from 'ramda';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
+import '@babel/runtime/helpers/extends';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import './inject-css-c86de496.js';
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-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++) {
-      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);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var _path, _path2, _g, _defs;
-function _extends() { _extends = 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.apply(this, arguments); }
-var SvgNeeto = function SvgNeeto(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 50,
-    height: 50,
-    viewBox: "0 0 415 415",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
-    fill: "#0043AC"
-  })), /*#__PURE__*/React.createElement("mask", {
-    id: "neeto_svg__a",
-    style: {
-      maskType: "alpha"
-    },
-    maskUnits: "userSpaceOnUse",
-    x: 0,
-    y: 0,
-    width: 415,
-    height: 415
-  }, _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
-    fill: "#0043AC"
-  }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#neeto_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M233.747 348.74c88.579 101.145 172.015 116.411 202.661 111.401v32.491H-8.032V230.487c43.685-2.726 153.2 17.108 241.779 118.253Z",
-    fill: "url(#neeto_svg__b)"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
-    id: "neeto_svg__b",
-    cx: 0,
-    cy: 0,
-    r: 1,
-    gradientUnits: "userSpaceOnUse",
-    gradientTransform: "rotate(47.118 -220.556 214.818) scale(427.964 725.049)"
-  }, /*#__PURE__*/React.createElement("stop", {
-    stopColor: "#0043AC"
-  }), /*#__PURE__*/React.createElement("stop", {
-    offset: 1,
-    stopColor: "#3DB1CA",
-    stopOpacity: 0.8
-  })))));
-};
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".neeto-molecules-pageloader__wrapper{height:100%;position:relative;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader{height:100%;left:0;position:absolute;top:0;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__content{height:66px;margin-bottom:16px;overflow:hidden;padding:8px;position:relative;width:66px}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__text{color:rgb(var(--neeto-ui-gray-800));font-size:1.25rem;line-height:1.75rem;margin-bottom:4rem;text-align:center}.neeto-molecules-pageloader__spinner{display:flex;gap:2px;height:25px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.neeto-molecules-pageloader__spinner>div{animation:neeto-ui-stretch-delay 1.2s ease-in-out infinite;background-color:#fff;border-radius:2px;display:inline-flex;height:100%;width:2px}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2{animation-delay:-1.1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3{animation-delay:-1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4{animation-delay:-.9s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5{animation-delay:-.8s}@keyframes neeto-ui-stretch-delay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}";
-n(css,{});
-
-var _excluded = ["text"];
-var PageLoader = function PageLoader(_ref) {
-  var _ref$text = _ref.text,
-    text = _ref$text === void 0 ? "" : _ref$text,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("div", _extends$1({
-    className: "neeto-molecules-pageloader__wrapper"
-  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-justify-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__content neeto-ui-flex neeto-ui-flex-shrink-0 neeto-ui-items-center neeto-ui-justify-center",
-    "data-cy": "neeto-molecules-pageloader"
-  }, /*#__PURE__*/React__default.createElement(SvgNeeto, {
-    className: "neeto-molecules-pageloader__logo",
-    size: 50
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__spinner"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect1"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect2"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect3"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect4"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect5"
-  }))), text && /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h5",
-    weight: "semibold"
-  }, text)));
-};
-var PageLoader$1 = /*#__PURE__*/React__default.memo(PageLoader);
-
-// We need to apply a transformation for the label. Hence disabling this lint warning.
-// eslint-disable-next-line @bigbinary/neeto/use-functions-and-hooks-from-neeto-commons-frontend
 var toLabelAndValue = function toLabelAndValue(value) {
   return {
     label: humanizeIpAddressFormat(value),
@@ -250,26 +70,26 @@ yup.addMethod(yup.string, "validIp", function (errorMessage) {
 });
 var getIpRestrictionValidationSchema = function getIpRestrictionValidationSchema() {
   return yup.object().shape({
-    ipStart: yup.string().validIp(t$1("neetoMolecules.ipRestriction.validations.invalidIp")).required(t$1("neetoMolecules.ipRestriction.validations.ipStartRequired")),
-    ipEnd: yup.string().validIp(t$1("neetoMolecules.ipRestriction.validations.invalidIp")).when("ipStart", function (ipStart, schema) {
+    ipStart: yup.string().validIp(t("neetoMolecules.ipRestriction.validations.invalidIp")).required(t("neetoMolecules.ipRestriction.validations.ipStartRequired")),
+    ipEnd: yup.string().validIp(t("neetoMolecules.ipRestriction.validations.invalidIp")).when("ipStart", function (ipStart, schema) {
       return schema.test({
         test: function test(ipEnd) {
           return areIpAddressesInSameFormat(ipStart, ipEnd);
         },
-        message: t$1("neetoMolecules.ipRestriction.validations.eitherIpv4OrIpv6")
+        message: t("neetoMolecules.ipRestriction.validations.eitherIpv4OrIpv6")
       });
     }).when("ipStart", function (ipStart, schema) {
       return schema.test({
         test: function test(ipEnd) {
           return isValidIPRange(ipStart, ipEnd);
         },
-        message: t$1("neetoMolecules.ipRestriction.validations.ipEndGreaterThanIpStart")
+        message: t("neetoMolecules.ipRestriction.validations.ipEndGreaterThanIpStart")
       });
-    }).required(t$1("neetoMolecules.ipRestriction.validations.ipEndRequired")),
+    }).required(t("neetoMolecules.ipRestriction.validations.ipEndRequired")),
     addressType: yup.object().shape({
       value: yup.string().required(),
       label: yup.string().required()
-    }).nullable().required(t$1("neetoMolecules.ipRestriction.validations.addressTypeRequired"))
+    }).nullable().required(t("neetoMolecules.ipRestriction.validations.addressTypeRequired"))
   });
 };
 var humanizeIpAddressFormat = function humanizeIpAddressFormat(addressFormat) {
@@ -286,7 +106,7 @@ var buildInitialValue = function buildInitialValue(isIpRestrictionEnabled, allow
   };
 };
 var buildAllowedIpRangesFormData = function buildAllowedIpRangesFormData(allowedIpRanges) {
-  return allowedIpRanges.map(function (allowedIpRange) {
+  return allowedIpRanges === null || allowedIpRanges === void 0 ? void 0 : allowedIpRanges.map(function (allowedIpRange) {
     return assoc("addressType", toLabelAndValue(allowedIpRange.addressType), allowedIpRange);
   });
 };
@@ -307,10 +127,10 @@ var QUERY_KEYS = {
   CURRENT_IP: "CURRENT_IP"
 };
 var ADDRESS_TYPE_SELECT_OPTIONS = [{
-  label: t$1("neetoMolecules.ipRestriction.ipv4"),
+  label: t("neetoMolecules.ipRestriction.ipv4"),
   value: "ipv4"
 }, {
-  label: t$1("neetoMolecules.ipRestriction.ipv6"),
+  label: t("neetoMolecules.ipRestriction.ipv6"),
   value: "ipv6"
 }];
 ({
@@ -334,25 +154,38 @@ var AllowedIpRange = withT(function (_ref) {
     index = _ref.index,
     arrayHelpers = _ref.arrayHelpers;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 gap-4 p-3"
+    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-2 gap-4 p-3 sm:grid-cols-12"
   }, /*#__PURE__*/React__default.createElement(Input, {
-    className: "col-span-4 text-left",
+    className: "col-span-1 text-left sm:col-span-4",
     "data-cy": "ip-start-text-field",
+    label: t("neetoMolecules.ipRestriction.ipStart"),
+    labelProps: {
+      className: "sm:hidden"
+    },
     name: "allowedIpRanges.".concat(index, ".ipStart"),
     placeholder: t("neetoMolecules.ipRestriction.ipStart")
   }), /*#__PURE__*/React__default.createElement(Input, {
-    className: "col-span-4 text-left",
+    className: "col-span-1 text-left sm:col-span-4",
     "data-cy": "ip-end-text-field",
+    label: t("neetoMolecules.ipRestriction.ipEnd"),
+    labelProps: {
+      className: "sm:hidden"
+    },
     name: "allowedIpRanges.".concat(index, ".ipEnd"),
     placeholder: t("neetoMolecules.ipRestriction.ipEnd")
   }), /*#__PURE__*/React__default.createElement(Select, {
-    className: "col-span-2 text-left",
+    className: "col-span-1 text-left sm:col-span-2",
     "data-testid": "address-type-select-field",
+    label: t("neetoMolecules.ipRestriction.type"),
+    labelProps: {
+      className: "sm:hidden"
+    },
     name: "allowedIpRanges.".concat(index, ".addressType"),
     options: ADDRESS_TYPE_SELECT_OPTIONS
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-2 flex justify-center"
+    className: "col-span-1 flex sm:col-span-2 sm:justify-center"
   }, /*#__PURE__*/React__default.createElement(Button, {
+    className: "mt-auto sm:mt-0",
     "data-testid": "allowed-ip-range-delete-btn",
     icon: Delete,
     style: "text",
@@ -377,7 +210,7 @@ var AllowedIpRanges = withT(function (_ref) {
   }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-4"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-12 gap-4 px-3"
+    className: "hidden grid-cols-12 gap-4 px-3 sm:grid"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 col-span-4 uppercase",
     style: "h6"
@@ -425,9 +258,15 @@ var currentIpApi = {
 
 var CURRENT_IP = QUERY_KEYS.CURRENT_IP;
 var useShowCurrentIp = function useShowCurrentIp() {
-  return useQuery([CURRENT_IP], function () {
-    return currentIpApi.show();
-  });
+  return (
+    // useQuery([CURRENT_IP], () => currentIpApi.show());
+    useQuery({
+      queryKey: [CURRENT_IP],
+      queryFn: function queryFn() {
+        return currentIpApi.show();
+      }
+    })
+  );
 };
 
 var CurrentIp = function CurrentIp() {
@@ -472,11 +311,19 @@ var allowedIpRangesApi = {
   update: update$1
 };
 
+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(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 ALLOWED_IP_RANGES$1 = QUERY_KEYS.ALLOWED_IP_RANGES;
 var useFetchAllowedIpRanges = function useFetchAllowedIpRanges(options) {
-  return useQuery([ALLOWED_IP_RANGES$1], function () {
-    return allowedIpRangesApi.fetch();
-  }, options);
+  return (
+    // useQuery([ALLOWED_IP_RANGES], () => allowedIpRangesApi.fetch(), options);
+    useQuery(_objectSpread({
+      queryKey: [ALLOWED_IP_RANGES$1],
+      queryFn: function queryFn() {
+        return allowedIpRangesApi.fetch();
+      }
+    }, options))
+  );
 };
 
 var ipRestrictionUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/ip_restriction");
@@ -496,9 +343,15 @@ var ipRestrictionApi = {
 var IP_RESTRICTION = QUERY_KEYS.IP_RESTRICTION,
   ALLOWED_IP_RANGES = QUERY_KEYS.ALLOWED_IP_RANGES;
 var useShowIpRestriction = function useShowIpRestriction() {
-  return useQuery([IP_RESTRICTION], function () {
-    return ipRestrictionApi.show();
-  });
+  return (
+    // useQuery([IP_RESTRICTION], () => ipRestrictionApi.show());
+    useQuery({
+      queryKey: [IP_RESTRICTION],
+      queryFn: function queryFn() {
+        return ipRestrictionApi.show();
+      }
+    })
+  );
 };
 var useUpdateIpRestriction = function useUpdateIpRestriction() {
   return useMutationWithInvalidation(ipRestrictionApi.update, {
@@ -526,11 +379,11 @@ var IpRestriction = function IpRestriction() {
     isRefetching = _useFetchAllowedIpRan.isRefetching;
   var _useUpdateIpRestricti = useUpdateIpRestriction(),
     updateIpRestriction = _useUpdateIpRestricti.mutate,
-    isUpdating = _useUpdateIpRestricti.isLoading;
+    isUpdating = _useUpdateIpRestricti.isPending;
   if (isFetchingIpRestriction || isFetchingAllowedIpRanges || isRefetching) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "h-screen"
-    }, /*#__PURE__*/React__default.createElement(PageLoader$1, null));
+    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
   }
   var handleSubmit = function handleSubmit(values, formikBag) {
     if (values.ipRestriction) setIsAlertOpen(true);else handleUpdateIpRestriction(values, formikBag);
@@ -594,16 +447,16 @@ var IpRestriction = function IpRestriction() {
     }, t("neetoMolecules.ipRestriction.description"))), values.ipRestriction && /*#__PURE__*/React__default.createElement("div", {
       className: "neeto-ui-bg-gray-100 w-full space-y-6 p-6"
     }, /*#__PURE__*/React__default.createElement(CurrentIp$1, null), /*#__PURE__*/React__default.createElement(AllowedIpRanges$1, null), /*#__PURE__*/React__default.createElement(Callout, {
-      icon: Warning,
       style: "warning"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "leading-2 block whitespace-pre-wrap py-1"
     }, /*#__PURE__*/React__default.createElement(Trans, {
       i18nKey: "neetoMolecules.ipRestriction.warningMessage"
     }))))), /*#__PURE__*/React__default.createElement("div", {
-      className: "align-center flex justify-between"
+      className: "flex flex-wrap items-center justify-between gap-4"
     }, dirty && /*#__PURE__*/React__default.createElement(Typography, {
-      className: "neeto-ui-text-error-500"
+      className: "neeto-ui-text-error-500",
+      style: "body2"
     }, t("neetoMolecules.ipRestriction.validations.unsavedChanges")), /*#__PURE__*/React__default.createElement("div", {
       className: "ml-auto flex justify-between"
     }, /*#__PURE__*/React__default.createElement(Button, {