@hhgtech/hhg-components
Version:
Hello Health Group common components
210 lines (197 loc) • 29.6 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var core = require('@mantine/core');
var form = require('@mantine/form');
var LastPeriod = require('./LastPeriod-6cca61cd.js');
var index$4 = require('./index-3424862e.js');
var index$2 = require('./index-2558f624.js');
var index$3 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
require('./index-4d838fd2.js');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var context = require('./context-c8d07963.js');
var index$1 = require('./index-4aa0b39e.js');
var other = require('@hhgtech/icons/other');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
const AvoidPregnancy = (_a) => {
var { isMarryBaby, size = 24 } = _a, rest = tslib_es6.__rest(_a, ["isMarryBaby", "size"]);
const props = Object.assign({ width: size, height: size }, rest);
return isMarryBaby ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__default["default"].createElement("path", { d: "M16.5 27.133c1.298 0 2.596-.149 3.868-.447a9.15 9.15 0 0 0 6.818-6.818 16.94 16.94 0 0 0 0-7.736 9.15 9.15 0 0 0-6.818-6.818 16.94 16.94 0 0 0-7.736 0 9.15 9.15 0 0 0-6.818 6.818A17 17 0 0 0 5.367 16a.867.867 0 0 1-1.734 0c0-1.43.165-2.862.494-4.264a10.88 10.88 0 0 1 8.109-8.11 18.7 18.7 0 0 1 8.528 0 10.88 10.88 0 0 1 8.11 8.11 18.7 18.7 0 0 1 0 8.528 10.88 10.88 0 0 1-8.11 8.11 18.7 18.7 0 0 1-4.264.493.867.867 0 0 1 0-1.734", fill: "#3E3F58" }),
React__default["default"].createElement("path", { d: "M12.5 16a4 4 0 1 1 8 0 4 4 0 0 1-8 0", fill: "#fff" }),
React__default["default"].createElement("path", { d: "M11.633 16a4.867 4.867 0 1 1 9.734 0 4.867 4.867 0 0 1-9.734 0m4.867-3.133a3.133 3.133 0 1 0 0 6.266 3.133 3.133 0 0 0 0-6.266m-4 9.8a2.667 2.667 0 1 1-5.333 0 2.667 2.667 0 0 1 5.333 0", fill: "#3E3F58" }),
React__default["default"].createElement("path", { d: "M10.305 22.195c.26.26.26.683 0 .943l-1.91 1.91c-.36.36-.562.847-.562 1.355a3.25 3.25 0 0 1-1.796 2.907l-1.239.62a.667.667 0 1 1-.596-1.193l1.238-.62a1.92 1.92 0 0 0 1.06-1.714c0-.862.342-1.688.952-2.298l1.91-1.91c.26-.26.682-.26.943 0", fill: "#3E3F58" }),
React__default["default"].createElement("path", { d: "M3.874 4.788a1 1 0 0 1 1.414-1.414l23.099 23.098a1 1 0 1 1-1.415 1.415z", fill: "#E85388" }))) : (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__default["default"].createElement("g", { clipPath: "url(#clip0_1530_7251)" },
React__default["default"].createElement("path", { d: "M8.983 10.87a.23.23 0 0 1 .049-.16c.08-.114.156-.229.207-.36.1-.166.168-.348.233-.528.246-.668.397-1.36.508-2.062.036-.235.076-.471.09-.71.065-.511.101-1.024.095-1.541.004-.015.011-.03.011-.044a13 13 0 0 0-.089-1.62c-.023-.196-.093-.335-.298-.406-.293-.1-.48-.316-.568-.615a2.7 2.7 0 0 0-.217-.566c-.123-.222-.29-.391-.54-.47-.057-.018-.088-.016-.106.052q-.045.165-.073.336c-.005.044 0 .058.048.058q.122.005.244.017c.127.009.21.09.202.196-.011.111-.108.179-.239.166-.065-.007-.133-.009-.198-.016-.058-.008-.077.016-.067.072q.027.165.052.332c.006.043.031.053.07.053.078 0 .147-.03.218-.057.104-.042.2-.004.242.093.04.09.004.187-.093.235-.13.063-.27.113-.411.085a.23.23 0 0 0-.235.077c-.04-.084-.106-.146-.167-.211-.46-.475-.55-1.194-.235-1.82.18-.359.45-.627.828-.776A.4.4 0 0 0 8.69.595c.33-.317.734-.477 1.172-.55.641-.11 1.25-.024 1.819.3.41.233.728.566.942.983.131.253.188.535.246.814.16.762.233 1.538.293 2.313q.108 1.411.213 2.826c.055.712.13 1.422.24 2.128.066.428.175.846.26 1.27.097.479.039.941-.24 1.358a1.2 1.2 0 0 1-.517.428c-.163.05-.327.105-.491.155-.178.052-.302-.059-.268-.239a4.6 4.6 0 0 0 .077-.72 13.6 13.6 0 0 0-.133-2.225c-.03-.196-.055-.395-.087-.591-.07-.43-.151-.857-.257-1.28l-.015-.07a16 16 0 0 0-.282-1.03c-.012-.039-.025-.079-.076-.075-.038.003-.053.034-.058.07l-.146 1.105c-.05.219-.094.437-.158.652a5.5 5.5 0 0 1-.806 1.654l-.091.113c-.308.382-.654.719-1.094.95-.122.06-.177.048-.252-.063", fill: "#1B3250" }),
React__default["default"].createElement("path", { d: "M12.304 9.435c.1.737.154 1.477.133 2.224a4.6 4.6 0 0 1-.077.72c-.034.182.09.293.268.239q.246-.075.491-.155c.053.226.126.448.17.675q.09.452.129.912c.025.302.043.603.032.905q-.015.483-.065.964a14 14 0 0 1-.299 1.707c-.02.086-.045.17-.065.255-.02.09-.068.12-.16.12L8.789 18H7.781c-.111 0-.117-.011-.13-.124a3 3 0 0 0-.361-1.121c-.132-.235-.297-.448-.415-.692a3.14 3.14 0 0 1-.324-1.521c.233.07.418.001.571-.184q.236-.281.477-.559c.07-.08.136-.164.244-.193.315-.087.631-.166.94-.262.665-.207 1.324-.43 1.917-.804.251-.159.475-.344.595-.63.237-.564.415-1.147.592-1.733.085-.28.184-.55.417-.742", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M12.304 9.435c-.233.194-.33.462-.413.74-.177.585-.355 1.169-.592 1.733-.12.286-.344.471-.595.63-.593.375-1.254.597-1.916.804-.312.097-.628.177-.941.262-.11.031-.177.113-.244.193q-.24.277-.477.559c-.153.184-.34.253-.571.184a.87.87 0 0 1-.44-.54.64.64 0 0 1 .045-.503 1 1 0 0 0 .094-.31.47.47 0 0 1 .392-.405c.132-.03.269-.039.404-.053a.4.4 0 0 0 .114-.024c.115-.009.21-.069.31-.12.322-.167.646-.328.966-.497q.586-.308 1.192-.571a.78.78 0 0 0 .473-.524q.09-.305.177-.608c.047-.171.113-.337.14-.514a5.5 5.5 0 0 0 .806-1.654c.064-.215.108-.433.159-.652a.63.63 0 0 1 .342-.054c.08.013.156.036.237.054.105.423.187.85.256 1.28q.039.292.082.59m-4.19-5.947a.23.23 0 0 1 .235-.076c.142.025.282-.022.411-.086.097-.047.133-.143.093-.234-.042-.095-.138-.133-.242-.093-.071.027-.14.056-.218.056-.039 0-.062-.009-.07-.053q-.024-.165-.052-.33-.017-.082.067-.074c.066.008.133.01.198.017.131.013.228-.053.239-.166.01-.105-.073-.187-.202-.196-.082-.006-.162-.015-.244-.017-.046 0-.053-.014-.047-.058.016-.115.043-.224.072-.337.017-.067.05-.069.106-.05.25.078.417.247.54.469.1.178.16.371.217.566.087.298.273.515.568.615.206.07.275.21.298.406.066.539.091 1.08.09 1.62 0 .014-.008.029-.011.043-.272-.016-.525.075-.783.133a1.4 1.4 0 0 1-.513.031.5.5 0 0 1-.433-.36 2.3 2.3 0 0 1-.091-.46c.154-.024.309-.048.451-.124.1-.055.135-.148.09-.242a.18.18 0 0 0-.24-.084 1 1 0 0 1-.376.087 1.3 1.3 0 0 0-.326-.482c-.096-.093-.096-.215-.013-.319.06-.07.126-.134.186-.202", fill: "#FCCAAF" }),
React__default["default"].createElement("path", { d: "M10.069 7.052c-.013.239-.053.473-.09.71-.11.7-.261 1.394-.507 2.062-.066.18-.135.362-.233.528a.46.46 0 0 0-.235-.4c-.328-.21-.544-.508-.599-.898a.86.86 0 0 1 .242-.742c.237-.244.504-.459.761-.683.188-.162.37-.327.555-.493.033-.031.064-.064.106-.084m.349 2.818c-.025.176-.093.341-.14.513-.057.204-.119.404-.177.608a.78.78 0 0 1-.473.524q-.607.261-1.192.571c-.32.17-.646.33-.966.497-.099.051-.195.111-.31.12.066-.15.177-.266.277-.387.273-.334.615-.596.932-.881q.306-.28.611-.565c.077.11.13.124.251.06.439-.229.787-.567 1.094-.95z", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M8.271 4.49a1 1 0 0 0 .377-.088.183.183 0 0 1 .239.084c.047.095.01.187-.09.242-.14.076-.296.1-.45.124z", fill: "#FF6F4D" }),
React__default["default"].createElement("path", { d: "M11.96 7.563c-.079-.018-.157-.041-.237-.054a.65.65 0 0 0-.342.054l.146-1.104c.005-.037.02-.068.058-.071.05-.006.063.034.076.074q.159.511.282 1.03.01.036.017.071", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M9.834 1.004a7.996 7.996 0 1 0 0 15.992 7.996 7.996 0 0 0 0-15.992M9.465 2.26c1.606-.09 3.191.4 4.467 1.378a.282.282 0 0 1 .03.424l-9.066 9.066a.283.283 0 0 1-.424-.03A6.749 6.749 0 0 1 9.465 2.26m.369 13.49a6.72 6.72 0 0 1-4.016-1.325.284.284 0 0 1-.032-.426l9.046-9.047a.283.283 0 0 1 .427.032A6.75 6.75 0 0 1 9.834 15.75", fill: "#F44D2C" }),
React__default["default"].createElement("path", { d: "M10.159 5.509c.005.517 2.997-1.054 2.997-1.054s-.133-1.55-.293-2.313c-.058-.279-.114-.56-.245-.814a2.35 2.35 0 0 0-.943-.983c-.568-.324-1.178-.41-1.818-.3-.44.073-.843.233-1.173.55a.4.4 0 0 1-.147.085c-.379.15-.648.417-.828.776-.315.626-.224 1.345.235 1.82.062.065.127.127.167.21a.23.23 0 0 1 .235-.076c.142.028.282-.022.411-.085.097-.048.133-.144.093-.235-.042-.097-.138-.135-.242-.093-.071.027-.14.057-.218.057-.039 0-.064-.01-.07-.053q-.024-.165-.052-.332c-.01-.056.009-.08.067-.072.066.007.133.009.198.016.131.013.228-.055.239-.166.009-.105-.075-.187-.202-.196h-.007q-.118-.013-.237-.017c-.047 0-.053-.014-.047-.058.016-.114.043-.225.072-.336.019-.068.05-.07.106-.051.25.078.417.247.54.47.099.178.16.37.217.565.087.299.275.515.568.615.206.071.275.21.298.406.066.539.091 1.078.09 1.62z", fill: "#1B3250" }),
React__default["default"].createElement("path", { d: "M8.107 3.488a.23.23 0 0 1 .235-.076c.142.025.282-.022.411-.086.097-.047.133-.143.093-.234-.042-.095-.138-.133-.242-.093-.07.027-.14.056-.218.056-.038 0-.062-.009-.07-.053q-.024-.165-.052-.33-.017-.082.067-.074c.066.008.133.01.199.017.13.013.227-.053.238-.166.01-.105-.073-.187-.202-.196-.082-.006-.162-.015-.244-.017-.045 0-.053-.014-.047-.058.016-.115.043-.224.073-.337.016-.067.049-.069.105-.05.25.078.417.247.54.469.1.178.16.371.217.566.088.298.273.515.568.615.206.07.275.21.298.406.066.539.091 1.08.09 1.62 0 .014-.008.029-.011.043-.271-.016-.524.075-.783.133a1.4 1.4 0 0 1-.513.031.5.5 0 0 1-.433-.36 2.3 2.3 0 0 1-.091-.46c.154-.024.31-.048.451-.124.1-.055.135-.148.09-.242a.18.18 0 0 0-.24-.084 1 1 0 0 1-.376.087 1.3 1.3 0 0 0-.326-.482c-.096-.093-.096-.215-.012-.319.06-.07.125-.134.185-.202", fill: "#FCCAAF" }),
React__default["default"].createElement("path", { d: "M8.265 4.49a1 1 0 0 0 .376-.088.183.183 0 0 1 .239.084c.047.095.01.187-.09.242-.14.076-.296.1-.45.124z", fill: "#FF6F4D" })),
React__default["default"].createElement("defs", null,
React__default["default"].createElement("clipPath", { id: "clip0_1530_7251" },
React__default["default"].createElement("path", { fill: "#fff", d: "M.834 0h18v18h-18z" })))));
};
const TryConceive = (_a) => {
var { isMarryBaby, size = 24 } = _a, rest = tslib_es6.__rest(_a, ["isMarryBaby", "size"]);
const props = Object.assign({ width: size, height: size }, rest);
return isMarryBaby ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__default["default"].createElement("path", { d: "M14.018 9.155c-1.422 1.066-1.777 1.777-1.067 2.843.57.853 2.133 2.488 3.2 3.554-.712 2.133-6.753 1.422-6.753 1.422l-.711 1.421-1.067 3.199c-1.066 0-3.198.142-3.198.71 0 .712 2.843 2.844 3.554 2.844.569 0 1.658-2.132 2.132-3.199 1.54 1.777 5.474 4.905 8.885 3.199 4.265-2.132 6.398-5.331 5.687-7.819-.274-.959-.284-1.495-.132-1.813a4.62 4.62 0 0 0 3.438-2.3c.715-1.108.78-2.417.397-3.652-.41-1.663-1.15-2.955-2.637-3.252-3.423-.685-6.397 1.016-6.397 4.62a4.6 4.6 0 0 0 .971 2.834c-1.184.316-2.414-.236-6.302-4.611", fill: "#fff" }),
React__default["default"].createElement("path", { d: "M29.3 10.825A5.235 5.235 0 0 0 24.077 5.6c-2.876 0-5.245 2.348-5.245 5.224 0 .36.275.634.634.634.36 0 .635-.275.635-.634 0-2.179 1.776-3.955 3.976-3.955s3.954 1.776 3.954 3.955a3.947 3.947 0 0 1-3.531 3.933.8.8 0 0 0-.381-.021c-.042.021-.085.021-.106.042a.64.64 0 0 0-.57.635c0 .254.147.465.359.57.105.487.148.995.148 1.502a7.175 7.175 0 0 1-7.17 7.17 7.22 7.22 0 0 1-5.773-2.898l-.02-.021c.507-.317 1.902-.17 2.41-.106a.637.637 0 0 0 .698-.57.637.637 0 0 0-.571-.699c-1.184-.148-3.384-.38-3.891 1.164-.064.19-.127.401-.19.592-.318.994-.74 2.347-1.27 2.58-.634.063-2.918-1.587-3.172-2.284.212-.275 1.248-.444 2.623 0 .169.063.36.042.507-.064s.275-.232.296-.423c.571-2.707.74-3.278.74-3.299v-.021c.212-.888.867-.973 2.538-.93 1.523.042 3.384.084 4.674-1.46a7.8 7.8 0 0 0 3.235.994h.043a.643.643 0 0 0 .634-.592c.021-.36-.232-.655-.57-.677-4.4-.36-6.028-4.652-6.091-4.842 0 0 0-.022-.022-.022-.274-.634-.063-1.036.19-1.163.17-.105.445-.105.614.17 1.248 2.008 2.432 3.32 3.574 4.018.021 0 .042.02.042.02.677.34 2.052.762 3.596-.295.296-.19.359-.592.169-.889-.19-.296-.592-.36-.889-.169-.951.635-1.776.487-2.305.233-.93-.571-1.988-1.777-3.108-3.574-.508-.783-1.48-1.036-2.284-.613-.762.401-1.312 1.438-.762 2.77.085.254.93 2.368 2.898 3.934a2.7 2.7 0 0 1-.614.486c-.02 0-.02 0-.042-.021-8.205-2.517-8.86-8.586-8.924-9.77a.61.61 0 0 0-.656-.614.63.63 0 0 0-.592.656c.042 1.226.655 7.084 7.74 10.172h-.508c-1.48-.042-3.34-.085-3.806 1.882-.021.106-.17.677-.613 2.707-1.587-.36-3.194-.127-3.574 1.036-.19.55.126 1.206.972 2.01.571.549 2.263 1.902 3.447 1.902.149 0 .297-.02.423-.063.952-.36 1.438-1.544 1.861-2.813a8.48 8.48 0 0 0 6.324 2.855c4.652 0 8.438-3.785 8.438-8.438 0-.507-.043-1.015-.148-1.522a5.264 5.264 0 0 0 4.23-5.16", fill: "#3E3F58" }),
React__default["default"].createElement("rect", { x: "23.005", y: "8.444", width: "1.942", height: "1.422", rx: ".711", transform: "rotate(34.869 23.005 8.444)", fill: "#FB8C00" }))) : (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__default["default"].createElement("path", { d: "M13.996 8.62v3.221c1.054.035 1.682-.705 1.845-1.467.209-.977-.444-2.041-1.845-1.754", fill: "#FEAA96" }),
React__default["default"].createElement("path", { d: "M14.055 10.67a.21.21 0 0 1-.2-.277c.166-.508.594-.69.92-.644a.21.21 0 1 1-.059.418c-.163-.023-.37.079-.461.358a.21.21 0 0 1-.2.145", fill: "#FF886C" }),
React__default["default"].createElement("path", { d: "M2.16 10.374c.162.762.79 1.502 1.844 1.467V8.62c-1.4-.287-2.054.777-1.845 1.754", fill: "#FEAA96" }),
React__default["default"].createElement("path", { d: "M3.98 10.67a.21.21 0 0 1-.2-.145c-.093-.28-.299-.381-.462-.358a.21.21 0 0 1-.21-.102.21.21 0 0 1 .152-.316c.326-.046.753.136.92.644a.21.21 0 0 1-.2.277", fill: "#FF886C" }),
React__default["default"].createElement("path", { d: "M9 15.831c1.325 0 3.365-.561 4.534-2.292 1.057-1.563.436-4.144.462-5.169.053-2.079-1.447-4.78-4.996-4.78s-5.05 2.7-4.996 4.78c.026 1.025-.595 3.606.461 5.169 1.17 1.73 3.21 2.292 4.535 2.292", fill: "#FECCBF" }),
React__default["default"].createElement("path", { d: "M6.881 10.535a.56.56 0 1 0 0-1.121.56.56 0 0 0 0 1.121", fill: "#A35961" }),
React__default["default"].createElement("path", { d: "M7.114 9.777a.21.21 0 0 1-.188-.116c-.049-.097-.205-.122-.27-.129-.225-.022-.44.056-.477.104a.211.211 0 1 1-.347-.241c.149-.215.53-.306.831-.285.306.021.533.15.64.362a.21.21 0 0 1-.189.305", fill: "#8C2F39" }),
React__default["default"].createElement("path", { d: "M11.119 10.535a.56.56 0 1 0 0-1.121.56.56 0 0 0 0 1.121", fill: "#A35961" }),
React__default["default"].createElement("path", { d: "M9 13.329c.777 0 .994-.61 1.046-.92.031-.185-.132-.35-.34-.35H8.293c-.208 0-.371.165-.34.35.052.31.27.92 1.047.92", fill: "#D84023" }),
React__default["default"].createElement("path", { d: "M10.763 7.94a.2.2 0 0 1-.107-.03.33.33 0 0 0-.18-.029.21.21 0 1 1-.07-.416.74.74 0 0 1 .464.081.211.211 0 0 1-.107.393m-3.526 0a.21.21 0 0 1-.107-.393.74.74 0 0 1 .463-.08.211.211 0 1 1-.07.415.3.3 0 0 0-.18.029.2.2 0 0 1-.106.029", fill: "#FEAA96" }),
React__default["default"].createElement("path", { d: "M10.887 9.777a.21.21 0 0 1-.189-.305c.107-.212.334-.34.64-.362.3-.021.682.07.83.285a.211.211 0 0 1-.346.24c-.038-.048-.252-.125-.477-.103-.065.007-.221.032-.27.129a.21.21 0 0 1-.188.116", fill: "#8C2F39" }),
React__default["default"].createElement("path", { d: "M9.284 11.02a.21.21 0 0 1-.22-.15.07.07 0 0 0-.063-.05H9a.07.07 0 0 0-.064.05.21.21 0 0 1-.22.15.22.22 0 0 1-.192-.244c.018-.221.213-.379.476-.379.264 0 .458.158.476.38a.22.22 0 0 1-.192.244", fill: "#FEAA96" }),
React__default["default"].createElement("path", { d: "M9.55 12.06h-1.1l-.003.054a.552.552 0 1 0 1.102-.055m2.041-.774-.29.53a.1.1 0 0 1-.041.04l-.53.29a.1.1 0 0 0-.053.09.1.1 0 0 0 .053.09l.53.29q.026.015.04.04l.29.53a.103.103 0 0 0 .18 0l.29-.53a.1.1 0 0 1 .041-.04l.53-.29a.103.103 0 0 0 0-.18l-.53-.29a.1.1 0 0 1-.04-.04l-.29-.53a.1.1 0 0 0-.143-.039.1.1 0 0 0-.038.04", fill: "#fff" }),
React__default["default"].createElement("path", { d: "M11.055 2.193c-.147-.422-.524-.698-1.01-.738a.9.9 0 0 0-.535.154c-.206.155-.37.358-.478.592a.036.036 0 0 1-.066 0 1.55 1.55 0 0 0-.475-.592.9.9 0 0 0-.537-.154c-.485.04-.862.316-1.008.739a1.03 1.03 0 0 0 .259 1.09c.479.447 1.156.518 1.543.518h.502c.387 0 1.066-.07 1.545-.517a1.03 1.03 0 0 0 .26-1.092M8.79 3.243a.13.13 0 0 1-.134.135c-.316-.012-.821-.084-1.163-.402a.61.61 0 0 1-.148-.644.66.66 0 0 1 .438-.417c.242-.078.404-.006.456.033.446.33.539.932.551 1.295m1.718-.267c-.342.319-.847.39-1.163.402a.13.13 0 0 1-.135-.135c.013-.362.105-.964.551-1.295a.47.47 0 0 1 .25-.073c.318.027.554.193.645.457a.61.61 0 0 1-.149.644", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M8.998 3.338a.21.21 0 0 1 .122.383l-.04.028c-.16.118-.957.76-.991 1.758-.027.78.403 1.132.814 1.202.367.062.831-.096.985-.59a.415.415 0 0 0-.211-.52c-.136-.069-.32-.076-.425.064a.211.211 0 0 1-.337-.253c.215-.287.607-.363.954-.186a.836.836 0 0 1 .422 1.02 1.28 1.28 0 0 1-1.458.88c-.56-.095-1.202-.58-1.166-1.631.046-1.334 1.17-2.093 1.222-2.125a.2.2 0 0 1 .109-.03", fill: "#BA8288" })));
};
const OvulationFormContext = React.createContext({});
var useStyles = core.createStyles((theme) => {
return {
inputRightSection: {
fontSize: core.rem(13),
lineHeight: core.rem(24),
color: theme.colors.gray[4],
justifyContent: 'flex-end',
paddingRight: 8,
},
};
});
const DefaultLayout = (_a) => {
var props = tslib_es6.__rest(_a, []);
const { t } = index.useTranslations();
const { currentUrl, submitProps, form, calculatingMethods, isMobile } = React.useContext(OvulationFormContext);
const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
const { classes } = useStyles(undefined,
// Second DefaultLayout is responsible for styles api integration
{ name: 'OvulationTool__DefaultLayout' });
return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType'))))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
withinPortal: true,
}, label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, ` (${t('dueDatePage.lastPeriod.lastPeriodLabel')})`), maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$4.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('ovulationPage.cycleLength')), rightSection: t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { classNames: {
rightSection: classes.inputRightSection,
} }))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$4.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('ovulationPage.periodDuration')), rightSection: t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { classNames: {
rightSection: classes.inputRightSection,
} }))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
};
const InlineLayout = (_a) => {
var props = tslib_es6.__rest(_a, []);
const { t } = index.useTranslations();
const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
withinPortal: true,
}, maxDate: new Date() }, form.getInputProps('lastPeriodDate'))))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
form.errors.cycleLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.cycleLength))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
form.errors.periodLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
};
const MbLayout = (_a) => {
var props = tslib_es6.__rest(_a, []);
const { t } = index.useTranslations();
const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
React__default["default"].createElement(index$4.Input.Wrapper, { label: React__default["default"].createElement(index$3.Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
withinPortal: true,
}, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
form.errors.cycleLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.cycleLength)),
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
form.errors.periodLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength)),
React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
};
var OvulationCalculatorType;
(function (OvulationCalculatorType) {
OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
})(OvulationCalculatorType || (OvulationCalculatorType = {}));
const OvulationForm = (_a) => {
var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
const theme = core.useMantineTheme();
const { t } = index.useTranslations();
const isMarryBaby = theme.other.template === 'mb';
const form$1 = form.useForm({
initialValues: {
calculatorType: String(OvulationCalculatorType.trackPeriod),
periodLength: 7,
cycleLength: 28,
lastPeriodDate: new Date(),
},
validate: {
periodLength: form.isNotEmpty(t('validation.error.requiredField')),
cycleLength: form.isNotEmpty(t('validation.error.requiredField')),
},
});
const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, props);
const calculatingMethods = [
{
label: t('ovulationPage.trackPeriod'),
value: OvulationCalculatorType.trackPeriod,
icon: React__default["default"].createElement(LastPeriod.LastPeriod, null),
},
{
label: t('ovulationPage.conceive'),
value: OvulationCalculatorType.conceive,
icon: React__default["default"].createElement(TryConceive, null),
},
{
label: t('ovulationPage.avoidPregnancy'),
value: OvulationCalculatorType.avoidPregnancy,
icon: React__default["default"].createElement(AvoidPregnancy, null),
},
];
return (React__default["default"].createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form: form$1, isMobile, calculatingMethods } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default["default"].createElement(DefaultLayout, Object.assign({}, commonProps)))));
};
exports.OvulationForm = OvulationForm;