@ssa-ui-kit/widgets
Version:
SSA UI Kit widgets
1,366 lines (1,258 loc) • 98.7 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["SSAWidgets"] = factory();
else
root["SSAWidgets"] = factory();
})(self, () => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
AccountBalance: () => (/* reexport */ AccountBalance),
AccountKeys: () => (/* reexport */ AccountKeys),
Activity: () => (/* reexport */ Activity),
BalancePieChart: () => (/* reexport */ BalancePieChart),
BalancePieChartTitle: () => (/* reexport */ BalancePieChartTitle),
Bmi: () => (/* reexport */ Bmi),
BotsTable: () => (/* reexport */ BotsTable),
BotsTableCell: () => (/* reexport */ BotsTableCell),
BotsTableHead: () => (/* reexport */ BotsTableHead),
BotsTableRow: () => (/* reexport */ BotsTableRow),
BotsTableWrapper: () => (/* reexport */ BotsTableWrapper),
Calories: () => (/* reexport */ Calories),
ExchangeAccount: () => (/* reexport */ ExchangeAccount),
HeartRate: () => (/* reexport */ HeartRate),
ListGoals: () => (/* reexport */ ListGoals),
MealNutrients: () => (/* reexport */ MealNutrients),
MealPlanner: () => (/* reexport */ MealPlanner),
StepsCounter: () => (/* reexport */ StepsCounter),
TradingInfoCard: () => (/* reexport */ TradingInfoCard_TradingInfoCard),
TradingScoreboard: () => (/* reexport */ TradingScoreboard_TradingScoreboard),
UpcomingWorkouts: () => (/* reexport */ UpcomingWorkouts),
UserCard: () => (/* reexport */ UserCard_UserCard),
WaterConsume: () => (/* reexport */ WaterConsume),
useAccountKeys: () => (/* reexport */ useAccountKeys)
});
;// external "@emotion/react"
const react_namespaceObject = require("@emotion/react");
;// external "react"
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
;// external "@ssa-ui-kit/core"
const core_namespaceObject = require("@ssa-ui-kit/core");
;// ./src/components/Activity/styles.ts
const contentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:center;gap:20px;flex-direction:row;max-width:380px;", theme.mediaQueries.md, "{gap:30px;}" + ( true ? "" : 0), true ? "" : 0);
;// external "@ssa-ui-kit/utils"
const utils_namespaceObject = require("@ssa-ui-kit/utils");
;// external "@emotion/react/jsx-runtime"
const jsx_runtime_namespaceObject = require("@emotion/react/jsx-runtime");
;// ./src/components/Activity/ActivityItem.tsx
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const {
printDayOfTheWeek
} = utils_namespaceObject.dateFormatters;
const container = true ? {
name: "109oaxu",
styles: "display:flex;align-items:center;flex-direction:column;justify-content:center;height:162px;gap:10px;font-size:11px"
} : 0;
const ActivityItem = ({
currentValue,
date
}) => {
return (0,jsx_runtime_namespaceObject.jsxs)("div", {
css: container,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressVertical, {
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressBar, {
percentage: currentValue,
color: "yellow"
})
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "subtitle",
children: printDayOfTheWeek(new Date(date).getDay())
})]
});
};
/* harmony default export */ const Activity_ActivityItem = (ActivityItem);
;// ./src/components/Activity/Activity.tsx
function Activity_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var _ref = true ? {
name: "11yrylr",
styles: "width:100%;flex-direction:column"
} : 0;
var _ref2 = true ? {
name: "1uqairc",
styles: "border-radius:20px;padding-inline:24px;padding-block:24px"
} : 0;
const Activity = ({
data
}) => {
const [selected, setSelected] = (0,external_react_namespaceObject.useState)('');
const [options, setOptions] = (0,external_react_namespaceObject.useState)([]);
(0,external_react_namespaceObject.useEffect)(() => {
if (data == null || typeof data !== 'object') {
return;
}
setOptions(Object.keys(data).map((item, index) => ({
id: index,
value: `${item.charAt(0).toUpperCase()}${item.slice(1)}`
})));
}, [data]);
(0,external_react_namespaceObject.useEffect)(() => {
if (options?.length > 0 && !selected) {
handleChange(options[0]);
}
}, [options]);
const handleChange = e => {
const value = e.value.toString().toLowerCase();
setSelected(value);
};
return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Card, {
css: _ref2,
children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardHeader, {
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h3",
weight: "bold",
children: "Activity"
}), options?.length > 0 && (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Dropdown, {
selectedItem: options[0],
onChange: handleChange,
children: options.map((item, index) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DropdownOption, {
value: item.value
}, index))
})]
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardContent, {
css: _ref,
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Wrapper, {
css: contentWrapper,
children: Array.isArray(data[selected]) && data[selected].map((item, index) => (0,jsx_runtime_namespaceObject.jsx)(Activity_ActivityItem, {
...item
}, index))
})
})]
});
};
;// ./src/components/Calories/innerContent.tsx
function innerContent_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var innerContent_ref = true ? {
name: "8or0zb",
styles: "gap:5px"
} : 0;
const InnerContent = ({
currentValue,
max
}) => {
const theme = (0,react_namespaceObject.useTheme)();
return (0,jsx_runtime_namespaceObject.jsxs)("div", {
style: {
display: 'grid',
textAlign: 'center'
},
children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
alignItems: "baseline",
direction: "row",
css: innerContent_ref,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h5",
weight: "bold",
color: theme.colors.greyDarker,
children: currentValue
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "subtitle",
weight: "bold",
color: theme.colors.greyDarker,
children: "kcal"
})]
}), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Typography, {
variant: "subtitle",
color: theme.colors.greyDarker60,
children: [currentValue / max * 100, "% done"]
})]
});
};
;// ./src/components/Calories/Calories.tsx
function Calories_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
*
* UI Component that shows how many calories the user has burned
*/
var Calories_ref = true ? {
name: "1paxtit",
styles: "box-shadow:0 10px 40px rgba(42, 48, 57, 0.08);border-radius:20px"
} : 0;
const Calories = ({
max,
currentValue
}) => {
const theme = (0,react_namespaceObject.useTheme)();
return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Card, {
css: Calories_ref,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardHeader, {
icon: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ResponsiveImage, {
css: /*#__PURE__*/(0,react_namespaceObject.css)({
filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})`
}, true ? "" : 0, true ? "" : 0),
srcSet: "https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_64.png?alt=media&token=6a57e3f5-0e15-4dcf-8871-f1bf94d887af 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251 48w",
sizes: "(min-width: 1440px) 64px, 48px",
src: "https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251",
alt: "Calories burn"
}),
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h6",
weight: "bold",
children: "Calories"
})
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardContent, {
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressCircle, {
max: max,
currentValue: currentValue,
color: "pink",
infoContent: (0,jsx_runtime_namespaceObject.jsx)(InnerContent, {
max: max,
currentValue: currentValue
}),
size: 120
})
})]
});
};
;// external "@nivo/core"
const external_nivo_core_namespaceObject = require("@nivo/core");
;// external "@nivo/line"
const line_namespaceObject = require("@nivo/line");
;// ./src/components/HeartRate/utils.tsx
const getTime = (date, options) => date.toLocaleTimeString('en-US', options || {
hour: '2-digit',
minute: '2-digit'
});
;// ./src/components/HeartRate/HeartRateLineChart.tsx
// ScaleSpec is not exported from @nivo/line
const defaults = {
margin: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
xScale: {
type: 'point'
},
yScale: {
type: 'linear',
min: 'auto',
max: 'auto',
stacked: true,
reverse: false
},
pointBorderColor: {
from: 'serieColor'
},
legends: [],
xFormat: yVal => getTime(new Date(yVal)),
yFormat: xVal => `${xVal} bpm`,
tooltip: args => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.SimpleChartTooltip, {
...args
})
};
const HeartRateLineChart = ({
data,
...props
}) => {
return (0,jsx_runtime_namespaceObject.jsx)(line_namespaceObject.ResponsiveLine, {
data: data,
curve: "linear",
axisTop: null,
axisRight: null,
axisBottom: null,
axisLeft: null,
enableGridX: false,
enableGridY: false,
lineWidth: 1,
enablePoints: false,
pointSize: 3,
pointColor: "black",
pointBorderWidth: 2,
pointLabelYOffset: -12,
enableArea: true,
areaOpacity: 0.1,
enableCrosshair: false,
crosshairType: "top-left",
useMesh: true,
animate: false,
...defaults,
...props
});
};
;// external "@emotion/styled/base"
const base_namespaceObject = require("@emotion/styled/base");
var base_default = /*#__PURE__*/__webpack_require__.n(base_namespaceObject);
;// ./src/components/HeartRate/BPM.tsx
function BPM_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const BPMBase = /*#__PURE__*/base_default()("div", true ? {
target: "ek7c6rl0"
} : 0)( true ? {
name: "1v1gu0d",
styles: "text-align:center;margin-top:23px"
} : 0);
const BPMValueStyles = true ? {
name: "1ttuluy",
styles: "font-weight:700;font-size:1.728rem;line-height:2rem;@media (max-width: 900px){font-size:1.2rem;line-height:1.639;}"
} : 0;
const getBPMLabelStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.greyDarker60, ";font-weight:600;font-size:1rem;line-height:1.5rem;margin-left:4px;@media (max-width: 900px){font-size:0.833rem;line-height:1.375;}" + ( true ? "" : 0), true ? "" : 0);
const BPM = ({
value
}) => {
const theme = (0,react_namespaceObject.useTheme)();
return (0,jsx_runtime_namespaceObject.jsxs)(BPMBase, {
children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
css: BPMValueStyles,
children: value
}), (0,jsx_runtime_namespaceObject.jsx)("span", {
css: getBPMLabelStyles(theme),
children: "BPM"
})]
});
};
;// ./src/components/HeartRate/HeartRate.tsx
function HeartRate_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const gradientId = 'HeartRateGradient';
const chartFill = [{
match: '*',
id: gradientId
}];
/**
*
* UI Component that shows the heart rate of the user
*/
var HeartRate_ref = true ? {
name: "1srykpd",
styles: "height:65px;width:calc(100% + 40px);margin-inline:-20px"
} : 0;
var HeartRate_ref2 = true ? {
name: "1paxtit",
styles: "box-shadow:0 10px 40px rgba(42, 48, 57, 0.08);border-radius:20px"
} : 0;
var _ref3 = true ? {
name: "1d3w5wq",
styles: "width:100%"
} : 0;
const HeartRate = ({
data,
caption = 'Heart Rate',
color
}) => {
const [bpmValue, setBpmValue] = (0,external_react_namespaceObject.useState)(data?.data?.[0]?.y);
const [onBpmValueChange, cancelTimer] = (0,external_react_namespaceObject.useMemo)(() => (0,utils_namespaceObject.throttle)(point => setBpmValue(point?.data?.y), 100), []);
const theme = (0,react_namespaceObject.useTheme)();
const chartColor = color || theme.colors.purpleDark;
(0,external_react_namespaceObject.useEffect)(() => () => cancelTimer(), []);
(0,external_react_namespaceObject.useEffect)(() => {
setBpmValue(data?.data?.[0]?.y);
}, [data]);
const gradientDefs = (0,external_react_namespaceObject.useMemo)(() => [(0,external_nivo_core_namespaceObject.linearGradientDef)(gradientId, [{
offset: 100,
color: chartColor
}, {
offset: 0,
color: chartColor
}])], [chartColor]);
const chartProps = (0,external_react_namespaceObject.useMemo)(() => ({
data: [data],
colors: chartColor
}), [data, chartColor]);
return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Card, {
css: HeartRate_ref2,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardHeader, {
icon: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ResponsiveImage, {
css: /*#__PURE__*/(0,react_namespaceObject.css)({
filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})`
}, true ? "" : 0, true ? "" : 0),
srcSet: "https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_64.png?alt=media&token=aca1639b-62f5-44ed-a0d1-3cea8e4797e2 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_48.png?alt=media&token=7ef68a25-5362-48b9-b359-c46b48d1db54 48w",
sizes: "(min-width: 1440px) 64px, 48px",
src: "https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_48.png?alt=media&token=7ef68a25-5362-48b9-b359-c46b48d1db54",
alt: "Heart"
}),
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h5",
weight: "bold",
children: caption
})
}), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardContent, {
direction: "column",
css: _ref3,
children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
css: HeartRate_ref,
children: (0,jsx_runtime_namespaceObject.jsx)(HeartRateLineChart, {
...chartProps,
fill: chartFill,
defs: gradientDefs,
onMouseMove: onBpmValueChange
})
}), bpmValue != null ? (0,jsx_runtime_namespaceObject.jsx)(BPM, {
value: bpmValue
}) : null]
})]
});
};
;// ./src/components/HeartRate/index.ts
;// ./src/components/MealNutrients/chartDefaultConfig.tsx
const {
formatDayOfWeek
} = utils_namespaceObject.dateFormatters;
const CustomPointLayer = ({
currentPoint,
pointSize,
pointBorderWidth,
...props
}) => {
const theme = (0,external_nivo_core_namespaceObject.useTheme)();
if (!currentPoint) {
return;
}
const point = currentPoint;
return (0,jsx_runtime_namespaceObject.jsx)("g", {
children: (0,jsx_runtime_namespaceObject.jsx)(external_nivo_core_namespaceObject.DotsItem, {
x: point.x,
y: point.y,
color: point.color,
borderColor: point.borderColor,
datum: point.data,
theme: theme,
size: pointSize || 0,
borderWidth: pointBorderWidth || 0,
...props
}, point.id)
});
};
const tickValues = [0, 20, 40, 60, 80, 100];
const chartDefaultConfig_defaults = {
margin: {
top: 28,
right: 50,
bottom: 50,
left: 5
},
xScale: {
type: 'time',
format: '%L',
precision: 'day'
},
yScale: {
type: 'linear',
min: 'auto',
max: 'auto',
stacked: false,
reverse: false
},
axisRight: {
tickSize: 0,
tickPadding: 10,
tickRotation: 0,
tickValues,
format: tick => `${tick}%`,
legend: '',
legendOffset: 0
},
axisBottom: {
tickSize: 0,
tickPadding: 30,
tickRotation: 0,
legend: '',
tickValues: 'every day',
format: formatDayOfWeek
},
pointColor: {
from: 'color',
modifiers: []
},
pointBorderColor: {
from: 'color',
modifiers: []
},
legends: [],
gridYValues: tickValues,
layers: ['grid', 'markers', 'axes', 'areas', 'crosshair', 'lines', CustomPointLayer, 'slices', 'mesh', 'legends']
};
;// ./src/components/MealNutrients/MealNutrientsTooltip.tsx
const capitalize = str => `${str[0].toUpperCase()}${str.substring(1)}`;
const MealNutrientsTooltip = ({
colorName,
point
}) => {
const caption = capitalize(String(point.serieId));
const {
data: {
y,
comp,
unit
}
} = point;
const iconName = comp && `arrow-${comp > 0 ? 'up' : 'down'}` || undefined;
return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressChartTooltip, {
caption: caption,
value: y,
valueFormatted: `${comp}${unit}`,
iconName: iconName,
barProps: {
color: colorName
}
});
};
;// ./src/components/MealNutrients/MealNutrientsLineChart.tsx
const colorPalette = ['pink', 'purple', 'turquoise', 'yellow', 'green', 'blue'];
const MealNutrientsLineChart = ({
data,
...props
}) => {
const theme = (0,react_namespaceObject.useTheme)();
const defaultColorMapping = (0,external_react_namespaceObject.useMemo)(() => colorPalette.reduce((res, colorName) => {
const colorValue = theme.colors[`${colorName}Lighter`];
res[colorValue] = colorName;
return res;
}, {}), [theme.colors]);
const defaultSettings = (0,external_react_namespaceObject.useMemo)(() => Object.assign(chartDefaultConfig_defaults, {
colors: colorPalette.map(color => theme.colors[`${color}Lighter`]),
tooltip: ({
point
}) => {
const color = defaultColorMapping[point.color];
return (0,jsx_runtime_namespaceObject.jsx)(MealNutrientsTooltip, {
point: point,
colorName: color
});
},
theme: {
axis: {
ticks: {
text: {
fontSize: '0.833rem',
fontWeight: 500,
fill: theme.colors.greyDarker
}
}
},
grid: {
line: {
stroke: theme.colors.greyLighter,
strokeWidth: 1,
strokeDasharray: '8 8'
}
},
text: {
fontFamily: "'Manrope', sans-serif"
}
}
}), [theme.colors, defaultColorMapping]);
return (0,jsx_runtime_namespaceObject.jsx)(line_namespaceObject.ResponsiveLine, {
data: data,
curve: "catmullRom",
axisTop: null,
axisLeft: null,
enableGridX: false,
enableGridY: true,
lineWidth: 1,
enablePoints: true,
pointSize: 8,
pointBorderWidth: 0,
pointLabelYOffset: -12,
enableArea: false,
areaOpacity: 0.1,
enableCrosshair: false,
useMesh: true,
animate: false,
...defaultSettings,
...props
});
};
;// ./src/components/MealNutrients/useChartConfig.ts
const {
formatTime,
formatDayOfWeek: useChartConfig_formatDayOfWeek,
formatDate
} = utils_namespaceObject.dateFormatters;
const MAX_ITEMS_ON_SMALL_SCREENS = 7;
const MIN_WIDTH = 600;
const THROTTLE_DELAY_MS = 50;
const useChartConfig = (elRef, data, precision = 'day') => {
const [width, setWidth] = (0,external_react_namespaceObject.useState)(0);
const throttledRef = (0,external_react_namespaceObject.useRef)((0,utils_namespaceObject.throttle)(entries => {
setWidth(entries[0].contentRect.width);
}, THROTTLE_DELAY_MS));
const observerRef = (0,external_react_namespaceObject.useRef)(new ResizeObserver(throttledRef?.current?.[0]));
(0,external_react_namespaceObject.useEffect)(() => {
const currentRef = elRef.current;
if (observerRef.current && currentRef) {
observerRef.current.observe(currentRef);
}
return () => {
if (observerRef.current && currentRef) {
observerRef.current.unobserve(currentRef);
}
};
}, [elRef, observerRef]);
(0,external_react_namespaceObject.useEffect)(() => {
return () => {
if (throttledRef.current) {
const [, cancel] = throttledRef.current;
cancel();
}
};
}, [throttledRef]);
return (0,external_react_namespaceObject.useMemo)(() => ({
xScale: {
type: 'time',
format: '%L',
precision: precision === 'week' ? 'day' : precision
},
axisBottom: {
tickSize: 0,
tickPadding: 30,
legend: '',
tickValues: width < MIN_WIDTH ? MAX_ITEMS_ON_SMALL_SCREENS : undefined,
tickRotation: width < MIN_WIDTH ? 30 : 0,
format: precision === 'hour' ? formatTime : precision === 'week' ? useChartConfig_formatDayOfWeek : formatDate
}
}), [data, width, precision]);
};
/* harmony default export */ const MealNutrients_useChartConfig = (useChartConfig);
;// ./src/components/MealNutrients/MealNutrients.tsx
function MealNutrients_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var MealNutrients_ref = true ? {
name: "as11ew",
styles: "line-height:normal"
} : 0;
var MealNutrients_ref2 = true ? {
name: "1d3w5wq",
styles: "width:100%"
} : 0;
var MealNutrients_ref3 = true ? {
name: "1otqacd",
styles: "height:227px;svg{overflow:visible;}"
} : 0;
/**
*
* UI Component that shows the nutrients consumed by the user
*/
const MealNutrients = ({
caption = 'Meal Nutrients',
options,
data,
onOptionChange
}) => {
const [selectedOption, setSelectedOption] = (0,external_react_namespaceObject.useState)();
const containerRef = (0,external_react_namespaceObject.useRef)(null);
const chartConfig = MealNutrients_useChartConfig(containerRef, data, selectedOption?.precision);
(0,external_react_namespaceObject.useEffect)(() => {
if (options?.length > 0 && selectedOption == null) {
handleChange(options[0]);
}
}, [options]);
const handleChange = e => {
const item = options.filter(item => item.value === e.value)[0];
setSelectedOption(item);
if (onOptionChange) {
onOptionChange(item);
}
};
return (0,jsx_runtime_namespaceObject.jsxs)("div", {
ref: containerRef,
children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardHeader, {
transparent: true,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h4",
weight: "bold",
css: MealNutrients_ref,
children: caption
}), options?.length > 0 && (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Dropdown, {
selectedItem: options[0],
onChange: handleChange,
children: options.map(item => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DropdownOption, {
value: item.value,
label: item.label
}, item.value))
})]
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Card, {
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardContent, {
direction: "column",
css: MealNutrients_ref2,
children: (0,jsx_runtime_namespaceObject.jsx)("div", {
css: MealNutrients_ref3,
children: data?.length > 0 && (0,jsx_runtime_namespaceObject.jsx)(MealNutrientsLineChart, {
data: data,
...chartConfig
})
})
})
})]
});
};
;// ./src/components/MealNutrients/index.tsx
;// ./src/components/UpcomingWorkouts/style.ts
function style_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var style_ref = true ? {
name: "1g7ta9s",
styles: "display:flex;justify-content:space-between;align-items:center;width:100%;padding-left:15px"
} : 0;
const style_contentWrapper = () => style_ref;
;// ./src/components/UpcomingWorkouts/UpcomingWorkoutCard.tsx
function UpcomingWorkoutCard_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
*
* UI Component that use CardList to render a list of upcoming workouts
*/
var UpcomingWorkoutCard_ref = true ? {
name: "10ava9y",
styles: "width:calc(100% - 42px)"
} : 0;
const UpcomingWorkoutCard = ({
image,
title,
workoutTime,
renderDetails,
onClick
}) => {
const theme = (0,react_namespaceObject.useTheme)();
return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Card, {
noShadow: true,
children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
direction: "row",
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Avatar, {
size: 42,
image: image
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardContent, {
css: UpcomingWorkoutCard_ref,
children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
direction: "column",
children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
css: style_contentWrapper,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h6",
children: title
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
endIcon: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
name: "more"
}),
variant: "tertiary",
size: "small",
onClick: onClick
})]
}), (0,jsx_runtime_namespaceObject.jsxs)("div", {
css: style_contentWrapper,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "subtitle",
color: theme.colors.greyDarker60,
as: "p",
children: renderDetails()
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "subtitle",
as: "p",
children: workoutTime
})]
})]
})
})]
})
});
};
;// ./src/components/UpcomingWorkouts/UpcomingWorkouts.tsx
const UpcomingWorkouts = ({
workouts
}) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardList, {
title: "Upcoming Workout",
items: workouts,
renderItem: workout => (0,jsx_runtime_namespaceObject.jsx)(UpcomingWorkoutCard, {
image: workout.image,
title: workout.title,
workoutTime: workout.workoutTime,
onClick: workout.handleClick,
renderDetails: () => (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
children: [(0,jsx_runtime_namespaceObject.jsx)("strong", {
children: workout.details.exercises
}), " Exercises |", ' ', (0,jsx_runtime_namespaceObject.jsx)("strong", {
children: workout.details.minutes
}), " mins"]
})
})
});
;// ./src/components/WaterConsume/WaterConsume.tsx
function WaterConsume_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var WaterConsume_ref2 = true ? {
name: "7mn33w",
styles: "flex:1 1 auto;margin-left:11.5px"
} : 0;
const CustomConnector = ({
active,
completed
}) => {
const theme = (0,react_namespaceObject.useTheme)();
return (0,jsx_runtime_namespaceObject.jsx)("div", {
css: WaterConsume_ref2,
children: (0,jsx_runtime_namespaceObject.jsx)("span", {
css: /*#__PURE__*/(0,react_namespaceObject.css)("display:block;border-color:", active || completed ? theme.colors.blueLightLighter : theme.colors.greyDarker60, ";border-left-style:dashed;border-left-width:1px;min-height:20px;" + ( true ? "" : 0), true ? "" : 0)
})
});
};
const CustomStep = props => {
const {
active,
completed
} = props;
const theme = (0,react_namespaceObject.useTheme)();
return (0,jsx_runtime_namespaceObject.jsx)("div", {
css: /*#__PURE__*/(0,react_namespaceObject.css)("width:6px;height:6px;background-color:", active || completed ? theme.colors.blueLightLighter : theme.colors.greyDarker60, ";border-radius:50%;" + ( true ? "" : 0), true ? "" : 0)
});
};
/**
*
* UI Component shows the water consumption objective of the user
* @param steps - the order goes from top to bottom, from left to right
*/
var WaterConsume_ref = true ? {
name: "1paxtit",
styles: "box-shadow:0 10px 40px rgba(42, 48, 57, 0.08);border-radius:20px"
} : 0;
var WaterConsume_ref3 = true ? {
name: "1n5h93v",
styles: "width:100%;justify-content:center;align-items:stretch"
} : 0;
const WaterConsume = ({
minValue = 0,
maxValue = 100,
currentValue,
active,
steps,
unit = '%'
}) => {
const theme = (0,react_namespaceObject.useTheme)();
const currentPercentage = Math.round(currentValue * 100 / maxValue);
return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Card, {
css: WaterConsume_ref,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardHeader, {
icon: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ResponsiveImage, {
css: /*#__PURE__*/(0,react_namespaceObject.css)({
filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})`
}, true ? "" : 0, true ? "" : 0),
srcSet: "https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_64.png?alt=media&token=2abf9f9c-2159-4235-856c-f054783a007d 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_48.png?alt=media&token=abc1e619-940a-4fc0-9f83-ef0a998464f2 48w",
sizes: "(min-width: 1440px) 64px, 48px",
src: "https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_48.png?alt=media&token=abc1e619-940a-4fc0-9f83-ef0a998464f2",
alt: "Water"
}),
children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h6",
weight: "bold",
children: "Water"
})
}), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardContent, {
css: WaterConsume_ref3,
children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
style: {
fontSize: 14,
marginRight: '15px'
},
children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.ProgressVertical, {
children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.ProgressLegend, {
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressLegendItem, {
position: "end",
percentage: 100,
children: (0,jsx_runtime_namespaceObject.jsx)("span", {
style: {
textAlign: 'right',
display: 'block',
paddingRight: 6
},
children: `${maxValue}${unit}`
})
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressLegendItem, {
position: "current",
percentage: currentPercentage,
children: (0,jsx_runtime_namespaceObject.jsx)("span", {
style: {
textAlign: 'right',
display: 'block',
paddingRight: 6
},
children: `${currentValue}${unit}`
})
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressLegendItem, {
position: "start",
percentage: 0,
children: (0,jsx_runtime_namespaceObject.jsx)("span", {
style: {
textAlign: 'right',
display: 'block',
paddingRight: 6
},
children: `${minValue}${unit}`
})
})]
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressBar, {
percentage: currentPercentage,
color: "blueLight"
})]
})
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Stepper, {
color: theme.colors.blueLight,
activeStep: active,
orientation: 'vertical',
inverted: true,
sx: {
rowGap: 0
},
children: steps.map((step, index) => {
return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Step, {
Connector: CustomConnector,
children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.StepLabel, {
StepIcon: CustomStep,
children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
style: {
textAlign: 'left',
display: 'block',
fontSize: 9
},
children: step.caption
}), (0,jsx_runtime_namespaceObject.jsx)("span", {
style: {
textAlign: 'left',
display: 'block',
fontSize: 9,
fontWeight: 700
},
children: step.title
})]
})
}, index);
})
})]
})]
});
};
;// ./src/components/Bmi/BmiHeatbar.tsx
function BmiHeatbar_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const BmiHeatbar = /*#__PURE__*/base_default()("div", true ? {
target: "e1n6hn4h0"
} : 0)( true ? {
name: "1oaiz4z",
styles: "width:100%;height:14px;background:linear-gradient(\n 90deg,\n #8b60f4 0%,\n #658fdf 16.67%,\n #69cdd0 35.42%,\n #88e4c3 51.04%,\n #edba5d 68.23%,\n #ed8f66 84.38%,\n #f28689 100%\n );border-radius:21px"
} : 0);
;// ./src/components/Bmi/BmiPointer.tsx
const BmiPointer = /*#__PURE__*/base_default()("div", true ? {
target: "etdmc4t0"
} : 0)("position:absolute;left:", ({
percentage
}) => percentage, "%;top:0;width:14px;height:14px;background:#2b2d31;box-shadow:-4px 4px 10px rgba(42, 48, 57, 0.2);border-radius:19px;" + ( true ? "" : 0));
;// ./src/components/Bmi/BmiInfo.tsx
const BmiInfo = /*#__PURE__*/base_default()("div", true ? {
target: "e1968qvg0"
} : 0)("display:flex;padding:8px 16px;background:", ({
theme
}) => theme.colors.greyLighter, ";border-radius:12px;align-items:center;" + ( true ? "" : 0));
;// ./src/components/Bmi/BmiLabel.tsx
function BmiLabel_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const BmiLabel = /*#__PURE__*/base_default()(core_namespaceObject.Typography, true ? {
target: "ejsfewa0"
} : 0)( true ? {
name: "h16vwx",
styles: "position:absolute;left:65%"
} : 0);
;// ./src/components/Bmi/BmiLabels.tsx
function BmiLabels_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var BmiLabels_ref = true ? {
name: "13f8x48",
styles: "left:80%"
} : 0;
var BmiLabels_ref2 = true ? {
name: "322hte",
styles: "left:60%"
} : 0;
var BmiLabels_ref3 = true ? {
name: "1s4icj2",
styles: "left:20%"
} : 0;
var _ref4 = true ? {
name: "1i0rnv0",
styles: "position:relative;margin-top:5px"
} : 0;
const BmiLabels = () => (0,jsx_runtime_namespaceObject.jsxs)("div", {
css: _ref4,
children: [(0,jsx_runtime_namespaceObject.jsx)(BmiLabel, {
variant: 'subtitle',
css: BmiLabels_ref3,
children: "18.5"
}), (0,jsx_runtime_namespaceObject.jsx)(BmiLabel, {
variant: 'subtitle',
css: BmiLabels_ref2,
children: "25"
}), (0,jsx_runtime_namespaceObject.jsx)(BmiLabel, {
variant: 'subtitle',
css: BmiLabels_ref,
children: "30"
})]
});
;// ./src/components/Bmi/styles.ts
function styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const TitleWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;h6{line-height:1.625rem;margin-left:10px;color:", theme.colors.greyDarker60, ";}" + ( true ? "" : 0), true ? "" : 0);
const ContentWrapper = true ? {
name: "1fgsgvi",
styles: "position:relative;width:100%;padding-top:20px"
} : 0;
;// ./src/components/Bmi/Bmi.tsx
function Bmi_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var Bmi_ref = true ? {
name: "1d3w5wq",
styles: "width:100%"
} : 0;
var Bmi_ref2 = true ? {
name: "zccqi5",
styles: "box-shadow:0 10px 40px rgba(29, 22, 23, 0.07);border-radius:16px;padding-bottom:40px"
} : 0;
/**
*
* UI Component that calculates the Body Mass Index of the user
*/
const Bmi = ({
height = 175,
weight = 66
}) => {
const [info, setInfo] = (0,external_react_namespaceObject.useState)('');
const [pointer, setPointer] = (0,external_react_namespaceObject.useState)(0);
const bmi = Number((weight / (height * height) * 10000).toFixed(1));
const setInfos = {
underWeight: () => {
setInfo('Under Weight');
setPointer(10);
},
healthy: () => {
setInfo('Healthy');
setPointer(40);
},
overweight: () => {
setInfo('Overweight');
setPointer(70);
},
obese: () => {
setInfo('Obese');
setPointer(90);
}
};
(0,external_react_namespaceObject.useEffect)(() => {
if (bmi < 18.5) {
setInfos.underWeight();
} else if (bmi > 18.5 && bmi <= 24.9) {
setInfos.healthy();
} else if (bmi > 24.9 && bmi < 30) {
setInfos.overweight();
} else {
setInfos.obese();
}
}, [bmi]);
return (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardHeader, {
transparent: true,
children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
css: TitleWrapper,
children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Typography, {
variant: "h5",
weight: "bold",
children: ["BMI", ' ']
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h6",
children: "Body Mass Index"
})]
})
}), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Card, {
css: Bmi_ref2,
children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardHeader, {
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h2",
weight: "medium",
children: bmi
}), (0,jsx_runtime_namespaceObject.jsx)(BmiInfo, {
children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Typography, {
variant: "subtitle",
weight: "lighter",
children: ["You're ", info]
})
})]
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardContent, {
css: Bmi_ref,
children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
css: ContentWrapper,
children: [(0,jsx_runtime_namespaceObject.jsx)(BmiPointer, {
"data-testid": "bmi-pointer",
percentage: pointer
}), (0,jsx_runtime_namespaceObject.jsx)(BmiHeatbar, {}), (0,jsx_runtime_namespaceObject.jsx)(BmiLabels, {})]
})
})]
})]
});
};
;// ./src/components/ListGoals/styles.tsx
const content = theme => /*#__PURE__*/(0,react_namespaceObject.css)("h6{line-height:23px;}p{color:", theme.colors.greyDarker60, ";line-height:23px;}" + ( true ? "" : 0), true ? "" : 0);
;// ./src/components/ListGoals/ListGoalsCard.tsx
function ListGoalsCard_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var ListGoalsCard_ref = true ? {
name: "ui9771",
styles: "width:calc(100% - 42px);padding-left:15px"
} : 0;
var ListGoalsCard_ref2 = true ? {
name: "1ch9yvl",
styles: "border-radius:0"
} : 0;
const ListGoalsCard = ({
image,
title,
details,
progressProps
}) => {
const {
size = 50,
max = 100,
currentValue = 0,
infoContent,
color = 'blue'
} = progressProps;
return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Card, {
noShadow: true,
children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
direction: "row",
avatarSize: 42,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Avatar, {
size: 42,
image: image,
css: ListGoalsCard_ref2
}), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardContent, {
css: ListGoalsCard_ref,
children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
css: content,
children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "h6",
children: title
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
variant: "subtitle",
as: "p",
children: details
})]
}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressCircle, {
size: size,
max: max,
currentValue: currentValue,
infoContent: infoContent || (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Typography, {
variant: "body1",
children: [currentValue, "%"]
}),
color: color
})]
})]
})
});
};
;// ./src/components/ListGoals/ListGoals.tsx
/**
*
* UI Component that uses CardList to render a list of goals
*/
const ListGoals = ({
goals
}) => {
return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardList, {
title: "Goals",
items: goals,
renderItem: goal => (0,jsx_runtime_namespaceObject.jsx)(ListGoalsCard, {
image: goal.image,
title: goal.title,
details: goal.details,
progressProps: {
currentValue: goal.completion,
color: goal.color
}
})
});
};
;// ./src/components/MealPlanner/MealPlannerBadge.tsx
function MealPlannerBadge_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const Marker = /*#__PURE__*/base_default()(core_namespaceObject.Badge, true ? {
target: "e12bwihj0"
} : 0)( true ? {
name: "1c9h7mo",
styles: "display:inline-block;padding:0;margin-right:5px;width:4px;height:4px"
} : 0);
/* harmony default export */ const MealPlannerBadge = (Marker);
;// ./src/components/MealPlanner/MealPlannerLegends.tsx
function MealPlannerLegends_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const MealPlannerLegends = {
List: /*#__PURE__*/base_default()("ul", true ? {
target: "e1yfjgtr1"
} : 0)( true ? {
name: "wmff3h",
styles: "display:flex;justify-content:space-between;list-style:none;width:100%;height:20px;padding:0;margin:0;margin-bottom:8px"
} : 0),
Item: /*#__PURE__*/base_default()("li", true ? {
target: "e1yfjgtr0"
} : 0)( true ? {
name: "s5xdrg",
styles: "display:flex;align-items:center"
} : 0)
};
/* harmony default export */ const MealPlanner_MealPlannerLegends = (MealPlannerLegends);
;// ./src/components/MealPlanner/MealPlannerBars.tsx
function MealPlannerBars_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const MealPlannerBars = /*#__PURE__*/base_default()("ul", true ? {
target: "e1obar840"
} : 0)( true ? {
name: "1bn6kyv",
styles: "display:flex;list-style:none;width:100%;height:20px;padding:0;margin:0;&>li:nth-of-type(2n):not(:last-child){margin:0 5px;}"
} : 0);
/* harmony default export */ const MealPlanner_MealPlannerBars = (MealPlannerBars);
;// ./src/components/MealPlanner/MealPlannerCard.tsx
function MealPlannerCard_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned fr