@lanaco/lnc-react-ui 4.0.34 → 4.0.37

package/dist/CalorieCalculatorSection.js

@@ -0,0 +1,851 @@
+import { jsxs as i, jsx as t, Fragment as z } from "react/jsx-runtime";
+import { forwardRef as w, useState as N, useRef as Y } from "react";
+import { n as y } from "./emotion-styled.browser.esm-CjCaF13H.js";
+import { M as T } from "./consts-C1uHV4xc.js";
+import R from "./Button.js";
+import { P as G } from "./index-S5Cd7WrG.js";
+import A from "./RangeSlider.js";
+import _ from "./DropdownItem.js";
+import K from "./DropdownMenu.js";
+import X from "./IconButton.js";
+import Z from "./BannerSectionWithList.js";
+import { s as q } from "./utils-DtRLzzTZ.js";
+const J = y.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 2.25rem;
+
+  @media (max-width: ${T + "px"}) {
+    gap: 2rem;
+  }
+`, Q = y.div`
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  & .header-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  & .header-subtitle {
+    color: var(--gray-600, #676e79);
+    font-size: 1rem;
+    font-weight: 500;
+  }
+
+  @media (max-width: ${T + "px"}) {
+  }
+`;
+y.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: center;
+
+  & .subtitle {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--gray-600, #676e79);
+  }
+`;
+const U = y.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+  align-items: center;
+
+  & .btns-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    & button {
+      width: 20rem;
+      max-width: 20rem;
+    }
+  }
+
+  @media (max-width: ${T + "px"}) {
+    gap: 2rem;
+    & .btns-footer {
+      width: 100%;
+      align-items: center;
+      & button {
+        width: 100%;
+        max-width: 13.75rem;
+      }
+    }
+  }
+`, ee = y.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  width: fit-content;
+  gap: 0.5rem;
+  align-items: center;
+
+  & .lnc-ui-button {
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+  }
+
+  & .caluclating-group {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+
+    & .range-input-lnc {
+      width: 22.75rem;
+    }
+
+    & .calculating-btn {
+      min-width: 4.5rem;
+      max-width: 4.5rem;
+    }
+
+    & .calculating-input {
+      min-height: 2.25rem;
+      max-height: 2.25rem;
+      min-width: 4.5rem;
+      max-width: 4.5rem;
+      padding: 0.38rem;
+      border-radius: 0.5rem;
+      border: 1px solid var(--gray-95012, rgba(20, 22, 26, 0.12));
+      background: var(--white, #fff);
+      text-align: center;
+    }
+  }
+
+  & .btn-cnt {
+    display: flex;
+    align-items: center;
+    gap: 0.38rem;
+
+    & i {
+      font-size: 1.5rem;
+    }
+  }
+
+  & .grid-label {
+    font-weight: 600;
+    font-size: 1rem;
+    min-width: 10rem;
+    padding-top: 0.75rem;
+
+    & .unit {
+      font-weight: 400;
+      color: var(--gray-600, #676e79);
+    }
+  }
+
+  & .grid-label:first-of-type {
+    padding-top: 0 !important;
+  }
+
+  @media (max-width: ${T + "px"}) {
+    gap: 0.25rem;
+    grid-template-columns: auto;
+
+    & .grid-label {
+      font-size: 1rem;
+    }
+    & .caluclating-group {
+      flex-wrap: wrap;
+      gap: 1rem;
+      & .range-input-lnc {
+        width: unset;
+        flex: 1;
+      }
+    }
+
+    & .group-activity {
+      button {
+        width: 100%;
+      }
+    }
+
+    & .grid-label {
+      min-width: unset;
+    }
+  }
+`, te = y.div`
+  border-radius: 0.75rem;
+  border: 1px solid var(--neutral-95008);
+  background: var(--white);
+  padding: 1.25rem;
+  /* drop-shadow */
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+  display: flex;
+  padding: 1.25rem;
+  align-items: center;
+  gap: 1rem;
+
+  & .dropdown-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  & .vertical-line {
+    width: 1px;
+    height: 4rem;
+    background-color: var(--gray-95008);
+    margin: 0 0.62rem;
+  }
+
+  @media (max-width: ${T + "px"}) {
+    padding: 0.75rem;
+    gap: 0.75rem;
+
+    & .vertical-line {
+      height: 100%;
+      min-height: 5.25rem;
+    }
+
+    & .dropdown-group {
+      gap: 0.75rem;
+      align-items: start;
+    }
+  }
+`, ae = y.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  flex: 1;
+
+  @media (max-width: ${T + "px"}) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+`, $ = y.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 7.125rem;
+  align-items: center;
+  text-align: center;
+  font-weight: 600;
+  font-size: 1.375rem;
+
+  & .subgroup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  & .subtext {
+    font-size: 1rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+  }
+
+  & i {
+    color: ${(s) => s.color};
+    font-size: 3rem;
+  }
+
+  @media (max-width: ${T + "px"}) {
+    flex-direction: row;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    align-items: start;
+
+    & i {
+      font-size: 1.75rem;
+    }
+
+    & .subtext {
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+    & .subgroup {
+      gap: 0;
+    }
+  }
+`, ne = y.label`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background: var(--white);
+  border-radius: 30px;
+  padding: 0.25em 0.5em;
+  user-select: none;
+  font-family: Arial, sans-serif;
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--gray-950, #14161A);
+  transition: background-color 0.3s;
+  min-height: 2.5rem;
+  max-height: 2.5rem;
+  font-size: 1rem;
+  font-weight: 50;
+  width: fit-content;
+
+  & i {
+    font-size: 1rem;
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .knob {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: ${(s) => s.checked ? "3rem" : "3px"};
+    background: var(--success-600);
+    border-radius: 30px;
+    transition: left 0.3s;
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    font-weight: normal;
+    font-size: 0.9rem;
+    color: var(--white);
+    padding: 0 0.75rem;
+    min-height: 2.5rem;
+    max-height: 2.5rem;
+    border: 1px solid var(--success-600);
+  }
+
+  .text {
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border: 1px solid var(--gray-95012);
+    border-radius: 30px;
+    min-height: 2.5rem;
+    max-height: 2.5rem;
+
+    & .hidden-txt {
+      opacity: 0;
+    }
+  }
+
+  & .cont {
+    display: flex;
+    align-items: center;
+    gap: 0.38rem;
+  }
+`, I = w((s, b) => {
+  var m, g, p, h, v, x, k, C;
+  const {
+    onChange: d = () => {
+    },
+    items: a = [
+      { name: "Male", icon: "mng-lnc-male-02", value: "male" },
+      { name: "Female", value: "female", icon: "mng-lnc-female-02" }
+    ],
+    ...l
+  } = s, c = /* @__PURE__ */ i("div", { className: "cont", children: [
+    /* @__PURE__ */ t("i", { className: (m = a == null ? void 0 : a.at(0)) == null ? void 0 : m.icon }),
+    /* @__PURE__ */ t("span", { children: (g = a == null ? void 0 : a.at(0)) == null ? void 0 : g.name })
+  ] }), n = /* @__PURE__ */ i("div", { className: "cont", children: [
+    /* @__PURE__ */ t("span", { children: (p = a == null ? void 0 : a.at(1)) == null ? void 0 : p.name }),
+    /* @__PURE__ */ t("i", { className: (h = a == null ? void 0 : a.at(1)) == null ? void 0 : h.icon })
+  ] }), [e, r] = N(!1);
+  return /* @__PURE__ */ i(ne, { checked: e, ...l, children: [
+    /* @__PURE__ */ t("input", { type: "checkbox", checked: e, onChange: (u) => {
+      var L, j;
+      r(u.target.checked), d && d(
+        u.target.checked === !0 ? (L = a == null ? void 0 : a.at(1)) == null ? void 0 : L.value : (j = a == null ? void 0 : a.at(0)) == null ? void 0 : j.value
+      );
+    } }),
+    /* @__PURE__ */ t("span", { className: "knob", children: e ? n : c }),
+    /* @__PURE__ */ i("span", { className: "text", children: [
+      /* @__PURE__ */ i("div", { className: "cont", children: [
+        /* @__PURE__ */ t("i", { className: (v = a == null ? void 0 : a.at(0)) == null ? void 0 : v.icon }),
+        e === !0 && /* @__PURE__ */ t("span", { className: "hidden-txt", children: (x = a == null ? void 0 : a.at(0)) == null ? void 0 : x.name })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "cont", children: [
+        e !== !0 && /* @__PURE__ */ t("span", { className: "hidden-txt", children: (k = a == null ? void 0 : a.at(1)) == null ? void 0 : k.name }),
+        /* @__PURE__ */ t("i", { className: (C = a == null ? void 0 : a.at(1)) == null ? void 0 : C.icon })
+      ] })
+    ] })
+  ] });
+});
+I.propTypes = {
+  value: G.any,
+  handleClick: G.func,
+  color: G.string
+};
+const ie = w((s, b) => {
+  var C;
+  const {
+    yearsText: d,
+    heightText: a,
+    weightText: l,
+    genderText: c = "Gender",
+    calculateText: n = "Calculate",
+    closeText: e = "Close calculator",
+    onClose: r = () => {
+    },
+    genders: o = [
+      { name: "Male", icon: "mng-lnc-male-02", value: "male" },
+      { name: "Female", value: "female", icon: "mng-lnc-female-02" }
+    ],
+    activityLevels: m = [
+      { name: "Very low", code: "veryLow" },
+      { name: "Moderate", code: "moderate" },
+      { name: "Very active", code: "veryActive" }
+    ],
+    activityLevelText: g,
+    goalText: p,
+    goals: h = [
+      { name: "Lose weight", code: "loseWeight", icon: "mng-lnc-weight-scale" },
+      { name: "Maintaining", code: "maintaining", icon: "mng-lnc-move" },
+      { name: "Gain muscle", code: "gainMuscle", icon: "mng-lnc-muscule" }
+    ],
+    onCalculate: v = () => {
+    }
+  } = s, x = Y({
+    year: null,
+    height: null,
+    weight: null,
+    gender: (C = o == null ? void 0 : o.at(0)) == null ? void 0 : C.value,
+    activityLevel: null,
+    goal: null
+  }), k = () => {
+    v == null || v(x == null ? void 0 : x.current);
+  };
+  return /* @__PURE__ */ i(U, { children: [
+    /* @__PURE__ */ i(ee, { className: "calorie-calculating", children: [
+      /* @__PURE__ */ t("div", { className: "grid-label", children: c }),
+      /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+        I,
+        {
+          items: o,
+          onChange: (u) => x.current.gender = u
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        re,
+        {
+          text: d,
+          onChange: (u) => x.current.year = u
+        }
+      ),
+      /* @__PURE__ */ t(
+        le,
+        {
+          text: a,
+          onChange: (u) => x.current.height = u
+        }
+      ),
+      /* @__PURE__ */ t(
+        ce,
+        {
+          text: l,
+          onChange: (u) => x.current.weight = u
+        }
+      ),
+      /* @__PURE__ */ t(
+        oe,
+        {
+          text: g,
+          activityLevels: m,
+          onChange: (u) => x.current.activityLevel = u
+        }
+      ),
+      /* @__PURE__ */ t(
+        se,
+        {
+          text: p,
+          goals: h,
+          onChange: (u) => x.current.goal = u
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i("div", { className: "btns-footer", children: [
+      /* @__PURE__ */ t(
+        R,
+        {
+          type: "button",
+          color: "neutral",
+          size: "medium",
+          onClick: () => {
+            k();
+          },
+          children: n
+        }
+      ),
+      /* @__PURE__ */ t(
+        R,
+        {
+          type: "button",
+          btnType: "basic",
+          color: "gray",
+          size: "medium",
+          onClick: () => r == null ? void 0 : r(),
+          children: e
+        }
+      )
+    ] })
+  ] });
+}), re = w((s, b) => {
+  const { text: d = "Years", onChange: a = () => {
+  } } = s, [l, c] = N(1);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ t("div", { className: "grid-label", children: d }),
+    /* @__PURE__ */ i("div", { className: "caluclating-group", children: [
+      /* @__PURE__ */ t(
+        A,
+        {
+          className: "range-input-lnc",
+          max: 115,
+          min: 0,
+          step: 1,
+          value: l,
+          color: "success",
+          defaultValue: 0,
+          onChange: (n) => {
+            var e, r;
+            c((e = n == null ? void 0 : n.target) == null ? void 0 : e.value), a == null || a((r = n == null ? void 0 : n.target) == null ? void 0 : r.value);
+          }
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          tabIndex: 2,
+          type: "text",
+          className: "calculating-input",
+          onChange: (n) => {
+            var e, r, o, m, g, p, h;
+            !isNaN((e = n == null ? void 0 : n.target) == null ? void 0 : e.value) && +((r = n == null ? void 0 : n.target) == null ? void 0 : r.value) >= 0 && c(
+              ((m = (o = n == null ? void 0 : n.target) == null ? void 0 : o.value) == null ? void 0 : m.length) > 1 ? (p = (g = n == null ? void 0 : n.target) == null ? void 0 : g.value) == null ? void 0 : p.replace(/^0+/, "") : (h = n == null ? void 0 : n.target) == null ? void 0 : h.value
+            );
+          },
+          value: l == null ? void 0 : l.toString()
+        }
+      )
+    ] })
+  ] });
+}), le = w((s, b) => {
+  const { text: d = "Height", unitText: a = "cm", onChange: l = () => {
+  } } = s, [c, n] = N(1);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ i("div", { className: "grid-label", children: [
+      d,
+      " ",
+      /* @__PURE__ */ t("span", { className: "unit", children: `(${a})` })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "caluclating-group", children: [
+      /* @__PURE__ */ t(
+        A,
+        {
+          className: "range-input-lnc",
+          max: 273,
+          min: 0,
+          step: 1,
+          value: c,
+          defaultValue: 0,
+          color: "success",
+          onChange: (e) => {
+            var r, o;
+            n((r = e == null ? void 0 : e.target) == null ? void 0 : r.value), l == null || l((o = e == null ? void 0 : e.target) == null ? void 0 : o.value);
+          }
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "text",
+          tabIndex: 2,
+          className: "calculating-input",
+          onChange: (e) => {
+            var r, o, m, g, p, h, v;
+            !isNaN((r = e == null ? void 0 : e.target) == null ? void 0 : r.value) && +((o = e == null ? void 0 : e.target) == null ? void 0 : o.value) >= 0 && n(
+              ((g = (m = e == null ? void 0 : e.target) == null ? void 0 : m.value) == null ? void 0 : g.length) > 1 ? (h = (p = e == null ? void 0 : e.target) == null ? void 0 : p.value) == null ? void 0 : h.replace(/^0+/, "") : (v = e == null ? void 0 : e.target) == null ? void 0 : v.value
+            );
+          },
+          value: c == null ? void 0 : c.toString()
+        }
+      )
+    ] })
+  ] });
+}), ce = w((s, b) => {
+  const { text: d = "Weight", unitText: a = "cm", onChange: l = () => {
+  } } = s, [c, n] = N(1);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ i("div", { className: "grid-label", children: [
+      d,
+      " ",
+      /* @__PURE__ */ t("span", { className: "unit", children: `(${a})` })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "caluclating-group", children: [
+      /* @__PURE__ */ t(
+        A,
+        {
+          className: "range-input-lnc",
+          max: 400,
+          min: 0,
+          step: 1,
+          value: c,
+          color: "success",
+          defaultValue: 0,
+          onChange: (e) => {
+            var r, o;
+            n((r = e == null ? void 0 : e.target) == null ? void 0 : r.value), l == null || l((o = e == null ? void 0 : e.target) == null ? void 0 : o.value);
+          }
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          tabIndex: 2,
+          type: "text",
+          className: "calculating-input",
+          onChange: (e) => {
+            var r, o, m, g, p, h, v;
+            !isNaN((r = e == null ? void 0 : e.target) == null ? void 0 : r.value) && +((o = e == null ? void 0 : e.target) == null ? void 0 : o.value) >= 0 && n(
+              ((g = (m = e == null ? void 0 : e.target) == null ? void 0 : m.value) == null ? void 0 : g.length) > 1 ? (h = (p = e == null ? void 0 : e.target) == null ? void 0 : p.value) == null ? void 0 : h.replace(/^0+/, "") : (v = e == null ? void 0 : e.target) == null ? void 0 : v.value
+            );
+          },
+          value: c == null ? void 0 : c.toString()
+        }
+      )
+    ] })
+  ] });
+}), oe = w((s, b) => {
+  const {
+    text: d = "Activity level",
+    activityLevels: a,
+    onChange: l = () => {
+    }
+  } = s, [c, n] = N(null);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ t("div", { className: "grid-label", children: d }),
+    /* @__PURE__ */ t("div", { className: "caluclating-group", children: a == null ? void 0 : a.map((e, r) => /* @__PURE__ */ t(
+      R,
+      {
+        type: "button",
+        btnType: c === (e == null ? void 0 : e.code) ? "filled" : "tinted",
+        color: "neutral",
+        borderRadius: "curved",
+        onClick: () => {
+          n(e == null ? void 0 : e.code), l(e == null ? void 0 : e.code);
+        },
+        children: e == null ? void 0 : e.name
+      },
+      r
+    )) })
+  ] });
+}), se = w((s, b) => {
+  const { text: d = "Goal", goals: a, onChange: l = () => {
+  } } = s, [c, n] = N(null);
+  return /* @__PURE__ */ i(z, { children: [
+    /* @__PURE__ */ t("div", { className: "grid-label", children: d }),
+    /* @__PURE__ */ t("div", { className: "caluclating-group group-activity", children: a == null ? void 0 : a.map((e, r) => /* @__PURE__ */ t(
+      R,
+      {
+        type: "button",
+        btnType: c === (e == null ? void 0 : e.code) ? "filled" : "tinted",
+        color: "neutral",
+        borderRadius: "curved",
+        onClick: () => {
+          n(e == null ? void 0 : e.code), l(e == null ? void 0 : e.code);
+        },
+        children: /* @__PURE__ */ i("div", { className: "btn-cnt", children: [
+          /* @__PURE__ */ t("i", { className: e == null ? void 0 : e.icon }),
+          /* @__PURE__ */ t("span", { children: e == null ? void 0 : e.name })
+        ] })
+      },
+      r
+    )) })
+  ] });
+}), de = w((s, b) => {
+  const {
+    caloriesText: d = "Calories",
+    carbsText: a = "Carbs",
+    proteinText: l = "Protein",
+    fatsText: c = "Fats",
+    calculateAgainText: n = "Calculate again",
+    calories: e,
+    carbs: r,
+    protein: o,
+    fats: m,
+    onGoBack: g = () => {
+    }
+  } = s;
+  return /* @__PURE__ */ i(te, { children: [
+    /* @__PURE__ */ i(ae, { children: [
+      /* @__PURE__ */ i($, { color: "var(--warning-600)", children: [
+        /* @__PURE__ */ t("i", { className: "mng-lnc-fire" }),
+        /* @__PURE__ */ i("div", { className: "subgroup", children: [
+          /* @__PURE__ */ i("div", { children: [
+            e,
+            " kcal"
+          ] }),
+          /* @__PURE__ */ t("div", { className: "subtext", children: d })
+        ] })
+      ] }),
+      /* @__PURE__ */ i($, { color: "var(--secondary-400)", children: [
+        /* @__PURE__ */ t("i", { className: "mng-lnc-leaf" }),
+        /* @__PURE__ */ i("div", { className: "subgroup", children: [
+          /* @__PURE__ */ i("div", { children: [
+            r,
+            "g"
+          ] }),
+          /* @__PURE__ */ t("div", { className: "subtext", children: a })
+        ] })
+      ] }),
+      /* @__PURE__ */ i($, { color: "var(--info-500)", children: [
+        /* @__PURE__ */ t("i", { className: "mng-lnc-meat" }),
+        /* @__PURE__ */ i("div", { className: "subgroup", children: [
+          /* @__PURE__ */ i("div", { children: [
+            o,
+            "g"
+          ] }),
+          /* @__PURE__ */ t("div", { className: "subtext", children: l })
+        ] })
+      ] }),
+      /* @__PURE__ */ i($, { color: "var(--warning-300)", children: [
+        /* @__PURE__ */ t("i", { className: "mng-lnc-meat" }),
+        /* @__PURE__ */ i("div", { className: "subgroup", children: [
+          /* @__PURE__ */ i("div", { children: [
+            m,
+            "g"
+          ] }),
+          /* @__PURE__ */ t("div", { className: "subtext", children: c })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "dropdown-group", children: [
+      /* @__PURE__ */ t("div", { className: "vertical-line" }),
+      /* @__PURE__ */ t(
+        K,
+        {
+          color: "neutral",
+          control: /* @__PURE__ */ t(
+            X,
+            {
+              borderRadius: "curved",
+              btnType: "basic",
+              className: "dropdown-btn",
+              color: "neutral",
+              icon: "ellipsis",
+              type: "button"
+            }
+          ),
+          offsetValue: -10,
+          placement: "bottom-end",
+          children: /* @__PURE__ */ t(_, { icon: "star", onClick: g, children: n })
+        }
+      )
+    ] })
+  ] });
+}), me = w((s, b) => {
+  const {
+    caloriesText: d,
+    carbsText: a,
+    proteinText: l,
+    fatsText: c,
+    calculateAgainText: n,
+    yearsText: e,
+    heightText: r,
+    weightText: o,
+    genderText: m,
+    calculateText: g,
+    closeText: p,
+    genders: h,
+    activityLevels: v,
+    activityLevelText: x,
+    goalText: k,
+    goals: C,
+    title: u = "Daily calorie calculator",
+    subtitle: L = "Lorem ipsum dolor sit amet",
+    list: j = [
+      "Ovdje može pisati zašto je bitno da znamo kolika nam je dnevna kalorijska potreba.",
+      "Ovdje može pisati zašto je bitno da znamo kolikanam je dnevna kalorijska potreba.",
+      "From certified dealers from all over Europe"
+    ],
+    buttonText: M = "Calculate calorie needs"
+  } = s, [W, S] = N(1), [f, B] = N(0);
+  return /* @__PURE__ */ i(J, { ref: b, children: [
+    /* @__PURE__ */ i(Q, { children: [
+      /* @__PURE__ */ t("div", { className: "header-title", children: u }),
+      /* @__PURE__ */ t("div", { className: "header-subtitle", children: L })
+    ] }),
+    W === 1 && /* @__PURE__ */ t(
+      Z,
+      {
+        buttonText: M,
+        onBannerClick: () => {
+          S(2);
+        },
+        list: j
+      }
+    ),
+    W === 2 && /* @__PURE__ */ t(
+      ie,
+      {
+        yearsText: e,
+        heightText: r,
+        weightText: o,
+        genderText: m,
+        calculateText: g,
+        closeText: p,
+        onClose: () => S(1),
+        genders: h,
+        activityLevels: v,
+        activityLevelText: x,
+        goalText: k,
+        goals: C,
+        onCalculate: ({
+          gender: V,
+          year: E,
+          height: F,
+          weight: O,
+          activityLevel: H,
+          goal: P
+        }) => {
+          const D = q({
+            gender: V,
+            age: E,
+            heightCm: F,
+            weightKg: O,
+            activityLevel: H,
+            goal: P
+          });
+          B(D), S(3);
+        }
+      }
+    ),
+    W === 3 && /* @__PURE__ */ t(
+      de,
+      {
+        caloriesText: d,
+        carbsText: a,
+        proteinText: l,
+        fatsText: c,
+        calculateAgainText: n,
+        onGoBack: () => S(2),
+        calories: f == null ? void 0 : f.calories,
+        fats: f == null ? void 0 : f.fat,
+        carbs: f == null ? void 0 : f.carbs,
+        protein: f == null ? void 0 : f.protein
+      }
+    )
+  ] });
+}), ke = w((s, b) => /* @__PURE__ */ t(me, { ref: b, ...s }));
+export {
+  ke as default
+};