@hhgtech/hhg-components
Version:
Hello Health Group common components
1,052 lines (987 loc) • 119 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var index$1 = require('./index-9301f298.js');
var index = require('./index-04864074.js');
var index$3 = require('./index-6b44ec2b.js');
var styled = require('@emotion/styled');
var carousel = require('@mantine/carousel');
var index$2 = require('./index-d4ad3f79.js');
var index$4 = require('./index-4d838fd2.js');
var miscTheme = require('./miscTheme.js');
var shared = require('./shared-201fc49c.js');
var classNames = require('classnames');
var uuid = require('uuid');
var useUniqueId = require('./useUniqueId-88b26792.js');
var constantsSite = require('./constantsSite.js');
var react = require('@emotion/react');
var core$1 = require('@hhgtech/icons/core');
var index$5 = require('./index-515469d0.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
var useStyles$4 = core.createStyles((theme, { variantStyle }) => {
const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
const commonStyle = {
fontSize: core.rem(15),
lineHeight: core.rem(24),
letterSpacing: '-0.3px',
};
return {
input: Object.assign({ padding: '12px 16px', background: '#ffffff', border: `1px solid ${theme.colors.gray[2]}`, borderRadius: 4 }, (isLeadgenStyle && Object.assign(Object.assign({ borderRadius: 8 }, commonStyle), { color: '#111111', '&::placeholder': Object.assign(Object.assign({}, commonStyle), { fontSize: core.rem(13), lineHeight: core.rem(20), letterSpacing: '-0.3px', color: theme.colors.gray[4] }) }))),
};
});
const Select = React.forwardRef((_a, ref) => {
var { keepSearch = false } = _a, props = tslib_es6.__rest(_a, ["keepSearch"]);
if (keepSearch) {
return (React__namespace["default"].createElement(_AutoComplete, Object.assign({}, props, { ref: ref })));
}
else {
return React__namespace["default"].createElement(_Select, Object.assign({}, props, { ref: ref }));
}
});
const _AutoComplete = React.forwardRef((_a, ref) => {
var { value, defaultValue, onChange, clearable } = _a, props = tslib_es6.__rest(_a, ["value", "defaultValue", "onChange", "clearable"]);
const [_value, handleChange] = hooks.useUncontrolled({
value,
defaultValue,
onChange,
});
const onClear = () => {
handleChange('');
};
return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$1.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
? {
rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
React__namespace["default"].createElement(_IconSelect, null))),
}
: {}))));
});
const _Select = React.forwardRef((_a, ref) => {
var { searchValue, onSearchChange, styles } = _a, props = tslib_es6.__rest(_a, ["searchValue", "onSearchChange", "styles"]);
const variantStyle = index.useTemplateVariant();
const { classes } = useStyles$4({ variantStyle }, { name: 'MantineSelect', styles });
const [_searchValue, handleSearchChange] = hooks.useUncontrolled({
defaultValue: '',
value: searchValue,
onChange: onSearchChange,
});
const onClear = () => {
handleSearchChange('');
};
return (React__namespace["default"].createElement(core.Select, Object.assign({ classNames: { input: classes.input }, ref: ref, rightSection: React__namespace["default"].createElement(other.ArrowDown, { size: 18 }), rightSectionProps: { style: { pointerEvents: 'none' } }, size: "md", maxDropdownHeight: 300, onSearchChange: (e) => handleSearchChange(e), searchValue: _searchValue }, props, (props.clearable && (_searchValue === null || _searchValue === void 0 ? void 0 : _searchValue.length) > 0
? {
rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
React__namespace["default"].createElement(_IconSelect, null))),
}
: {}))));
});
const _IconSelect = () => (React__namespace["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.6665 9.99996C1.6665 5.39163 5.3915 1.66663 9.99984 1.66663C14.6082 1.66663 18.3332 5.39163 18.3332 9.99996C18.3332 14.6083 14.6082 18.3333 9.99984 18.3333C5.3915 18.3333 1.6665 14.6083 1.6665 9.99996ZM12.4083 13.5831C12.7333 13.9081 13.2583 13.9081 13.5833 13.5831C13.9 13.2581 13.9 12.7247 13.5833 12.4081L11.175 9.99973L13.5833 7.5914C13.9083 7.2664 13.9083 6.7414 13.5833 6.4164C13.2583 6.0914 12.7333 6.0914 12.4083 6.4164L10 8.82473L7.59167 6.4164C7.26667 6.0914 6.74167 6.0914 6.41667 6.4164C6.26063 6.57209 6.17293 6.78347 6.17293 7.0039C6.17293 7.22433 6.26063 7.43571 6.41667 7.5914L8.825 9.99973L6.41667 12.4081C6.26063 12.5638 6.17293 12.7751 6.17293 12.9956C6.17293 13.216 6.26063 13.4274 6.41667 13.5831C6.74167 13.9081 7.26667 13.9081 7.59167 13.5831L10 11.1747L12.4083 13.5831Z", fill: "#8C8C8C" })));
class ErrorBoundary extends React.Component {
constructor() {
super(...arguments);
this.state = {
hasError: false,
};
}
static getDerivedStateFromError() {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Uncaught error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return this.props.fallback || React__namespace["default"].createElement(React__namespace["default"].Fragment, null);
}
return this.props.children;
}
}
const CarouselWrapper$1 = (_a) => {
var { slidesToShow = 1, children } = _a, props = tslib_es6.__rest(_a, ["slidesToShow", "children"]);
const length = Array.isArray(children) ? children.length : 1;
if (!length)
return null;
return (React__namespace["default"].createElement(ErrorBoundary, null,
React__namespace["default"].createElement(carousel.Carousel
// get 2 precision number
, Object.assign({
// get 2 precision number
slideSize: String(Math.floor((1 / slidesToShow) * 10000) / 100) + '%', containScroll: "trimSnaps" }, props), children)));
};
const Carousel = CarouselWrapper$1;
Carousel.Slide = carousel.Carousel.Slide;
const StyledCarousel = styled__default["default"](Carousel) `
cursor: grab;
width: 100%;
.mantine-Carousel-control {
background: rgb(255, 255, 255);
opacity: 1;
border: none;
border-radius: 0;
box-shadow: none;
&[data-inactive] {
opacity: 0;
cursor: default;
}
&:first-child {
padding-right: 24px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
}
&:last-child {
padding-left: 24px;
background: linear-gradient(
270deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
}
}
.mantine-Carousel-container {
align-items: center;
}
`;
var useStyles$3 = core.createStyles((_theme, _params) => {
return {
root: {
color: _params.color ||
(_theme.primaryColor === 'hb'
? _theme.colors.hb[6]
: _theme.fn.primaryColor()),
},
};
});
const Anchor = (_a) => {
var { color, styles, className } = _a, rest = tslib_es6.__rest(_a, ["color", "styles", "className"]);
const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
return React__namespace["default"].createElement(index$2.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
};
const BreadcrumbItem = (_a) => {
var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
return (React__namespace["default"].createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
};
const AspectRatio = (props) => {
return (React__namespace["default"].createElement(core.AspectRatio, Object.assign({ sx: {
borderRadius: 4,
overflow: 'hidden',
'> img': {
objectFit: 'contain',
},
} }, props)));
};
const _Breadcrumbs = (_a) => {
var _b;
var { children, showHomeIcon = true, homeIconHref = '/' } = _a, rest = tslib_es6.__rest(_a, ["children", "showHomeIcon", "homeIconHref"]);
const theme = core.useMantineTheme();
const isMarryBaby = ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb';
const [embla, setEmbla] = React.useState(null);
const { isMobile } = index$3.useScreenSize();
const [, setShouldAllowClick] = React.useState(true);
const handleScroll = React.useCallback(() => {
setShouldAllowClick(false);
}, []);
const handlePointerUp = React.useCallback(() => {
setTimeout(() => {
setShouldAllowClick(true);
}, 1000);
}, []);
React.useEffect(() => {
if (embla) {
embla.on('scroll', handleScroll);
embla.on('pointerUp', handlePointerUp);
}
return () => {
if (embla) {
embla.off('scroll', handleScroll);
embla.on('pointerUp', handlePointerUp);
}
};
}, [embla, handleScroll, handlePointerUp]);
return (React__namespace["default"].createElement(StyledCarousel, Object.assign({ align: "center", slideGap: "xs", dragFree: true, draggable: isMobile, slideSize: "0", getEmblaApi: setEmbla, controlsOffset: -52, previousControlIcon: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
React__namespace["default"].createElement("path", { d: "M6.86589 3.56104C7.03647 3.56104 7.20724 3.62732 7.33724 3.75765L7.39453 3.81494C7.6552 4.07561 7.6552 4.49765 7.39453 4.75765L4.81901 7.33317L13.5326 7.33317C13.9006 7.33317 14.1992 7.63184 14.1992 7.99984C14.1992 8.36784 13.9006 8.6665 13.5326 8.6665L4.81901 8.66651L7.39453 11.242C7.6552 11.5027 7.6552 11.9247 7.39453 12.1847L7.33724 12.242C7.07657 12.5027 6.65453 12.5027 6.39453 12.242L2.6237 8.47119C2.36303 8.21053 2.36303 7.78849 2.6237 7.52849L6.39453 3.75765C6.52487 3.62732 6.6953 3.56104 6.86589 3.56104Z", fill: "#595959" })), nextControlIcon: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
React__namespace["default"].createElement("path", { d: "M9.13411 12.439C8.96353 12.439 8.79276 12.3727 8.66276 12.2423L8.60547 12.1851C8.3448 11.9244 8.3448 11.5023 8.60547 11.2423L11.181 8.66683L2.46745 8.66683C2.09945 8.66683 1.80078 8.36816 1.80078 8.00016C1.80078 7.63216 2.09945 7.3335 2.46745 7.3335L11.181 7.3335L8.60547 4.75797C8.3448 4.49731 8.3448 4.07527 8.60547 3.81527L8.66276 3.75797C8.92343 3.49731 9.34547 3.49731 9.60547 3.75797L13.3763 7.52881C13.637 7.78947 13.637 8.21152 13.3763 8.47152L9.60547 12.2423C9.47513 12.3727 9.3047 12.439 9.13411 12.439Z", fill: "#595959" })) }, rest),
showHomeIcon && (React__namespace["default"].createElement(Carousel.Slide, { style: { borderRight: `1px solid ${index$4.themeColors.neutral[1]}` } },
React__namespace["default"].createElement(BreadcrumbItem, { href: homeIconHref, target: "_blank", className: "pointer-event-child-none" },
React__namespace["default"].createElement(core.Box, { sx: Object.assign({}, (!isMarryBaby && {
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
})), bg: !isMarryBaby && index$4.themeColors.neutral[0], p: !isMarryBaby ? 6 : 0 },
React__namespace["default"].createElement(AspectRatio, { ratio: 1, w: 18 }, isMarryBaby ? (React__namespace["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1183 3.67722C12.8727 2.70772 11.1281 2.708 9.88187 3.67718L14.1183 3.67722ZM14.1183 3.67722L19.718 8.03283C20.5589 8.68632 21.05 9.69173 21.05 10.7562V17.6002C21.05 19.5057 19.5055 21.0502 17.6 21.0502H6.40016C4.49466 21.0502 2.9502 19.5057 2.9502 17.6002V10.7562C2.9502 9.69163 3.44113 8.68632 4.28216 8.03283L9.88187 3.67718M10.6799 4.70339L5.08006 9.05916C4.55657 9.46592 4.2502 10.0923 4.2502 10.7562V17.6002C4.2502 18.7878 5.21263 19.7502 6.40016 19.7502H17.6C18.7875 19.7502 19.75 18.7878 19.75 17.6002V10.7562C19.75 10.0923 19.4438 9.46612 18.9204 9.05936L13.3202 4.70335C12.5443 4.09941 11.4571 4.09905 10.6799 4.70339Z", fill: "#3E3F58" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2373 13.1626C12.5546 12.4794 11.4466 12.4791 10.7629 13.1628C10.0793 13.8464 10.0793 14.9538 10.7629 15.6374C11.4465 16.321 12.5539 16.321 13.2375 15.6374C13.9211 14.9538 13.9211 13.8464 13.2375 13.1628L13.2373 13.1626ZM14.1567 12.2436C12.9661 11.0521 11.0348 11.0525 9.84366 12.2436C8.65237 13.4348 8.65237 15.3653 9.84366 16.5566C11.0349 17.7479 12.9654 17.7479 14.1567 16.5566C15.348 15.3653 15.348 13.4348 14.1567 12.2436Z", fill: "#3E3F58" }))) : (React__namespace["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.58691 5.59863L8.58691 1.62305C8.83594 1.45898 9.16406 1.45898 9.41309 1.62305L15.4131 5.59863C15.624 5.73926 15.75 5.97363 15.75 6.22559V14.25C15.75 15.0791 15.0791 15.75 14.25 15.75H3.75C2.9209 15.75 2.25 15.0791 2.25 14.25V6.22559C2.25 5.97363 2.37598 5.73926 2.58691 5.59863ZM5.5017 11.7602C5.1717 11.5108 5.17316 11.0321 5.46521 10.7391C5.75775 10.4456 6.24936 10.4292 6.5986 10.6522C7.17818 11.0223 8.12516 11.4889 9.21628 11.4889C10.3074 11.4889 11.2543 11.0223 11.8339 10.6522C12.1832 10.4292 12.6748 10.4456 12.9673 10.7391C13.2594 11.0321 13.2608 11.5108 12.9308 11.7602C11.8743 12.5589 10.535 12.9889 9.21628 12.9889C7.89758 12.9889 6.55824 12.5589 5.5017 11.7602Z", fill: "#595959" })))))))),
React__namespace["default"].createElement(Carousel.Slide, null),
React__namespace["default"].createElement(Carousel.Slide, null,
React__namespace["default"].createElement(core.Breadcrumbs, { styles: {
separator: {
marginInline: 4,
},
}, separator: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
React__namespace["default"].createElement("path", { d: "M8.71527 7.99969L6.16794 5.45236C5.89194 5.17636 5.89194 4.72836 6.16794 4.45236C6.44394 4.17636 6.89194 4.17636 7.16794 4.45236L10.2439 7.52836C10.5046 7.78903 10.5046 8.21103 10.2439 8.47103L7.16794 11.547C6.89194 11.823 6.44394 11.823 6.16794 11.547C5.89194 11.271 5.89194 10.823 6.16794 10.547L8.71527 7.99969Z", fill: "#8C8C8C" })) }, children))));
};
const Breadcrumbs = _Breadcrumbs;
Breadcrumbs.Item = BreadcrumbItem;
var useStyles$2 = core.createStyles((theme, { variantStyle }) => {
const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
const commonStyle = {
fontSize: core.rem(15),
lineHeight: core.rem(24),
letterSpacing: '-0.3px',
};
return {
input: Object.assign({ padding: '12px 16px', background: '#ffffff', border: `1px solid ${theme.colors.gray[2]}`, borderRadius: 4 }, (isLeadgenStyle && Object.assign(Object.assign({ borderRadius: 8 }, commonStyle), { color: '#111111', '&::placeholder': Object.assign(Object.assign({}, commonStyle), { fontSize: core.rem(15), lineHeight: core.rem(24), letterSpacing: '-0.3px', color: theme.colors.gray[4] }) }))),
};
});
const StyledAccordion = styled__default["default"](core.Accordion) `
.mantine-Accordion-label {
padding: 0;
}
.mantine-Accordion-control {
&:hover {
background-color: transparent;
}
}
.mantine-Accordion-item {
.mantine-Accordion-chevron {
> div {
background-repeat: no-repeat;
width: 16px;
height: 16px;
background-position: center;
background-image: url(${(props) => props.closeChevron || index$1.CommonGAssets.getAssetPath('plus-icon.svg')});
}
}
&[data-active='true'] {
.mantine-Accordion-chevron {
> div {
background-image: url(${(props) => props.openChevron || index$1.CommonGAssets.getAssetPath('minus-icon.svg')});
}
}
}
}
.mantine-Accordion-panel {
border-radius: ${miscTheme.theme.borderRadius};
}
.mantine-Accordion-content {
white-space: pre-wrap;
}
`;
const _Accordion = (_a) => {
var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
return (React__namespace["default"].createElement(StyledAccordion, Object.assign({ chevron: React__namespace["default"].createElement("div", null), disableChevronRotation: true, transitionDuration: 300 }, rest), children));
};
const Accordion = _Accordion;
Accordion.Control = core.Accordion.Control;
Accordion.Item = core.Accordion.Item;
Accordion.Panel = core.Accordion.Panel;
const DEFAULT_AVATAR = index$1.CommonGAssets.getAssetPath('avatar.jpg');
const Avatar = (_a) => {
var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
avatarProps = tslib_es6.__rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
const generateAvatar = () => {
return (React__namespace["default"].createElement(core.Avatar, Object.assign({ size: size, radius: "xl" }, avatarProps, { imageProps: Object.assign({ loading: 'lazy' }, avatarProps.imageProps), styles: {
placeholder: {
backgroundColor: avatarProps.color,
color: 'white',
},
} }), children ? (children) : placeholderText ? (placeholderText) : (React__namespace["default"].createElement(index$3.ImageWrap, { src: DEFAULT_AVATAR, width: size, alt: avatarProps.alt || 'avatar' }))));
};
if (withIndicator)
return (React__namespace["default"].createElement(core.Indicator, Object.assign({ inline: true, position: "bottom-end", offset: 9 }, indicatorConfig, { styles: Object.assign({ indicator: {
backgroundColor: React__namespace["default"].isValidElement(indicatorConfig.label) && 'transparent',
zIndex: 1,
} }, styles) }), generateAvatar()));
return generateAvatar();
};
const FileInput = (props) => {
return React__namespace["default"].createElement(core.FileInput, Object.assign({ size: "md" }, props));
};
const sizeMap = {
lg: {
height: 48,
fontSize: core.rem(16),
lineHeight: '24px',
},
md: {
height: 40,
fontSize: core.rem(14),
lineHeight: '22px',
},
sm: {
height: 32,
fontSize: core.rem(14),
lineHeight: '22px',
},
xs: {
height: 32,
fontSize: core.rem(13),
lineHeight: core.rem(20),
letterSpacing: '-0.3px',
},
};
var useStyles$1 = core.createStyles((theme, { variantStyle, size, }) => {
const isLeadgenStyle = variantStyle === index.CustomStylesType.LEADGEN;
const base = sizeMap[size] || {};
const leadgenPatch = isLeadgenStyle
? size === 'sm'
? { height: 36, fontSize: core.rem(13), letterSpacing: '-0.3px' }
: { fontSize: core.rem(15), letterSpacing: '-0.3px' }
: {};
// const commonStyle = {
// fontSize: rem(15),
// lineHeight: rem(24),
// letterSpacing: '-0.3px',
// color: theme.colors.gray[4],
// }
return {
input: {
border: `1px solid ${theme.colors.gray[2]}`,
transition: `all ${shared.ANIMATION_DURATION} ease-in-out`,
['&:not(.mantine-Textarea-input)']: Object.assign(Object.assign({ minHeight: 'unset' }, base), leadgenPatch),
'&:hover': {
border: `1px solid ${theme.fn.primaryColor()}`,
// boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
},
'&:focus': {
boxShadow: `0px 0px 0px 2px ${theme.colors[theme.primaryColor][2]}`,
},
'&[data-invalid="true"]': {
border: `1px solid ${theme.colors.red600}`,
color: '#000',
},
// ...(isLeadgenStyle && {
// ...commonStyle,
// color: '#111111',
// paddingLeft: 16,
// paddingRight: 16,
// '&::placeholder': {
// ...commonStyle,
// color: theme.colors.gray[4],
// },
// }),
},
rightSection: Object.assign({ color: theme.colors.gray[4] }, (() => {
switch (size) {
case 'lg':
return Object.assign({ fontSize: core.rem(16) }, (isLeadgenStyle && {
fontSize: core.rem(15),
}));
case 'md':
return Object.assign({ fontSize: core.rem(14) }, (isLeadgenStyle && {
fontSize: core.rem(15),
letterSpacing: '-0.3px',
}));
case 'sm':
return Object.assign({ height: 32, fontSize: core.rem(14), lineHeight: '22px' }, (isLeadgenStyle && {
height: 36,
fontSize: core.rem(13),
letterSpacing: '-0.3px',
}));
case 'xs':
return {
height: 32,
lineHeight: core.rem(20),
fontSize: core.rem(13),
letterSpacing: '-0.3px',
};
}
})()),
};
});
const DEBOUNCED_TIME = 300;
const emotionCache = core.createEmotionCache({
key: 'mantine',
prepend: false,
});
const NumberInput = (_a) => {
var { value: _value, onChange: _onChange, size = 'md', styles, classNames } = _a, props = tslib_es6.__rest(_a, ["value", "onChange", "size", "styles", "classNames"]);
const [value, setValue] = React.useState(_value);
const [debounced] = hooks.useDebouncedValue(value, DEBOUNCED_TIME);
const variantStyle = index.useTemplateVariant();
const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles, classNames });
React.useEffect(() => {
_onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
}, [debounced]);
React.useEffect(() => {
setValue(_value);
}, [_value]);
return (React__namespace["default"].createElement(core.NumberInput, Object.assign({ stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
if (Number(value) === 0)
return value;
return value || '';
}, removeTrailingZeros: true, value: value }, props, { size: size, classNames: {
input: classes.input,
rightSection: classes.rightSection,
} })));
};
const EyeVisible = index$1.CommonGAssets.getAssetPath('EyeVisible.svg');
const EyeHidden = index$1.CommonGAssets.getAssetPath('EyeHidden.svg');
// Fix re-render issue
const RenderVisibleToggleIcon = ({ reveal, size, }) => (React__namespace["default"].createElement("img", { src: reveal ? EyeVisible : EyeHidden, style: {
width: size,
height: size,
}, loading: "lazy" }));
const PasswordInput = React.forwardRef((props, ref) => {
const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = tslib_es6.__rest(props, ["size", "visibilityToggleIcon"]);
const visibilityToggleIcon = visibilityToggleIconProps || RenderVisibleToggleIcon;
return (React__namespace["default"].createElement(core.PasswordInput, Object.assign({ ref: ref, size: size, visibilityToggleIcon: visibilityToggleIcon }, restProps, { className: `input-control ${(restProps === null || restProps === void 0 ? void 0 : restProps.className) || ''}` })));
});
const ErrorIcon = (_a) => {
var { size } = _a, rest = tslib_es6.__rest(_a, ["size"]);
const props = Object.assign({ width: size, height: size }, rest);
return (React__namespace["default"].createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__namespace["default"].createElement("path", { d: "M5.996 6.513q.163 0 .282-.12a.38.38 0 0 0 .118-.28V3.937q0-.15-.118-.268a.4.4 0 0 0-.282-.119.4.4 0 0 0-.281.12.38.38 0 0 0-.119.28v2.175q0 .15.119.269.12.119.281.119m0 1.862a.43.43 0 0 0 .3-.112.4.4 0 0 0 .125-.313.4.4 0 0 0-.125-.3.4.4 0 0 0-.3-.125.4.4 0 0 0-.3.125.4.4 0 0 0-.125.3.4.4 0 0 0 .125.313.43.43 0 0 0 .3.112m0 2.375a4.6 4.6 0 0 1-1.856-.375 4.8 4.8 0 0 1-1.506-1.012A4.8 4.8 0 0 1 1.62 7.857 4.6 4.6 0 0 1 1.246 6q0-.987.375-1.856t1.013-1.506A4.8 4.8 0 0 1 4.14 1.625a4.6 4.6 0 0 1 1.856-.375q.988 0 1.857.375Q8.72 2 9.359 2.638q.637.637 1.012 1.506T10.747 6t-.375 1.857A4.8 4.8 0 0 1 9.36 9.363a4.8 4.8 0 0 1-1.506 1.012q-.87.375-1.857.375", fill: "#F44D2C" })));
};
ErrorIcon.defaultProps = {
size: 18,
color: miscTheme.theme.colors.gray600,
activeColor: miscTheme.theme.colors.primaryBase,
};
const ErrorLabel = (_a) => {
var { label, withIcon, textProps } = _a, rest = tslib_es6.__rest(_a, ["label", "withIcon", "textProps"]);
return (React__namespace["default"].createElement(core.Flex, Object.assign({ align: 'center', gap: 4 }, rest),
withIcon && React__namespace["default"].createElement(ErrorIcon, { size: 12 }),
React__namespace["default"].createElement(index$2.Text, Object.assign({ size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } }, textProps))));
};
const FloatingLabelControlContext = React.createContext({});
const cssInputNotShrink = react.css `
height: 100% !important;
min-height: calc(var(--container-height, 56px) * 24 / 56);
line-height: calc(var(--container-height, 56px) * 24 / 56);
border: none !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
padding: 0;
cursor: pointer;
opacity: 0;
::placeholder {
color: ${miscTheme.theme.colors.gray400};
}
`;
const cssInputShrink = react.css `
height: auto !important;
cursor: text;
opacity: 1;
transition: 0.1s ease-in-out all;
`;
const cssLabelNotShrink = react.css `
position: absolute;
top: calc(var(--container-height) / 2);
left: var(--space-x, 16px);
margin: 0;
z-index: 1;
cursor: pointer;
transform: translateY(-50%);
transition: 0.125s ease-in all;
`;
const cssLabelShrink = react.css `
top: var(--space-y-shrink, 6px);
transform: none;
transition: 0.125s ease-out all;
`;
const cssWrapperInputNotShrink = react.css `
min-height: var(--container-height, 56px);
display: flex;
align-items: flex-end;
border: 1px solid ${miscTheme.theme.colors.gray200};
border-radius: 8px;
background-color: #fff;
padding-inline: var(--space-x, 16px);
padding-block: var(--space-y-not-shrink, 16px);
cursor: pointer;
pointer-events: none;
&:has(.mantine-Input-rightSection) {
padding-right: var(--container-height, 56px);
}
.mantine-Input-icon {
display: none;
}
.mantine-NumberInput-control {
border-color: ${miscTheme.theme.colors.gray200};
}
`;
const cssWrapperInputShrink = react.css `
height: auto;
min-height: var(--container-height, 56px);
padding-block: var(--space-y-shrink, 6px);
cursor: text;
pointer-events: auto;
`;
const cssInputWrapperError = react.css `
color: ${miscTheme.theme.colors.red800};
font-size: 12px;
line-height: 1.5;
`;
const StyledFloatingLabelControlContainer = styled__default["default"].div `
--space-x: 16px;
--space-y-not-shrink: 15px;
--space-y-shrink: 6px;
--container-height: 56px;
--label-not-shrink: 16px;
--label-shrink: 12px;
--input: 15px;
position: relative;
min-width: 100px;
max-width: 100%;
display: inline-block;
.textField_wrapper {
display: inline-block;
width: 100%;
cursor: pointer;
}
.mantine-InputWrapper-root {
&[data-invalid='true'] {
.mantine-Input-wrapper {
border-color: ${miscTheme.theme.colors.red400};
}
}
.mantine-Input-wrapper {
&:has([data-invalid]) {
border-color: ${miscTheme.theme.colors.red400};
}
}
}
.mantine-InputWrapper-label {
${cssLabelNotShrink}
}
.mantine-Input-wrapper {
${cssWrapperInputNotShrink}
+ .mantine-Popover-dropdown[data-position="bottom-start"] {
left: 0 !important;
}
+ .mantine-Popover-dropdown[data-position='top-start'] {
top: unset !important;
left: 0 !important;
bottom: 100% !important;
}
}
.mantine-Input-input {
${cssInputNotShrink}
}
&.textField_shrink {
.mantine-InputWrapper-label {
${cssLabelShrink}
}
.mantine-Input-wrapper {
${cssWrapperInputShrink}
&.mantine-Select-wrapper {
.mantine-Select-rightSection {
pointer-events: auto !important;
}
}
}
.mantine-Input-input {
${cssInputShrink}
}
&:has(.PhoneInput) {
.mantine-InputWrapper-label {
left: var(--space-x, 16px);
}
.PhoneInput {
.PhoneInputInput {
opacity: 1;
}
}
}
}
&:focus-within {
.mantine-Input-wrapper {
transition: 0.25s linear border;
border-color: ${miscTheme.theme.colors.primary600};
box-shadow: 0 0 4px ${miscTheme.theme.colors.primary200};
}
}
.PhoneInput {
--phone-select: 75px;
--phone-input-space-x: 8px;
width: 100%;
opacity: 1;
border: none;
.PhoneInputCountry {
background-color: transparent;
border: none;
padding: 0;
width: var(--phone-select, 75px);
}
.PhoneInputInput {
flex: 1;
min-width: 0;
line-height: 1.5;
outline: none !important;
border: none;
box-shadow: none;
font-size: var(--input, 15px);
padding: 0 var(--phone-input-space-x, 8px);
opacity: 0;
color: ${miscTheme.theme.colors.gray800} !important;
:focus {
color: ${miscTheme.theme.colors.gray800} !important;
}
}
}
&:has(.PhoneInput) {
.mantine-InputWrapper-label {
left: calc(
var(--space-x, 16px) + var(--phone-select, 75px) +
var(--phone-input-space-x, 8px)
);
}
}
.icon {
position: absolute;
top: calc(var(--container-height) / 2);
right: var(--space-x, 16px);
transform: translateY(-50%);
transition: 0.125s ease-in all;
&.shrink {
top: calc(var(--container-height) / 2 - 4px);
transform: translateY(0);
}
}
`;
styled__default["default"].div `
&.leadgen-form_checkbox,
&.leadgen-form_radio {
width: 100%;
}
&.leadgen-form_dropdown {
width: calc(50% - 12px);
}
.mantine-InputWrapper-root {
display: block;
}
.mantine-InputWrapper-label {
margin-bottom: 0.5rem;
color: ${miscTheme.theme.colors.gray800};
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.mantine-Radio-root,
.mantine-Checkbox-root {
gap: 8px;
min-width: calc(50% - 4px);
// input[type='radio'],
// input[type='checkbox'] {
// border-color: ${miscTheme.theme.colors.gray600};
// width: 18px;
// height: 18px;
// }
// input[type='checkbox'] {
// border-radius: 4px;
// }
// &[data-checked='true'] {
// input[type='radio'],
// input[type='checkbox'] {
// border-color: ${miscTheme.theme.colors.primary600};
// }
// input[type='radio'] {
// background-color: white;
// }
// }
.mantine-Checkbox-input {
&:checked {
border-color: ${miscTheme.theme.colors.primary600};
}
}
}
.leadgen-choiceContainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
.mantine-InputWrapper-error {
${cssInputWrapperError}
}
`;
styled__default["default"].div `
position: absolute;
top: calc(var(--container-height) / 2);
right: var(--space-x, 16px);
`;
const FloatingLabelControl = (props) => {
const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "children", "className"]);
const [shrink, setShrink] = React.useState(shrinkProps);
const [hasIcon, setHasIcon] = React.useState(false);
React.useEffect(() => {
setShrink(shrinkProps);
}, [shrinkProps]);
return (React__namespace["default"].createElement(FloatingLabelControlContext.Provider, Object.assign({ value: {
shrinkProps,
shrink,
setShrink,
onChangeShrink,
hasIcon,
setHasIcon,
} }, restProps),
React__namespace["default"].createElement(StyledFloatingLabelControlContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
};
const FloatingLabelControlControl = (props) => {
const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = React.useContext(FloatingLabelControlContext);
const { children } = props;
const containerRef = hooks.useClickOutside(() => {
if (shrinkProps) {
return;
}
setShrink(false);
onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
});
// const inputInside = useMemo(() => {
// containerRef.current.querySelectorAll(
// 'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
// )
// }, [containerRef.current])
// console.log({ containerRef })
const focusInput = (target) => {
const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
const $focusEl = $textEl.item($textEl.length - 1);
if ($focusEl) {
$focusEl.focus({ preventScroll: true });
}
};
const onClick = React.useCallback((e) => {
if (shrink) {
e.preventDefault();
focusInput(e.currentTarget);
return;
}
setShrink(true);
onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
focusInput(e.currentTarget);
}, [shrink]);
React.useEffect(() => {
setShrink(shrinkProps);
}, [shrinkProps]);
return (React__namespace["default"].createElement(core.Box, { ref: containerRef, onClick: onClick, className: "FloatingLabelControl_wrapper" }, typeof children === 'function'
? children({ shrink: !!shrink, hasIcon })
: children));
};
const FloatingLabelControlIcon = ({ Icon, }) => {
const { shrink, setHasIcon } = React.useContext(FloatingLabelControlContext);
const theme = core.useMantineTheme();
React.useEffect(() => {
Icon && setHasIcon(true);
}, []);
return Icon ? (React__namespace["default"].createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
};
FloatingLabelControl.Control = FloatingLabelControlControl;
FloatingLabelControl.Icon = FloatingLabelControlIcon;
const InputWrapper = React.forwardRef((_a, ref) => {
var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error, size = 'md', debouncedTime = DEBOUNCED_TIME } = _a, props = tslib_es6.__rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error", "size", "debouncedTime"]);
const variantStyle = index.useTemplateVariant();
const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles });
const [value, setValue] = React.useState(_value || '');
const [debounced] = hooks.useDebouncedValue(value, debouncedTime);
React.useEffect(() => {
_onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
}, [debounced]);
React.useEffect(() => {
setValue(_value);
}, [_value]);
const commonProps = Object.assign(Object.assign({ classNames: {
input: classes.input,
rightSection: classes.rightSection,
}, ref,
size, onChange: (event) => {
if (typeof maxLength === 'number' &&
event.currentTarget.value.length > maxLength) {
return;
}
onChangeRaw === null || onChangeRaw === void 0 ? void 0 : onChangeRaw(event);
setValue(event.currentTarget.value);
}, value,
label,
error }, props), { maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` });
if (withFloatingLabel) {
return (React__namespace["default"].createElement(FloatingLabelControl, { shrink: !!value },
React__namespace["default"].createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__namespace["default"].createElement(core.TextInput, Object.assign({}, commonProps, { error: error && React__namespace["default"].createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__namespace["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
input: Object.assign(Object.assign({}, index.GlobalTextStyleNew(theme)[index.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: index.FontWeight.halfBold }),
}) }))))));
}
return React__namespace["default"].createElement(core.TextInput, Object.assign({}, commonProps));
});
const Input = InputWrapper;
Input.File = FileInput;
Input.Password = PasswordInput;
Input.Number = NumberInput;
Input.Wrapper = core.Input.Wrapper;
const StyledSlide = carousel.Carousel.Slide;
const SlideContext = React.createContext({});
const CustomSlide = (_a) => {
var { children, onClick, innerSlideProps } = _a, rest = tslib_es6.__rest(_a, ["children", "onClick", "innerSlideProps"]);
const { slider, selectSlideWhenClick } = React.useContext(SlideContext);
const ref = React.useRef();
const key = React.useRef('');
const [index, setIndex] = React.useState(0);
React.useEffect(() => {
key.current = String(Math.round(Math.random() * 10000));
}, []);
React.useEffect(() => {
const slidesNode = (slider === null || slider === void 0 ? void 0 : slider.slideNodes()) || [];
setIndex(slidesNode.findIndex((obj) => obj.dataset.key === key.current));
}, [slider]);
const sliderProps = {
ref,
'data-key': key.current,
'data-index': index,
};
return (React__namespace["default"].createElement(StyledSlide, Object.assign({}, sliderProps, rest),
React__namespace["default"].createElement("div", Object.assign({ style: {
height: '100%',
}, onClick: () => {
selectSlideWhenClick && (slider === null || slider === void 0 ? void 0 : slider.scrollTo(index));
onClick === null || onClick === void 0 ? void 0 : onClick(index);
} }, innerSlideProps), children)));
};
const findIndexFromLeftSide = (position, slideLength) => {
return position >= slideLength ? position - slideLength : position;
};
const findIndexFromRight = (position, slideLength) => {
return position < 0 ? slideLength + position : position;
};
const CarouselWrapper = (_a) => {
var { children, blurFromCenter, blurFromIndex, blurLength = 3, maxBlurOpacity = 0.5, onSlideChange, selectSlideWhenClick } = _a, props = tslib_es6.__rest(_a, ["children", "blurFromCenter", "blurFromIndex", "blurLength", "maxBlurOpacity", "onSlideChange", "selectSlideWhenClick"]);
const { width } = hooks.useViewportSize();
const [ref] = hooks.useResizeObserver();
const slider = React.useRef(null);
const [centerSlide, setCenterSlide] = React.useState(0);
const handleStyle = () => {
var _a, _b, _c, _d, _e;
const slidesNode = ((_a = slider === null || slider === void 0 ? void 0 : slider.current) === null || _a === void 0 ? void 0 : _a.slideNodes()) || [];
if (((_b = slider === null || slider === void 0 ? void 0 : slider.current) === null || _b === void 0 ? void 0 : _b.slideNodes().length) <=
((_c = slider === null || slider === void 0 ? void 0 : slider.current) === null || _c === void 0 ? void 0 : _c.slidesInView().length)) {
slidesNode.map((item) => {
item.classList.remove('center-slide');
item.style.opacity = '1';
});
return false;
}
const centerSlideIndex = (_d = slider === null || slider === void 0 ? void 0 : slider.current) === null || _d === void 0 ? void 0 : _d.selectedScrollSnap();
setCenterSlide(centerSlideIndex);
const slidesNodeLength = slidesNode.length;
const slidesInView = (_e = slider === null || slider === void 0 ? void 0 : slider.current) === null || _e === void 0 ? void 0 : _e.slidesInView();
const slidesInViewLength = slidesInView.length;
const halfSideLength = Math.floor(slidesInViewLength / 2);
const halfSideBlurLength = blurFromCenter
? blurFromIndex + blurLength - 1
: halfSideLength;
const lastRightBlurIndexTmp = centerSlideIndex + halfSideBlurLength;
const lastRightBlurIndex = lastRightBlurIndexTmp === slidesNodeLength
? 0
: lastRightBlurIndexTmp > slidesNodeLength
? lastRightBlurIndexTmp - slidesNodeLength
: lastRightBlurIndexTmp;
const lastLeftBlurIndexTmp = centerSlideIndex - halfSideBlurLength;
const lastLeftBlurIndex = lastLeftBlurIndexTmp < 0
? slidesNodeLength + lastLeftBlurIndexTmp
: lastLeftBlurIndexTmp > 0
? centerSlideIndex - halfSideBlurLength
: 0;
const visibleSlide = [
...new Set(Array(halfSideBlurLength * 2 + 1)
.fill('')
.map((i, idx) => {
const findFrom = lastLeftBlurIndex;
return findIndexFromLeftSide(findFrom + idx, slidesNodeLength);
})),
];
slidesNode.map((item, index) => {
if (index === centerSlideIndex) {
item.classList.add('center-slide');
}
else {
item.classList.remove('center-slide');
}
if (visibleSlide.indexOf(index) !== -1) {
const opacityGap = maxBlurOpacity / blurLength;
for (let i = 0; i < blurLength; i++) {
if (index ===
findIndexFromLeftSide(lastLeftBlurIndex + i, slidesNodeLength) ||
index ===
findIndexFromRight(lastRightBlurIndex - i, slidesNodeLength)) {
item.style.opacity = String((i + 1) * opacityGap);
break;
}
item.style.opacity = '1';
}
}
else {
item.style.opacity = '0';
}
});
};
const sliderProps = {
getEmblaApi: (embla) => {
slider.current = embla;
},
onSlideChange: (index) => {
handleStyle();
onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
},
};
React.useEffect(() => {
(slider === null || slider === void 0 ? void 0 : slider.current) && handleStyle();
}, [width]);
const useStyles = core.createStyles(() => {
var _a, _b;
return ({
control: Object.assign({}, (((_a = slider === null || slider === void 0 ? void 0 : slider.current) === null || _a === void 0 ? void 0 : _a.slideNodes().length) <=
((_b = slider === null || slider === void 0 ? void 0 : slider.current) === null || _b === void 0 ? void 0 : _b.slidesInView().length) && {
display: 'none',
})),
});
});
const { classes } = useStyles();
return (React__namespace["default"].createElement(SlideContext.Provider, { value: { slider: slider === null || slider === void 0 ? void 0 : slider.current, centerSlide, selectSlideWhenClick } },
React__namespace["default"].createElement(carousel.Carousel, Object.assign({ classNames: {
control: classes.control,
}, ref: ref, slideSize: 'auto', containScroll: "trimSnaps" }, sliderProps, props, { loop: true }), typeof children === 'function' ? children(centerSlide) : children)));
};
const CentralCarousel = CarouselWrapper;
CentralCarousel.Slide = CustomSlide;
const CheckboxWithState = (_a) => {
var { size = 24, isSolid, isActive } = _a, rest = tslib_es6.__rest(_a, ["size", "isSolid", "isActive"]);
return isSolid ? (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58173 14.4183 2 10 2C5.58173 2 2 5.58173 2 10C2 14.4183 5.58173 18 10 18Z", fill: "#2D87F3" }),
React__namespace["default"].createElement("path", { d: "M6.38904 10.2778L8.88904 13.0556L13.6113 6.94446", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58173 14.4183 2 10 2C5.58173 2 2 5.58173 2 10C2 14.4183 5.58173 18 10 18Z", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : isActive ? (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { opacity: ".2", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", fill: "#2D87F3" }),
React__namespace["default"].createElement("path", { d: "m6.389 10.278 2.5 2.778 4.722-6.111", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", fill: "#ADB3BC", fillOpacity: ".3" }),
React__namespace["default"].createElement("path", { d: "m6.389 10.278 2.5 2.778 4.722-6.111", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
};