@bigbinary/neeto-molecules 3.16.38 → 3.16.39

package/dist/cjs/IpRestriction.js

@@ -2,6 +2,7 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
+var classnames = require('classnames');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Alert = require('@bigbinary/neetoui/Alert');
 var Callout = require('@bigbinary/neetoui/Callout');
@@ -29,7 +30,6 @@ var axios = require('axios');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var useMutationWithInvalidation = require('@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation');
 var injectCss = require('./inject-css-vQvjPR2x.js');
-require('classnames');
 require('@bigbinary/neeto-cist');
 
 function _interopNamespaceDefault(e) {
@@ -3272,38 +3272,41 @@ var AllowedIpRange = withT(function (_ref) {
     index = _ref.index,
     arrayHelpers = _ref.arrayHelpers;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-2 gap-2 py-2 sm:grid-cols-12 sm:gap-4 sm:py-3",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
-      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__*/jsxRuntime.jsx(Input, {
-      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__*/jsxRuntime.jsx(Select, {
-      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
+    className: "flex items-start gap-3",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "grid flex-grow grid-cols-1 gap-3 md:grid-cols-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+        className: "text-left",
+        "data-cy": "ip-start-text-field",
+        label: t("neetoMolecules.ipRestriction.ipStart"),
+        labelProps: {
+          className: "md:hidden"
+        },
+        name: "allowedIpRanges.".concat(index, ".ipStart"),
+        placeholder: t("neetoMolecules.ipRestriction.ipStart")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        className: "text-left",
+        "data-cy": "ip-end-text-field",
+        label: t("neetoMolecules.ipRestriction.ipEnd"),
+        labelProps: {
+          className: "md:hidden"
+        },
+        name: "allowedIpRanges.".concat(index, ".ipEnd"),
+        placeholder: t("neetoMolecules.ipRestriction.ipEnd")
+      }), /*#__PURE__*/jsxRuntime.jsx(Select, {
+        className: "text-left",
+        "data-testid": "address-type-select-field",
+        label: t("neetoMolecules.ipRestriction.type"),
+        labelProps: {
+          className: "md:hidden"
+        },
+        name: "allowedIpRanges.".concat(index, ".addressType"),
+        options: ADDRESS_TYPE_SELECT_OPTIONS
+      })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "col-span-1 flex items-start sm:col-span-2 sm:justify-center",
+      className: "flex flex-shrink-0 justify-center md:min-w-14",
       children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-        className: "mt-auto sm:mt-0",
+        className: "mt-5 md:mt-0",
         "data-cy": "allowed-ip-range-delete-button",
         "data-testid": "allowed-ip-range-delete-btn",
         icon: Delete,
@@ -3324,48 +3327,57 @@ var AllowedIpRange = withT(function (_ref) {
 var AllowedIpRanges = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-6",
+    className: "space-y-5",
     "data-cy": "allowed-ip-range-container",
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
       "data-cy": "allowed-ip-range-heading",
       style: "h4",
       children: t("neetoMolecules.ipRestriction.allowedIpRangeTitle")
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "space-y-2",
+      className: "space-y-3",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "hidden grid-cols-12 gap-4 sm:grid",
-        children: [/*#__PURE__*/jsxRuntime.jsxs(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-4 uppercase",
-          style: "h6",
-          children: [t("neetoMolecules.ipRestriction.ipStart"), "*"]
-        }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-4 uppercase",
-          style: "h6",
-          children: [t("neetoMolecules.ipRestriction.ipEnd"), "*"]
-        }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-2 uppercase",
-          style: "h6",
-          children: [t("neetoMolecules.ipRestriction.type"), "*"]
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
-          style: "h6",
-          children: t("neetoMolecules.ipRestriction.actions")
+        className: "hidden gap-3 md:flex",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "grid flex-grow grid-cols-3 gap-3",
+          children: [/*#__PURE__*/jsxRuntime.jsxs(Typography, {
+            className: "neeto-ui-text-gray-700 uppercase",
+            style: "h6",
+            children: [t("neetoMolecules.ipRestriction.ipStart"), "*"]
+          }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
+            className: "neeto-ui-text-gray-700 uppercase",
+            style: "h6",
+            children: [t("neetoMolecules.ipRestriction.ipEnd"), "*"]
+          }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
+            className: "neeto-ui-text-gray-700 uppercase",
+            style: "h6",
+            children: [t("neetoMolecules.ipRestriction.type"), "*"]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "min-w-14 flex-shrink-0",
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-700 text-center uppercase",
+            style: "h6",
+            children: t("neetoMolecules.ipRestriction.actions")
+          })
         })]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "w-full space-y-2",
+        className: "w-full space-y-6 md:space-y-4",
         children: /*#__PURE__*/jsxRuntime.jsx(formik.FieldArray, {
           name: "allowedIpRanges",
           children: function children(arrayHelpers) {
             return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [arrayHelpers.form.values.allowedIpRanges.map(function (allowedIpRange, index) {
-                return /*#__PURE__*/React.createElement(AllowedIpRange, {
-                  allowedIpRange: allowedIpRange,
-                  arrayHelpers: arrayHelpers,
-                  index: index,
-                  key: allowedIpRange.createdAt
-                });
+                return /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "neeto-ui-border-gray-300 w-full border-b pb-6 last:border-none last:pb-0 md:border-none md:pb-0",
+                  children: /*#__PURE__*/React.createElement(AllowedIpRange, {
+                    allowedIpRange: allowedIpRange,
+                    arrayHelpers: arrayHelpers,
+                    index: index,
+                    key: allowedIpRange.createdAt
+                  })
+                }, index);
               }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-                className: "mt-2",
+                className: "md:mt-2",
                 "data-cy": "add-allowed-ip-range-button",
                 icon: Plus,
                 iconPosition: "left",
@@ -3581,7 +3593,9 @@ var IpRestriction = function IpRestriction() {
           })]
         }),
         children: [/*#__PURE__*/jsxRuntime.jsx(BlockNavigation, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "nm-ip-restriction space-y-2",
+          className: classnames("nm-ip-restriction space-y-2", {
+            "pb-6": values.ipRestriction
+          }),
           children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
             checked: values.ipRestriction,
             className: "flex-grow-0",
@@ -3601,7 +3615,7 @@ var IpRestriction = function IpRestriction() {
             children: t("neetoMolecules.ipRestriction.description")
           })]
         }), values.ipRestriction && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "neeto-ui-border-gray-300 mt-6 w-full space-y-6 border-t pt-6",
+          className: "neeto-ui-border-gray-300 w-full space-y-6 border-t pt-6",
           children: [/*#__PURE__*/jsxRuntime.jsx(CurrentIp$1, {}), /*#__PURE__*/jsxRuntime.jsx(AllowedIpRanges$1, {}), /*#__PURE__*/jsxRuntime.jsx(Callout, {
             style: "warning",
             children: /*#__PURE__*/jsxRuntime.jsx("div", {