@orchestrator-ui/orchestrator-ui-components 1.4.0 → 1.5.0

package/dist/index.js

@@ -48535,8 +48535,9 @@ function UnconnectedSelectField(_a) {
             inputId: `${id}.search`,
             name,
             onChange: (option) => {
+              var _a2;
               if (!readOnly) {
-                onChange(option == null ? void 0 : option.value);
+                onChange((_a2 = option == null ? void 0 : option.value) != null ? _a2 : null);
               }
             },
             styles: reactSelectInnerComponentStyles,
@@ -48758,13 +48759,13 @@ function Product(_a) {
     apiClient.products
   );
   const productById = (id, products3) => {
-    return products3.find((prod) => prod.productId === id);
+    return products3.find((prod) => prod.product_id === id);
   };
-  if (isLoading || error)
+  if (isLoading || error || !data)
     return null;
-  const products2 = productIds ? data == null ? void 0 : data.map((id) => productById(id.productId, data)) : data;
+  const products2 = productIds ? productIds == null ? void 0 : productIds.map((id) => productById(id, data)) : data;
   const productLabelLookup = (_a2 = products2 == null ? void 0 : products2.reduce(function(mapping, product) {
-    mapping[product.productId] = product.name;
+    mapping[product.product_id] = product.name;
     return mapping;
   }, {})) != null ? _a2 : {};
   return /* @__PURE__ */ jsx113(
@@ -49047,146 +49048,66 @@ function Date2(_a) {
 }
 var DateField = connectField16(Date2, { kind: "leaf" });
 
-// src/components/WfoForms/formFields/TimestampField.tsx
-import moment from "moment-timezone";
+// src/components/WfoForms/formFields/LocationCodeField.tsx
+import { useEffect as useEffect8, useState as useState18 } from "react";
+import { useTranslations as useTranslations29 } from "next-intl";
 import { connectField as connectField17, filterDOMProps as filterDOMProps17 } from "uniforms";
-import { EuiDatePicker, EuiFormRow as EuiFormRow11, EuiText as EuiText20 } from "@elastic/eui";
 import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
-function utcTimestampToLocalMoment(utc_timestamp) {
-  var _a;
-  return moment.unix(utc_timestamp).tz((_a = moment.tz.guess()) != null ? _a : "Europe/Amsterdam");
-}
-function localMomentToUtcTimestamp(local_moment) {
-  return local_moment.unix();
-}
-function Timestamp(_a) {
-  var _b = _a, {
-    disabled,
-    id,
-    label,
-    description,
-    max,
-    min,
-    showTimeSelect,
-    locale,
-    dateFormat: dateFormat2,
-    timeFormat,
-    onChange,
-    value,
-    error,
-    showInlineError,
-    errorMessage
-  } = _b, props = __objRest(_b, [
-    "disabled",
-    "id",
-    "label",
-    "description",
-    "max",
-    "min",
-    "showTimeSelect",
-    "locale",
-    "dateFormat",
-    "timeFormat",
-    "onChange",
-    "value",
-    "error",
-    "showInlineError",
-    "errorMessage"
-  ]);
-  return /* @__PURE__ */ jsx119("div", __spreadProps(__spreadValues({}, filterDOMProps17(props)), { children: /* @__PURE__ */ jsx119(
-    EuiFormRow11,
-    {
-      label,
-      labelAppend: /* @__PURE__ */ jsx119(EuiText20, { size: "m", children: description }),
-      error: showInlineError ? errorMessage : false,
-      isInvalid: error,
-      id,
-      fullWidth: true,
-      children: /* @__PURE__ */ jsx119(
-        EuiDatePicker,
-        {
-          disabled,
-          selected: value ? utcTimestampToLocalMoment(value) : null,
-          value: value ? utcTimestampToLocalMoment(value).toLocaleString() : void 0,
-          onChange: (event) => {
-            onChange(
-              event ? localMomentToUtcTimestamp(event) : void 0
-            );
-          },
-          showTimeSelect,
-          dateFormat: dateFormat2 ? dateFormat2 : void 0,
-          timeFormat: timeFormat ? timeFormat : void 0,
-          locale: locale ? locale : "en-en",
-          maxDate: max ? moment.unix(max) : void 0,
-          minDate: min ? moment.unix(min) : void 0
-        }
-      )
-    }
-  ) }));
+filterDOMProps17.register("locationCodes");
+function LocationCode(_a) {
+  var _b = _a, { locationCodes } = _b, props = __objRest(_b, ["locationCodes"]);
+  const t = useTranslations29("pydanticForms");
+  const [codes, setCodes] = useState18(locationCodes != null ? locationCodes : []);
+  const axiosApiClient = useAxiosApiClient();
+  useEffect8(() => {
+    axiosApiClient.axiosFetch("surf/crm/location_codes", {}, {}, false).then((result) => {
+      if (result) {
+        setCodes(result);
+      }
+    }).catch((error) => {
+      if (error) {
+        console.error(error);
+      }
+      setCodes([]);
+    });
+  }, [axiosApiClient]);
+  return /* @__PURE__ */ jsx119(
+    UnconnectedSelectField,
+    __spreadProps(__spreadValues({}, props), {
+      allowedValues: codes,
+      placeholder: t("widgets.locationCode.placeholder")
+    })
+  );
 }
-var TimestampField = connectField17(Timestamp, { kind: "leaf" });
-
-// src/components/WfoForms/formFields/ContactPersonNameField.tsx
-var import_lodash5 = __toESM(require_lodash(), 1);
-var import_get2 = __toESM(require_get(), 1);
-import React26, { useEffect as useEffect9, useState as useState18 } from "react";
-import { useTranslations as useTranslations29 } from "next-intl";
-import {
-  connectField as connectField18,
-  filterDOMProps as filterDOMProps18,
-  joinName as joinName6,
-  useField as useField6,
-  useForm as useForm6
-} from "uniforms";
-import { EuiFieldText as EuiFieldText2, EuiFormRow as EuiFormRow12, EuiText as EuiText21 } from "@elastic/eui";
+var LocationCodeField = connectField17(LocationCode, { kind: "leaf" });
 
-// src/components/WfoForms/formFields/ContactPersonAutocomplete.tsx
-import { useEffect as useEffect8, useRef as useRef5 } from "react";
+// src/components/WfoForms/formFields/deprecated/ContactPersonAutocomplete.tsx
+import { useEffect as useEffect9, useRef as useRef5 } from "react";
 import scrollIntoView from "scroll-into-view";
 import { EuiFlexItem as EuiFlexItem15 } from "@elastic/eui";
 
-// src/components/WfoForms/formFields/ContactPersonAutocompleteStyles.ts
-import { css as css14 } from "@emotion/react";
-var getStyles9 = (theme) => {
-  const contactPersonAutocompleteStyling = css14`
-        .autocomplete-container {
-            position: relative;
-        }
-
-        section.autocomplete {
-            position: relative;
-            z-index: 2000;
-            width: 100%;
-            border-radius: ${theme.border.radius.medium};
-            background-color: ${theme.colors.lightShade};
-            margin-bottom: 20px;
-
-            table.result {
-                z-index: 2000;
-
-                tbody tr {
-                    cursor: pointer;
+// src/components/WfoForms/formFields/utils.ts
+import { isDate as isDate2 } from "moment";
 
-                    td {
-                        padding: 10px;
-                        width: 50%;
-                        vertical-align: middle;
-                        span.matched {
-                            font-weight: bold;
-                            text-decoration: underline;
-                        }
-                    }
-                }
-            }
-        }
-    `;
-  return {
-    contactPersonAutocompleteStyling
-  };
-};
+// src/components/WfoForms/formFields/deprecated/types.ts
+var PortMode = /* @__PURE__ */ ((PortMode2) => {
+  PortMode2["TAGGED"] = "tagged";
+  PortMode2["UNTAGGED"] = "untagged";
+  PortMode2["LINK_MEMBER"] = "link_member";
+  return PortMode2;
+})(PortMode || {});
+var ProductTag = /* @__PURE__ */ ((ProductTag2) => {
+  ProductTag2["MSC"] = "MSC";
+  ProductTag2["MSCNL"] = "MSCNL";
+  ProductTag2["IRBSP"] = "IRBSP";
+  ProductTag2["SP"] = "SP";
+  ProductTag2["SPNL"] = "SPNL";
+  ProductTag2["AGGSP"] = "AGGSP";
+  ProductTag2["AGGSPNL"] = "AGGSPNL";
+  return ProductTag2;
+})(ProductTag || {});
 
 // src/components/WfoForms/formFields/utils.ts
-import { isDate as isDate2 } from "moment";
 var getPortMode = (productBlockInstances) => {
   return productBlockInstances == null ? void 0 : productBlockInstances.reduce(
     (portMode, productBlockInstance) => {
@@ -49232,7 +49153,47 @@ var subscriptionHasTaggedProduct = (subscriptionDetail) => {
   return productsWithTaggedPorts.includes(subscriptionDetail.product.tag) ? true : false;
 };
 
-// src/components/WfoForms/formFields/ContactPersonAutocomplete.tsx
+// src/components/WfoForms/formFields/deprecated/ContactPersonAutocompleteStyles.ts
+import { css as css14 } from "@emotion/react";
+var getStyles9 = (theme) => {
+  const contactPersonAutocompleteStyling = css14`
+        .autocomplete-container {
+            position: relative;
+        }
+
+        section.autocomplete {
+            position: relative;
+            z-index: 2000;
+            width: 100%;
+            border-radius: ${theme.border.radius.medium};
+            background-color: ${theme.colors.lightShade};
+            margin-bottom: 20px;
+
+            table.result {
+                z-index: 2000;
+
+                tbody tr {
+                    cursor: pointer;
+
+                    td {
+                        padding: 10px;
+                        width: 50%;
+                        vertical-align: middle;
+                        span.matched {
+                            font-weight: bold;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+    `;
+  return {
+    contactPersonAutocompleteStyling
+  };
+};
+
+// src/components/WfoForms/formFields/deprecated/ContactPersonAutocomplete.tsx
 import { jsx as jsx120, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ContactPersonAutocomplete = ({
   query,
@@ -49243,7 +49204,7 @@ var ContactPersonAutocomplete = ({
 }) => {
   const { contactPersonAutocompleteStyling } = useWithOrchestratorTheme(getStyles9);
   const selectedRowRef = useRef5(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isEmpty(suggestions) && selectedRowRef.current) {
       scrollIntoView(selectedRowRef.current);
     }
@@ -49276,7 +49237,19 @@ var ContactPersonAutocomplete = ({
   )) }) }) }) });
 };
 
-// src/components/WfoForms/formFields/ContactPersonNameField.tsx
+// src/components/WfoForms/formFields/deprecated/ContactPersonNameField.tsx
+var import_lodash5 = __toESM(require_lodash(), 1);
+var import_get2 = __toESM(require_get(), 1);
+import React27, { useEffect as useEffect10, useState as useState19 } from "react";
+import { useTranslations as useTranslations30 } from "next-intl";
+import {
+  connectField as connectField18,
+  filterDOMProps as filterDOMProps18,
+  joinName as joinName6,
+  useField as useField6,
+  useForm as useForm6
+} from "uniforms";
+import { EuiFieldText as EuiFieldText2, EuiFormRow as EuiFormRow11, EuiText as EuiText20 } from "@elastic/eui";
 import { Fragment as Fragment22, jsx as jsx121, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
 function stop(e) {
   if (e !== void 0 && e !== null) {
@@ -49294,7 +49267,7 @@ function ContactPersonName(_a) {
   var _b = _a, {
     disabled,
     id,
-    inputRef = React26.createRef(),
+    inputRef = React27.createRef(),
     label,
     description,
     name,
@@ -49325,7 +49298,7 @@ function ContactPersonName(_a) {
     "customerKey"
   ]);
   const axiosApiClient = useAxiosApiClient();
-  const t = useTranslations29("pydanticForms");
+  const t = useTranslations30("pydanticForms");
   const { model, onChange: formOnChange, schema } = useForm6();
   const contactsPersonFieldNameArray = joinName6(null, name).slice(0, -1);
   const emailFieldName = joinName6(contactsPersonFieldNameArray, "email");
@@ -49343,9 +49316,9 @@ function ContactPersonName(_a) {
     customerInitialValue = "";
   }
   const customerIdValue = customerId || contactsField.field.customerId || (0, import_get2.default)(model, customerIdFieldName, customerInitialValue);
-  const [displayAutocomplete, setDisplayAutocomplete] = useState18(false);
-  const [contactPersons, setContactPersons] = useState18([]);
-  const [selectedIndex, setSelectedIndex] = useState18(-1);
+  const [displayAutocomplete, setDisplayAutocomplete] = useState19(false);
+  const [contactPersons, setContactPersons] = useState19([]);
+  const [selectedIndex, setSelectedIndex] = useState19(-1);
   const suggestions = value ? contactPersons.filter(
     (item) => item.name.toLowerCase().indexOf(value.toLowerCase()) > -1
   ).filter(
@@ -49353,7 +49326,7 @@ function ContactPersonName(_a) {
       (person) => person.email === item.email
     )
   ) : [];
-  useEffect9(() => {
+  useEffect10(() => {
     if (customerIdValue) {
       axiosApiClient.axiosFetch(
         `/surf/crm/contacts/${customerIdValue}`,
@@ -49369,7 +49342,7 @@ function ContactPersonName(_a) {
       });
     }
   }, [customerIdValue, axiosApiClient]);
-  useEffect9(() => {
+  useEffect10(() => {
     var _a2;
     if (!(0, import_lodash5.isFunction)(inputRef)) {
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
@@ -49417,10 +49390,10 @@ function ContactPersonName(_a) {
     setTimeout(() => setDisplayAutocomplete(false), 350);
   }
   return /* @__PURE__ */ jsx121("section", __spreadProps(__spreadValues({}, filterDOMProps18(props)), { children: /* @__PURE__ */ jsx121(
-    EuiFormRow12,
+    EuiFormRow11,
     {
       label,
-      labelAppend: /* @__PURE__ */ jsx121(EuiText21, { size: "m", children: description }),
+      labelAppend: /* @__PURE__ */ jsx121(EuiText20, { size: "m", children: description }),
       error: showInlineError ? errorMessage : false,
       isInvalid: error,
       id,
@@ -49463,10 +49436,10 @@ var ContactPersonNameField = connectField18(ContactPersonName, {
   kind: "leaf"
 });
 
-// src/components/WfoForms/formFields/ImsNodeIdField.tsx
+// src/components/WfoForms/formFields/deprecated/ImsNodeIdField.tsx
 var import_lodash6 = __toESM(require_lodash(), 1);
-import { useEffect as useEffect10, useState as useState19 } from "react";
-import { useTranslations as useTranslations30 } from "next-intl";
+import { useEffect as useEffect11, useState as useState20 } from "react";
+import { useTranslations as useTranslations31 } from "next-intl";
 import { connectField as connectField19, filterDOMProps as filterDOMProps19 } from "uniforms";
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 filterDOMProps19.register("locationCode", "status", "unsubscribedOnly");
@@ -49486,10 +49459,10 @@ function ImsNodeId(_a) {
   ]);
   var _a2;
   const axiosApiClient = useAxiosApiClient();
-  const t = useTranslations30("pydanticForms");
-  const [loading, setIsLoading] = useState19(true);
-  const [nodes, setNodes] = useState19([]);
-  useEffect10(() => {
+  const t = useTranslations31("pydanticForms");
+  const [loading, setIsLoading] = useState20(true);
+  const [nodes, setNodes] = useState20([]);
+  useEffect11(() => {
     if (locationCode && status) {
       const imsNodeEndPoint = `/surf/ims/nodes/${locationCode}/${status}?unsubscribed_only=${unsubscribedOnly}`;
       axiosApiClient.axiosFetch(imsNodeEndPoint).then((result) => {
@@ -49521,14 +49494,14 @@ function ImsNodeId(_a) {
 }
 var ImsNodeIdField = connectField19(ImsNodeId, { kind: "leaf" });
 
-// src/components/WfoForms/formFields/ImsPortIdField.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useState as useState20 } from "react";
+// src/components/WfoForms/formFields/deprecated/ImsPortIdField.tsx
+import { useCallback as useCallback3, useEffect as useEffect12, useState as useState21 } from "react";
 import ReactSelect2 from "react-select";
-import { useTranslations as useTranslations31 } from "next-intl";
+import { useTranslations as useTranslations32 } from "next-intl";
 import { connectField as connectField20, filterDOMProps as filterDOMProps20 } from "uniforms";
-import { EuiFlexItem as EuiFlexItem16, EuiFormRow as EuiFormRow13, EuiText as EuiText22 } from "@elastic/eui";
+import { EuiFlexItem as EuiFlexItem16, EuiFormRow as EuiFormRow12, EuiText as EuiText21 } from "@elastic/eui";
 
-// src/components/WfoForms/formFields/ImsPortIdFieldStyling.ts
+// src/components/WfoForms/formFields/deprecated/ImsPortIdFieldStyling.ts
 import { css as css15 } from "@emotion/react";
 var imsPortIdFieldStyling = css15`
     section.node-port {
@@ -49546,7 +49519,7 @@ var imsPortIdFieldStyling = css15`
     }
 `;
 
-// src/components/WfoForms/formFields/ImsPortIdField.tsx
+// src/components/WfoForms/formFields/deprecated/ImsPortIdField.tsx
 import { jsx as jsx123, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 function nodeToOptionCorelink(node) {
   return {
@@ -49595,21 +49568,22 @@ function ImsPortId(_a) {
     "nodeStatuses"
   ]);
   const apiClient = useAxiosApiClient();
-  const t = useTranslations31("pydanticForms");
+  const t = useTranslations32("pydanticForms");
   const { theme } = useOrchestratorTheme();
   const reactSelectInnerComponentStyles = getReactSelectInnerComponentStyles(theme);
-  const [nodes, setNodes] = useState20([]);
-  const [nodeId, setNodeId] = useState20(
+  const [nodes, setNodes] = useState21([]);
+  const [nodeId, setNodeId] = useState21(
     nodeSubscriptionId
   );
-  const [ports, setPorts] = useState20([]);
-  const [loading, setLoading] = useState20(true);
+  const [ports, setPorts] = useState21([]);
+  const [loading, setLoading] = useState21(true);
   const onChangeNodes = useCallback3(
     (option) => {
       const value2 = option == null ? void 0 : option.value;
       if (value2 === void 0) {
         return;
       }
+      onChange(void 0);
       setLoading(true);
       setNodeId(value2);
       setPorts([]);
@@ -49624,7 +49598,7 @@ function ImsPortId(_a) {
     },
     [interfaceSpeed, imsPortMode, apiClient]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     setLoading(true);
     const nodesPromise = apiClient.nodeSubscriptions(
       nodeStatuses != null ? nodeStatuses : ["active"]
@@ -49661,17 +49635,17 @@ function ImsPortId(_a) {
   })).sort((x, y) => x.label.localeCompare(y.label));
   const port_value = port_options.find((option) => option.value === value);
   return /* @__PURE__ */ jsx123(EuiFlexItem16, { css: imsPortIdFieldStyling, children: /* @__PURE__ */ jsx123("section", __spreadProps(__spreadValues({}, filterDOMProps20(props)), { children: /* @__PURE__ */ jsx123(
-    EuiFormRow13,
+    EuiFormRow12,
     {
       label,
-      labelAppend: /* @__PURE__ */ jsx123(EuiText22, { size: "m", children: description }),
+      labelAppend: /* @__PURE__ */ jsx123(EuiText21, { size: "m", children: description }),
       error: showInlineError ? errorMessage : false,
       isInvalid: error,
       id,
       fullWidth: true,
       children: /* @__PURE__ */ jsxs73("section", { className: "node-port", children: [
         /* @__PURE__ */ jsx123("div", { className: "node-select", children: /* @__PURE__ */ jsx123(
-          EuiFormRow13,
+          EuiFormRow12,
           {
             label: "Node",
             id: `${id}.node`,
@@ -49692,7 +49666,7 @@ function ImsPortId(_a) {
             )
           }
         ) }),
-        /* @__PURE__ */ jsx123("div", { className: "port-select", children: /* @__PURE__ */ jsx123(EuiFormRow13, { label: "Port", id, fullWidth: true, children: /* @__PURE__ */ jsx123(
+        /* @__PURE__ */ jsx123("div", { className: "port-select", children: /* @__PURE__ */ jsx123(EuiFormRow12, { label: "Port", id, fullWidth: true, children: /* @__PURE__ */ jsx123(
           ReactSelect2,
           {
             inputId: `${id}.search`,
@@ -49702,7 +49676,7 @@ function ImsPortId(_a) {
             },
             options: port_options,
             placeholder: portPlaceholder,
-            value: port_value,
+            value: port_value || null,
             isSearchable: true,
             isDisabled: disabled || readOnly || ports.length === 0,
             styles: reactSelectInnerComponentStyles
@@ -49714,898 +49688,341 @@ function ImsPortId(_a) {
 }
 var ImsPortIdField = connectField20(ImsPortId, { kind: "leaf" });
 
-// src/components/WfoForms/formFields/LocationCodeField.tsx
-import { useEffect as useEffect12, useState as useState21 } from "react";
-import { useTranslations as useTranslations32 } from "next-intl";
+// src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx
+import { useState as useState22 } from "react";
+import { useTranslations as useTranslations33 } from "next-intl";
 import { connectField as connectField21, filterDOMProps as filterDOMProps21 } from "uniforms";
-import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
-filterDOMProps21.register("locationCodes");
-function LocationCode(_a) {
-  var _b = _a, { locationCodes } = _b, props = __objRest(_b, ["locationCodes"]);
-  const t = useTranslations32("pydanticForms");
-  const [codes, setCodes] = useState21(locationCodes != null ? locationCodes : []);
-  const axiosApiClient = useAxiosApiClient();
-  useEffect12(() => {
-    axiosApiClient.axiosFetch("surf/crm/location_codes", {}, {}, false).then((result) => {
-      if (result) {
-        setCodes(result);
-      }
-    }).catch((error) => {
-      if (error) {
-        console.error(error);
-      }
-      setCodes([]);
-    });
-  }, [axiosApiClient]);
-  return /* @__PURE__ */ jsx124(
-    UnconnectedSelectField,
-    __spreadProps(__spreadValues({}, props), {
-      allowedValues: codes,
-      placeholder: t("widgets.locationCode.placeholder")
-    })
-  );
-}
-var LocationCodeField = connectField21(LocationCode, { kind: "leaf" });
+import { EuiCallOut as EuiCallOut2, EuiFormRow as EuiFormRow14, EuiText as EuiText23 } from "@elastic/eui";
 
-// src/components/WfoForms/formFields/VlanField.tsx
-var import_get3 = __toESM(require_get(), 1);
-import { useEffect as useEffect13, useState as useState22 } from "react";
-import { useTranslations as useTranslations33 } from "next-intl";
-import { connectField as connectField22, filterDOMProps as filterDOMProps22, joinName as joinName7, useForm as useForm7 } from "uniforms";
-import { EuiFieldText as EuiFieldText3, EuiFormRow as EuiFormRow14, EuiText as EuiText23 } from "@elastic/eui";
+// src/components/WfoForms/formFields/deprecated/SplitPrefix.tsx
+var import_lodash7 = __toESM(require_lodash(), 1);
+import React30 from "react";
+import ReactSelect3 from "react-select";
+import { EuiFlexItem as EuiFlexItem17 } from "@elastic/eui";
 
-// src/hooks/surf/useIsTaggedPort.ts
-var useIsTaggedPort = (subscriptionId) => {
-  const { data, isFetching } = useGetSubscriptionDetailQuery(
-    { subscriptionId },
-    { skip: !subscriptionId }
-  );
-  const subscriptionDetail = data == null ? void 0 : data.subscription;
-  const portIsTagged = subscriptionDetail ? subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail) || subscriptionHasTaggedProduct(subscriptionDetail) : false;
-  return [!isFetching, portIsTagged];
-};
+// src/components/WfoForms/formFields/deprecated/SplitPrefixStyling.ts
+import { css as css16 } from "@emotion/react";
+var splitPrefixStyling = css16`
+    section.split-prefix {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 80;
+    }
+`;
 
-// src/components/WfoForms/formFields/VlanField.tsx
-import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
-function inValidVlan(vlan) {
-  const value = vlan || "0";
-  const stripped = value.toString().replace(/ /g, "");
-  return !/^\d{1,4}(?:-\d{1,4})?(?:,\d{1,4}(?:-\d{1,4})?)*$/.test(stripped) || stripped.split(",").some(inValidRange);
-}
-function inValidRange(range3) {
-  if (range3.indexOf("-") > -1) {
-    const ranges = range3.split("-");
-    return ranges.some(inValidRange) || parseInt(ranges[0], 10) >= parseInt(ranges[1], 10);
-  }
-  return parseInt(range3, 10) < 2 || parseInt(range3, 10) > 4094;
-}
-function getAllNumbersForVlanRange(vlanRange) {
-  if (!vlanRange) {
-    return [];
-  }
-  if (vlanRange !== "0" && inValidVlan(vlanRange)) {
-    return [];
+// src/components/WfoForms/formFields/deprecated/SplitPrefix.tsx
+import { jsx as jsx124, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+var SplitPrefix = class extends React30.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      subnets: [],
+      desiredPrefixlen: 0
+    };
+    this.changePrefixLength = (e) => {
+      const { subnet, prefixlen } = __spreadValues({}, this.props);
+      const desiredPrefixlen = e == null ? void 0 : e.value;
+      if (desiredPrefixlen) {
+        this.fetchFreePrefixes(subnet, prefixlen, desiredPrefixlen);
+      }
+    };
+    this.selectSubnet = (e) => {
+      var _a;
+      this.props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+    };
   }
-  return numbersFromGroupedArray(
-    vlanRange.replace(/ /g, "").split(",").map((sl) => sl.split("-").map(Number))
-  );
-}
-function numbersFromGroupedArray(list) {
-  return list.reduce((acc, boundaries) => {
-    const max = boundaries[boundaries.length - 1];
-    const min = boundaries[0];
-    return acc.concat(
-      Array.from(new Array(max - min + 1), (x, i) => min + i)
-    );
-  }, []);
-}
-function groupedArrayFromNumbers(numbers) {
-  numbers = [...numbers].sort((a, b) => a - b);
-  const groupedNumbers = numbers.reduce((r, n) => {
-    let lastSubArray = r[r.length - 1];
-    if (lastSubArray && lastSubArray[lastSubArray.length - 1] === n) {
-      return r;
-    }
-    if (!lastSubArray || lastSubArray[lastSubArray.length - 1] !== n - 1) {
-      lastSubArray = [];
-      r.push(lastSubArray);
-    }
-    lastSubArray.push(n);
-    return r;
-  }, []);
-  return groupedNumbers.map(
-    (l) => l[0] !== l[l.length - 1] ? [l[0], l[l.length - 1]] : [l[0]]
-  );
-}
-function vlanRangeFromNumbers(list) {
-  return groupedArrayFromNumbers(list).map((sl) => sl.join("-")).join(",");
-}
-function Vlan(_a) {
-  var _b = _a, {
-    disabled,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    readOnly,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    subscriptionFieldName = "subscription_id",
-    nsiVlansOnly = false
-  } = _b, props = __objRest(_b, [
-    "disabled",
-    "id",
-    "label",
-    "description",
-    "name",
-    "onChange",
-    "readOnly",
-    "value",
-    "error",
-    "showInlineError",
-    "errorMessage",
-    "subscriptionFieldName",
-    "nsiVlansOnly"
-  ]);
-  const t = useTranslations33("pydanticForms");
-  const axiosApiClient = useAxiosApiClient();
-  const { model, schema } = useForm7();
-  const initialValue = schema.getInitialValue(name, {});
-  const nameArray = joinName7(null, name);
-  const selfName = nameArray.slice(-1);
-  const subscriptionIdFieldName = joinName7(
-    nameArray.slice(0, -1),
-    subscriptionFieldName
-  );
-  const completeListFieldName = joinName7(nameArray.slice(0, -2));
-  const subscriptionId = (0, import_get3.default)(model, subscriptionIdFieldName);
-  const [isFetched, portIsTagged] = useIsTaggedPort(subscriptionId);
-  const completeList = (0, import_get3.default)(model, completeListFieldName) || [];
-  const extraUsedVlans = completeList.filter(
-    (_item, index) => index.toString() !== nameArray.slice(-2, -1)[0]
-  ).filter((item) => (0, import_get3.default)(item, subscriptionFieldName) === subscriptionId).map((item) => (0, import_get3.default)(item, selfName)).join(",");
-  useEffect13(() => {
-    if (subscriptionId && isFetched && !portIsTagged && value !== "0") {
-      onChange("0");
-    } else if (!subscriptionId && value !== "" || subscriptionId && portIsTagged && value === "0") {
-      onChange("");
-    }
-  }, [onChange, subscriptionId, value, isFetched, portIsTagged]);
-  const [imsIsLoading, setImsIsLoading] = useState22(false);
-  const [usedVlansInIms, setUsedVlansInIms] = useState22([]);
-  const [missingInIms, setMissingInIms] = useState22(false);
-  useEffect13(() => {
-    if (subscriptionId) {
-      setImsIsLoading(true);
-      axiosApiClient.axiosFetch(
-        `surf/subscriptions/vlans-by-service-port/${subscriptionId}?nsi_vlans_only=${nsiVlansOnly}`
-      ).then((result) => {
-        setUsedVlansInIms(result);
-        setMissingInIms(false);
-      }).catch((error2) => {
-        console.error(error2);
-        setMissingInIms(true);
-        setUsedVlansInIms([]);
-      }).finally(() => setImsIsLoading(false));
-    }
-  }, [axiosApiClient, nsiVlansOnly, subscriptionId]);
-  const currentVlans = getAllNumbersForVlanRange(initialValue);
-  const usedVlans = numbersFromGroupedArray(usedVlansInIms).filter(
-    (n) => !currentVlans.includes(n)
-  );
-  const allUsedVlans = usedVlans.concat(getAllNumbersForVlanRange(extraUsedVlans)).sort();
-  const validFormat = !value || value === "0" || !inValidVlan(value);
-  const vlansInUse = validFormat && !disabled ? getAllNumbersForVlanRange(value).filter(
-    (num) => allUsedVlans.includes(num)
-  ) : [];
-  const placeholder = imsIsLoading ? t("widgets.vlan.loadingIms") : subscriptionId ? t("widgets.vlan.placeholder") : t("widgets.vlan.placeholderNoServicePort");
-  const errorMessageExtra = missingInIms ? t("widgets.vlan.missingInIms") : !validFormat ? t("widgets.vlan.invalidVlan") : vlansInUse.length ? vlansInUse.length >= 1 && vlansInUse[0] === 0 ? t("widgets.vlan.untaggedPortInUse") : t("widgets.vlan.vlansInUseError", {
-    vlans: vlanRangeFromNumbers(vlansInUse)
-  }) : void 0;
-  let message = "";
-  if (!imsIsLoading) {
-    if (missingInIms) {
-      message = t("widgets.vlan.missingInIms");
-    } else if (portIsTagged && nsiVlansOnly) {
-      const initialUsedVlans = schema.getInitialValue("service_ports", {}).map((sp) => sp.vlan);
-      const currentUsedVlans = initialUsedVlans.filter(
-        (vlan) => vlan !== value && vlan !== extraUsedVlans
+  fetchFreePrefixes(subnet, prefixlen, desiredPrefixlen) {
+    this.context.apiClient.free_subnets(subnet, prefixlen, desiredPrefixlen).then((result) => {
+      const subnets = result.filter(
+        (x) => parseInt(x.split("/")[1], 10) === desiredPrefixlen
       );
-      const allAvailableVlans = [
-        ...usedVlans.filter(
-          (number) => !getAllNumbersForVlanRange(extraUsedVlans).includes(
-            number
-          )
-        ),
-        ...currentUsedVlans
-      ].sort();
-      message = !allAvailableVlans.length ? t("widgets.vlan.nsiNoPortsAvailable") : t("widgets.vlan.nsiVlansAvailable", {
-        vlans: vlanRangeFromNumbers(allAvailableVlans)
-      });
-    } else if (portIsTagged) {
-      message = !allUsedVlans.length ? t("widgets.vlan.allPortsAvailable") : t("widgets.vlan.vlansInUse", {
-        vlans: vlanRangeFromNumbers(allUsedVlans)
+      this.setState({
+        subnets,
+        desiredPrefixlen,
+        loading: false
       });
-    } else {
-      message = t("widgets.vlan.taggedOnly");
+    });
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.subnet !== prevProps.subnet || this.props.prefixlen !== prevProps.prefixlen) {
+      this.fetchFreePrefixes(
+        this.props.subnet,
+        this.props.prefixlen,
+        this.props.prefixMin
+      );
     }
   }
-  return /* @__PURE__ */ jsx125("section", __spreadProps(__spreadValues({}, filterDOMProps22(props)), { children: /* @__PURE__ */ jsx125(
-    EuiFormRow14,
-    {
-      label,
-      labelAppend: /* @__PURE__ */ jsx125(EuiText23, { size: "m", children: description }),
-      error: (error || errorMessageExtra) && showInlineError ? errorMessage || errorMessageExtra : false,
-      isInvalid: error,
-      helpText: message,
-      id,
-      fullWidth: true,
-      children: /* @__PURE__ */ jsx125(
-        EuiFieldText3,
+  componentDidMount() {
+    const { subnet, prefixlen, prefixMin } = __spreadValues({}, this.props);
+    this.fetchFreePrefixes(subnet, prefixlen, prefixMin);
+  }
+  render() {
+    const { id, name, subnet, prefixlen, prefixMin, selectedSubnet } = this.props;
+    const version = subnet.indexOf(":") === -1 ? 4 : 6;
+    const minPrefixLength = version === 4 ? 12 : 32;
+    const minimalSelectablePrefixLength = minPrefixLength > prefixMin ? minPrefixLength : prefixMin;
+    const maximalSelectablePrefixLength = version === 4 ? 32 : minimalSelectablePrefixLength + 12;
+    const { desiredPrefixlen } = this.state;
+    const prefixlengths = (0, import_lodash7.range)(
+      maximalSelectablePrefixLength - minimalSelectablePrefixLength + 1
+    ).map((x) => minimalSelectablePrefixLength + x);
+    const length_options = prefixlengths.map((pl) => ({
+      value: pl,
+      label: pl.toString()
+    }));
+    const length_value = length_options.find(
+      (option) => option.value === desiredPrefixlen
+    );
+    const prefix_options = this.state.subnets.map((sn) => ({
+      label: sn,
+      value: sn
+    }));
+    const prefix_value = prefix_options.find(
+      (option) => option.value === selectedSubnet
+    );
+    return /* @__PURE__ */ jsx124(EuiFlexItem17, { css: splitPrefixStyling, children: /* @__PURE__ */ jsxs74("section", { children: [
+      /* @__PURE__ */ jsxs74("h3", { children: [
+        "Selected prefix: ",
+        subnet,
+        "/",
+        prefixlen
+      ] }),
+      /* @__PURE__ */ jsx124("div", { children: "Desired netmask of the new subnet:" }),
+      /* @__PURE__ */ jsx124(
+        ReactSelect3,
         {
-          fullWidth: true,
-          disabled: !subscriptionId || disabled || !portIsTagged,
-          name,
-          isInvalid: error,
-          onChange: (event) => onChange(event.target.value),
-          placeholder,
-          readOnly,
-          type: "text",
-          value: value != null ? value : ""
-        }
-      )
-    }
-  ) }));
-}
-var VlanField = connectField22(Vlan, { kind: "leaf" });
-
-// src/components/WfoForms/formFields/NestField.tsx
-import { connectField as connectField23, filterDOMProps as filterDOMProps23, joinName as joinName8 } from "uniforms";
-import { AutoField as AutoField3 } from "uniforms-unstyled";
-import {
-  EuiDescribedFormGroup,
-  EuiFlexGroup as EuiFlexGroup12,
-  EuiFlexItem as EuiFlexItem17,
-  EuiText as EuiText24
-} from "@elastic/eui";
-import { Fragment as Fragment23, jsx as jsx126, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
-filterDOMProps23.register("properties", "wrap");
-function Nest(_a) {
-  var _b = _a, {
-    children,
-    fields,
-    itemProps,
-    label,
-    description,
-    name,
-    className = ""
-  } = _b, props = __objRest(_b, [
-    "children",
-    "fields",
-    "itemProps",
-    "label",
-    "description",
-    "name",
-    "className"
-  ]);
-  const nameArray = joinName8(null, name);
-  const lastNamePart = nameArray[nameArray.length - 1];
-  const isInList = !isNaN(parseInt(lastNamePart));
-  const itemIndex = isInList ? parseInt(lastNamePart) : 0;
-  if (isInList) {
-    return /* @__PURE__ */ jsxs74(
-      EuiFlexGroup12,
-      __spreadProps(__spreadValues({}, filterDOMProps23(props)), {
-        className: `${className} nest-field`,
-        children: [
-          label && /* @__PURE__ */ jsxs74(Fragment23, { children: [
-            /* @__PURE__ */ jsx126("label", { className: "euiFormLabel euiFormRow__label", children: label }),
-            /* @__PURE__ */ jsx126(EuiText24, { size: "m", children: description })
-          ] }),
-          children || (fields == null ? void 0 : fields.map((field) => /* @__PURE__ */ jsx126(EuiFlexItem17, { children: /* @__PURE__ */ jsx126(
-            AutoField3,
-            __spreadProps(__spreadValues({
-              name: field
-            }, itemProps), {
-              label: itemIndex === 0 ? void 0 : false
-            })
-          ) }, field)))
-        ]
-      })
-    );
-  } else {
-    return /* @__PURE__ */ jsx126(
-      EuiDescribedFormGroup,
-      __spreadProps(__spreadValues({}, filterDOMProps23(props)), {
-        title: /* @__PURE__ */ jsx126("span", { children: label }),
-        description,
-        className: `${className} nest-field`,
-        children: children || (fields == null ? void 0 : fields.map((field) => /* @__PURE__ */ jsx126(
-          AutoField3,
-          __spreadProps(__spreadValues({
-            name: field
-          }, itemProps), {
-            label: itemIndex === 0 ? void 0 : false
-          }),
-          field
-        )))
-      })
-    );
-  }
-}
-var NestField = connectField23(Nest);
-
-// src/components/WfoForms/formFields/OptGroupField.tsx
-import { useTranslations as useTranslations34 } from "next-intl";
-import { connectField as connectField24, filterDOMProps as filterDOMProps24, useField as useField7 } from "uniforms";
-import { AutoField as AutoField4 } from "uniforms-unstyled";
-import { EuiDescribedFormGroup as EuiDescribedFormGroup2, EuiFlexItem as EuiFlexItem18, EuiFormRow as EuiFormRow15 } from "@elastic/eui";
-import { Fragment as Fragment24, jsx as jsx127, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
-filterDOMProps24.register("properties");
-function OptGroup(_a) {
-  var _b = _a, {
-    fields,
-    itemProps,
-    name,
-    readOnly,
-    className = ""
-  } = _b, props = __objRest(_b, [
-    "fields",
-    "itemProps",
-    "name",
-    "readOnly",
-    "className"
-  ]);
-  const t = useTranslations34("pydanticForms.backendTranslations");
-  const enabled = useField7("enabled", {})[0].value;
-  return /* @__PURE__ */ jsx127(
-    EuiDescribedFormGroup2,
-    __spreadProps(__spreadValues({}, filterDOMProps24(props)), {
-      title: /* @__PURE__ */ jsx127("span", { children: t(`${name}.title`) }),
-      description: t(`${name}.description`),
-      className: `${className} optgroup-field`,
-      children: /* @__PURE__ */ jsxs75(Fragment24, { children: [
-        /* @__PURE__ */ jsx127(EuiFlexItem18, { children: /* @__PURE__ */ jsx127(
-          EuiFormRow15,
+          id: `${id}.desired-netmask`,
+          inputId: `${id}.desired-netmask.search`,
+          name: `${name}.desired-netmask`,
+          onChange: this.changePrefixLength,
+          options: length_options,
+          value: length_value
+        }
+      ),
+      this.state.subnets && /* @__PURE__ */ jsxs74("div", { children: [
+        /* @__PURE__ */ jsx124("div", { children: "Desired prefix:" }),
+        /* @__PURE__ */ jsx124(
+          ReactSelect3,
           {
-            error: false,
-            isInvalid: false,
-            id: name,
-            children: /* @__PURE__ */ jsx127(BoolField, { name: "enabled", readOnly })
+            id: `${id}.desired-prefix`,
+            inputId: `${id}.desired-prefix.search`,
+            name: `${name}.desired-prefix`,
+            options: prefix_options,
+            onChange: this.selectSubnet,
+            value: prefix_value
           }
-        ) }),
-        enabled && (fields == null ? void 0 : fields.filter((field) => field !== "enabled").map((field) => /* @__PURE__ */ jsx127(EuiFlexItem18, { children: /* @__PURE__ */ jsx127(AutoField4, __spreadValues({ name: field }, itemProps)) }, field)))
+        )
       ] })
-    })
-  );
-}
-var OptGroupField = connectField24(OptGroup);
+    ] }) });
+  }
+};
+SplitPrefix.contextType = ApiClientContext;
 
-// src/components/WfoForms/formFields/SubscriptionField.tsx
-var import_get4 = __toESM(require_get(), 1);
-import ReactSelect3 from "react-select";
-import { useTranslations as useTranslations35 } from "next-intl";
-import {
-  connectField as connectField25,
-  filterDOMProps as filterDOMProps25,
-  joinName as joinName9,
-  useField as useField8,
-  useForm as useForm8
-} from "uniforms";
+// src/components/WfoForms/formFields/deprecated/IpPrefixTableField.tsx
+import React31 from "react";
+import ReactSelect4 from "react-select";
 import {
+  EuiBadge as EuiBadge3,
+  EuiButton as EuiButton9,
   EuiButtonIcon as EuiButtonIcon2,
-  EuiFlexGroup as EuiFlexGroup13,
-  EuiFlexItem as EuiFlexItem19,
-  EuiFormRow as EuiFormRow16,
-  EuiText as EuiText25
+  EuiCheckbox as EuiCheckbox3,
+  EuiFieldText as EuiFieldText3,
+  EuiFlexGroup as EuiFlexGroup12,
+  EuiFlexItem as EuiFlexItem18,
+  EuiFormRow as EuiFormRow13,
+  EuiInMemoryTable,
+  EuiPanel as EuiPanel3,
+  EuiText as EuiText22
 } from "@elastic/eui";
 
-// src/hooks/surf/useGetSubscriptionDropdownOptions.ts
-import { isError as isError2 } from "react-query";
-var useGetSubscriptionDropdownOptions = (tags = [], statuses = ["active"]) => {
-  const tagValue = tags.join("-");
-  const statusValue = statuses.join("-");
-  const filters = [];
-  if (tagValue) {
-    filters.push({
-      field: "tag",
-      value: tagValue
-    });
-  }
-  if (statusValue) {
-    filters.push({
-      field: "status",
-      value: statusValue
-    });
-  }
-  const { data, isFetching, refetch } = useGetSubscriptionsDropdownOptionsQuery({ filterBy: filters });
-  const subscriptions = (() => {
-    if (!isFetching && !isError2(data) && data) {
-      return data.subscriptionDropdownOptions;
-    }
-    return [];
-  })();
-  return { isFetching, refetch, subscriptions };
-};
+// src/components/WfoForms/formFields/types.ts
+function prop(obj, key) {
+  return obj[key];
+}
 
-// src/components/WfoForms/formFields/SubscriptionFieldStyling.ts
-import { css as css16 } from "@emotion/react";
-var subscriptionFieldStyling = css16`
-    .subscription-field {
-        > div {
-            display: flex;
+// src/components/WfoForms/formFields/deprecated/IpPrefixTableFieldStyling.ts
+import { css as css17 } from "@emotion/react";
+var DARK_GREY_COLOR = "#333333";
+var LIGHTER_GREY_COLOR = "#999999";
+var LIGHT_GOLD_COLOR = "#fca456";
+var LIGHT_PRIMARY_COLOR = "#0da3f5";
+var LIGHT_SUCCESS_COLOR = "#68ff1d";
+function shadeColor(color, percent) {
+  let R = parseInt(color.substring(1, 3), 16);
+  let G = parseInt(color.substring(3, 5), 16);
+  let B = parseInt(color.substring(5, 7), 16);
+  R = parseInt(String(R * (100 + percent) / 100));
+  G = parseInt(String(G * (100 + percent) / 100));
+  B = parseInt(String(B * (100 + percent) / 100));
+  R = R < 255 ? R : 255;
+  G = G < 255 ? G : 255;
+  B = B < 255 ? B : 255;
+  const RR = R.toString(16).length === 1 ? "0" + R.toString(16) : R.toString(16);
+  const GG = G.toString(16).length === 1 ? "0" + G.toString(16) : G.toString(16);
+  const BB = B.toString(16).length === 1 ? "0" + B.toString(16) : B.toString(16);
+  return "#" + RR + GG + BB;
+}
+var ipPrefixTableFieldStyling = css17`
+    table.ip-blocks {
+        word-break: break-all;
+        margin-bottom: 20px;
 
-            .subscription-field-select {
-                width: 100%;
-                margin-left: 5px;
+        td,
+        th {
+            text-align: left;
+        }
+        tr {
+            border-bottom: 1px solid ${LIGHTER_GREY_COLOR};
+        }
+        tr.Allocated {
+            cursor: pointer;
+            background-color: ${LIGHT_PRIMARY_COLOR};
+            &:hover {
+                background-color: ${shadeColor(LIGHT_PRIMARY_COLOR, -10)};
             }
         }
-
-        .euiFormRow > .euiFormRow__fieldWrapper > div {
-            display: flex;
+        tr.Planned {
+            cursor: default;
+            background-color: ${LIGHT_GOLD_COLOR};
         }
-    }
-
-    // Setup sensible margins for port selectors
-    .subscription-field-disabled {
-        > div {
-            display: flex;
-            .subscription-field-select {
-                margin-left: 0px;
-                margin-top: 5px;
+        tr.Free {
+            cursor: pointer;
+            background-color: ${LIGHT_SUCCESS_COLOR};
+            &:hover {
+                background-color: ${shadeColor(LIGHT_SUCCESS_COLOR, -10)};
+            }
+        }
+        tr.Subnet {
+            background-color: ${shadeColor(LIGHT_PRIMARY_COLOR, -30)};
+            cursor: default;
+        }
+        tr.selected {
+            background-color: ${DARK_GREY_COLOR};
+            color: white;
+            &:hover {
+                background-color: black;
+            }
+        }
+        thead {
+            display: block;
+            th {
+                cursor: pointer;
+                padding: 5px 5px 10px 5px;
+            }
+            th.id {
+                min-width: 8em;
+            }
+            th.prefix {
+                min-width: 15em;
+            }
+            th.description {
+                width: 30em;
+            }
+            th.state {
+                min-width: 25em;
             }
         }
-    }
 
-    .reload-subscriptions-icon-button {
-        margin-left: -7px;
-    }
+        tbody {
+            min-width: 1000px;
+            height: 240px;
+            display: block;
+            overflow: auto;
+            td {
+                word-break: break-word;
+                word-wrap: break-word;
+                padding: 15px 5px;
+            }
+            td.id {
+                min-width: 8em;
+            }
+            td.prefix {
+                min-width: 15em;
+            }
+            td.description {
+                width: 30em;
+            }
+            td.state {
+                min-width: 25em;
+            }
+        }
+    }
 `;
 
-// src/components/WfoForms/formFields/SubscriptionField.tsx
-import { jsx as jsx128, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
-filterDOMProps25.register(
-  "productIds",
-  "excludedSubscriptionIds",
-  "customerId",
-  "customerKey",
-  "visiblePortMode",
-  "bandwidth",
-  "bandwidthKey",
-  "tags",
-  "statuses"
-);
-function SubscriptionFieldDefinition(_a) {
-  var _b = _a, {
-    disabled,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    readOnly,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    className = "",
-    productIds = [],
-    excludedSubscriptionIds = [],
-    customerId,
-    customerKey,
-    visiblePortMode = "all",
-    bandwidth,
-    bandwidthKey,
-    tags,
-    statuses
-  } = _b, props = __objRest(_b, [
-    "disabled",
-    "id",
-    "label",
-    "description",
-    "name",
-    "onChange",
-    "readOnly",
-    "value",
-    "error",
-    "showInlineError",
-    "errorMessage",
-    "className",
-    "productIds",
-    "excludedSubscriptionIds",
-    "customerId",
-    "customerKey",
-    "visiblePortMode",
-    "bandwidth",
-    "bandwidthKey",
-    "tags",
-    "statuses"
-  ]);
-  const t = useTranslations35("pydanticForms");
-  const { theme } = useOrchestratorTheme();
-  const reactSelectInnerComponentStyles = getReactSelectInnerComponentStyles(theme);
-  const { refetch, subscriptions, isFetching } = useGetSubscriptionDropdownOptions(tags, statuses);
-  const nameArray = joinName9(null, name);
-  let parentName = joinName9(nameArray.slice(0, -1));
-  if (parentName === "") {
-    parentName = name;
-  }
-  const parent = useField8(parentName, {}, { absoluteName: true })[0];
-  const { model, schema } = useForm8();
-  const bandWithFromField = bandwidthKey ? (0, import_get4.default)(model, bandwidthKey) || schema.getInitialValue(bandwidthKey, {}) : void 0;
-  const usedBandwidth = bandwidth || bandWithFromField;
-  const usedCustomerId = customerKey ? (0, import_get4.default)(model, customerKey, "nonExistingOrgToFilterEverything") : customerId;
-  const makeLabel = (subscription) => {
-    var _a2;
-    const description2 = subscription.description || t("widgets.subscription.missingDescription");
-    const subscriptionSubstring = subscription.subscriptionId.substring(
-      0,
-      8
-    );
-    if (["Node"].includes(subscription.product.tag)) {
-      const description3 = subscription.description || t("widgets.subscription.missingDescription");
-      return `${subscription.subscriptionId.substring(
-        0,
-        8
-      )} ${description3.trim()}`;
-    } else if ([
-      "SP" /* SP */,
-      "SPNL" /* SPNL */,
-      "AGGSP" /* AGGSP */,
-      "AGGSPNL" /* AGGSPNL */,
-      "MSC" /* MSC */,
-      "MSCNL" /* MSCNL */,
-      "IRBSP" /* IRBSP */
-    ].includes(subscription.product.tag)) {
-      const portMode = getPortMode(subscription.productBlockInstances);
-      const subscriptionTitle = subscription.productBlockInstances[0].productBlockInstanceValues.find(
-        (item) => item.field === "title"
-      );
-      if (subscriptionTitle) {
-        return `${subscriptionSubstring} - ${description2.trim()} - ${subscriptionTitle.value}`;
-      }
-      return `${subscriptionSubstring} ${portMode == null ? void 0 : portMode.toUpperCase()} ${description2.trim()} ${(_a2 = subscription.customer) == null ? void 0 : _a2.fullname}`;
-    } else {
-      return description2.trim();
-    }
-  };
-  const getSubscriptionOptions = () => {
-    const filteredSubscriptions = subscriptions == null ? void 0 : subscriptions.filter((subscription) => {
-      var _a2;
-      if (usedBandwidth) {
-        const portSpeedInput = subscription.fixedInputs.find(
-          (fixedInput) => fixedInput.field === "port_speed"
-        );
-        if (portSpeedInput && parseInt(portSpeedInput.value.toString(), 10) < parseInt(usedBandwidth.toString(), 10)) {
-          return false;
-        }
-      }
-      if (!usedBandwidth && productIds && productIds.length > 0 && !productIds.includes(subscription.product.productId)) {
-        return false;
-      }
-      if (!usedBandwidth && !productIds && tags && (tags == null ? void 0 : tags.length) > 0 && !tags.includes(subscription.product.tag)) {
-        return false;
+// src/components/WfoForms/formFields/deprecated/utils.ts
+var ipamStates = ["Free", "Allocated", null, "Planned", null, null];
+
+// src/components/WfoForms/formFields/deprecated/IpPrefixTableField.tsx
+import { Fragment as Fragment23, jsx as jsx125, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+var IpPrefixTableField = class extends React31.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      ipBlocks: [],
+      loading: true,
+      filteredIpBlocks: [],
+      filteredPrefixes: [],
+      selectionDone: false,
+      filter: {
+        state: [
+          ipamStates.indexOf("Free"),
+          ipamStates.indexOf("Allocated"),
+          ipamStates.indexOf("Planned"),
+          ipamStates.indexOf("Subnet")
+        ],
+        prefix: void 0
+      },
+      sorted: {
+        name: "prefix",
+        descending: false
+      },
+      manualOverrideVisible: false,
+      manualOverrideValue: ""
+    };
+    this.sort = (name) => (e) => {
+      if (e !== void 0 && e !== null) {
+        e.preventDefault();
+        e.stopPropagation();
       }
-      if (excludedSubscriptionIds && excludedSubscriptionIds.length > 0 && excludedSubscriptionIds.includes(subscription.subscriptionId)) {
-        return false;
+      const sorted = __spreadValues({}, this.state.sorted);
+      sorted.descending = sorted.name === name ? !sorted.descending : false;
+      sorted.name = name;
+      this.setState({
+        sorted,
+        filteredIpBlocks: this.filterAndSortBlocks()
+      });
+    };
+    this.sortBy = (name) => (a, b) => {
+      const aVal = prop(a, name);
+      const bVal = prop(b, name);
+      try {
+        return typeof aVal === "string" && typeof bVal === "string" ? aVal.toLowerCase().localeCompare(bVal.toLowerCase()) : aVal - bVal;
+      } catch (e) {
+        console.error(e);
       }
-      if (visiblePortMode !== "all") {
-        const portMode = getPortMode(
-          subscription.productBlockInstances
+      return 0;
+    };
+    this.sortColumnIcon = (name, sorted) => {
+      if (sorted.name === name) {
+        return /* @__PURE__ */ jsx125(
+          "i",
+          {
+            className: sorted.descending ? "fas fa-sort-down" : "fas fa-sort-up"
+          }
         );
-        if (visiblePortMode === "normal" && !["tagged" /* TAGGED */, "untagged" /* UNTAGGED */, void 0].includes(
-          portMode
-        )) {
-          return false;
-        } else if (portMode !== visiblePortMode && visiblePortMode !== "normal") {
-          return false;
-        }
-      }
-      if (usedCustomerId && ((_a2 = subscription.customer) == null ? void 0 : _a2.customerId) !== usedCustomerId) {
-        return false;
       }
-      if (parentName !== name) {
-        if (parent.fieldType === Array && // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
-        // TODO: Figure out why this is so
-        parent.uniqueItems) {
-          const allValues = (0, import_get4.default)(model, parentName, []);
-          const chosenValues = allValues.filter(
-            (_item, index) => index.toString() !== nameArray[nameArray.length - 1]
-          );
-          if (!chosenValues.includes(subscription.subscriptionId)) {
-            return false;
-          }
-        }
-      }
-      return true;
-    });
-    return filteredSubscriptions ? filteredSubscriptions.map((subscription) => ({
-      label: makeLabel(subscription),
-      value: subscription.subscriptionId
-    })) : [];
-  };
-  const options = getSubscriptionOptions();
-  const selectedValue = options.find(
-    (option) => option.value === value
-  );
-  const isDisabled = disabled || readOnly || isFetching;
-  return /* @__PURE__ */ jsx128(EuiFlexItem19, { css: subscriptionFieldStyling, grow: 1, children: /* @__PURE__ */ jsx128(
-    "section",
-    __spreadProps(__spreadValues({}, filterDOMProps25(props)), {
-      className: `${className} subscription-field${disabled ? "-disabled" : ""}`,
-      children: /* @__PURE__ */ jsx128(
-        EuiFormRow16,
-        {
-          label,
-          labelAppend: /* @__PURE__ */ jsx128(EuiText25, { size: "m", children: description }),
-          error: showInlineError ? errorMessage : false,
-          isInvalid: error,
-          id,
-          fullWidth: true,
-          children: /* @__PURE__ */ jsxs76("div", { children: [
-            !disabled && /* @__PURE__ */ jsx128(
-              EuiFlexGroup13,
-              {
-                alignItems: "center",
-                gutterSize: "none",
-                responsive: false,
-                children: /* @__PURE__ */ jsx128(
-                  EuiButtonIcon2,
-                  {
-                    className: "reload-subscriptions-icon-button",
-                    id: `refresh-icon-${id}`,
-                    "aria-label": `reload-${label}`,
-                    iconType: "refresh",
-                    iconSize: "l",
-                    disabled: isDisabled,
-                    onClick: () => {
-                      !isDisabled ? refetch() : null;
-                    }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx128(
-              ReactSelect3,
-              {
-                id,
-                inputId: `${id}.search`,
-                name,
-                onChange: (option) => {
-                  onChange(option == null ? void 0 : option.value);
-                },
-                options,
-                value: selectedValue,
-                isSearchable: true,
-                isClearable: false,
-                placeholder: isFetching ? t("widgets.subscription.loading") : t("widgets.subscription.placeholder"),
-                isDisabled,
-                styles: reactSelectInnerComponentStyles,
-                className: "subscription-field-select"
-              }
-            )
-          ] })
-        }
-      )
-    })
-  ) });
-}
-var SubscriptionField = connectField25(SubscriptionFieldDefinition, {
-  kind: "leaf"
-});
-
-// src/components/WfoForms/formFields/IpNetworkField.tsx
-import { useState as useState23 } from "react";
-import { useTranslations as useTranslations36 } from "next-intl";
-import { connectField as connectField26, filterDOMProps as filterDOMProps26 } from "uniforms";
-import { EuiCallOut as EuiCallOut2, EuiFormRow as EuiFormRow18, EuiText as EuiText27 } from "@elastic/eui";
-
-// src/components/WfoForms/formFields/IpPrefixTableField.tsx
-import React31 from "react";
-import ReactSelect4 from "react-select";
-import {
-  EuiBadge as EuiBadge3,
-  EuiButton as EuiButton9,
-  EuiButtonIcon as EuiButtonIcon3,
-  EuiCheckbox as EuiCheckbox3,
-  EuiFieldText as EuiFieldText4,
-  EuiFlexGroup as EuiFlexGroup14,
-  EuiFlexItem as EuiFlexItem20,
-  EuiFormRow as EuiFormRow17,
-  EuiInMemoryTable,
-  EuiPanel as EuiPanel3,
-  EuiText as EuiText26
-} from "@elastic/eui";
-
-// src/components/WfoForms/formFields/IpPrefixTableFieldStyling.ts
-import { css as css17 } from "@emotion/react";
-var DARK_GREY_COLOR = "#333333";
-var LIGHTER_GREY_COLOR = "#999999";
-var LIGHT_GOLD_COLOR = "#fca456";
-var LIGHT_PRIMARY_COLOR = "#0da3f5";
-var LIGHT_SUCCESS_COLOR = "#68ff1d";
-function shadeColor(color, percent) {
-  let R = parseInt(color.substring(1, 3), 16);
-  let G = parseInt(color.substring(3, 5), 16);
-  let B = parseInt(color.substring(5, 7), 16);
-  R = parseInt(String(R * (100 + percent) / 100));
-  G = parseInt(String(G * (100 + percent) / 100));
-  B = parseInt(String(B * (100 + percent) / 100));
-  R = R < 255 ? R : 255;
-  G = G < 255 ? G : 255;
-  B = B < 255 ? B : 255;
-  const RR = R.toString(16).length === 1 ? "0" + R.toString(16) : R.toString(16);
-  const GG = G.toString(16).length === 1 ? "0" + G.toString(16) : G.toString(16);
-  const BB = B.toString(16).length === 1 ? "0" + B.toString(16) : B.toString(16);
-  return "#" + RR + GG + BB;
-}
-var ipPrefixTableFieldStyling = css17`
-    table.ip-blocks {
-        word-break: break-all;
-        margin-bottom: 20px;
-
-        td,
-        th {
-            text-align: left;
-        }
-        tr {
-            border-bottom: 1px solid ${LIGHTER_GREY_COLOR};
-        }
-        tr.Allocated {
-            cursor: pointer;
-            background-color: ${LIGHT_PRIMARY_COLOR};
-            &:hover {
-                background-color: ${shadeColor(LIGHT_PRIMARY_COLOR, -10)};
-            }
-        }
-        tr.Planned {
-            cursor: default;
-            background-color: ${LIGHT_GOLD_COLOR};
-        }
-        tr.Free {
-            cursor: pointer;
-            background-color: ${LIGHT_SUCCESS_COLOR};
-            &:hover {
-                background-color: ${shadeColor(LIGHT_SUCCESS_COLOR, -10)};
-            }
-        }
-        tr.Subnet {
-            background-color: ${shadeColor(LIGHT_PRIMARY_COLOR, -30)};
-            cursor: default;
-        }
-        tr.selected {
-            background-color: ${DARK_GREY_COLOR};
-            color: white;
-            &:hover {
-                background-color: black;
-            }
-        }
-        thead {
-            display: block;
-            th {
-                cursor: pointer;
-                padding: 5px 5px 10px 5px;
-            }
-            th.id {
-                min-width: 8em;
-            }
-            th.prefix {
-                min-width: 15em;
-            }
-            th.description {
-                width: 30em;
-            }
-            th.state {
-                min-width: 25em;
-            }
-        }
-
-        tbody {
-            min-width: 1000px;
-            height: 240px;
-            display: block;
-            overflow: auto;
-            td {
-                word-break: break-word;
-                word-wrap: break-word;
-                padding: 15px 5px;
-            }
-            td.id {
-                min-width: 8em;
-            }
-            td.prefix {
-                min-width: 15em;
-            }
-            td.description {
-                width: 30em;
-            }
-            td.state {
-                min-width: 25em;
-            }
-        }
-    }
-`;
-
-// src/components/WfoForms/formFields/surf/utils.ts
-var ipamStates = ["Free", "Allocated", null, "Planned", null, null];
-
-// src/components/WfoForms/formFields/types.ts
-function prop(obj, key) {
-  return obj[key];
-}
-
-// src/components/WfoForms/formFields/IpPrefixTableField.tsx
-import { Fragment as Fragment25, jsx as jsx129, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
-var IpPrefixTableField = class extends React31.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      ipBlocks: [],
-      loading: true,
-      filteredIpBlocks: [],
-      filteredPrefixes: [],
-      selectionDone: false,
-      filter: {
-        state: [
-          ipamStates.indexOf("Free"),
-          ipamStates.indexOf("Allocated"),
-          ipamStates.indexOf("Planned"),
-          ipamStates.indexOf("Subnet")
-        ],
-        prefix: void 0
-      },
-      sorted: {
-        name: "prefix",
-        descending: false
-      },
-      manualOverrideVisible: false,
-      manualOverrideValue: ""
-    };
-    this.sort = (name) => (e) => {
-      if (e !== void 0 && e !== null) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      const sorted = __spreadValues({}, this.state.sorted);
-      sorted.descending = sorted.name === name ? !sorted.descending : false;
-      sorted.name = name;
-      this.setState({
-        sorted,
-        filteredIpBlocks: this.filterAndSortBlocks()
-      });
-    };
-    this.sortBy = (name) => (a, b) => {
-      const aVal = prop(a, name);
-      const bVal = prop(b, name);
-      try {
-        return typeof aVal === "string" && typeof bVal === "string" ? aVal.toLowerCase().localeCompare(bVal.toLowerCase()) : aVal - bVal;
-      } catch (e) {
-        console.error(e);
-      }
-      return 0;
-    };
-    this.sortColumnIcon = (name, sorted) => {
-      if (sorted.name === name) {
-        return /* @__PURE__ */ jsx129(
-          "i",
-          {
-            className: sorted.descending ? "fas fa-sort-down" : "fas fa-sort-up"
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx129("i", {});
-    };
-    this.filterState = (e) => {
-      const target = e.target;
-      const state_filter = parseInt(target.value, 10);
-      const { filter } = this.state;
-      if (target.checked) {
-        filter.state.push(state_filter);
-      } else {
-        filter.state = filter.state.filter((e2) => e2 !== state_filter);
+      return /* @__PURE__ */ jsx125("i", {});
+    };
+    this.filterState = (e) => {
+      const target = e.target;
+      const state_filter = parseInt(target.value, 10);
+      const { filter } = this.state;
+      if (target.checked) {
+        filter.state.push(state_filter);
+      } else {
+        filter.state = filter.state.filter((e2) => e2 !== state_filter);
       }
       this.setState({
         filter,
@@ -50706,12 +50123,12 @@ var IpPrefixTableField = class extends React31.PureComponent {
         field: "state",
         name: "Status",
         sortable: true,
-        render: (prefixState) => /* @__PURE__ */ jsx129(EuiBadge3, { color: prefixState === 3 ? "danger" : "success", children: ipamStates[prefixState] })
+        render: (prefixState) => /* @__PURE__ */ jsx125(EuiBadge3, { color: prefixState === 3 ? "danger" : "success", children: ipamStates[prefixState] })
       },
       {
         field: "Action",
         name: "",
-        render: (id2, record) => record.state !== 3 ? /* @__PURE__ */ jsx129(
+        render: (id2, record) => record.state !== 3 ? /* @__PURE__ */ jsx125(
           EuiButton9,
           {
             onClick: this.selectPrefix(record),
@@ -50735,7 +50152,7 @@ var IpPrefixTableField = class extends React31.PureComponent {
       pageSizeOptions: [25, 50, 100, 250]
     };
     if (selected_prefix_id && selectionDone) {
-      return /* @__PURE__ */ jsx129(
+      return /* @__PURE__ */ jsx125(
         EuiButton9,
         {
           id: "undo-parent-prefix-choice-button",
@@ -50745,17 +50162,17 @@ var IpPrefixTableField = class extends React31.PureComponent {
         }
       );
     }
-    return /* @__PURE__ */ jsxs77(EuiFlexItem20, { css: ipPrefixTableFieldStyling, children: [
-      /* @__PURE__ */ jsxs77("div", { children: [
-        /* @__PURE__ */ jsxs77(
-          EuiFlexGroup14,
+    return /* @__PURE__ */ jsxs75(EuiFlexItem18, { css: ipPrefixTableFieldStyling, children: [
+      /* @__PURE__ */ jsxs75("div", { children: [
+        /* @__PURE__ */ jsxs75(
+          EuiFlexGroup12,
           {
             gutterSize: "s",
             style: { marginTop: "5px", marginBottom: "10px" },
             children: [
-              /* @__PURE__ */ jsx129(EuiFlexItem20, { grow: false, children: /* @__PURE__ */ jsx129(EuiText26, { children: /* @__PURE__ */ jsx129("h4", { children: "Manual override?" }) }) }),
-              /* @__PURE__ */ jsx129(EuiFlexItem20, { grow: false, children: /* @__PURE__ */ jsx129(
-                EuiButtonIcon3,
+              /* @__PURE__ */ jsx125(EuiFlexItem18, { grow: false, children: /* @__PURE__ */ jsx125(EuiText22, { children: /* @__PURE__ */ jsx125("h4", { children: "Manual override?" }) }) }),
+              /* @__PURE__ */ jsx125(EuiFlexItem18, { grow: false, children: /* @__PURE__ */ jsx125(
+                EuiButtonIcon2,
                 {
                   iconType: manualOverrideVisible ? "arrowDown" : "arrowRight",
                   "aria-label": "Toggle manual override",
@@ -50764,20 +50181,20 @@ var IpPrefixTableField = class extends React31.PureComponent {
                   })
                 }
               ) }),
-              /* @__PURE__ */ jsx129(EuiFlexItem20, {})
+              /* @__PURE__ */ jsx125(EuiFlexItem18, {})
             ]
           }
         ),
-        manualOverrideVisible && /* @__PURE__ */ jsxs77(EuiPanel3, { style: { marginBottom: "20px" }, children: [
-          /* @__PURE__ */ jsx129(
-            EuiFormRow17,
+        manualOverrideVisible && /* @__PURE__ */ jsxs75(EuiPanel3, { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx125(
+            EuiFormRow13,
             {
               style: { marginTop: "15px" },
               label: "Manually enter a prefix",
-              labelAppend: /* @__PURE__ */ jsx129(EuiText26, { size: "m", children: "Generating free spaces for a big IPv6 root prefix could yield an enormous list. If you know the address of a free subnet you can provide it here. The prefix will be created in the biggest existing prefix above it in one of the root prefixes." }),
+              labelAppend: /* @__PURE__ */ jsx125(EuiText22, { size: "m", children: "Generating free spaces for a big IPv6 root prefix could yield an enormous list. If you know the address of a free subnet you can provide it here. The prefix will be created in the biggest existing prefix above it in one of the root prefixes." }),
               helpText: "Example: 145.145.10/17",
-              children: /* @__PURE__ */ jsx129(
-                EuiFieldText4,
+              children: /* @__PURE__ */ jsx125(
+                EuiFieldText3,
                 {
                   value: manualOverrideValue,
                   onChange: (e) => this.setState({
@@ -50787,7 +50204,7 @@ var IpPrefixTableField = class extends React31.PureComponent {
               )
             }
           ),
-          /* @__PURE__ */ jsx129(
+          /* @__PURE__ */ jsx125(
             EuiButton9,
             {
               onClick: () => this.props.onManualOverride(
@@ -50798,18 +50215,18 @@ var IpPrefixTableField = class extends React31.PureComponent {
           )
         ] })
       ] }),
-      !manualOverrideVisible && /* @__PURE__ */ jsxs77(Fragment25, { children: [
-        /* @__PURE__ */ jsxs77("div", { children: [
-          /* @__PURE__ */ jsxs77(EuiFlexGroup14, { gutterSize: "s", children: [
-            /* @__PURE__ */ jsx129(
-              EuiFlexItem20,
+      !manualOverrideVisible && /* @__PURE__ */ jsxs75(Fragment23, { children: [
+        /* @__PURE__ */ jsxs75("div", { children: [
+          /* @__PURE__ */ jsxs75(EuiFlexGroup12, { gutterSize: "s", children: [
+            /* @__PURE__ */ jsx125(
+              EuiFlexItem18,
               {
                 grow: false,
                 style: { marginTop: "6px" },
                 children: "State:"
               }
             ),
-            /* @__PURE__ */ jsx129(EuiFlexItem20, { grow: false, children: /* @__PURE__ */ jsx129(
+            /* @__PURE__ */ jsx125(EuiFlexItem18, { grow: false, children: /* @__PURE__ */ jsx125(
               EuiCheckbox3,
               {
                 id: "checkbox-allocated",
@@ -50822,7 +50239,7 @@ var IpPrefixTableField = class extends React31.PureComponent {
                 )
               }
             ) }),
-            /* @__PURE__ */ jsx129(EuiFlexItem20, { grow: false, children: /* @__PURE__ */ jsx129(
+            /* @__PURE__ */ jsx125(EuiFlexItem18, { grow: false, children: /* @__PURE__ */ jsx125(
               EuiCheckbox3,
               {
                 id: "checkbox-planned",
@@ -50835,7 +50252,7 @@ var IpPrefixTableField = class extends React31.PureComponent {
                 )
               }
             ) }),
-            /* @__PURE__ */ jsx129(EuiFlexItem20, { grow: false, children: /* @__PURE__ */ jsx129(
+            /* @__PURE__ */ jsx125(EuiFlexItem18, { grow: false, children: /* @__PURE__ */ jsx125(
               EuiCheckbox3,
               {
                 id: "checkbox-free",
@@ -50849,178 +50266,664 @@ var IpPrefixTableField = class extends React31.PureComponent {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx129(
-            "div",
-            {
-              style: {
-                marginTop: "4px",
-                marginBottom: "4px"
-              },
-              children: "Root filter"
-            }
-          ),
-          /* @__PURE__ */ jsx129("span", { children: /* @__PURE__ */ jsx129(
-            ReactSelect4,
-            {
-              id: `${id}.root-filter`,
-              inputId: `${id}.root-filter.search`,
-              name: `${name}.root-filter`,
-              options,
-              onChange: this.filterParentPrefix,
-              value
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx129(
-          EuiInMemoryTable,
+          /* @__PURE__ */ jsx125(
+            "div",
+            {
+              style: {
+                marginTop: "4px",
+                marginBottom: "4px"
+              },
+              children: "Root filter"
+            }
+          ),
+          /* @__PURE__ */ jsx125("span", { children: /* @__PURE__ */ jsx125(
+            ReactSelect4,
+            {
+              id: `${id}.root-filter`,
+              inputId: `${id}.root-filter.search`,
+              name: `${name}.root-filter`,
+              options,
+              onChange: this.filterParentPrefix,
+              value
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx125(
+          EuiInMemoryTable,
+          {
+            id: "test",
+            style: { marginTop: "6px" },
+            itemId: "id",
+            tableCaption: "Prefix table",
+            loading,
+            items: ipBlocks,
+            columns,
+            pagination,
+            sorting: true
+          }
+        )
+      ] })
+    ] });
+  }
+};
+IpPrefixTableField.contextType = ApiClientContext;
+
+// src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx
+import { jsx as jsx126, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+function IpNetwork(_a) {
+  var _b = _a, {
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    readOnly,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    prefixMin
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "description",
+    "name",
+    "onChange",
+    "readOnly",
+    "value",
+    "error",
+    "showInlineError",
+    "errorMessage",
+    "prefixMin"
+  ]);
+  var _a2, _b2;
+  const t = useTranslations33("pydanticForms");
+  const [selectedPrefix, setSelectedPrefix] = useState22(
+    void 0
+  );
+  const [manualOverride, setManualOverride] = useState22(false);
+  const usePrefix = (_a2 = selectedPrefix == null ? void 0 : selectedPrefix.prefix) != null ? _a2 : value;
+  const [subnet, netmask] = (_b2 = usePrefix == null ? void 0 : usePrefix.split("/")) != null ? _b2 : ["", ""];
+  const usedPrefixMin = prefixMin != null ? prefixMin : parseInt(netmask, 10) + ((selectedPrefix == null ? void 0 : selectedPrefix.state) === 0 ? 0 : 1);
+  return /* @__PURE__ */ jsx126("section", __spreadProps(__spreadValues({}, filterDOMProps21(props)), { children: /* @__PURE__ */ jsx126(
+    EuiFormRow14,
+    {
+      label,
+      labelAppend: /* @__PURE__ */ jsx126(EuiText23, { size: "m", children: description }),
+      error: showInlineError ? errorMessage : false,
+      isInvalid: error,
+      id,
+      fullWidth: true,
+      children: /* @__PURE__ */ jsx126("section", { className: "ipblock-selector", children: /* @__PURE__ */ jsxs76("div", { id, children: [
+        !prefixMin && /* @__PURE__ */ jsx126(
+          IpPrefixTableField,
+          {
+            id,
+            name,
+            onChange: (prefix) => {
+              if (!readOnly) {
+                if (prefix.state === 0 || prefix.state === 1) {
+                  setSelectedPrefix(prefix);
+                }
+                setManualOverride(false);
+                onChange(prefix.prefix);
+              }
+            },
+            onManualOverride: (prefixString) => {
+              if (!readOnly) {
+                setManualOverride(true);
+                onChange(prefixString);
+              }
+            },
+            selected_prefix_id: selectedPrefix == null ? void 0 : selectedPrefix.id
+          }
+        ),
+        usePrefix && !manualOverride && /* @__PURE__ */ jsx126(
+          SplitPrefix,
+          {
+            id,
+            name,
+            subnet,
+            prefixlen: parseInt(netmask, 10),
+            prefixMin: usedPrefixMin,
+            onChange: (prefix) => {
+              if (!readOnly) {
+                onChange(prefix);
+              }
+            },
+            selectedSubnet: usePrefix
+          }
+        ),
+        usePrefix && manualOverride && /* @__PURE__ */ jsx126(
+          EuiCallOut2,
+          {
+            title: t(
+              "widgets.ipvAnyNetworkField.manuallySelectedPrefix"
+            ),
+            color: "primary",
+            iconType: "check",
+            children: /* @__PURE__ */ jsx126("p", { children: value })
+          }
+        )
+      ] }) })
+    }
+  ) }));
+}
+var IpNetworkField = connectField21(IpNetwork, { kind: "leaf" });
+
+// src/components/WfoForms/formFields/deprecated/TimestampField.tsx
+import moment from "moment-timezone";
+import { connectField as connectField22, filterDOMProps as filterDOMProps22 } from "uniforms";
+import { EuiDatePicker, EuiFormRow as EuiFormRow15, EuiText as EuiText24 } from "@elastic/eui";
+import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
+function utcTimestampToLocalMoment(utc_timestamp) {
+  var _a;
+  return moment.unix(utc_timestamp).tz((_a = moment.tz.guess()) != null ? _a : "Europe/Amsterdam");
+}
+function localMomentToUtcTimestamp(local_moment) {
+  return local_moment.unix();
+}
+function Timestamp(_a) {
+  var _b = _a, {
+    disabled,
+    id,
+    label,
+    description,
+    max,
+    min,
+    showTimeSelect,
+    locale,
+    dateFormat: dateFormat2,
+    timeFormat,
+    onChange,
+    value,
+    error,
+    showInlineError,
+    errorMessage
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "id",
+    "label",
+    "description",
+    "max",
+    "min",
+    "showTimeSelect",
+    "locale",
+    "dateFormat",
+    "timeFormat",
+    "onChange",
+    "value",
+    "error",
+    "showInlineError",
+    "errorMessage"
+  ]);
+  return /* @__PURE__ */ jsx127("div", __spreadProps(__spreadValues({}, filterDOMProps22(props)), { children: /* @__PURE__ */ jsx127(
+    EuiFormRow15,
+    {
+      label,
+      labelAppend: /* @__PURE__ */ jsx127(EuiText24, { size: "m", children: description }),
+      error: showInlineError ? errorMessage : false,
+      isInvalid: error,
+      id,
+      fullWidth: true,
+      children: /* @__PURE__ */ jsx127(
+        EuiDatePicker,
+        {
+          disabled,
+          selected: value ? utcTimestampToLocalMoment(value) : null,
+          value: value ? utcTimestampToLocalMoment(value).toLocaleString() : void 0,
+          onChange: (event) => {
+            onChange(
+              event ? localMomentToUtcTimestamp(event) : void 0
+            );
+          },
+          showTimeSelect,
+          dateFormat: dateFormat2 ? dateFormat2 : void 0,
+          timeFormat: timeFormat ? timeFormat : void 0,
+          locale: locale ? locale : "en-en",
+          maxDate: max ? moment.unix(max) : void 0,
+          minDate: min ? moment.unix(min) : void 0
+        }
+      )
+    }
+  ) }));
+}
+var TimestampField = connectField22(Timestamp, { kind: "leaf" });
+
+// src/components/WfoForms/formFields/deprecated/VlanField.tsx
+var import_get3 = __toESM(require_get(), 1);
+import { useEffect as useEffect13, useState as useState23 } from "react";
+import { useTranslations as useTranslations34 } from "next-intl";
+import { connectField as connectField23, filterDOMProps as filterDOMProps23, joinName as joinName7, useForm as useForm7 } from "uniforms";
+import { EuiFieldText as EuiFieldText4, EuiFormRow as EuiFormRow16, EuiText as EuiText25 } from "@elastic/eui";
+
+// src/hooks/deprecated/useIsTaggedPort.ts
+var useIsTaggedPort = (subscriptionId) => {
+  const { data, isFetching } = useGetSubscriptionDetailQuery(
+    { subscriptionId },
+    { skip: !subscriptionId }
+  );
+  const subscriptionDetail = data == null ? void 0 : data.subscription;
+  const portIsTagged = subscriptionDetail ? subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail) || subscriptionHasTaggedProduct(subscriptionDetail) : false;
+  return [!isFetching, portIsTagged];
+};
+
+// src/components/WfoForms/formFields/deprecated/VlanField.tsx
+import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
+function inValidVlan(vlan) {
+  const value = vlan || "0";
+  const stripped = value.toString().replace(/ /g, "");
+  return !/^\d{1,4}(?:-\d{1,4})?(?:,\d{1,4}(?:-\d{1,4})?)*$/.test(stripped) || stripped.split(",").some(inValidRange);
+}
+function inValidRange(range3) {
+  if (range3.indexOf("-") > -1) {
+    const ranges = range3.split("-");
+    return ranges.some(inValidRange) || parseInt(ranges[0], 10) >= parseInt(ranges[1], 10);
+  }
+  return parseInt(range3, 10) < 2 || parseInt(range3, 10) > 4094;
+}
+function getAllNumbersForVlanRange(vlanRange) {
+  if (!vlanRange) {
+    return [];
+  }
+  if (vlanRange !== "0" && inValidVlan(vlanRange)) {
+    return [];
+  }
+  return numbersFromGroupedArray(
+    vlanRange.replace(/ /g, "").split(",").map((sl) => sl.split("-").map(Number))
+  );
+}
+function numbersFromGroupedArray(list) {
+  return list.reduce((acc, boundaries) => {
+    const max = boundaries[boundaries.length - 1];
+    const min = boundaries[0];
+    return acc.concat(
+      Array.from(new Array(max - min + 1), (x, i) => min + i)
+    );
+  }, []);
+}
+function groupedArrayFromNumbers(numbers) {
+  numbers = [...numbers].sort((a, b) => a - b);
+  const groupedNumbers = numbers.reduce((r, n) => {
+    let lastSubArray = r[r.length - 1];
+    if (lastSubArray && lastSubArray[lastSubArray.length - 1] === n) {
+      return r;
+    }
+    if (!lastSubArray || lastSubArray[lastSubArray.length - 1] !== n - 1) {
+      lastSubArray = [];
+      r.push(lastSubArray);
+    }
+    lastSubArray.push(n);
+    return r;
+  }, []);
+  return groupedNumbers.map(
+    (l) => l[0] !== l[l.length - 1] ? [l[0], l[l.length - 1]] : [l[0]]
+  );
+}
+function vlanRangeFromNumbers(list) {
+  return groupedArrayFromNumbers(list).map((sl) => sl.join("-")).join(",");
+}
+function Vlan(_a) {
+  var _b = _a, {
+    disabled,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    readOnly,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    subscriptionFieldName = "subscription_id",
+    nsiVlansOnly = false
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "id",
+    "label",
+    "description",
+    "name",
+    "onChange",
+    "readOnly",
+    "value",
+    "error",
+    "showInlineError",
+    "errorMessage",
+    "subscriptionFieldName",
+    "nsiVlansOnly"
+  ]);
+  const t = useTranslations34("pydanticForms");
+  const axiosApiClient = useAxiosApiClient();
+  const { model, schema } = useForm7();
+  const initialValue = schema.getInitialValue(name, {});
+  const nameArray = joinName7(null, name);
+  const selfName = nameArray.slice(-1);
+  const subscriptionIdFieldName = joinName7(
+    nameArray.slice(0, -1),
+    subscriptionFieldName
+  );
+  const completeListFieldName = joinName7(nameArray.slice(0, -2));
+  const subscriptionId = (0, import_get3.default)(model, subscriptionIdFieldName);
+  const [isFetched, portIsTagged] = useIsTaggedPort(subscriptionId);
+  const completeList = (0, import_get3.default)(model, completeListFieldName) || [];
+  const extraUsedVlans = completeList.filter(
+    (_item, index) => index.toString() !== nameArray.slice(-2, -1)[0]
+  ).filter((item) => (0, import_get3.default)(item, subscriptionFieldName) === subscriptionId).map((item) => (0, import_get3.default)(item, selfName)).join(",");
+  useEffect13(() => {
+    if (subscriptionId && isFetched && !portIsTagged && value !== "0") {
+      onChange("0");
+    } else if (!subscriptionId && value !== "" || subscriptionId && portIsTagged && value === "0") {
+      onChange("");
+    }
+  }, [onChange, subscriptionId, value, isFetched, portIsTagged]);
+  const [imsIsLoading, setImsIsLoading] = useState23(false);
+  const [usedVlansInIms, setUsedVlansInIms] = useState23([]);
+  const [missingInIms, setMissingInIms] = useState23(false);
+  useEffect13(() => {
+    if (subscriptionId) {
+      setImsIsLoading(true);
+      axiosApiClient.axiosFetch(
+        `surf/subscriptions/vlans-by-service-port/${subscriptionId}?nsi_vlans_only=${nsiVlansOnly}`
+      ).then((result) => {
+        setUsedVlansInIms(result);
+        setMissingInIms(false);
+      }).catch((error2) => {
+        console.error(error2);
+        setMissingInIms(true);
+        setUsedVlansInIms([]);
+      }).finally(() => setImsIsLoading(false));
+    }
+  }, [axiosApiClient, nsiVlansOnly, subscriptionId]);
+  const currentVlans = getAllNumbersForVlanRange(initialValue);
+  const usedVlans = numbersFromGroupedArray(usedVlansInIms).filter(
+    (n) => !currentVlans.includes(n)
+  );
+  const allUsedVlans = usedVlans.concat(getAllNumbersForVlanRange(extraUsedVlans)).sort();
+  const validFormat = !value || value === "0" || !inValidVlan(value);
+  const vlansInUse = validFormat && !disabled ? getAllNumbersForVlanRange(value).filter(
+    (num) => allUsedVlans.includes(num)
+  ) : [];
+  const placeholder = imsIsLoading ? t("widgets.vlan.loadingIms") : subscriptionId ? t("widgets.vlan.placeholder") : t("widgets.vlan.placeholderNoServicePort");
+  const errorMessageExtra = missingInIms ? t("widgets.vlan.missingInIms") : !validFormat ? t("widgets.vlan.invalidVlan") : vlansInUse.length ? vlansInUse.length >= 1 && vlansInUse[0] === 0 ? t("widgets.vlan.untaggedPortInUse") : t("widgets.vlan.vlansInUseError", {
+    vlans: vlanRangeFromNumbers(vlansInUse)
+  }) : void 0;
+  let message = "";
+  if (!imsIsLoading) {
+    if (missingInIms) {
+      message = t("widgets.vlan.missingInIms");
+    } else if (portIsTagged && nsiVlansOnly) {
+      const initialUsedVlans = schema.getInitialValue("service_ports", {}).map((sp) => sp.vlan);
+      const currentUsedVlans = initialUsedVlans.filter(
+        (vlan) => vlan !== value && vlan !== extraUsedVlans
+      );
+      const allAvailableVlans = [
+        ...usedVlans.filter(
+          (number) => !getAllNumbersForVlanRange(extraUsedVlans).includes(
+            number
+          )
+        ),
+        ...currentUsedVlans
+      ].sort();
+      message = !allAvailableVlans.length ? t("widgets.vlan.nsiNoPortsAvailable") : t("widgets.vlan.nsiVlansAvailable", {
+        vlans: vlanRangeFromNumbers(allAvailableVlans)
+      });
+    } else if (portIsTagged) {
+      message = !allUsedVlans.length ? t("widgets.vlan.allPortsAvailable") : t("widgets.vlan.vlansInUse", {
+        vlans: vlanRangeFromNumbers(allUsedVlans)
+      });
+    } else {
+      message = t("widgets.vlan.taggedOnly");
+    }
+  }
+  return /* @__PURE__ */ jsx128("section", __spreadProps(__spreadValues({}, filterDOMProps23(props)), { children: /* @__PURE__ */ jsx128(
+    EuiFormRow16,
+    {
+      label,
+      labelAppend: /* @__PURE__ */ jsx128(EuiText25, { size: "m", children: description }),
+      error: (error || errorMessageExtra) && showInlineError ? errorMessage || errorMessageExtra : false,
+      isInvalid: error,
+      helpText: message,
+      id,
+      fullWidth: true,
+      children: /* @__PURE__ */ jsx128(
+        EuiFieldText4,
+        {
+          fullWidth: true,
+          disabled: !subscriptionId || disabled || !portIsTagged,
+          name,
+          isInvalid: error,
+          onChange: (event) => onChange(event.target.value),
+          placeholder,
+          readOnly,
+          type: "text",
+          value: value != null ? value : ""
+        }
+      )
+    }
+  ) }));
+}
+var VlanField = connectField23(Vlan, { kind: "leaf" });
+
+// src/components/WfoForms/formFields/NestField.tsx
+import { connectField as connectField24, filterDOMProps as filterDOMProps24, joinName as joinName8 } from "uniforms";
+import { AutoField as AutoField3 } from "uniforms-unstyled";
+import {
+  EuiDescribedFormGroup,
+  EuiFlexGroup as EuiFlexGroup13,
+  EuiFlexItem as EuiFlexItem19,
+  EuiText as EuiText26
+} from "@elastic/eui";
+import { Fragment as Fragment24, jsx as jsx129, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
+filterDOMProps24.register("properties", "wrap");
+function Nest(_a) {
+  var _b = _a, {
+    children,
+    fields,
+    itemProps,
+    label,
+    description,
+    name,
+    className = ""
+  } = _b, props = __objRest(_b, [
+    "children",
+    "fields",
+    "itemProps",
+    "label",
+    "description",
+    "name",
+    "className"
+  ]);
+  const nameArray = joinName8(null, name);
+  const lastNamePart = nameArray[nameArray.length - 1];
+  const isInList = !isNaN(parseInt(lastNamePart));
+  const itemIndex = isInList ? parseInt(lastNamePart) : 0;
+  if (isInList) {
+    return /* @__PURE__ */ jsxs77(
+      EuiFlexGroup13,
+      __spreadProps(__spreadValues({}, filterDOMProps24(props)), {
+        className: `${className} nest-field`,
+        children: [
+          label && /* @__PURE__ */ jsxs77(Fragment24, { children: [
+            /* @__PURE__ */ jsx129("label", { className: "euiFormLabel euiFormRow__label", children: label }),
+            /* @__PURE__ */ jsx129(EuiText26, { size: "m", children: description })
+          ] }),
+          children || (fields == null ? void 0 : fields.map((field) => /* @__PURE__ */ jsx129(EuiFlexItem19, { children: /* @__PURE__ */ jsx129(
+            AutoField3,
+            __spreadProps(__spreadValues({
+              name: field
+            }, itemProps), {
+              label: itemIndex === 0 ? void 0 : false
+            })
+          ) }, field)))
+        ]
+      })
+    );
+  } else {
+    return /* @__PURE__ */ jsx129(
+      EuiDescribedFormGroup,
+      __spreadProps(__spreadValues({}, filterDOMProps24(props)), {
+        title: /* @__PURE__ */ jsx129("span", { children: label }),
+        description,
+        className: `${className} nest-field`,
+        children: children || (fields == null ? void 0 : fields.map((field) => /* @__PURE__ */ jsx129(
+          AutoField3,
+          __spreadProps(__spreadValues({
+            name: field
+          }, itemProps), {
+            label: itemIndex === 0 ? void 0 : false
+          }),
+          field
+        )))
+      })
+    );
+  }
+}
+var NestField = connectField24(Nest);
+
+// src/components/WfoForms/formFields/OptGroupField.tsx
+import { useTranslations as useTranslations35 } from "next-intl";
+import { connectField as connectField25, filterDOMProps as filterDOMProps25, useField as useField7 } from "uniforms";
+import { AutoField as AutoField4 } from "uniforms-unstyled";
+import { EuiDescribedFormGroup as EuiDescribedFormGroup2, EuiFlexItem as EuiFlexItem20, EuiFormRow as EuiFormRow17 } from "@elastic/eui";
+import { Fragment as Fragment25, jsx as jsx130, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
+filterDOMProps25.register("properties");
+function OptGroup(_a) {
+  var _b = _a, {
+    fields,
+    itemProps,
+    name,
+    readOnly,
+    className = ""
+  } = _b, props = __objRest(_b, [
+    "fields",
+    "itemProps",
+    "name",
+    "readOnly",
+    "className"
+  ]);
+  const t = useTranslations35("pydanticForms.backendTranslations");
+  const enabled = useField7("enabled", {})[0].value;
+  return /* @__PURE__ */ jsx130(
+    EuiDescribedFormGroup2,
+    __spreadProps(__spreadValues({}, filterDOMProps25(props)), {
+      title: /* @__PURE__ */ jsx130("span", { children: t(`${name}.title`) }),
+      description: t(`${name}.description`),
+      className: `${className} optgroup-field`,
+      children: /* @__PURE__ */ jsxs78(Fragment25, { children: [
+        /* @__PURE__ */ jsx130(EuiFlexItem20, { children: /* @__PURE__ */ jsx130(
+          EuiFormRow17,
           {
-            id: "test",
-            style: { marginTop: "6px" },
-            itemId: "id",
-            tableCaption: "Prefix table",
-            loading,
-            items: ipBlocks,
-            columns,
-            pagination,
-            sorting: true
+            error: false,
+            isInvalid: false,
+            id: name,
+            children: /* @__PURE__ */ jsx130(BoolField, { name: "enabled", readOnly })
           }
-        )
+        ) }),
+        enabled && (fields == null ? void 0 : fields.filter((field) => field !== "enabled").map((field) => /* @__PURE__ */ jsx130(EuiFlexItem20, { children: /* @__PURE__ */ jsx130(AutoField4, __spreadValues({ name: field }, itemProps)) }, field)))
       ] })
-    ] });
-  }
-};
-IpPrefixTableField.contextType = ApiClientContext;
+    })
+  );
+}
+var OptGroupField = connectField25(OptGroup);
 
-// src/components/WfoForms/formFields/SplitPrefix.tsx
-var import_lodash7 = __toESM(require_lodash(), 1);
-import React32 from "react";
+// src/components/WfoForms/formFields/SubscriptionField.tsx
+var import_get4 = __toESM(require_get(), 1);
 import ReactSelect5 from "react-select";
-import { EuiFlexItem as EuiFlexItem21 } from "@elastic/eui";
-
-// src/components/WfoForms/formFields/SplitPrefixStyling.ts
-import { css as css18 } from "@emotion/react";
-var splitPrefixStyling = css18`
-    section.split-prefix {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        width: 100%;
-        height: 80;
-    }
-`;
+import { useTranslations as useTranslations36 } from "next-intl";
+import {
+  connectField as connectField26,
+  filterDOMProps as filterDOMProps26,
+  joinName as joinName9,
+  useField as useField8,
+  useForm as useForm8
+} from "uniforms";
+import {
+  EuiButtonIcon as EuiButtonIcon3,
+  EuiFlexGroup as EuiFlexGroup14,
+  EuiFlexItem as EuiFlexItem21,
+  EuiFormRow as EuiFormRow18,
+  EuiText as EuiText27
+} from "@elastic/eui";
 
-// src/components/WfoForms/formFields/SplitPrefix.tsx
-import { jsx as jsx130, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
-var SplitPrefix = class extends React32.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      subnets: [],
-      desiredPrefixlen: 0
-    };
-    this.changePrefixLength = (e) => {
-      const { subnet, prefixlen } = __spreadValues({}, this.props);
-      const desiredPrefixlen = e == null ? void 0 : e.value;
-      if (desiredPrefixlen) {
-        this.fetchFreePrefixes(subnet, prefixlen, desiredPrefixlen);
-      }
-    };
-    this.selectSubnet = (e) => {
-      var _a;
-      this.props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
-    };
+// src/hooks/deprecated/useGetSubscriptionDropdownOptions.ts
+import { isError as isError2 } from "react-query";
+var useGetSubscriptionDropdownOptions = (tags = [], statuses = ["active"]) => {
+  const tagValue = tags.join("-");
+  const statusValue = statuses.join("-");
+  const filters = [];
+  if (tagValue) {
+    filters.push({
+      field: "tag",
+      value: tagValue
+    });
   }
-  fetchFreePrefixes(subnet, prefixlen, desiredPrefixlen) {
-    this.context.apiClient.free_subnets(subnet, prefixlen, desiredPrefixlen).then((result) => {
-      const subnets = result.filter(
-        (x) => parseInt(x.split("/")[1], 10) === desiredPrefixlen
-      );
-      this.setState({
-        subnets,
-        desiredPrefixlen,
-        loading: false
-      });
+  if (statusValue) {
+    filters.push({
+      field: "status",
+      value: statusValue
     });
   }
-  componentDidUpdate(prevProps) {
-    if (this.props.subnet !== prevProps.subnet || this.props.prefixlen !== prevProps.prefixlen) {
-      this.fetchFreePrefixes(
-        this.props.subnet,
-        this.props.prefixlen,
-        this.props.prefixMin
-      );
+  const { data, isFetching, refetch } = useGetSubscriptionsDropdownOptionsQuery({ filterBy: filters });
+  const subscriptions = (() => {
+    if (!isFetching && !isError2(data) && data) {
+      return data.subscriptionDropdownOptions;
     }
-  }
-  componentDidMount() {
-    const { subnet, prefixlen, prefixMin } = __spreadValues({}, this.props);
-    this.fetchFreePrefixes(subnet, prefixlen, prefixMin);
-  }
-  render() {
-    const { id, name, subnet, prefixlen, prefixMin, selectedSubnet } = this.props;
-    const version = subnet.indexOf(":") === -1 ? 4 : 6;
-    const minPrefixLength = version === 4 ? 12 : 32;
-    const minimalSelectablePrefixLength = minPrefixLength > prefixMin ? minPrefixLength : prefixMin;
-    const maximalSelectablePrefixLength = version === 4 ? 32 : minimalSelectablePrefixLength + 12;
-    const { desiredPrefixlen } = this.state;
-    const prefixlengths = (0, import_lodash7.range)(
-      maximalSelectablePrefixLength - minimalSelectablePrefixLength + 1
-    ).map((x) => minimalSelectablePrefixLength + x);
-    const length_options = prefixlengths.map((pl) => ({
-      value: pl,
-      label: pl.toString()
-    }));
-    const length_value = length_options.find(
-      (option) => option.value === desiredPrefixlen
-    );
-    const prefix_options = this.state.subnets.map((sn) => ({
-      label: sn,
-      value: sn
-    }));
-    const prefix_value = prefix_options.find(
-      (option) => option.value === selectedSubnet
-    );
-    return /* @__PURE__ */ jsx130(EuiFlexItem21, { css: splitPrefixStyling, children: /* @__PURE__ */ jsxs78("section", { children: [
-      /* @__PURE__ */ jsxs78("h3", { children: [
-        "Selected prefix: ",
-        subnet,
-        "/",
-        prefixlen
-      ] }),
-      /* @__PURE__ */ jsx130("div", { children: "Desired netmask of the new subnet:" }),
-      /* @__PURE__ */ jsx130(
-        ReactSelect5,
-        {
-          id: `${id}.desired-netmask`,
-          inputId: `${id}.desired-netmask.search`,
-          name: `${name}.desired-netmask`,
-          onChange: this.changePrefixLength,
-          options: length_options,
-          value: length_value
-        }
-      ),
-      this.state.subnets && /* @__PURE__ */ jsxs78("div", { children: [
-        /* @__PURE__ */ jsx130("div", { children: "Desired prefix:" }),
-        /* @__PURE__ */ jsx130(
-          ReactSelect5,
-          {
-            id: `${id}.desired-prefix`,
-            inputId: `${id}.desired-prefix.search`,
-            name: `${name}.desired-prefix`,
-            options: prefix_options,
-            onChange: this.selectSubnet,
-            value: prefix_value
-          }
-        )
-      ] })
-    ] }) });
-  }
+    return [];
+  })();
+  return { isFetching, refetch, subscriptions };
 };
-SplitPrefix.contextType = ApiClientContext;
 
-// src/components/WfoForms/formFields/IpNetworkField.tsx
+// src/components/WfoForms/formFields/SubscriptionFieldStyling.ts
+import { css as css18 } from "@emotion/react";
+var subscriptionFieldStyling = css18`
+    .subscription-field {
+        > div {
+            display: flex;
+
+            .subscription-field-select {
+                width: 100%;
+                margin-left: 5px;
+            }
+        }
+
+        .euiFormRow > .euiFormRow__fieldWrapper > div {
+            display: flex;
+        }
+    }
+
+    // Setup sensible margins for port selectors
+    .subscription-field-disabled {
+        > div {
+            display: flex;
+            .subscription-field-select {
+                margin-left: 0px;
+                margin-top: 5px;
+            }
+        }
+    }
+
+    .reload-subscriptions-icon-button {
+        margin-left: -7px;
+    }
+`;
+
+// src/components/WfoForms/formFields/SubscriptionField.tsx
 import { jsx as jsx131, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
-function IpNetwork(_a) {
+filterDOMProps26.register(
+  "productIds",
+  "excludedSubscriptionIds",
+  "customerId",
+  "customerKey",
+  "visiblePortMode",
+  "bandwidth",
+  "bandwidthKey",
+  "tags",
+  "statuses"
+);
+function SubscriptionFieldDefinition(_a) {
   var _b = _a, {
+    disabled,
     id,
     label,
     description,
@@ -51031,8 +50934,18 @@ function IpNetwork(_a) {
     error,
     showInlineError,
     errorMessage,
-    prefixMin
+    className = "",
+    productIds = [],
+    excludedSubscriptionIds = [],
+    customerId,
+    customerKey,
+    visiblePortMode = "all",
+    bandwidth,
+    bandwidthKey,
+    tags,
+    statuses
   } = _b, props = __objRest(_b, [
+    "disabled",
     "id",
     "label",
     "description",
@@ -51043,82 +50956,189 @@ function IpNetwork(_a) {
     "error",
     "showInlineError",
     "errorMessage",
-    "prefixMin"
+    "className",
+    "productIds",
+    "excludedSubscriptionIds",
+    "customerId",
+    "customerKey",
+    "visiblePortMode",
+    "bandwidth",
+    "bandwidthKey",
+    "tags",
+    "statuses"
   ]);
-  var _a2, _b2;
   const t = useTranslations36("pydanticForms");
-  const [selectedPrefix, setSelectedPrefix] = useState23(
-    void 0
-  );
-  const [manualOverride, setManualOverride] = useState23(false);
-  const usePrefix = (_a2 = selectedPrefix == null ? void 0 : selectedPrefix.prefix) != null ? _a2 : value;
-  const [subnet, netmask] = (_b2 = usePrefix == null ? void 0 : usePrefix.split("/")) != null ? _b2 : ["", ""];
-  const usedPrefixMin = prefixMin != null ? prefixMin : parseInt(netmask, 10) + ((selectedPrefix == null ? void 0 : selectedPrefix.state) === 0 ? 0 : 1);
-  return /* @__PURE__ */ jsx131("section", __spreadProps(__spreadValues({}, filterDOMProps26(props)), { children: /* @__PURE__ */ jsx131(
-    EuiFormRow18,
-    {
-      label,
-      labelAppend: /* @__PURE__ */ jsx131(EuiText27, { size: "m", children: description }),
-      error: showInlineError ? errorMessage : false,
-      isInvalid: error,
-      id,
-      fullWidth: true,
-      children: /* @__PURE__ */ jsx131("section", { className: "ipblock-selector", children: /* @__PURE__ */ jsxs79("div", { id, children: [
-        !prefixMin && /* @__PURE__ */ jsx131(
-          IpPrefixTableField,
-          {
-            id,
-            name,
-            onChange: (prefix) => {
-              if (!readOnly) {
-                if (prefix.state === 0 || prefix.state === 1) {
-                  setSelectedPrefix(prefix);
-                }
-                setManualOverride(false);
-                onChange(prefix.prefix);
-              }
-            },
-            onManualOverride: (prefixString) => {
-              if (!readOnly) {
-                setManualOverride(true);
-                onChange(prefixString);
-              }
-            },
-            selected_prefix_id: selectedPrefix == null ? void 0 : selectedPrefix.id
+  const { theme } = useOrchestratorTheme();
+  const reactSelectInnerComponentStyles = getReactSelectInnerComponentStyles(theme);
+  const { refetch, subscriptions, isFetching } = useGetSubscriptionDropdownOptions(tags, statuses);
+  const nameArray = joinName9(null, name);
+  let parentName = joinName9(nameArray.slice(0, -1));
+  if (parentName === "") {
+    parentName = name;
+  }
+  const parent = useField8(parentName, {}, { absoluteName: true })[0];
+  const { model, schema } = useForm8();
+  const bandWithFromField = bandwidthKey ? (0, import_get4.default)(model, bandwidthKey) || schema.getInitialValue(bandwidthKey, {}) : void 0;
+  const usedBandwidth = bandwidth || bandWithFromField;
+  const usedCustomerId = customerKey ? (0, import_get4.default)(model, customerKey, "nonExistingOrgToFilterEverything") : customerId;
+  const makeLabel = (subscription) => {
+    var _a2;
+    const description2 = subscription.description || t("widgets.subscription.missingDescription");
+    const subscriptionSubstring = subscription.subscriptionId.substring(
+      0,
+      8
+    );
+    if (["Node"].includes(subscription.product.tag)) {
+      const description3 = subscription.description || t("widgets.subscription.missingDescription");
+      return `${subscription.subscriptionId.substring(
+        0,
+        8
+      )} ${description3.trim()}`;
+    } else if ([
+      "SP" /* SP */,
+      "SPNL" /* SPNL */,
+      "AGGSP" /* AGGSP */,
+      "AGGSPNL" /* AGGSPNL */,
+      "MSC" /* MSC */,
+      "MSCNL" /* MSCNL */,
+      "IRBSP" /* IRBSP */
+    ].includes(subscription.product.tag)) {
+      const portMode = getPortMode(subscription.productBlockInstances);
+      const subscriptionTitle = subscription.productBlockInstances[0].productBlockInstanceValues.find(
+        (item) => item.field === "title"
+      );
+      if (subscriptionTitle) {
+        return `${subscriptionSubstring} - ${description2.trim()} - ${subscriptionTitle.value}`;
+      }
+      return `${subscriptionSubstring} ${portMode == null ? void 0 : portMode.toUpperCase()} ${description2.trim()} ${(_a2 = subscription.customer) == null ? void 0 : _a2.fullname}`;
+    } else {
+      return description2.trim();
+    }
+  };
+  const getSubscriptionOptions = () => {
+    const filteredSubscriptions = subscriptions == null ? void 0 : subscriptions.filter((subscription) => {
+      var _a2;
+      if (usedBandwidth) {
+        const portSpeedInput = subscription.fixedInputs.find(
+          (fixedInput) => fixedInput.field === "port_speed"
+        );
+        if (portSpeedInput && parseInt(portSpeedInput.value.toString(), 10) < parseInt(usedBandwidth.toString(), 10)) {
+          return false;
+        }
+      }
+      if (!usedBandwidth && productIds && productIds.length > 0 && !productIds.includes(subscription.product.productId)) {
+        return false;
+      }
+      if (!usedBandwidth && !productIds && tags && (tags == null ? void 0 : tags.length) > 0 && !tags.includes(subscription.product.tag)) {
+        return false;
+      }
+      if (excludedSubscriptionIds && excludedSubscriptionIds.length > 0 && excludedSubscriptionIds.includes(subscription.subscriptionId)) {
+        return false;
+      }
+      if (visiblePortMode !== "all") {
+        const portMode = getPortMode(
+          subscription.productBlockInstances
+        );
+        if (visiblePortMode === "normal" && !["tagged" /* TAGGED */, "untagged" /* UNTAGGED */, void 0].includes(
+          portMode
+        )) {
+          return false;
+        } else if (portMode !== visiblePortMode && visiblePortMode !== "normal") {
+          return false;
+        }
+      }
+      if (usedCustomerId && ((_a2 = subscription.customer) == null ? void 0 : _a2.customerId) !== usedCustomerId) {
+        return false;
+      }
+      if (parentName !== name) {
+        if (parent.fieldType === Array && // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
+        // TODO: Figure out why this is so
+        parent.uniqueItems) {
+          const allValues = (0, import_get4.default)(model, parentName, []);
+          const chosenValues = allValues.filter(
+            (_item, index) => index.toString() !== nameArray[nameArray.length - 1]
+          );
+          if (!chosenValues.includes(subscription.subscriptionId)) {
+            return false;
           }
-        ),
-        usePrefix && !manualOverride && /* @__PURE__ */ jsx131(
-          SplitPrefix,
-          {
-            id,
-            name,
-            subnet,
-            prefixlen: parseInt(netmask, 10),
-            prefixMin: usedPrefixMin,
-            onChange: (prefix) => {
-              if (!readOnly) {
-                onChange(prefix);
+        }
+      }
+      return true;
+    });
+    return filteredSubscriptions ? filteredSubscriptions.map((subscription) => ({
+      label: makeLabel(subscription),
+      value: subscription.subscriptionId
+    })) : [];
+  };
+  const options = getSubscriptionOptions();
+  const selectedValue = options.find(
+    (option) => option.value === value
+  );
+  const isDisabled = disabled || readOnly || isFetching;
+  return /* @__PURE__ */ jsx131(EuiFlexItem21, { css: subscriptionFieldStyling, grow: 1, children: /* @__PURE__ */ jsx131(
+    "section",
+    __spreadProps(__spreadValues({}, filterDOMProps26(props)), {
+      className: `${className} subscription-field${disabled ? "-disabled" : ""}`,
+      children: /* @__PURE__ */ jsx131(
+        EuiFormRow18,
+        {
+          label,
+          labelAppend: /* @__PURE__ */ jsx131(EuiText27, { size: "m", children: description }),
+          error: showInlineError ? errorMessage : false,
+          isInvalid: error,
+          id,
+          fullWidth: true,
+          children: /* @__PURE__ */ jsxs79("div", { children: [
+            !disabled && /* @__PURE__ */ jsx131(
+              EuiFlexGroup14,
+              {
+                alignItems: "center",
+                gutterSize: "none",
+                responsive: false,
+                children: /* @__PURE__ */ jsx131(
+                  EuiButtonIcon3,
+                  {
+                    className: "reload-subscriptions-icon-button",
+                    id: `refresh-icon-${id}`,
+                    "aria-label": `reload-${label}`,
+                    iconType: "refresh",
+                    iconSize: "l",
+                    disabled: isDisabled,
+                    onClick: () => {
+                      !isDisabled ? refetch() : null;
+                    }
+                  }
+                )
               }
-            },
-            selectedSubnet: usePrefix
-          }
-        ),
-        usePrefix && manualOverride && /* @__PURE__ */ jsx131(
-          EuiCallOut2,
-          {
-            title: t(
-              "widgets.ipvAnyNetworkField.manuallySelectedPrefix"
             ),
-            color: "primary",
-            iconType: "check",
-            children: /* @__PURE__ */ jsx131("p", { children: value })
-          }
-        )
-      ] }) })
-    }
-  ) }));
+            /* @__PURE__ */ jsx131(
+              ReactSelect5,
+              {
+                id,
+                inputId: `${id}.search`,
+                name,
+                onChange: (option) => {
+                  onChange(option == null ? void 0 : option.value);
+                },
+                options,
+                value: selectedValue,
+                isSearchable: true,
+                isClearable: false,
+                placeholder: isFetching ? t("widgets.subscription.loading") : t("widgets.subscription.placeholder"),
+                isDisabled,
+                styles: reactSelectInnerComponentStyles,
+                className: "subscription-field-select"
+              }
+            )
+          ] })
+        }
+      )
+    })
+  ) });
 }
-var IpNetworkField = connectField26(IpNetwork, { kind: "leaf" });
+var SubscriptionField = connectField26(SubscriptionFieldDefinition, {
+  kind: "leaf"
+});
 
 // src/components/WfoForms/formFields/SummaryField.tsx
 import { connectField as connectField27, filterDOMProps as filterDOMProps27 } from "uniforms";
@@ -52014,6 +52034,7 @@ import { EuiButtonGroup, EuiPopover as EuiPopover4 } from "@elastic/eui";
 import { jsx as jsx143 } from "@emotion/react/jsx-runtime";
 var WfoDropdownButton = ({
   label,
+  isDisabled = false,
   children
 }) => {
   const [isHovered, setIsHovered] = useState27(false);
@@ -52057,7 +52078,8 @@ var WfoDropdownButton = ({
           buttonSize: "m",
           legend: "Buttons",
           options: buttonOptions,
-          onChange: onButtonClick
+          onChange: onButtonClick,
+          isDisabled
         }
       ),
       isOpen: isPopoverOpen,
@@ -54219,10 +54241,6 @@ var WfoStartProcessPage = ({
         (result) => {
           const process2 = result;
           if (process2.id) {
-            console.log(
-              "resolver successfullly!: ",
-              process2.id
-            );
             const basePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
             router.push(`${basePath}/${process2.id}`);
           }
@@ -57143,6 +57161,7 @@ export {
   ConfirmationDialogContextWrapper,
   ConfirmationDialogProvider,
   ConnectedSelectField,
+  ContactPersonAutocomplete,
   ContactPersonNameField,
   CreateForm,
   CustomerField,
@@ -57192,10 +57211,12 @@ export {
   PolicyContext,
   PolicyContextProvider,
   PolicyResource,
+  PortMode,
   ProcessDoneStatuses,
   ProcessStatus,
   ProductField,
   ProductLifecycleStatus,
+  ProductTag,
   RENDER_ALL,
   RESOURCE_TYPE_FIELD_DESCRIPTION,
   RESOURCE_TYPE_FIELD_ID,
@@ -57377,13 +57398,17 @@ export {
   getSortDirectionFromString,
   getStatusBadgeColor,
   getStepContent,
+  getStyles9 as getStyles,
   getTableConfigFromLocalStorage,
   getTasksListTabTypeFromString,
   getTypedFieldFromObject,
   getWfoBasicTableStyles,
   getWorkflowTargetColor,
   getWorkflowTargetIconContent,
+  imsPortIdFieldStyling,
   initiateCsvFileDownload,
+  ipPrefixTableFieldStyling,
+  ipamStates,
   isToday,
   isUuid4,
   isValidLocalStorageTableConfig,
@@ -57413,6 +57438,7 @@ export {
   setTableConfigToLocalStorage,
   snakeToHuman,
   snakeToKebab,
+  splitPrefixStyling,
   stop,
   subscriptionDetailQuery,
   subscriptionsDropdownOptionsQuery,