@lanaco/lnc-react-ui/dist/CalorieCalculatorSection.js

React component library

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 A } from "./index-S5Cd7WrG.js";
import G 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, #fff);
  border-radius: 30px;
  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, #059669);
    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, #fff);
    padding: 0 0.75rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    border: 1px solid var(--success-600, #059669);
  }

  .text {
    width: 100%;
    text-align: center;
    pointer-events: none;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--gray-95012, #14161a1f);
    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, f) => {
  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, { ref: f, 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: A.any,
  handleClick: A.func,
  color: A.string
};
const ie = w((s, f) => {
  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, f) => {
  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(
        G,
        {
          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, f) => {
  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(
        G,
        {
          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, f) => {
  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(
        G,
        {
          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, f) => {
  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, f) => {
  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, f) => {
  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, f) => {
  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), [b, B] = N(0);
  return /* @__PURE__ */ i(J, { ref: f, 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,
        onButtonAction: () => {
          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: b == null ? void 0 : b.calories,
        fats: b == null ? void 0 : b.fat,
        carbs: b == null ? void 0 : b.carbs,
        protein: b == null ? void 0 : b.protein
      }
    )
  ] });
}), ke = w((s, f) => /* @__PURE__ */ t(me, { ref: f, ...s }));
export {
  ke as default
};