@isettingkit/business-rules 0.2.2 → 1.0.1

package/dist/index.es.js

@@ -1,192 +1,78 @@
-import { jsxs as u, Fragment as D, jsx as a } from "react/jsx-runtime";
-import { useFormik as le } from "formik";
-import { string as j, mixed as X, object as L, number as z, lazy as P, date as G } from "yup";
-import { ValueDataType as N, DecisionConditionRender as Q, ValueHowToSetUp as R } from "@isettingkit/input";
-import { inube as E, Stack as h, Toggle as Z, Text as v, useMediaQuery as M, Checkbox as se, Date as Y, Divider as S, Button as $, SkeletonLine as A, Icon as ee, Blanket as de, Grid as ce } from "@inubekit/inubekit";
-import y, { keyframes as he } from "styled-components";
-import { useState as V, useEffect as ue } from "react";
-import { DecisionViewConditionRenderer as O } from "@isettingkit/view";
-import { MdOutlineDelete as pe, MdClear as ge, MdAdd as te } from "react-icons/md";
-import { createPortal as me } from "react-dom";
-const be = (t) => ({
-  schema: j().required("Required").test(
-    "non-empty",
-    "Value cannot be empty",
-    (e) => e != null && e.trim() !== ""
-  ),
-  value: t
-}), Te = (t) => ({
-  schema: X().test(
-    "isArrayOrString",
-    "Must be an array of strings/numbers or a single string",
-    (e) => Array.isArray(e) ? e.every(
-      (n) => typeof n == "string" || typeof n == "number"
-    ) : typeof e == "string"
-  ),
-  value: t
-}), fe = (t) => ({
-  schema: X().test(
-    "isArrayOrString",
-    "Must be an array of strings/numbers or a single string",
-    (e) => Array.isArray(e) ? e.every(
-      (n) => typeof n == "string" || typeof n == "number"
-    ) : typeof e == "string"
-  ),
-  value: t
-}), ye = (t) => {
-  const e = (t == null ? void 0 : t.from) ?? 0, n = (t == null ? void 0 : t.to) ?? 0;
-  return {
-    schema: L({
-      from: z().required("Range From is required").max(n, "'Range From' cannot be greater than 'Range To'").min(0, "'Range From' cannot be less than 0"),
-      to: z().min(0, "To value must be greater than or equal to 0").required("To value is required").test(
-        "is-greater",
-        "To value must be greater than From value",
-        function(i) {
-          const { from: o } = this.parent;
-          return i > o;
-        }
-      )
-    }),
-    value: { from: e, to: n }
-  };
-}, _ = (t, e) => e === N.PERCENTAGE ? {
-  schema: z().required("Percentage is required").min(0, "Percentage cannot be less than 0").max(100, "Percentage cannot be greater than 100"),
-  value: t
-} : {
-  schema: j().required("Required"),
-  value: t
-};
-var f = /* @__PURE__ */ ((t) => (t.EQUAL = "EqualTo", t.GREATER_THAN = "GreaterThan", t.LESS_THAN = "LessThan", t.LIST_OF_VALUES = "ListOfValues", t.LIST_OF_VALUES_MULTI = "ListOfValuesMulti", t.RANGE = "Range", t))(f || {});
-const ve = {
-  [f.LIST_OF_VALUES]: Te,
-  [f.LIST_OF_VALUES_MULTI]: fe,
-  [f.RANGE]: ye,
-  [f.GREATER_THAN]: _,
-  [f.LESS_THAN]: _,
-  [f.EQUAL]: _
-}, W = (t) => ve[t] || be;
-function xe({
-  decision: t,
-  onSubmitEvent: e,
-  textValues: n
-}) {
-  const i = {
-    ruleName: t.ruleName || "",
-    decisionDataType: t.decisionDataType || N.ALPHABETICAL,
-    howToSetTheDecision: t.howToSetTheDecision || "",
-    value: t.value || "",
-    effectiveFrom: t.effectiveFrom || "",
-    validUntil: t.validUntil || "",
-    toggleNone: !0,
-    conditionsThatEstablishesTheDecision: {},
-    checkClosed: !1,
-    terms: !0
-  };
-  let o;
-  const r = {
-    ruleName: j().required("Name is required"),
-    value: P(() => W(
-      o.values.howToSetTheDecision
-    )(
-      o.values.value,
-      o.values.decisionDataType
-    ).schema),
-    conditionsThatEstablishesTheDecision: P((d, { parent: s }) => {
-      var b;
-      if ((s == null ? void 0 : s.toggleNone) && Object.keys(s.conditionsThatEstablishesTheDecision || {}).length > 0) return L().shape({});
-      const l = (b = t.conditionsThatEstablishesTheDecision) == null ? void 0 : b.reduce(
-        (T, g) => {
-          if (o.values.conditionsThatEstablishesTheDecision[g.conditionName] !== void 0) {
-            const C = W(
-              g.howToSetTheCondition
-            );
-            T[g.conditionName] = C(
-              g.value,
-              g.conditionDataType
-            ).schema;
+import { jsx as a, jsxs as u, Fragment as E } from "react/jsx-runtime";
+import { MdOutlineDelete as he, MdClear as Z, MdAdd as ee, MdOutlineFilterAltOff as ue, MdOutlineFilterAlt as pe } from "react-icons/md";
+import { inube as v, Stack as h, Divider as D, Icon as O, Text as y, SkeletonLine as A, useMediaQuery as I, Blanket as te, Button as N, Grid as ne, Box as ge, Tag as me, Checkpicker as be, Toggle as ie, Checkbox as Te, Date as G } from "@inubekit/inubekit";
+import f, { keyframes as fe } from "styled-components";
+import { ValueDataType as k, ValueHowToSetUp as L, DecisionConditionRender as Q } from "@isettingkit/input";
+import { DecisionViewConditionRenderer as _ } from "@isettingkit/view";
+import { createPortal as ae } from "react-dom";
+import { useFormik as xe } from "formik";
+import { string as B, mixed as oe, object as M, number as q, lazy as Y, date as W } from "yup";
+import { useState as V, useEffect as ye } from "react";
+const ve = f.div`
+  border-radius: 8px;
+  border: 1px solid ${v.palette.neutral.N30};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  // height: 364px;
+  // width: 332px;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
+`;
+f.div`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #c1c7d0;
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #ebecf0;
+    border-radius: 8px;
+  }
+`;
+const H = (t) => {
+  const { children: e, controls: n = !0, handleDelete: i, id: o } = t;
+  return /* @__PURE__ */ a(ve, { children: /* @__PURE__ */ u(h, { direction: "column", gap: "16px", padding: "12px 16px", children: [
+    e,
+    n && /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ a(D, {}),
+      /* @__PURE__ */ a(h, { gap: "16px", justifyContent: "end", children: /* @__PURE__ */ a(
+        O,
+        {
+          cursorHover: !0,
+          appearance: "danger",
+          size: "24px",
+          icon: /* @__PURE__ */ a(he, {}),
+          onClick: () => {
+            i(o);
           }
-          return T;
-        },
-        {}
-      );
-      return L(l).test(
-        "at-least-one-condition",
-        "It must be at least one condition in order for the decision to be validated correctly.",
-        (T) => T ? Object.values(T).some(
-          (g) => g != null && g !== ""
-        ) : !1
-      );
-    })
-  };
-  n.terms && (r.effectiveFrom = G().required(
-    "effective From date is required"
-  ), r.validUntil = G().when(
-    "checkClosed",
-    (d, s, { parent: c }) => (c == null ? void 0 : c.checkClosed) ? s.required("valid Until date is required").test(
-      "is-after-startDate",
-      "valid Until date must be greater than or equal to Start date",
-      function(b) {
-        const T = this.parent.effectiveFrom;
-        return !T || !b ? !0 : new Date(b) >= new Date(T);
-      }
-    ) : s.notRequired()
-  ));
-  const p = L(r);
-  return o = le({
-    initialValues: i,
-    validationSchema: p,
-    validateOnBlur: !0,
-    onSubmit: (d) => {
-      var c;
-      const s = {
-        ...t,
-        ruleName: d.ruleName,
-        decisionDataType: d.decisionDataType,
-        howToSetTheDecision: d.howToSetTheDecision,
-        value: d.value,
-        effectiveFrom: d.effectiveFrom,
-        validUntil: d.validUntil,
-        conditionsThatEstablishesTheDecision: (c = t.conditionsThatEstablishesTheDecision) == null ? void 0 : c.filter((l) => {
-          const b = d.conditionsThatEstablishesTheDecision[l.conditionName];
-          return b != null && b !== "";
-        }).map((l) => ({
-          ...l,
-          value: d.conditionsThatEstablishesTheDecision[l.conditionName]
-        }))
-      };
-      e(s);
-    }
-  }), { formik: o, handleToggleNoneChange: (d) => {
-    var s;
-    o.setFieldValue("toggleNone", d), (s = t.conditionsThatEstablishesTheDecision) == null || s.forEach((c) => {
-      if (d)
-        o.setFieldValue(
-          `conditionsThatEstablishesTheDecision.${c.conditionName}`,
-          void 0
-        );
-      else {
-        const l = c.howToSetTheCondition === f.LIST_OF_VALUES_MULTI ? [] : "";
-        o.setFieldValue(
-          `conditionsThatEstablishesTheDecision.${c.conditionName}`,
-          l
-        );
-      }
-    });
-  } };
-}
-const De = y.div`
+        }
+      ) })
+    ] })
+  ] }) });
+}, J = f.div`
   & > div {
     border-radius: 8px;
     border: 1px solid
       ${({ theme: t }) => {
   var e, n;
-  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || E.palette.neutral.N30;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || v.palette.neutral.N30;
 }};
   }
-`, we = y.div`
+`, K = f.div`
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  padding-right: 4px;
   &::-webkit-scrollbar {
     width: 4px;
   }
@@ -200,373 +86,84 @@ const De = y.div`
     background-color: #ebecf0;
     border-radius: 8px;
   }
-`, Ce = (t) => {
+`, Ce = (t) => t.value, we = (t) => t.value, Se = (t) => t.value, De = (t) => ({
+  from: t.from ?? "",
+  to: t.to ?? ""
+}), Ee = (t) => t.value, Ne = (t) => t.value, ke = (t) => t.value;
+var x = /* @__PURE__ */ ((t) => (t.EQUAL = "EqualTo", t.GREATER_THAN = "GreaterThan", t.LESS_THAN = "LessThan", t.LIST_OF_VALUES = "ListOfValues", t.LIST_OF_VALUES_MULTI = "ListOfValuesMulti", t.RANGE = "Range", t))(x || {});
+const Fe = {
+  [x.LIST_OF_VALUES]: we,
+  [x.LIST_OF_VALUES_MULTI]: Se,
+  [x.RANGE]: De,
+  [x.GREATER_THAN]: Ee,
+  [x.LESS_THAN]: Ne,
+  [x.EQUAL]: ke
+}, $ = (t) => {
+  const e = t == null ? void 0 : t.value, n = typeof e == "object" && e !== null && !Array.isArray(e), i = Fe[t == null ? void 0 : t.howToSetTheDecision] || Ce;
+  return n && i(e) || e || void 0;
+}, Ae = (t) => {
   const {
-    checked: e,
-    children: n,
-    handleToggleChange: i,
-    id: o,
-    labelToggle: r,
-    name: p,
-    valueToggle: m = ""
-  } = t, [d, s] = V(e), c = (l) => {
-    s(l.target.checked), i(l);
-  };
-  return ue(() => {
-    s(e);
-  }, [e]), /* @__PURE__ */ u(D, { children: [
-    /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
-      Z,
+    loading: e,
+    textValues: n,
+    decision: i,
+    decisionMapper: o,
+    visibleConditions: r,
+    decisionDateElement: p,
+    skeleton: g,
+    terms: s
+  } = t;
+  return e ? /* @__PURE__ */ u(h, { direction: "column", gap: "12px", children: [
+    /* @__PURE__ */ a(h, { direction: "column", alignItems: "center", children: /* @__PURE__ */ a(
+      _,
       {
-        checked: d,
-        id: o,
-        name: p,
-        onChange: c,
-        size: "small",
-        value: m,
-        children: /* @__PURE__ */ a(v, { size: "medium", type: "label", weight: "bold", children: r })
+        element: o,
+        valueData: $(
+          o
+        ),
+        type: "decision"
       }
-    ) }),
-    d && /* @__PURE__ */ a(D, { children: n })
-  ] });
-}, Se = (t) => {
-  const {
-    onHandleStartChange: e,
-    onHandleEndChange: n,
-    onCheckClosedChange: i,
-    labelStart: o,
-    labelEnd: r,
-    checkedClosed: p = !1,
-    required: m = !1,
-    valueStart: d = "",
-    valueEnd: s = "",
-    messageStart: c = "",
-    messageEnd: l = "",
-    statusStart: b = "pending",
-    statusEnd: T = "pending"
-  } = t, [g, w] = V(p), [C, k] = V(d), [U, I] = V(s), B = ({ target: x }) => {
-    w(x.checked), i && i(x.checked);
-  }, ae = (x) => {
-    k(x.target.value), e(x);
-  }, oe = (x) => {
-    I(x.target.value), n(x);
-  }, re = M("(max-width: 400px)");
-  return /* @__PURE__ */ u(D, { children: [
-    /* @__PURE__ */ u(h, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
-      /* @__PURE__ */ a(
-        v,
-        {
-          appearance: "gray",
-          margin: "10px 0",
-          size: "medium",
-          type: "title",
-          weight: "bold",
-          children: "Vigencia"
-        }
-      ),
-      /* @__PURE__ */ a(
-        h,
-        {
-          alignContent: "center",
-          justifyContent: "center",
-          wrap: "wrap",
-          gap: "4px",
-          children: /* @__PURE__ */ a(
-            se,
-            {
-              label: "Cerrada",
-              onChange: B,
-              checked: g,
-              value: ""
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ u(
+    ) }, i.ruleName),
+    /* @__PURE__ */ a(D, { dashed: !0 }),
+    /* @__PURE__ */ a(K, { children: /* @__PURE__ */ u(
       h,
       {
-        direction: re ? "column" : "row",
+        direction: "column",
+        gap: "12px",
         justifyContent: "space-between",
-        gap: "24px",
+        height: "203px",
         children: [
           /* @__PURE__ */ a(
-            Y,
+            y,
             {
-              id: "dateStart",
-              label: o,
-              onChange: ae,
-              value: C,
-              required: m,
-              size: "compact",
-              status: b,
-              message: c
+              type: "label",
+              size: "large",
+              appearance: "dark",
+              weight: "bold",
+              textAlign: "center",
+              children: n.factsThatConditionIt
             }
           ),
-          g && /* @__PURE__ */ a(
-            Y,
+          r.map((d) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ a(h, { direction: "column", padding: "8px", children: /* @__PURE__ */ a(
+            _,
             {
-              id: "dateEnd",
-              label: r,
-              onChange: oe,
-              value: U,
-              required: m,
-              size: "compact",
-              status: T,
-              message: l
+              element: { ...d, value: d.value },
+              valueData: $(
+                d
+              )
             }
-          )
-        ]
-      }
-    )
-  ] });
-}, Ee = (t) => {
-  const {
-    formik: e,
-    textValues: n,
-    onCancel: i,
-    visibleConditions: o,
-    normalizedDecision: r,
-    handleToggleNoneChange: p,
-    handleConditionToggleChange: m,
-    showConditionsError: d,
-    termStartStatus: s,
-    termEndStatus: c
-  } = t;
-  return /* @__PURE__ */ a("form", { onSubmit: e.handleSubmit, children: /* @__PURE__ */ u(h, { direction: "column", gap: "24px", children: [
-    Q({
-      condition: r,
-      formik: e,
-      isDecision: !0
-    }),
-    /* @__PURE__ */ a(S, { dashed: !0 }),
-    /* @__PURE__ */ a(De, { children: /* @__PURE__ */ a(we, { children: /* @__PURE__ */ u(
-      h,
-      {
-        direction: "column",
-        padding: "6px 12px",
-        gap: "16px",
-        height: "272px",
-        children: [
-          /* @__PURE__ */ u(
-            h,
-            {
-              justifyContent: "space-between",
-              alignItems: "center",
-              gap: "64px",
-              children: [
-                /* @__PURE__ */ a(v, { type: "title", size: "small", weight: "bold", appearance: "gray", children: n.factsThatConditionIt }),
-                /* @__PURE__ */ a(
-                  Z,
-                  {
-                    id: "toggleNone",
-                    onChange: () => p(!e.values.toggleNone),
-                    checked: e.values.toggleNone,
-                    size: "small",
-                    children: /* @__PURE__ */ a(v, { as: "span", size: "medium", type: "label", weight: "bold", children: n.none })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ a(h, { direction: "column", gap: "20px", children: o == null ? void 0 : o.map((l) => /* @__PURE__ */ a(
-            Ce,
-            {
-              id: `toggle-${l.conditionName}`,
-              name: `toggle.${l.conditionName}`,
-              labelToggle: l.labelName,
-              checked: !e.values.toggleNone && e.values.conditionsThatEstablishesTheDecision[l.conditionName] !== void 0,
-              handleToggleChange: (b) => m(
-                l.conditionName,
-                l.howToSetTheCondition === f.LIST_OF_VALUES_MULTI
-              )(b.target.checked),
-              children: Q({ condition: l, formik: e })
-            },
-            l.conditionName
-          )) })
-        ]
-      }
-    ) }) }),
-    n.terms && /* @__PURE__ */ u(D, { children: [
-      /* @__PURE__ */ a(S, { dashed: !0 }),
-      /* @__PURE__ */ a(
-        Se,
-        {
-          labelStart: n.termStart,
-          labelEnd: n.termEnd,
-          valueStart: e.values.effectiveFrom,
-          valueEnd: e.values.validUntil,
-          messageStart: e.errors.effectiveFrom,
-          messageEnd: e.errors.validUntil,
-          statusStart: s,
-          statusEnd: c,
-          onHandleStartChange: (l) => e.setFieldValue("effectiveFrom", l.target.value),
-          onHandleEndChange: (l) => e.setFieldValue("validUntil", l.target.value),
-          onCheckClosedChange: (l) => {
-            e.setFieldValue("checkClosed", l), l && e.setFieldValue("validUntil", "");
-          },
-          checkedClosed: e.values.checkClosed
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a(S, {}),
-    d && /* @__PURE__ */ a(v, { type: "label", size: "medium", appearance: "danger", children: String(e.errors.conditionsThatEstablishesTheDecision) }),
-    /* @__PURE__ */ u(h, { direction: "row", justifyContent: "end", gap: "16px", children: [
-      /* @__PURE__ */ a($, { appearance: "gray", onClick: i, children: n.cancel }),
-      /* @__PURE__ */ a($, { type: "submit", children: n.confirm })
-    ] })
-  ] }) });
-}, Ne = (t) => {
-  var T;
-  const { decision: e, onSubmitEvent: n, textValues: i, onCancel: o } = t, { formik: r, handleToggleNoneChange: p } = xe({
-    decision: e,
-    onSubmitEvent: n,
-    textValues: i
-  }), m = {
-    ruleName: e.ruleName,
-    labelName: e.labelName,
-    howToSetTheCondition: e.howToSetTheDecision,
-    decisionDataType: e.decisionDataType,
-    listOfPossibleValues: e.listOfPossibleValues
-  }, d = ((T = e.conditionsThatEstablishesTheDecision) == null ? void 0 : T.filter(
-    (g) => !g.hidden
-  )) || [], s = !!r.errors.conditionsThatEstablishesTheDecision && r.submitCount > 0, c = r.touched.effectiveFrom ? r.errors.effectiveFrom ? "invalid" : "valid" : void 0, l = r.touched.validUntil ? r.errors.validUntil ? "invalid" : "valid" : void 0;
-  return /* @__PURE__ */ a(
-    Ee,
-    {
-      formik: r,
-      onCancel: o,
-      textValues: i,
-      decision: e,
-      visibleConditions: d,
-      normalizedDecision: m,
-      handleToggleNoneChange: p,
-      handleConditionToggleChange: (g, w) => (C) => {
-        if (!C)
-          r.setFieldValue(
-            `conditionsThatEstablishesTheDecision.${g}`,
-            void 0
-          ), r.setFieldTouched(
-            `conditionsThatEstablishesTheDecision.${g}`,
-            !1,
-            !1
-          );
-        else {
-          const k = w ? [] : "";
-          r.setFieldValue(
-            `conditionsThatEstablishesTheDecision.${g}`,
-            k
-          );
-        }
-      },
-      showConditionsError: s,
-      termStartStatus: c,
-      termEndStatus: l
-    }
-  );
-}, J = y.div`
-  & > div {
-    border-radius: 8px;
-    border: 1px solid
-      ${({ theme: t }) => {
-  var e, n;
-  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || E.palette.neutral.N30;
-}};
-  }
-`, K = y.div`
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 4px;
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #c1c7d0;
-    border-radius: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #ebecf0;
-    border-radius: 8px;
-  }
-`, ke = (t) => t.value, Ae = (t) => t.value, Fe = (t) => t.value, Ie = (t) => ({
-  from: t.from ?? "",
-  to: t.to ?? ""
-}), Re = (t) => t.value, Le = (t) => t.value, Ve = (t) => t.value, Me = {
-  [f.LIST_OF_VALUES]: Ae,
-  [f.LIST_OF_VALUES_MULTI]: Fe,
-  [f.RANGE]: Ie,
-  [f.GREATER_THAN]: Re,
-  [f.LESS_THAN]: Le,
-  [f.EQUAL]: Ve
-}, F = (t) => {
-  const e = t == null ? void 0 : t.value, n = typeof e == "object" && e !== null && !Array.isArray(e), i = Me[t == null ? void 0 : t.howToSetTheDecision] || ke;
-  return n && i(e) || e || void 0;
-}, Ue = (t) => {
-  const {
-    loading: e,
-    textValues: n,
-    decision: i,
-    decisionMapper: o,
-    visibleConditions: r,
-    decisionDateElement: p,
-    skeleton: m,
-    terms: d
-  } = t;
-  return e ? /* @__PURE__ */ u(h, { direction: "column", gap: "12px", children: [
-    /* @__PURE__ */ a(h, { direction: "column", alignItems: "center", children: /* @__PURE__ */ a(
-      O,
-      {
-        element: o,
-        valueData: F(
-          o
-        ),
-        type: "decision"
-      }
-    ) }, i.ruleName),
-    /* @__PURE__ */ a(S, { dashed: !0 }),
-    /* @__PURE__ */ a(K, { children: /* @__PURE__ */ u(
-      h,
-      {
-        direction: "column",
-        gap: "12px",
-        justifyContent: "space-between",
-        height: "203px",
-        children: [
-          /* @__PURE__ */ a(
-            v,
-            {
-              type: "label",
-              size: "large",
-              appearance: "dark",
-              weight: "bold",
-              textAlign: "center",
-              children: n.factsThatConditionIt
-            }
-          ),
-          r.map((s) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ a(h, { direction: "column", padding: "8px", children: /* @__PURE__ */ a(
-            O,
-            {
-              element: { ...s, value: s.value },
-              valueData: F(
-                s
-              )
-            }
-          ) }) }, s.conditionName)),
-          d && /* @__PURE__ */ u(D, { children: [
-            /* @__PURE__ */ a(S, { dashed: !0 }),
-            p && /* @__PURE__ */ a(
-              O,
-              {
-                element: p.element,
-                valueData: p.valueData,
-                type: "decision"
-              },
-              n.terms
-            )
-          ] })
+          ) }) }, d.conditionName)),
+          s && /* @__PURE__ */ u(E, { children: [
+            /* @__PURE__ */ a(D, { dashed: !0 }),
+            p && /* @__PURE__ */ a(
+              _,
+              {
+                element: p.element,
+                valueData: p.valueData,
+                type: "decision"
+              },
+              n.terms
+            )
+          ] })
         ]
       }
     ) })
@@ -576,7 +173,7 @@ const De = y.div`
       /* @__PURE__ */ a(A, { animated: !0, width: "85px" })
     ] }, "loading"),
     /* @__PURE__ */ u(h, { direction: "column", gap: "12px", alignItems: "center", children: [
-      /* @__PURE__ */ a(S, { dashed: !0 }),
+      /* @__PURE__ */ a(D, { dashed: !0 }),
       /* @__PURE__ */ a(A, { animated: !0, width: "150px" })
     ] }),
     /* @__PURE__ */ a(K, { children: /* @__PURE__ */ a(
@@ -586,7 +183,7 @@ const De = y.div`
         gap: "12px",
         justifyContent: "space-between",
         height: "203px",
-        children: m.map((s, c) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ u(
+        children: g.map((d, c) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ u(
           h,
           {
             direction: "column",
@@ -602,118 +199,67 @@ const De = y.div`
       }
     ) })
   ] });
-}, ne = (t) => {
+}, re = (t) => {
   var l;
   const { decision: e, loading: n = !1, textValues: i } = t, o = !!(e != null && e.effectiveFrom), r = !!(e != null && e.validUntil), p = o && r ? {
     element: {
       labelName: i == null ? void 0 : i.terms,
       value: String(e.effectiveFrom),
-      howToSetTheDecision: R.RANGE,
-      decisionDataType: N.DATE
+      howToSetTheDecision: L.RANGE,
+      decisionDataType: k.DATE
     },
-    valueData: F({
+    valueData: $({
       labelName: i == null ? void 0 : i.terms,
       value: {
         from: String(e.effectiveFrom),
         to: String(e.validUntil)
       },
-      howToSetTheDecision: R.RANGE,
-      decisionDataType: N.DATE
+      howToSetTheDecision: L.RANGE,
+      decisionDataType: k.DATE
     })
   } : o && !r ? {
     element: {
       labelName: i == null ? void 0 : i.terms,
       value: String(e.effectiveFrom),
-      howToSetTheDecision: R.EQUAL,
-      decisionDataType: N.DATE
+      howToSetTheDecision: L.EQUAL,
+      decisionDataType: k.DATE
     },
-    valueData: F({
+    valueData: $({
       labelName: i == null ? void 0 : i.terms,
       value: String(e.effectiveFrom),
-      howToSetTheDecision: R.EQUAL,
-      decisionDataType: N.DATE
+      howToSetTheDecision: L.EQUAL,
+      decisionDataType: k.DATE
     })
-  } : null, m = e ? {
+  } : null, g = e ? {
     labelName: e.labelName || "",
     decisionDataType: e.decisionDataType || "alphabetical",
-    value: F(e),
+    value: $(e),
     howToSetTheDecision: e.howToSetTheDecision || "EqualTo"
-  } : null, d = ((l = e == null ? void 0 : e.conditionsThatEstablishesTheDecision) == null ? void 0 : l.filter(
+  } : null, s = ((l = e == null ? void 0 : e.conditionsThatEstablishesTheDecision) == null ? void 0 : l.filter(
     (b) => !b.hidden
-  )) || [], s = Array.from({ length: 5 });
+  )) || [], d = Array.from({ length: 5 });
   return /* @__PURE__ */ a(
-    Ue,
+    Ae,
     {
-      loading: !!(!n && e && i && m),
+      loading: !!(!n && e && i && g),
       textValues: i,
       decision: e,
-      decisionMapper: m,
-      visibleConditions: d,
+      decisionMapper: g,
+      visibleConditions: s,
       decisionDateElement: p,
-      skeleton: s,
+      skeleton: d,
       terms: !!(i != null && i.terms)
     }
   );
-}, Oe = y.div`
-  border-radius: 8px;
-  border: 1px solid ${E.palette.neutral.N30};
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  // height: 364px;
-  // width: 332px;
-  width: 100%;
-  height: 100%;
-  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
-`;
-y.div`
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #c1c7d0;
-    border-radius: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #ebecf0;
-    border-radius: 8px;
-  }
-`;
-const H = (t) => {
-  const { children: e, controls: n = !0, handleDelete: i, id: o } = t;
-  return /* @__PURE__ */ a(Oe, { children: /* @__PURE__ */ u(h, { direction: "column", gap: "16px", padding: "12px 16px", children: [
-    e,
-    n && /* @__PURE__ */ u(D, { children: [
-      /* @__PURE__ */ a(S, {}),
-      /* @__PURE__ */ a(h, { gap: "16px", justifyContent: "end", children: /* @__PURE__ */ a(
-        ee,
-        {
-          cursorHover: !0,
-          appearance: "danger",
-          size: "24px",
-          icon: /* @__PURE__ */ a(pe, {}),
-          onClick: () => {
-            i(o);
-          }
-        }
-      ) })
-    ] })
-  ] }) });
-}, _e = y.div`
+}, $e = f.div`
   position: relative;
   & > div {
     padding: 24px 16px;
   }
-`, ze = y.div`
+`, Ie = f.div`
   background-color: ${({ theme: t }) => {
   var e, n;
-  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N0) || E.palette.neutral.N0;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N0) || v.palette.neutral.N0;
 }};
   max-width: 450px;
   max-height: 90vh;
@@ -741,24 +287,24 @@ const H = (t) => {
     background-color: #ebecf0;
     border-radius: 8px;
   }
-`, $e = (t) => {
+`, Re = (t) => {
   const { children: e, portalId: n, onCloseModal: i, title: o } = t, r = document.getElementById(n);
   if (!r)
     throw new Error(
       "The portal node is not defined. This can occur when the specific node used to render the portal has not been defined correctly."
     );
-  const p = M("(max-width: 400px)");
-  return me(
-    /* @__PURE__ */ a(_e, { smallScreen: p, children: /* @__PURE__ */ a(de, { children: /* @__PURE__ */ a(ze, { children: /* @__PURE__ */ u(h, { direction: "column", gap: "24px", children: [
+  const p = I("(max-width: 400px)");
+  return ae(
+    /* @__PURE__ */ a($e, { smallScreen: p, children: /* @__PURE__ */ a(te, { children: /* @__PURE__ */ a(Ie, { children: /* @__PURE__ */ u(h, { direction: "column", gap: "24px", children: [
       /* @__PURE__ */ a(h, { direction: "column", gap: "24px", children: /* @__PURE__ */ u(h, { alignItems: "center", justifyContent: "space-between", children: [
-        /* @__PURE__ */ a(v, { type: "title", size: "large", appearance: "dark", weight: "bold", children: o }),
-        /* @__PURE__ */ a(ge, { size: "24px", cursor: "pointer", onClick: i })
+        /* @__PURE__ */ a(y, { type: "title", size: "large", appearance: "dark", weight: "bold", children: o }),
+        /* @__PURE__ */ a(Z, { size: "24px", cursor: "pointer", onClick: i })
       ] }) }),
       e
     ] }) }) }) }),
     r
   );
-}, qe = he`
+}, Le = fe`
   from {
     opacity: 0;
     transform: translateY(20px);
@@ -768,12 +314,12 @@ const H = (t) => {
     transform: translateY(0);
   }
 `;
-y.div`
+f.div`
   border-radius: 8px;
   border: 1px solid
     ${({ theme: t }) => {
   var e, n;
-  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || E.palette.neutral.N30;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || v.palette.neutral.N30;
 }};
   box-sizing: border-box;
   display: flex;
@@ -782,21 +328,21 @@ y.div`
   height: 100%;
   box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
 `;
-y.div`
+f.div`
   & > div {
     border-radius: 8px;
     border: 1px solid
       ${({ theme: t }) => {
   var e, n;
-  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || E.palette.neutral.N30;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || v.palette.neutral.N30;
 }};
   }
 `;
-const je = y.div`
+const Me = f.div`
   & > div {
     background-color: ${({ theme: t }) => {
   var e, n;
-  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N10) || E.palette.neutral.N10;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N10) || v.palette.neutral.N10;
 }};
     justify-content: center;
   }
@@ -804,18 +350,18 @@ const je = y.div`
   width: 100%;
   height: 100%;
   padding-bottom: 12px;
-`, ie = y.div`
+`, le = f.div`
   width: 100%;
   height: 100%;
   & > div {
-    animation: ${qe} 600ms ease-out;
+    animation: ${Le} 600ms ease-out;
   }
-`, He = y.div`
+`, Ve = f.div`
   & > div > div {
     border-radius: 8px;
     box-sizing: border-box;
   }
-`, Be = y.div`
+`, Oe = f.div`
   & > div {
     width: 100%;
     height: 100%;
@@ -836,7 +382,7 @@ const je = y.div`
     }
   }
 `;
-function Pe(t) {
+function Ue(t) {
   const { index: e, handleOpenModal: n } = t;
   return /* @__PURE__ */ a(
     H,
@@ -846,15 +392,15 @@ function Pe(t) {
       },
       handleView: () => n ? n() : null,
       controls: !1,
-      children: /* @__PURE__ */ a(ne, { loading: !0 })
+      children: /* @__PURE__ */ a(re, { loading: !0 })
     },
     `loading-card-${e}`
   );
 }
-function Ge(t) {
+function _e(t) {
   const { decision: e, controls: n, handleOpenModal: i, handleDelete: o, textValues: r } = t;
-  return e ? /* @__PURE__ */ a(ie, { children: /* @__PURE__ */ u(h, { direction: "column", gap: "4px", width: "100%", padding: "0 0 12px 0", children: [
-    /* @__PURE__ */ a(v, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: e.decisionId }),
+  return e ? /* @__PURE__ */ a(le, { children: /* @__PURE__ */ u(h, { direction: "column", gap: "4px", width: "100%", padding: "0 0 12px 0", children: [
+    /* @__PURE__ */ a(y, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: e.decisionId }),
     /* @__PURE__ */ a(
       H,
       {
@@ -862,22 +408,22 @@ function Ge(t) {
         handleDelete: () => o ? o(e.decisionId) : null,
         handleView: () => i ? i(e) : null,
         controls: n,
-        children: /* @__PURE__ */ a(ne, { decision: e, textValues: r })
+        children: /* @__PURE__ */ a(re, { decision: e, textValues: r })
       }
     )
   ] }) }, e.decisionId) : null;
 }
-function Qe(t) {
+function ze(t) {
   const {
     customTitleContentAddCard: e,
     index: n,
     handleOpenModal: i,
     shouldRenderEmptyMessage: o
   } = t, r = e || "Agregar decisión";
-  return /* @__PURE__ */ a(ie, { children: o ? null : /* @__PURE__ */ u(h, { direction: "column", gap: "4px", width: "100%", height: "100%", children: [
-    /* @__PURE__ */ a(v, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: "Nueva decisión" }),
+  return /* @__PURE__ */ a(le, { children: o ? null : /* @__PURE__ */ u(h, { direction: "column", gap: "4px", width: "100%", height: "100%", children: [
+    /* @__PURE__ */ a(y, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: "Nueva decisión" }),
     /* @__PURE__ */ a(
-      je,
+      Me,
       {
         onClick: () => i ? i() : null,
         children: /* @__PURE__ */ a(
@@ -889,8 +435,8 @@ function Qe(t) {
             handleView: () => i ? i() : null,
             controls: !1,
             children: /* @__PURE__ */ u(h, { direction: "column", gap: "12px", alignItems: "center", children: [
-              /* @__PURE__ */ a(ee, { appearance: "gray", icon: /* @__PURE__ */ a(te, {}), size: "35px" }),
-              /* @__PURE__ */ a(v, { appearance: "gray", type: "body", size: "large", children: r })
+              /* @__PURE__ */ a(O, { appearance: "gray", icon: /* @__PURE__ */ a(ee, {}), size: "35px" }),
+              /* @__PURE__ */ a(y, { appearance: "gray", type: "body", size: "large", children: r })
             ] })
           }
         )
@@ -898,14 +444,14 @@ function Qe(t) {
     )
   ] }) }, `add-decision-${n}`);
 }
-const Ye = {
-  loading: Pe,
-  decision: Ge,
-  add: Qe
-}, q = (t) => {
-  const { type: e } = t, n = Ye[e];
+const qe = {
+  loading: Ue,
+  decision: _e,
+  add: ze
+}, j = (t) => {
+  const { type: e } = t, n = qe[e];
   return n ? n(t) : null;
-}, We = (t) => {
+}, je = (t) => {
   const {
     controls: e,
     customTitleContentAddCard: n,
@@ -913,9 +459,9 @@ const Ye = {
     loading: o,
     handleOpenModal: r,
     handleDelete: p,
-    textValues: m
-  } = t, d = o ? Array.from({ length: 3 }).map(
-    (c, l) => q({
+    textValues: g
+  } = t, s = o ? Array.from({ length: 3 }).map(
+    (c, l) => j({
       type: "loading",
       index: l,
       controls: e,
@@ -923,10 +469,10 @@ const Ye = {
       loading: o,
       handleOpenModal: r,
       handleDelete: p,
-      textValues: m
+      textValues: g
     })
   ) : i == null ? void 0 : i.map(
-    (c) => q({
+    (c) => j({
       type: "decision",
       decision: c,
       controls: e,
@@ -934,11 +480,11 @@ const Ye = {
       loading: o,
       handleOpenModal: r,
       handleDelete: p,
-      textValues: m
+      textValues: g
     })
-  ), s = ((i == null ? void 0 : i.length) === 0 || i.length < Math.floor(window.innerWidth / 300)) && !o && e;
-  return { renderedCards: d, shouldRenderAddCard: s };
-}, rt = (t) => {
+  ), d = ((i == null ? void 0 : i.length) === 0 || i.length < Math.floor(window.innerWidth / 300)) && !o && e;
+  return { renderedCards: s, shouldRenderAddCard: d };
+}, gt = (t) => {
   const {
     controls: e = !0,
     customTitleContentAddCard: n,
@@ -946,113 +492,810 @@ const Ye = {
     decisions: o,
     textValues: r,
     decisionTemplate: p,
-    isModalOpen: m,
-    selectedDecision: d,
-    loading: s,
+    isModalOpen: g,
+    selectedDecision: s,
+    loading: d,
     handleOpenModal: c,
     handleCloseModal: l,
     handleSubmitForm: b,
     handleDelete: T,
-    terms: g = !0
-  } = t, w = M("(max-width: 681px)"), C = M("(max-width: 400px)"), { renderedCards: k, shouldRenderAddCard: U } = We({
+    terms: m = !0
+  } = t, C = I("(max-width: 681px)"), w = I("(max-width: 400px)"), { renderedCards: F, shouldRenderAddCard: U } = je({
     controls: e,
     customTitleContentAddCard: n,
     decisions: o,
-    loading: s,
+    loading: d,
     handleOpenModal: c,
     handleDelete: T,
     textValues: r
-  }), I = (o == null ? void 0 : o.length) === 0 && !s;
-  return /* @__PURE__ */ u(D, { children: [
-    /* @__PURE__ */ a(He, { children: /* @__PURE__ */ a(Be, { children: /* @__PURE__ */ a(h, { direction: "column", gap: "16px", padding: "6px", children: I ? /* @__PURE__ */ u(
+  }), R = (o == null ? void 0 : o.length) === 0 && !d;
+  return /* @__PURE__ */ u(E, { children: [
+    /* @__PURE__ */ a(Ve, { children: /* @__PURE__ */ a(Oe, { children: /* @__PURE__ */ a(h, { direction: "column", gap: "16px", padding: "6px", children: R ? /* @__PURE__ */ u(
+      h,
+      {
+        direction: "column",
+        gap: "28px",
+        width: "100%",
+        height: C ? "auto" : "435px",
+        justifyContent: "center",
+        alignItems: "center",
+        children: [
+          /* @__PURE__ */ a(y, { as: "span", type: "label", size: "large", appearance: "gray", children: i || /* @__PURE__ */ u(E, { children: [
+            "Aún NO tienes definidas tasas de interés efectivas . Presiona",
+            /* @__PURE__ */ u(
+              y,
+              {
+                as: "span",
+                type: "label",
+                size: "large",
+                appearance: "gray",
+                weight: "bold",
+                children: [
+                  "“",
+                  n || "+ Agregar decisión",
+                  "”"
+                ]
+              }
+            ),
+            "para empezar."
+          ] }) }),
+          /* @__PURE__ */ a(
+            N,
+            {
+              iconBefore: /* @__PURE__ */ a(ee, {}),
+              onClick: () => c ? c() : null,
+              children: n || "Agregar decisión"
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ u(
+      ne,
+      {
+        templateColumns: w ? "repeat(auto-fill, minmax(200px, 1fr))" : "repeat(auto-fill, minmax(300px, 1fr))",
+        autoFlow: "row dense",
+        gap: "24px",
+        alignItems: "start",
+        justifyContent: "center",
+        autoRows: "1fr",
+        justifyItems: "center",
+        padding: "6px",
+        height: C ? "auto" : "484px",
+        children: [
+          F,
+          U && j({
+            type: "add",
+            index: o == null ? void 0 : o.length,
+            controls: e,
+            customTitleContentAddCard: n,
+            customMessageEmptyDecisions: i,
+            loading: d,
+            handleOpenModal: c,
+            handleDelete: T,
+            textValues: r,
+            shouldRenderEmptyMessage: R,
+            terms: m
+          })
+        ]
+      }
+    ) }) }) }),
+    g && /* @__PURE__ */ a(
+      Re,
+      {
+        portalId: "modal-portal",
+        onCloseModal: l,
+        title: s ? "Editar Decisión" : "Nueva decisión",
+        children: /* @__PURE__ */ a(
+          it,
+          {
+            decision: s || p,
+            onSubmitEvent: b,
+            textValues: r,
+            onCancel: () => l ? l() : () => {
+            }
+          }
+        )
+      }
+    )
+  ] });
+}, Be = f.div`
+  display: flex;
+  justify-content: ${({ justifyContent: t }) => t};
+  align-items: ${({ alignItems: t }) => t};
+  align-content: ${({ alignContent: t }) => t};
+  flex-direction: ${({ direction: t }) => t};
+  flex-wrap: ${({ wrap: t }) => t};
+  height: ${({ height: t }) => t};
+  width: ${({ width: t }) => t};
+  gap: ${({ gap: t }) => t};
+  margin: ${({ margin: t }) => t};
+  padding: ${({ padding: t }) => t};
+  background: ${({ background: t, theme: e }) => {
+  var n, i, o, r;
+  return t ? `${((i = (n = e == null ? void 0 : e.palette) == null ? void 0 : n.neutral) == null ? void 0 : i.N10) || v.palette.neutral.N10}` : `${((r = (o = e == null ? void 0 : e.palette) == null ? void 0 : o.neutral) == null ? void 0 : r.N0) || v.palette.neutral.N0}`;
+}};
+  border: ${({ border: t, theme: e }) => {
+  var n, i;
+  return t ? `1px solid ${((i = (n = e == null ? void 0 : e.palette) == null ? void 0 : n.neutral) == null ? void 0 : i.N40) || v.palette.neutral.N40}` : "none";
+}};
+  border-radius: ${({ borderRadius: t }) => t};
+  box-sizing: ${({ boxSizing: t }) => t};
+  overflow-y: ${({ scroll: t }) => t ? "scroll" : "none"};
+`, He = (t) => {
+  const {
+    children: e,
+    wrap: n,
+    direction: i = "column",
+    justifyContent: o,
+    alignItems: r,
+    alignContent: p,
+    height: g,
+    width: s,
+    gap: d,
+    background: c,
+    borderRadius: l,
+    border: b,
+    margin: T = "0px",
+    padding: m = "0px",
+    boxSizing: C,
+    scroll: w = !1
+  } = t;
+  return /* @__PURE__ */ a(
+    Be,
+    {
+      direction: i,
+      justifyContent: o,
+      alignItems: r,
+      alignContent: p,
+      height: g,
+      width: s,
+      wrap: n,
+      gap: d,
+      background: c,
+      border: b,
+      margin: T,
+      padding: m,
+      borderRadius: l,
+      boxSizing: C,
+      scroll: w,
+      children: e
+    }
+  );
+}, mt = (t) => {
+  const { appliedFilters: e, onClear: n, onClick: i, titleClearFilter: o, titleFilter: r } = t, p = !e || e.length === 0;
+  return /* @__PURE__ */ a(ge, { borderRadius: "8px", children: /* @__PURE__ */ u(ne, { gap: "12px", templateColumns: "1fr auto auto", children: [
+    /* @__PURE__ */ a(
+      He,
+      {
+        background: !0,
+        borderRadius: "8px",
+        height: "100%",
+        direction: "row",
+        gap: "8px",
+        alignItems: "center",
+        padding: "0px 8px",
+        children: e == null ? void 0 : e.map((g) => /* @__PURE__ */ a(
+          me,
+          {
+            appearance: "primary",
+            displayIcon: !0,
+            icon: g.icon,
+            label: g.label
+          },
+          g.label
+        ))
+      }
+    ),
+    /* @__PURE__ */ a(
+      N,
+      {
+        cursorHover: !0,
+        disabled: p,
+        iconBefore: /* @__PURE__ */ a(ue, {}),
+        onClick: n,
+        variant: "outlined",
+        children: o
+      }
+    ),
+    /* @__PURE__ */ a(
+      N,
+      {
+        cursorHover: !0,
+        iconBefore: /* @__PURE__ */ a(pe, {}),
+        onClick: i,
+        variant: "outlined",
+        children: r
+      }
+    )
+  ] }) });
+}, Pe = f.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme: t }) => {
+  var e, n;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N0) || v.palette.neutral.N0;
+}};
+  width: ${({ smallScreen: t }) => t ? "335px" : "450px"};
+  height: auto;
+  border-radius: 8px;
+  padding: 24px;
+  gap: 24px;
+  box-sizing: border-box;
+`, bt = (t) => {
+  const {
+    actionButtonLabel: e,
+    cancelButtonLabel: n,
+    children: i,
+    loading: o,
+    onClick: r,
+    onCloseModal: p,
+    portalId: g,
+    title: s
+  } = t, d = I("(max-width: 768px)"), c = document.getElementById(g);
+  if (!c)
+    throw new Error(
+      "The portal node is not defined. This can occur when the specific node used to render the portal has not been defined correctly."
+    );
+  return ae(
+    /* @__PURE__ */ a(te, { children: /* @__PURE__ */ u(Pe, { $smallScreen: d, children: [
+      /* @__PURE__ */ u(h, { direction: "column", gap: "16px", children: [
+        /* @__PURE__ */ u(h, { alignContent: "center", justifyContent: "space-between", children: [
+          /* @__PURE__ */ a(y, { appearance: "dark", size: "small", type: "headline", children: s }),
+          /* @__PURE__ */ u(h, { alignItems: "center", children: [
+            /* @__PURE__ */ a(y, { children: "Cerrar" }),
+            /* @__PURE__ */ a(
+              O,
+              {
+                appearance: "dark",
+                icon: /* @__PURE__ */ a(Z, {}),
+                onClick: p,
+                cursorHover: !0
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a(D, {})
+      ] }),
+      i,
+      /* @__PURE__ */ u(h, { gap: "20px", justifyContent: "flex-end", children: [
+        /* @__PURE__ */ a(
+          N,
+          {
+            appearance: "gray",
+            onClick: p,
+            spacing: "wide",
+            variant: "outlined",
+            children: n
+          }
+        ),
+        /* @__PURE__ */ a(
+          N,
+          {
+            appearance: "primary",
+            loading: o,
+            onClick: r,
+            spacing: "wide",
+            variant: "filled",
+            children: e
+          }
+        )
+      ] })
+    ] }) }),
+    c
+  );
+}, Tt = (t) => {
+  const { fields: e, onChange: n } = t;
+  return /* @__PURE__ */ a(h, { direction: "column", gap: "16px", children: e.map((i) => /* @__PURE__ */ u(h, { gap: "6px", alignItems: "center", children: [
+    /* @__PURE__ */ a(h, { padding: "22px 0 0 0", children: /* @__PURE__ */ a(O, { appearance: "primary", icon: i.icon }) }),
+    /* @__PURE__ */ a(
+      be,
+      {
+        disabled: i.disabled,
+        invalid: i.invalid,
+        label: i.label,
+        message: i.message,
+        name: i.name,
+        onChange: n,
+        options: i.options,
+        placeholder: i.placeholder,
+        required: i.required,
+        values: i.values,
+        fullwidth: !0
+      },
+      i.name
+    )
+  ] }, i.name)) });
+}, ft = (t) => {
+  console.log(t);
+  const { dataDecision: e, originalDecision: n } = t, i = {
+    conditionName: e.ruleName || "",
+    labelName: e.labelName || "",
+    conditionDataType: e.decisionDataType || "alphabetical",
+    value: e.value || "",
+    howToSetTheCondition: e.howToSetTheDecision || "EqualTo",
+    switchPlaces: !0,
+    hidden: !1
+  };
+  return {
+    ...n,
+    conditionsThatEstablishesTheDecision: n.conditionsThatEstablishesTheDecision.map(
+      (o) => o.hidden ? { ...i } : o
+    )
+  };
+}, xt = (t) => {
+  const { decisions: e } = t;
+  return e == null ? void 0 : e.map((n) => {
+    var o;
+    const i = (o = n.conditionsThatEstablishesTheDecision) == null ? void 0 : o.find(
+      (r) => r.hidden
+    );
+    return i ? {
+      ...n,
+      ruleName: n.ruleName,
+      labelName: n.labelName,
+      decisionDataType: n.decisionDataType,
+      value: n.value,
+      howToSetTheDecision: n.howToSetTheDecision,
+      conditionsThatEstablishesTheDecision: n.conditionsThatEstablishesTheDecision.map(
+        (r) => r.hidden ? { ...i, hidden: !1 } : r
+      )
+    } : n;
+  });
+}, Ge = (t) => ({
+  schema: B().required("Required").test(
+    "non-empty",
+    "Value cannot be empty",
+    (e) => e != null && e.trim() !== ""
+  ),
+  value: t
+}), Qe = (t) => ({
+  schema: oe().test(
+    "isArrayOrString",
+    "Must be an array of strings/numbers or a single string",
+    (e) => Array.isArray(e) ? e.every(
+      (n) => typeof n == "string" || typeof n == "number"
+    ) : typeof e == "string"
+  ),
+  value: t
+}), Ye = (t) => ({
+  schema: oe().test(
+    "isArrayOrString",
+    "Must be an array of strings/numbers or a single string",
+    (e) => Array.isArray(e) ? e.every(
+      (n) => typeof n == "string" || typeof n == "number"
+    ) : typeof e == "string"
+  ),
+  value: t
+}), We = (t) => {
+  const e = (t == null ? void 0 : t.from) ?? 0, n = (t == null ? void 0 : t.to) ?? 0;
+  return {
+    schema: M({
+      from: q().required("Range From is required").max(n, "'Range From' cannot be greater than 'Range To'").min(0, "'Range From' cannot be less than 0"),
+      to: q().min(0, "To value must be greater than or equal to 0").required("To value is required").test(
+        "is-greater",
+        "To value must be greater than From value",
+        function(i) {
+          const { from: o } = this.parent;
+          return i > o;
+        }
+      )
+    }),
+    value: { from: e, to: n }
+  };
+}, z = (t, e) => e === k.PERCENTAGE ? {
+  schema: q().required("Percentage is required").min(0, "Percentage cannot be less than 0").max(100, "Percentage cannot be greater than 100"),
+  value: t
+} : {
+  schema: B().required("Required"),
+  value: t
+}, Je = {
+  [x.LIST_OF_VALUES]: Qe,
+  [x.LIST_OF_VALUES_MULTI]: Ye,
+  [x.RANGE]: We,
+  [x.GREATER_THAN]: z,
+  [x.LESS_THAN]: z,
+  [x.EQUAL]: z
+}, X = (t) => Je[t] || Ge;
+function Ke({
+  decision: t,
+  onSubmitEvent: e,
+  textValues: n
+}) {
+  const i = {
+    ruleName: t.ruleName || "",
+    decisionDataType: t.decisionDataType || k.ALPHABETICAL,
+    howToSetTheDecision: t.howToSetTheDecision || "",
+    value: t.value || "",
+    effectiveFrom: t.effectiveFrom || "",
+    validUntil: t.validUntil || "",
+    toggleNone: !0,
+    conditionsThatEstablishesTheDecision: {},
+    checkClosed: !1,
+    terms: !0
+  };
+  let o;
+  const r = {
+    ruleName: B().required("Name is required"),
+    value: Y(() => X(
+      o.values.howToSetTheDecision
+    )(
+      o.values.value,
+      o.values.decisionDataType
+    ).schema),
+    conditionsThatEstablishesTheDecision: Y((s, { parent: d }) => {
+      var b;
+      if ((d == null ? void 0 : d.toggleNone) && Object.keys(d.conditionsThatEstablishesTheDecision || {}).length > 0) return M().shape({});
+      const l = (b = t.conditionsThatEstablishesTheDecision) == null ? void 0 : b.reduce(
+        (T, m) => {
+          if (o.values.conditionsThatEstablishesTheDecision[m.conditionName] !== void 0) {
+            const w = X(
+              m.howToSetTheCondition
+            );
+            T[m.conditionName] = w(
+              m.value,
+              m.conditionDataType
+            ).schema;
+          }
+          return T;
+        },
+        {}
+      );
+      return M(l).test(
+        "at-least-one-condition",
+        "It must be at least one condition in order for the decision to be validated correctly.",
+        (T) => T ? Object.values(T).some(
+          (m) => m != null && m !== ""
+        ) : !1
+      );
+    })
+  };
+  n.terms && (r.effectiveFrom = W().required(
+    "effective From date is required"
+  ), r.validUntil = W().when(
+    "checkClosed",
+    (s, d, { parent: c }) => (c == null ? void 0 : c.checkClosed) ? d.required("valid Until date is required").test(
+      "is-after-startDate",
+      "valid Until date must be greater than or equal to Start date",
+      function(b) {
+        const T = this.parent.effectiveFrom;
+        return !T || !b ? !0 : new Date(b) >= new Date(T);
+      }
+    ) : d.notRequired()
+  ));
+  const p = M(r);
+  return o = xe({
+    initialValues: i,
+    validationSchema: p,
+    validateOnBlur: !0,
+    onSubmit: (s) => {
+      var c;
+      const d = {
+        ...t,
+        ruleName: s.ruleName,
+        decisionDataType: s.decisionDataType,
+        howToSetTheDecision: s.howToSetTheDecision,
+        value: s.value,
+        effectiveFrom: s.effectiveFrom,
+        validUntil: s.validUntil,
+        conditionsThatEstablishesTheDecision: (c = t.conditionsThatEstablishesTheDecision) == null ? void 0 : c.filter((l) => {
+          const b = s.conditionsThatEstablishesTheDecision[l.conditionName];
+          return b != null && b !== "";
+        }).map((l) => ({
+          ...l,
+          value: s.conditionsThatEstablishesTheDecision[l.conditionName]
+        }))
+      };
+      e(d);
+    }
+  }), { formik: o, handleToggleNoneChange: (s) => {
+    var d;
+    o.setFieldValue("toggleNone", s), (d = t.conditionsThatEstablishesTheDecision) == null || d.forEach((c) => {
+      if (s)
+        o.setFieldValue(
+          `conditionsThatEstablishesTheDecision.${c.conditionName}`,
+          void 0
+        );
+      else {
+        const l = c.howToSetTheCondition === x.LIST_OF_VALUES_MULTI ? [] : "";
+        o.setFieldValue(
+          `conditionsThatEstablishesTheDecision.${c.conditionName}`,
+          l
+        );
+      }
+    });
+  } };
+}
+const Xe = f.div`
+  & > div {
+    border-radius: 8px;
+    border: 1px solid
+      ${({ theme: t }) => {
+  var e, n;
+  return ((n = (e = t == null ? void 0 : t.palette) == null ? void 0 : e.neutral) == null ? void 0 : n.N30) || v.palette.neutral.N30;
+}};
+  }
+`, Ze = f.div`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #c1c7d0;
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #ebecf0;
+    border-radius: 8px;
+  }
+`, et = (t) => {
+  const {
+    checked: e,
+    children: n,
+    handleToggleChange: i,
+    id: o,
+    labelToggle: r,
+    name: p,
+    valueToggle: g = ""
+  } = t, [s, d] = V(e), c = (l) => {
+    d(l.target.checked), i(l);
+  };
+  return ye(() => {
+    d(e);
+  }, [e]), /* @__PURE__ */ u(E, { children: [
+    /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
+      ie,
+      {
+        checked: s,
+        id: o,
+        name: p,
+        onChange: c,
+        size: "small",
+        value: g,
+        children: /* @__PURE__ */ a(y, { size: "medium", type: "label", weight: "bold", children: r })
+      }
+    ) }),
+    s && /* @__PURE__ */ a(E, { children: n })
+  ] });
+}, tt = (t) => {
+  const {
+    onHandleStartChange: e,
+    onHandleEndChange: n,
+    onCheckClosedChange: i,
+    labelStart: o,
+    labelEnd: r,
+    checkedClosed: p = !1,
+    required: g = !1,
+    valueStart: s = "",
+    valueEnd: d = "",
+    messageStart: c = "",
+    messageEnd: l = "",
+    statusStart: b = "pending",
+    statusEnd: T = "pending"
+  } = t, [m, C] = V(p), [w, F] = V(s), [U, R] = V(d), P = ({ target: S }) => {
+    C(S.checked), i && i(S.checked);
+  }, de = (S) => {
+    F(S.target.value), e(S);
+  }, se = (S) => {
+    R(S.target.value), n(S);
+  }, ce = I("(max-width: 400px)");
+  return /* @__PURE__ */ u(E, { children: [
+    /* @__PURE__ */ u(h, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
+      /* @__PURE__ */ a(
+        y,
+        {
+          appearance: "gray",
+          margin: "10px 0",
+          size: "medium",
+          type: "title",
+          weight: "bold",
+          children: "Vigencia"
+        }
+      ),
+      /* @__PURE__ */ a(
+        h,
+        {
+          alignContent: "center",
+          justifyContent: "center",
+          wrap: "wrap",
+          gap: "4px",
+          children: /* @__PURE__ */ a(
+            Te,
+            {
+              label: "Cerrada",
+              onChange: P,
+              checked: m,
+              value: ""
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ u(
       h,
       {
-        direction: "column",
-        gap: "28px",
-        width: "100%",
-        height: w ? "auto" : "435px",
-        justifyContent: "center",
-        alignItems: "center",
+        direction: ce ? "column" : "row",
+        justifyContent: "space-between",
+        gap: "24px",
         children: [
-          /* @__PURE__ */ a(v, { as: "span", type: "label", size: "large", appearance: "gray", children: i || /* @__PURE__ */ u(D, { children: [
-            "Aún NO tienes definidas tasas de interés efectivas . Presiona",
-            /* @__PURE__ */ u(
-              v,
-              {
-                as: "span",
-                type: "label",
-                size: "large",
-                appearance: "gray",
-                weight: "bold",
-                children: [
-                  "“",
-                  n || "+ Agregar decisión",
-                  "”"
-                ]
-              }
-            ),
-            "para empezar."
-          ] }) }),
           /* @__PURE__ */ a(
-            $,
+            G,
             {
-              iconBefore: /* @__PURE__ */ a(te, {}),
-              onClick: () => c ? c() : null,
-              children: n || "Agregar decisión"
+              id: "dateStart",
+              label: o,
+              onChange: de,
+              value: w,
+              required: g,
+              size: "compact",
+              status: b,
+              message: c
+            }
+          ),
+          m && /* @__PURE__ */ a(
+            G,
+            {
+              id: "dateEnd",
+              label: r,
+              onChange: se,
+              value: U,
+              required: g,
+              size: "compact",
+              status: T,
+              message: l
             }
           )
         ]
       }
-    ) : /* @__PURE__ */ u(
-      ce,
+    )
+  ] });
+}, nt = (t) => {
+  const {
+    formik: e,
+    textValues: n,
+    onCancel: i,
+    visibleConditions: o,
+    normalizedDecision: r,
+    handleToggleNoneChange: p,
+    handleConditionToggleChange: g,
+    showConditionsError: s,
+    termStartStatus: d,
+    termEndStatus: c
+  } = t;
+  return /* @__PURE__ */ a("form", { onSubmit: e.handleSubmit, children: /* @__PURE__ */ u(h, { direction: "column", gap: "24px", children: [
+    Q({
+      condition: r,
+      formik: e,
+      isDecision: !0
+    }),
+    /* @__PURE__ */ a(D, { dashed: !0 }),
+    /* @__PURE__ */ a(Xe, { children: /* @__PURE__ */ a(Ze, { children: /* @__PURE__ */ u(
+      h,
       {
-        templateColumns: C ? "repeat(auto-fill, minmax(200px, 1fr))" : "repeat(auto-fill, minmax(300px, 1fr))",
-        autoFlow: "row dense",
-        gap: "24px",
-        alignItems: "start",
-        justifyContent: "center",
-        autoRows: "1fr",
-        justifyItems: "center",
-        padding: "6px",
-        height: w ? "auto" : "484px",
+        direction: "column",
+        padding: "6px 12px",
+        gap: "16px",
+        height: "272px",
         children: [
-          k,
-          U && q({
-            type: "add",
-            index: o == null ? void 0 : o.length,
-            controls: e,
-            customTitleContentAddCard: n,
-            customMessageEmptyDecisions: i,
-            loading: s,
-            handleOpenModal: c,
-            handleDelete: T,
-            textValues: r,
-            shouldRenderEmptyMessage: I,
-            terms: g
-          })
-        ]
-      }
-    ) }) }) }),
-    m && /* @__PURE__ */ a(
-      $e,
-      {
-        portalId: "modal-portal",
-        onCloseModal: l,
-        title: d ? "Editar Decisión" : "Nueva decisión",
-        children: /* @__PURE__ */ a(
-          Ne,
-          {
-            decision: d || p,
-            onSubmitEvent: b,
-            textValues: r,
-            onCancel: () => l ? l() : () => {
+          /* @__PURE__ */ u(
+            h,
+            {
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: "64px",
+              children: [
+                /* @__PURE__ */ a(y, { type: "title", size: "small", weight: "bold", appearance: "gray", children: n.factsThatConditionIt }),
+                /* @__PURE__ */ a(
+                  ie,
+                  {
+                    id: "toggleNone",
+                    onChange: () => p(!e.values.toggleNone),
+                    checked: e.values.toggleNone,
+                    size: "small",
+                    children: /* @__PURE__ */ a(y, { as: "span", size: "medium", type: "label", weight: "bold", children: n.none })
+                  }
+                )
+              ]
             }
-          }
-        )
+          ),
+          /* @__PURE__ */ a(h, { direction: "column", gap: "20px", children: o == null ? void 0 : o.map((l) => /* @__PURE__ */ a(
+            et,
+            {
+              id: `toggle-${l.conditionName}`,
+              name: `toggle.${l.conditionName}`,
+              labelToggle: l.labelName,
+              checked: !e.values.toggleNone && e.values.conditionsThatEstablishesTheDecision[l.conditionName] !== void 0,
+              handleToggleChange: (b) => g(
+                l.conditionName,
+                l.howToSetTheCondition === x.LIST_OF_VALUES_MULTI
+              )(b.target.checked),
+              children: Q({ condition: l, formik: e })
+            },
+            l.conditionName
+          )) })
+        ]
       }
-    )
-  ] });
-}, lt = (t) => {
+    ) }) }),
+    n.terms && /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ a(D, { dashed: !0 }),
+      /* @__PURE__ */ a(
+        tt,
+        {
+          labelStart: n.termStart,
+          labelEnd: n.termEnd,
+          valueStart: e.values.effectiveFrom,
+          valueEnd: e.values.validUntil,
+          messageStart: e.errors.effectiveFrom,
+          messageEnd: e.errors.validUntil,
+          statusStart: d,
+          statusEnd: c,
+          onHandleStartChange: (l) => e.setFieldValue("effectiveFrom", l.target.value),
+          onHandleEndChange: (l) => e.setFieldValue("validUntil", l.target.value),
+          onCheckClosedChange: (l) => {
+            e.setFieldValue("checkClosed", l), l && e.setFieldValue("validUntil", "");
+          },
+          checkedClosed: e.values.checkClosed
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(D, {}),
+    s && /* @__PURE__ */ a(y, { type: "label", size: "medium", appearance: "danger", children: String(e.errors.conditionsThatEstablishesTheDecision) }),
+    /* @__PURE__ */ u(h, { direction: "row", justifyContent: "end", gap: "16px", children: [
+      /* @__PURE__ */ a(N, { appearance: "gray", onClick: i, children: n.cancel }),
+      /* @__PURE__ */ a(N, { type: "submit", children: n.confirm })
+    ] })
+  ] }) });
+}, it = (t) => {
+  var T;
+  const { decision: e, onSubmitEvent: n, textValues: i, onCancel: o } = t, { formik: r, handleToggleNoneChange: p } = Ke({
+    decision: e,
+    onSubmitEvent: n,
+    textValues: i
+  }), g = {
+    ruleName: e.ruleName,
+    labelName: e.labelName,
+    howToSetTheCondition: e.howToSetTheDecision,
+    decisionDataType: e.decisionDataType,
+    listOfPossibleValues: e.listOfPossibleValues
+  }, s = ((T = e.conditionsThatEstablishesTheDecision) == null ? void 0 : T.filter(
+    (m) => !m.hidden
+  )) || [], d = !!r.errors.conditionsThatEstablishesTheDecision && r.submitCount > 0, c = r.touched.effectiveFrom ? r.errors.effectiveFrom ? "invalid" : "valid" : void 0, l = r.touched.validUntil ? r.errors.validUntil ? "invalid" : "valid" : void 0;
+  return /* @__PURE__ */ a(
+    nt,
+    {
+      formik: r,
+      onCancel: o,
+      textValues: i,
+      decision: e,
+      visibleConditions: s,
+      normalizedDecision: g,
+      handleToggleNoneChange: p,
+      handleConditionToggleChange: (m, C) => (w) => {
+        if (!w)
+          r.setFieldValue(
+            `conditionsThatEstablishesTheDecision.${m}`,
+            void 0
+          ), r.setFieldTouched(
+            `conditionsThatEstablishesTheDecision.${m}`,
+            !1,
+            !1
+          );
+        else {
+          const F = C ? [] : "";
+          r.setFieldValue(
+            `conditionsThatEstablishesTheDecision.${m}`,
+            F
+          );
+        }
+      },
+      showConditionsError: d,
+      termStartStatus: c,
+      termEndStatus: l
+    }
+  );
+}, yt = (t) => {
   var o;
   const { decisionTemplate: e } = t, n = { ...e }, i = (o = n.conditionsThatEstablishesTheDecision) == null ? void 0 : o.find(
     (r) => r.switchPlaces
@@ -1068,7 +1311,7 @@ const Ye = {
       (r) => r.conditionName === i.conditionName ? { ...r, hidden: !0 } : r
     )
   } : n;
-}, st = (t) => {
+}, vt = (t) => {
   const { decisions: e } = t;
   return e == null ? void 0 : e.map((n) => {
     var o;
@@ -1087,51 +1330,18 @@ const Ye = {
       )
     } : n;
   });
-}, dt = (t) => {
-  console.log(t);
-  const { dataDecision: e, originalDecision: n } = t, i = {
-    conditionName: e.ruleName || "",
-    labelName: e.labelName || "",
-    conditionDataType: e.decisionDataType || "alphabetical",
-    value: e.value || "",
-    howToSetTheCondition: e.howToSetTheDecision || "EqualTo",
-    switchPlaces: !0,
-    hidden: !1
-  };
-  return {
-    ...n,
-    conditionsThatEstablishesTheDecision: n.conditionsThatEstablishesTheDecision.map(
-      (o) => o.hidden ? { ...i } : o
-    )
-  };
-}, ct = (t) => {
-  const { decisions: e } = t;
-  return e == null ? void 0 : e.map((n) => {
-    var o;
-    const i = (o = n.conditionsThatEstablishesTheDecision) == null ? void 0 : o.find(
-      (r) => r.hidden
-    );
-    return i ? {
-      ...n,
-      ruleName: n.ruleName,
-      labelName: n.labelName,
-      decisionDataType: n.decisionDataType,
-      value: n.value,
-      howToSetTheDecision: n.howToSetTheDecision,
-      conditionsThatEstablishesTheDecision: n.conditionsThatEstablishesTheDecision.map(
-        (r) => r.hidden ? { ...i, hidden: !1 } : r
-      )
-    } : n;
-  });
 };
 export {
   H as BusinessRuleCard,
-  ne as BusinessRuleView,
-  rt as BusinessRules,
-  $e as ModalRules,
-  Ne as RulesForm,
-  dt as revertSortedDataSampleSwitchPlaces,
-  ct as revertSortedDataSwitchPlaces,
-  lt as sortDisplayDataSampleSwitchPlaces,
-  st as sortDisplayDataSwitchPlaces
+  re as BusinessRuleView,
+  gt as BusinessRules,
+  mt as Filter,
+  bt as FilterModal,
+  Tt as FormFilter,
+  Re as ModalRules,
+  it as RulesForm,
+  ft as revertSortedDataSampleSwitchPlaces,
+  xt as revertSortedDataSwitchPlaces,
+  yt as sortDisplayDataSampleSwitchPlaces,
+  vt as sortDisplayDataSwitchPlaces
 };