@bigbinary/neeto-molecules 3.16.38 → 3.16.39

package/dist/IpRestriction.js

@@ -1,5 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { createElement, memo, useState } from 'react';
+import classnames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
 import Alert from '@bigbinary/neetoui/Alert';
 import Callout from '@bigbinary/neetoui/Callout';
@@ -27,7 +28,6 @@ import axios from 'axios';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
 import { n } from './inject-css-DmrvuTKK.js';
-import 'classnames';
 import '@bigbinary/neeto-cist';
 
 var ipNum = {};
@@ -3251,38 +3251,41 @@ var AllowedIpRange = withT(function (_ref) {
     index = _ref.index,
     arrayHelpers = _ref.arrayHelpers;
   return /*#__PURE__*/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__*/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__*/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__*/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__*/jsxs("div", {
+      className: "grid flex-grow grid-cols-1 gap-3 md:grid-cols-3",
+      children: [/*#__PURE__*/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__*/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__*/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__*/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__*/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,
@@ -3303,48 +3306,57 @@ var AllowedIpRange = withT(function (_ref) {
 var AllowedIpRanges = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/jsxs("div", {
-    className: "space-y-6",
+    className: "space-y-5",
     "data-cy": "allowed-ip-range-container",
     children: [/*#__PURE__*/jsx(Typography, {
       "data-cy": "allowed-ip-range-heading",
       style: "h4",
       children: t("neetoMolecules.ipRestriction.allowedIpRangeTitle")
     }), /*#__PURE__*/jsxs("div", {
-      className: "space-y-2",
+      className: "space-y-3",
       children: [/*#__PURE__*/jsxs("div", {
-        className: "hidden grid-cols-12 gap-4 sm:grid",
-        children: [/*#__PURE__*/jsxs(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-4 uppercase",
-          style: "h6",
-          children: [t("neetoMolecules.ipRestriction.ipStart"), "*"]
-        }), /*#__PURE__*/jsxs(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-4 uppercase",
-          style: "h6",
-          children: [t("neetoMolecules.ipRestriction.ipEnd"), "*"]
-        }), /*#__PURE__*/jsxs(Typography, {
-          className: "neeto-ui-text-gray-700 col-span-2 uppercase",
-          style: "h6",
-          children: [t("neetoMolecules.ipRestriction.type"), "*"]
-        }), /*#__PURE__*/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__*/jsxs("div", {
+          className: "grid flex-grow grid-cols-3 gap-3",
+          children: [/*#__PURE__*/jsxs(Typography, {
+            className: "neeto-ui-text-gray-700 uppercase",
+            style: "h6",
+            children: [t("neetoMolecules.ipRestriction.ipStart"), "*"]
+          }), /*#__PURE__*/jsxs(Typography, {
+            className: "neeto-ui-text-gray-700 uppercase",
+            style: "h6",
+            children: [t("neetoMolecules.ipRestriction.ipEnd"), "*"]
+          }), /*#__PURE__*/jsxs(Typography, {
+            className: "neeto-ui-text-gray-700 uppercase",
+            style: "h6",
+            children: [t("neetoMolecules.ipRestriction.type"), "*"]
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: "min-w-14 flex-shrink-0",
+          children: /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-700 text-center uppercase",
+            style: "h6",
+            children: t("neetoMolecules.ipRestriction.actions")
+          })
         })]
       }), /*#__PURE__*/jsx("div", {
-        className: "w-full space-y-2",
+        className: "w-full space-y-6 md:space-y-4",
         children: /*#__PURE__*/jsx(FieldArray, {
           name: "allowedIpRanges",
           children: function children(arrayHelpers) {
             return /*#__PURE__*/jsxs(Fragment, {
               children: [arrayHelpers.form.values.allowedIpRanges.map(function (allowedIpRange, index) {
-                return /*#__PURE__*/createElement(AllowedIpRange, {
-                  allowedIpRange: allowedIpRange,
-                  arrayHelpers: arrayHelpers,
-                  index: index,
-                  key: allowedIpRange.createdAt
-                });
+                return /*#__PURE__*/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__*/createElement(AllowedIpRange, {
+                    allowedIpRange: allowedIpRange,
+                    arrayHelpers: arrayHelpers,
+                    index: index,
+                    key: allowedIpRange.createdAt
+                  })
+                }, index);
               }), /*#__PURE__*/jsx(Button, {
-                className: "mt-2",
+                className: "md:mt-2",
                 "data-cy": "add-allowed-ip-range-button",
                 icon: Plus,
                 iconPosition: "left",
@@ -3560,7 +3572,9 @@ var IpRestriction = function IpRestriction() {
           })]
         }),
         children: [/*#__PURE__*/jsx(BlockNavigation, {}), /*#__PURE__*/jsxs("div", {
-          className: "nm-ip-restriction space-y-2",
+          className: classnames("nm-ip-restriction space-y-2", {
+            "pb-6": values.ipRestriction
+          }),
           children: [/*#__PURE__*/jsx(Checkbox, {
             checked: values.ipRestriction,
             className: "flex-grow-0",
@@ -3580,7 +3594,7 @@ var IpRestriction = function IpRestriction() {
             children: t("neetoMolecules.ipRestriction.description")
           })]
         }), values.ipRestriction && /*#__PURE__*/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__*/jsx(CurrentIp$1, {}), /*#__PURE__*/jsx(AllowedIpRanges$1, {}), /*#__PURE__*/jsx(Callout, {
             style: "warning",
             children: /*#__PURE__*/jsx("div", {