@bigbinary/neeto-molecules 3.15.18 → 3.15.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,12 @@
1
1
  import classnames from 'classnames';
2
+ import { isNotPresent } from '@bigbinary/neeto-cist';
2
3
  import Typography from '@bigbinary/neetoui/Typography';
3
4
  import { jsx, jsxs } from 'react/jsx-runtime';
4
5
 
5
6
  var CardLayout = function CardLayout(_ref) {
6
7
  var _ref$className = _ref.className,
7
8
  className = _ref$className === void 0 ? "" : _ref$className,
9
+ icon = _ref.icon,
8
10
  _ref$containerClassNa = _ref.containerClassName,
9
11
  containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
10
12
  _ref$title = _ref.title,
@@ -21,9 +23,14 @@ var CardLayout = function CardLayout(_ref) {
21
23
  className: classnames(["neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border", className]),
22
24
  children: [/*#__PURE__*/jsxs("div", {
23
25
  className: "neeto-molecules-card__content p-4",
24
- children: [title && /*#__PURE__*/jsx(Typography, {
25
- className: "mb-2",
26
+ children: [icon && /*#__PURE__*/jsx("div", {
27
+ className: "neeto-molecules-card__icon-wrapper mb-4 w-full text-left",
28
+ children: icon
29
+ }), title && /*#__PURE__*/jsx(Typography, {
26
30
  style: "h2",
31
+ className: classnames(["mb-2", {
32
+ "pb-2": isNotPresent(description)
33
+ }]),
27
34
  children: title
28
35
  }), description && /*#__PURE__*/jsx(Typography, {
29
36
  className: "mb-3",
@@ -1 +1 @@
1
- {"version":3,"file":"CardLayout.js","sources":["../src/components/CardLayout/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst CardLayout = ({\n className = \"\",\n containerClassName = \"\",\n title = null,\n description = null,\n actionBlock,\n children,\n}) => (\n <div\n data-testid=\"neeto-molecules-card-container\"\n className={classnames([\n \"neeto-molecules-card__container mx-auto w-full max-w-3xl\",\n containerClassName,\n ])}\n >\n <div\n data-testid=\"neeto-molecules-card\"\n className={classnames([\n \"neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border\",\n className,\n ])}\n >\n <div className=\"neeto-molecules-card__content p-4\">\n {title && (\n <Typography className=\"mb-2\" style=\"h2\">\n {title}\n </Typography>\n )}\n {description && (\n <Typography className=\"mb-3\" style=\"body1\">\n {description}\n </Typography>\n )}\n {children}\n </div>\n {actionBlock && (\n <div\n className={classnames([\n \"neeto-molecules-card__action-block neeto-ui-bg-gray-50 neeto-ui-rounded-lg sticky bottom-0 w-full rounded-t-none p-4\",\n className,\n ])}\n >\n {actionBlock}\n </div>\n )}\n </div>\n </div>\n);\n\nCardLayout.propTypes = {\n /**\n * To set the title of the card.\n */\n title: PropTypes.string,\n /**\n * To set the description of the card.\n */\n description: PropTypes.node,\n /**\n * To set custom class name to the card.\n */\n className: PropTypes.string,\n /**\n * To set custom class name to the card container.\n */\n containerClassName: PropTypes.string,\n /**\n * To specify the content to be rendered in the card footer.\n */\n actionBlock: PropTypes.node,\n /**\n * To specify the components to be rendered inside the card.\n */\n children: PropTypes.node,\n};\n\nexport default CardLayout;\n"],"names":["CardLayout","_ref","_ref$className","className","_ref$containerClassNa","containerClassName","_ref$title","title","_ref$description","description","actionBlock","children","_jsx","classnames","_jsxs","Typography","style"],"mappings":";;;;AAIA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CACdE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,qBAAA,GAAAH,IAAA,CACdI,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,qBAAA;IAAAE,UAAA,GAAAL,IAAA,CACvBM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,UAAA;IAAAE,gBAAA,GAAAP,IAAA,CACZQ,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,WAAW,GAAAT,IAAA,CAAXS,WAAW;IACXC,QAAQ,GAAAV,IAAA,CAARU,QAAQ,CAAA;AAAA,EAAA,oBAERC,GAAA,CAAA,KAAA,EAAA;AACE,IAAA,aAAA,EAAY,gCAAgC;IAC5CT,SAAS,EAAEU,UAAU,CAAC,CACpB,0DAA0D,EAC1DR,kBAAkB,CACnB,CAAE;AAAAM,IAAAA,QAAA,eAEHG,IAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAY,sBAAsB;MAClCX,SAAS,EAAEU,UAAU,CAAC,CACpB,sFAAsF,EACtFV,SAAS,CACV,CAAE;AAAAQ,MAAAA,QAAA,gBAEHG,IAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,mCAAmC;AAAAQ,QAAAA,QAAA,EAC/CJ,CAAAA,KAAK,iBACJK,GAAA,CAACG,UAAU,EAAA;AAACZ,UAAAA,SAAS,EAAC,MAAM;AAACa,UAAAA,KAAK,EAAC,IAAI;AAAAL,UAAAA,QAAA,EACpCJ,KAAAA;AAAK,SACI,CACb,EACAE,WAAW,iBACVG,GAAA,CAACG,UAAU,EAAA;AAACZ,UAAAA,SAAS,EAAC,MAAM;AAACa,UAAAA,KAAK,EAAC,OAAO;AAAAL,UAAAA,QAAA,EACvCF,WAAAA;SACS,CACb,EACAE,QAAQ,CAAA;AAAA,OACN,CAAC,EACLD,WAAW,iBACVE,GAAA,CAAA,KAAA,EAAA;QACET,SAAS,EAAEU,UAAU,CAAC,CACpB,sHAAsH,EACtHV,SAAS,CACV,CAAE;AAAAQ,QAAAA,QAAA,EAEFD,WAAAA;AAAW,OACT,CACN,CAAA;KACE,CAAA;AAAC,GACH,CAAC,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"CardLayout.js","sources":["../src/components/CardLayout/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { isNotPresent } from \"neetocist\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst CardLayout = ({\n className = \"\",\n icon,\n containerClassName = \"\",\n title = null,\n description = null,\n actionBlock,\n children,\n}) => (\n <div\n data-testid=\"neeto-molecules-card-container\"\n className={classnames([\n \"neeto-molecules-card__container mx-auto w-full max-w-3xl\",\n containerClassName,\n ])}\n >\n <div\n data-testid=\"neeto-molecules-card\"\n className={classnames([\n \"neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border\",\n className,\n ])}\n >\n <div className=\"neeto-molecules-card__content p-4\">\n {icon && (\n <div className=\"neeto-molecules-card__icon-wrapper mb-4 w-full text-left\">\n {icon}\n </div>\n )}\n {title && (\n <Typography\n style=\"h2\"\n className={classnames([\n \"mb-2\",\n { \"pb-2\": isNotPresent(description) },\n ])}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography className=\"mb-3\" style=\"body1\">\n {description}\n </Typography>\n )}\n {children}\n </div>\n {actionBlock && (\n <div\n className={classnames([\n \"neeto-molecules-card__action-block neeto-ui-bg-gray-50 neeto-ui-rounded-lg sticky bottom-0 w-full rounded-t-none p-4\",\n className,\n ])}\n >\n {actionBlock}\n </div>\n )}\n </div>\n </div>\n);\n\nCardLayout.propTypes = {\n /**\n * To set the title of the card.\n */\n title: PropTypes.string,\n /**\n * To set the description of the card.\n */\n description: PropTypes.node,\n /**\n * To set custom class name to the card.\n */\n className: PropTypes.string,\n /**\n * To set custom class name to the card container.\n */\n containerClassName: PropTypes.string,\n /**\n * To specify the content to be rendered in the card footer.\n */\n actionBlock: PropTypes.node,\n /**\n * To specify the components to be rendered inside the card.\n */\n children: PropTypes.node,\n /**\n * To set the icon of the card.\n */\n icon: PropTypes.node,\n};\n\nexport default CardLayout;\n"],"names":["CardLayout","_ref","_ref$className","className","icon","_ref$containerClassNa","containerClassName","_ref$title","title","_ref$description","description","actionBlock","children","_jsx","classnames","_jsxs","Typography","style","isNotPresent"],"mappings":";;;;;AAKA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CACdE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IACdE,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAAC,qBAAA,GAAAJ,IAAA,CACJK,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,qBAAA;IAAAE,UAAA,GAAAN,IAAA,CACvBO,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,UAAA;IAAAE,gBAAA,GAAAR,IAAA,CACZS,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,QAAQ,GAAAX,IAAA,CAARW,QAAQ,CAAA;AAAA,EAAA,oBAERC,GAAA,CAAA,KAAA,EAAA;AACE,IAAA,aAAA,EAAY,gCAAgC;IAC5CV,SAAS,EAAEW,UAAU,CAAC,CACpB,0DAA0D,EAC1DR,kBAAkB,CACnB,CAAE;AAAAM,IAAAA,QAAA,eAEHG,IAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAY,sBAAsB;MAClCZ,SAAS,EAAEW,UAAU,CAAC,CACpB,sFAAsF,EACtFX,SAAS,CACV,CAAE;AAAAS,MAAAA,QAAA,gBAEHG,IAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,mCAAmC;QAAAS,QAAA,EAAA,CAC/CR,IAAI,iBACHS,GAAA,CAAA,KAAA,EAAA;AAAKV,UAAAA,SAAS,EAAC,0DAA0D;AAAAS,UAAAA,QAAA,EACtER,IAAAA;AAAI,SACF,CACN,EACAI,KAAK,iBACJK,GAAA,CAACG,UAAU,EAAA;AACTC,UAAAA,KAAK,EAAC,IAAI;AACVd,UAAAA,SAAS,EAAEW,UAAU,CAAC,CACpB,MAAM,EACN;YAAE,MAAM,EAAEI,YAAY,CAACR,WAAW,CAAA;AAAE,WAAC,CACtC,CAAE;AAAAE,UAAAA,QAAA,EAEFJ,KAAAA;AAAK,SACI,CACb,EACAE,WAAW,iBACVG,GAAA,CAACG,UAAU,EAAA;AAACb,UAAAA,SAAS,EAAC,MAAM;AAACc,UAAAA,KAAK,EAAC,OAAO;AAAAL,UAAAA,QAAA,EACvCF,WAAAA;SACS,CACb,EACAE,QAAQ,CAAA;AAAA,OACN,CAAC,EACLD,WAAW,iBACVE,GAAA,CAAA,KAAA,EAAA;QACEV,SAAS,EAAEW,UAAU,CAAC,CACpB,sHAAsH,EACtHX,SAAS,CACV,CAAE;AAAAS,QAAAA,QAAA,EAEFD,WAAAA;AAAW,OACT,CACN,CAAA;KACE,CAAA;AAAC,GACH,CAAC,CAAA;AAAA;;;;"}
package/dist/Header.js CHANGED
@@ -38,7 +38,7 @@ var DROPDOWN_BUTTON_SIZES = {
38
38
  small: "medium"
39
39
  };
40
40
 
41
- var css = ":root{--neeto-molecules-main-header-height:6.25rem;--neeto-molecules-main-header-with-breadcrumbs-height:8.25rem;--neeto-molecules-effective-header-height:0px}.neeto-molecules-header{align-items:flex-start;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;flex-shrink:0;gap:1rem;justify-content:space-between;padding:2.5rem 0 1.5rem;width:100%}@media screen and (max-width:1024px){.neeto-molecules-header{flex-wrap:wrap}}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:.5rem}.neeto-molecules-header .neeto-molecules-header__left{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{align-items:center;display:flex;flex-direction:row;gap:.75rem;margin-top:-.25rem;width:100%}.neeto-molecules-header .neeto-molecules-header__page-title .neeto-molecule-help-popover-trigger,.neeto-molecules-header .neeto-molecules-header__page-title .neeto-molecule-moredropdown-btn{margin-left:.75rem;vertical-align:middle}@media screen and (max-width:1024px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.625rem}}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.5rem}}@media screen and (max-width:576px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.25rem}}.neeto-molecules-header .neeto-molecules-header__page-title h1{line-height:var(--neeto-ui-leading-tight)}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;gap:.75rem;justify-content:flex-end}.neeto-molecules-header .neeto-molecules-header__right:empty{display:none;visibility:hidden}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__right{flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header .neeto-molecules-header__right .neeto-ui-btn{flex-shrink:0}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__search-input{flex-grow:0;min-width:12.6rem}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{align-items:center;display:flex;flex-shrink:0;gap:.75rem;justify-content:flex-end}@media screen and (max-width:360px){.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{flex-shrink:1;flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-breadcrumbs-wrap{margin:0 0 1rem}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano,.neeto-molecules-header--small{flex-shrink:0;min-height:0}.neeto-molecules-header--nano .neeto-molecules-header__page-title{margin-top:0}";
41
+ var css = ":root{--neeto-molecules-main-header-height:6.25rem;--neeto-molecules-main-header-with-breadcrumbs-height:8.25rem;--neeto-molecules-effective-header-height:0px}.neeto-molecules-header{align-items:flex-start;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;flex-shrink:0;gap:1rem;justify-content:space-between;padding:2.5rem 0 1.5rem;width:100%}@media screen and (max-width:1024px){.neeto-molecules-header{flex-wrap:wrap}}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:.5rem}.neeto-molecules-header .neeto-molecules-header__left{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{align-items:center;display:flex;flex-direction:row;gap:.75rem;margin-top:-.25rem;width:100%}.neeto-molecules-header .neeto-molecules-header__page-title .neeto-molecule-help-popover-trigger,.neeto-molecules-header .neeto-molecules-header__page-title .neeto-molecule-moredropdown-btn{margin-left:.5rem;vertical-align:middle}@media screen and (max-width:1024px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.625rem}}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.5rem}}@media screen and (max-width:576px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.25rem}}.neeto-molecules-header .neeto-molecules-header__page-title h1{line-height:var(--neeto-ui-leading-tight)}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;gap:.75rem;justify-content:flex-end}.neeto-molecules-header .neeto-molecules-header__right:empty{display:none;visibility:hidden}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__right{flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header .neeto-molecules-header__right .neeto-ui-btn{flex-shrink:0}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__search-input{flex-grow:0;min-width:12.6rem}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{align-items:center;display:flex;flex-shrink:0;gap:.75rem;justify-content:flex-end}@media screen and (max-width:360px){.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{flex-shrink:1;flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-breadcrumbs-wrap{margin:0 0 1rem}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano,.neeto-molecules-header--small{flex-shrink:0;min-height:0}.neeto-molecules-header--nano .neeto-molecules-header__page-title{margin-top:0}";
42
42
  n(css,{});
43
43
 
44
44
  var _excluded = ["dropdownButtonProps"];
@@ -10,6 +10,7 @@ import Checkbox from '@bigbinary/neetoui/formik/Checkbox';
10
10
  import Button$1 from '@bigbinary/neetoui/formik/Button';
11
11
  import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
12
12
  import { Trans, useTranslation } from 'react-i18next';
13
+ import CardLayout from './CardLayout.js';
13
14
  import { FieldArray } from 'formik';
14
15
  import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
15
16
  import Plus from '@bigbinary/neeto-icons/Plus';
@@ -25,6 +26,8 @@ import { useQuery } from '@tanstack/react-query';
25
26
  import axios from 'axios';
26
27
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
27
28
  import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
29
+ import 'classnames';
30
+ import '@bigbinary/neeto-cist';
28
31
 
29
32
  var ipNum = {};
30
33
 
@@ -3516,7 +3519,7 @@ var IpRestriction = function IpRestriction() {
3516
3519
  });
3517
3520
  };
3518
3521
  return /*#__PURE__*/jsx(Form, {
3519
- className: "mx-auto mb-4 w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
3522
+ className: "w-full",
3520
3523
  formikProps: {
3521
3524
  initialValues: buildInitialValue(isIpRestrictionEnabled, allowedIpRanges),
3522
3525
  validationSchema: VALIDATION_SCHEMA,
@@ -3530,64 +3533,57 @@ var IpRestriction = function IpRestriction() {
3530
3533
  setFieldValue = _ref2.setFieldValue,
3531
3534
  resetForm = _ref2.resetForm,
3532
3535
  setSubmitting = _ref2.setSubmitting;
3533
- return /*#__PURE__*/jsxs(Fragment, {
3534
- children: [/*#__PURE__*/jsx(BlockNavigation, {}), /*#__PURE__*/jsxs("div", {
3535
- className: "neeto-ui-bg-white neeto-ui-border-gray-300 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",
3536
- "data-cy": "ip-restrictions-card",
3537
- children: [/*#__PURE__*/jsxs("div", {
3538
- className: "space-y-2 p-6",
3539
- children: [/*#__PURE__*/jsx(Checkbox, {
3540
- checked: values.ipRestriction,
3541
- className: "flex-grow-0",
3542
- "data-cy": "enable-ip-restriction-checkbox",
3543
- disabled: isFetchingIpRestriction || isUpdating,
3544
- name: "ipRestriction",
3545
- label: /*#__PURE__*/jsx(Typography, {
3546
- style: "h3",
3547
- children: t("neetoMolecules.ipRestriction.switchLabel")
3548
- }),
3549
- onChange: function onChange() {
3550
- return setFieldValue("ipRestriction", !values.ipRestriction);
3551
- }
3552
- }), /*#__PURE__*/jsx(Typography, {
3553
- "data-cy": "ip-restriction-description",
3554
- style: "body2",
3555
- children: t("neetoMolecules.ipRestriction.description")
3556
- })]
3557
- }), values.ipRestriction && /*#__PURE__*/jsxs("div", {
3558
- className: "neeto-ui-border-gray-300 w-full space-y-6 border-t p-6",
3559
- children: [/*#__PURE__*/jsx(CurrentIp$1, {}), /*#__PURE__*/jsx(AllowedIpRanges$1, {}), /*#__PURE__*/jsx(Callout, {
3560
- style: "warning",
3561
- children: /*#__PURE__*/jsx("div", {
3562
- className: "leading-2 block whitespace-pre-wrap py-1",
3563
- children: /*#__PURE__*/jsx(Trans, {
3564
- i18nKey: "neetoMolecules.ipRestriction.warningMessage"
3565
- })
3566
- })
3567
- })]
3568
- })]
3569
- }), /*#__PURE__*/jsxs("div", {
3570
- className: "flex flex-wrap items-center justify-between gap-4",
3571
- children: [dirty && /*#__PURE__*/jsx(Typography, {
3536
+ return /*#__PURE__*/jsxs(CardLayout, {
3537
+ actionBlock: /*#__PURE__*/jsxs("div", {
3538
+ className: "flex flex-wrap items-center gap-2",
3539
+ children: [/*#__PURE__*/jsx(Button$1, {
3540
+ "data-cy": "ip-restriction-save-changes",
3541
+ "data-testid": "save-changes-button",
3542
+ loading: isUpdating,
3543
+ type: "submit",
3544
+ children: t("neetoMolecules.common.actions.saveChanges")
3545
+ }), /*#__PURE__*/jsx(Button, {
3546
+ disabled: !dirty,
3547
+ label: t("neetoMolecules.common.actions.reset"),
3548
+ style: "secondary",
3549
+ type: "reset",
3550
+ onClick: resetForm
3551
+ }), dirty && /*#__PURE__*/jsx(Typography, {
3572
3552
  className: "neeto-ui-text-error-500",
3573
3553
  style: "body2",
3574
3554
  children: t("neetoMolecules.ipRestriction.validations.unsavedChanges")
3575
- }), /*#__PURE__*/jsxs("div", {
3576
- className: "ml-auto flex justify-between",
3577
- children: [/*#__PURE__*/jsx(Button, {
3578
- className: "mr-2",
3579
- disabled: !dirty,
3580
- label: t("neetoMolecules.common.actions.reset"),
3581
- style: "secondary",
3582
- type: "reset",
3583
- onClick: resetForm
3584
- }), /*#__PURE__*/jsx(Button$1, {
3585
- "data-cy": "ip-restriction-save-changes",
3586
- "data-testid": "save-changes-button",
3587
- loading: isUpdating,
3588
- type: "submit",
3589
- children: t("neetoMolecules.common.actions.saveChanges")
3590
- })]
3555
+ })]
3556
+ }),
3557
+ children: [/*#__PURE__*/jsx(BlockNavigation, {}), /*#__PURE__*/jsxs("div", {
3558
+ className: "space-y-2",
3559
+ children: [/*#__PURE__*/jsx(Checkbox, {
3560
+ checked: values.ipRestriction,
3561
+ className: "flex-grow-0",
3562
+ "data-cy": "enable-ip-restriction-checkbox",
3563
+ disabled: isFetchingIpRestriction || isUpdating,
3564
+ name: "ipRestriction",
3565
+ label: /*#__PURE__*/jsx(Typography, {
3566
+ style: "h3",
3567
+ children: t("neetoMolecules.ipRestriction.switchLabel")
3568
+ }),
3569
+ onChange: function onChange() {
3570
+ return setFieldValue("ipRestriction", !values.ipRestriction);
3571
+ }
3572
+ }), /*#__PURE__*/jsx(Typography, {
3573
+ "data-cy": "ip-restriction-description",
3574
+ style: "body2",
3575
+ children: t("neetoMolecules.ipRestriction.description")
3576
+ })]
3577
+ }), values.ipRestriction && /*#__PURE__*/jsxs("div", {
3578
+ className: "neeto-ui-border-gray-300 mt-6 w-full space-y-6 border-t pt-6",
3579
+ children: [/*#__PURE__*/jsx(CurrentIp$1, {}), /*#__PURE__*/jsx(AllowedIpRanges$1, {}), /*#__PURE__*/jsx(Callout, {
3580
+ style: "warning",
3581
+ children: /*#__PURE__*/jsx("div", {
3582
+ className: "leading-2 block whitespace-pre-wrap py-1",
3583
+ children: /*#__PURE__*/jsx(Trans, {
3584
+ i18nKey: "neetoMolecules.ipRestriction.warningMessage"
3585
+ })
3586
+ })
3591
3587
  })]
3592
3588
  }), /*#__PURE__*/jsx(Alert, {
3593
3589
  isOpen: isAlertOpen,