@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/{index-5aac5fb6.js → index-d34cd464.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-3a589c92.js');
+var utils = require('./utils-524bda7c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-4026b8c5.js → index-d5b4089d.js}

@@ -1,19 +1,144 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
 var React = require('react');
-var paths = require('./paths-02f54499.js');
-var index$1 = require('./index-6036e2a0.js');
-var index$2 = require('./index-e914bc7c.js');
-var index = require('./index-517f6538.js');
-var defaultClassWrapper = require('./defaultClassWrapper-feaae206.js');
-var useTranslations = require('./useTranslations-76f64595.js');
-var isProduction = require('./isProduction-7f7f09ad.js');
-var index_styles = require('./index.styles-61201019.js');
+var styled = require('@emotion/styled');
+var theme = require('./theme-e4f7f487.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var useTranslations = require('./useTranslations-200168a3.js');
+var core = require('@mantine/core');
+var index = require('./index-a7de42d1.js');
+var paths = require('./paths-e0bbfce7.js');
+var constants = require('./constants-936f45e9.js');
+var index$1 = require('./index-a86ea1b6.js');
+var utils = require('./utils-95d9832e.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledDivider = styled__default["default"].hr `
+  border-width: 1px;
+  border-color: ${theme.theme.colors.neutral200};
+  border-style: ${(props) => props.dividerType};
+`;
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Divider = ({ type = 'solid', className, style }) => {
+    return (React__default["default"].createElement(StyledDivider, { style: style, className: className, "data-diver-type": type, dividerType: type }));
+};
+
+var useStyles = core.createStyles((theme) => {
+    return {
+        root: {
+            display: 'inline-block',
+            // height: 1rem,
+            flexShrink: 0,
+            padding: '2px 0.5rem',
+            marginLeft: '4px',
+            borderRadius: theme.radius.xs,
+            // color: white,
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: '18px',
+            '&[data-label-type="admin"]': {
+                background: theme.primaryColor[0],
+                color: theme.primaryColor[9],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'tonePink')};
+                //   color: #{map-get($mbColors, 'cRed')};
+                // }
+            },
+            '&[data-label-type="local admin"]': {
+                background: theme.primaryColor[8],
+            },
+            '&[data-label-type="ambassador"]': {
+                background: theme.colors.green[4],
+            },
+            '&[data-label-type="expert"]': {
+                background: theme.colors.yellow[6],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'cOrange')};
+                //   color: #{map-get($colors, 'cWhite')};
+                // }
+            },
+            '&[data-label-type="moderator"]': {
+                background: theme.colors.red[0],
+                color: theme.colors.red[8],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'toneBlue')};
+                //   color: #{map-get($mbColors, 'cobalt')};
+                // }
+            },
+            '&[data-label-type="sponsor"]': {
+                background: theme.colors.teal[4],
+            },
+            '&[data-label-type="guide"]': {
+                background: theme.colors.teal[4],
+            },
+            '&[data-label-type="influencer"]': {
+                background: theme.colors.teal[4],
+            },
+        },
+    };
+});
+
+const AuthorLabelTextMapping = {
+    admin: 'cardAuthor.admin',
+    moderator: 'cardAuthor.moderator',
+    ambassador: 'cardAuthor.ambassador',
+    expert: 'cardAuthor.expert',
+    sponsor: 'cardAuthor.sponsor',
+    // 'local-admin': 'cardAuthor.localAdmin',
+    guide: 'cardAuthor.guide',
+    influencer: 'cardAuthor.influencer',
+};
+const looselyMatchRole = (role) => {
+    const allRoles = [
+        'admin',
+        'moderator',
+        'ambassador',
+        'expert',
+        'sponsor',
+        'guide',
+        'influencer',
+    ];
+    return allRoles.find((r) => r === role);
+};
+const AuthorBadge = (_a) => {
+    var { siteType, role, title, styles, className } = _a, rest = tslib_es6.__rest(_a, ["siteType", "role", "title", "styles", "className"]);
+    const { t } = useTranslations.useTranslations();
+    const matchedRole = role ? looselyMatchRole(role) : '';
+    const { classes, cx } = useStyles(undefined, 
+    // Second argument is responsible for styles api integration
+    { name: 'AuthorBadge', styles });
+    return matchedRole && AuthorLabelTextMapping[matchedRole] ? (React__default["default"].createElement("div", Object.assign({ 
+        // className={styles.authorBadge}
+        className: cx(classes.root, className), "data-label-type": matchedRole, "data-is-marrybaby": siteType === 'marryBaby' }, rest), title || t(AuthorLabelTextMapping[matchedRole]))) : null;
+};
+
+const StyledContainer = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  button[data-color='tertiary'] {
+    background: white;
+  }
+`;
+
+const BtnChoice = ({ value: valueInit, choices, onChange }) => {
+    const [value, setValue] = React.useState(valueInit);
+    React.useEffect(() => {
+        setValue(valueInit);
+    }, [valueInit]);
+    return (React__default["default"].createElement(StyledContainer, null, choices.map((i, idx) => (React__default["default"].createElement(index.Button, { dataEventCategory: i.dataEventCategory, dataEventAction: i.dataEventAction, dataEventLabel: i.dataEventLabel, size: "sm", variant: i.value === value ? 'primary' : 'tertiary', key: idx, onClick: () => {
+            setValue(i.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(i.value);
+        } }, i.label || '')))));
+};
 
 const BookingBtn = (_a) => {
     var { label, bookingId, bookingType = 'doctor', locale = 'vi-VN' } = _a, rest = tslib_es6.__rest(_a, ["label", "bookingId", "bookingType", "locale"]);
@@ -37,29 +162,29 @@ const BookingBtn = (_a) => {
                     : '';
         try {
             setLoading(true);
-            const response = yield defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(url, {
+            const response = yield utils.callApi(utils.getCarePath(url, {
                 id: bookingId,
-                site: index.domainLocales[locale],
+                site: index$1.domainLocales[locale],
             }), 'get');
             if ((response === null || response === void 0 ? void 0 : response._status) === 1) {
                 const result = bookingType === 'doctor'
                     ? {
                         id: (_c = (_b = response === null || response === void 0 ? void 0 : response._data) === null || _b === void 0 ? void 0 : _b.doctor) === null || _c === void 0 ? void 0 : _c.id,
                         slug: (_e = (_d = response === null || response === void 0 ? void 0 : response._data) === null || _d === void 0 ? void 0 : _d.doctor) === null || _e === void 0 ? void 0 : _e.slug,
-                        localSlug: (_f = index$1.LOCALIZED_SLUGS[locale]) === null || _f === void 0 ? void 0 : _f.DOCTOR,
+                        localSlug: (_f = constants.LOCALIZED_SLUGS[locale]) === null || _f === void 0 ? void 0 : _f.DOCTOR,
                     }
                     : bookingType === 'hospital'
                         ? {
                             id: (_h = (_g = response === null || response === void 0 ? void 0 : response._data) === null || _g === void 0 ? void 0 : _g.branch) === null || _h === void 0 ? void 0 : _h.id,
                             slug: (_k = (_j = response === null || response === void 0 ? void 0 : response._data) === null || _j === void 0 ? void 0 : _j.branch) === null || _k === void 0 ? void 0 : _k.slug,
-                            localSlug: (_l = index$1.LOCALIZED_SLUGS[locale]) === null || _l === void 0 ? void 0 : _l.HOSPITAL,
+                            localSlug: (_l = constants.LOCALIZED_SLUGS[locale]) === null || _l === void 0 ? void 0 : _l.HOSPITAL,
                         }
                         : {
                             id: (_o = (_m = response === null || response === void 0 ? void 0 : response._data) === null || _m === void 0 ? void 0 : _m.service) === null || _o === void 0 ? void 0 : _o.id,
                             slug: (_q = (_p = response === null || response === void 0 ? void 0 : response._data) === null || _p === void 0 ? void 0 : _p.service) === null || _q === void 0 ? void 0 : _q.slug,
-                            localSlug: (_r = index$1.LOCALIZED_SLUGS[locale]) === null || _r === void 0 ? void 0 : _r.SERVICE,
+                            localSlug: (_r = constants.LOCALIZED_SLUGS[locale]) === null || _r === void 0 ? void 0 : _r.SERVICE,
                         };
-                window.location.href = `https://${!isProduction.isProduction ? 'discover.' : ''}${index.domainLocales[locale]}/care/${result.localSlug}/${result.slug}-${result.id}/`;
+                window.location.href = `https://${!isProduction.isProduction ? 'discover.' : ''}${index$1.domainLocales[locale]}/care/${result.localSlug}/${result.slug}-${result.id}/`;
             }
             else {
                 setLoading(false);
@@ -70,59 +195,7 @@ const BookingBtn = (_a) => {
             setLoading(false);
         }
     }), []);
-    return bookingId && bookingType ? (React__default["default"].createElement(index$2.Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
-};
-
-const AuthorLabelTextMapping = {
-    admin: 'cardAuthor.admin',
-    moderator: 'cardAuthor.moderator',
-    ambassador: 'cardAuthor.ambassador',
-    expert: 'cardAuthor.expert',
-    sponsor: 'cardAuthor.sponsor',
-    // 'local-admin': 'cardAuthor.localAdmin',
-    guide: 'cardAuthor.guide',
-    influencer: 'cardAuthor.influencer',
-};
-const looselyMatchRole = (role) => {
-    const allRoles = [
-        'admin',
-        'moderator',
-        'ambassador',
-        'expert',
-        'sponsor',
-        'guide',
-        'influencer',
-    ];
-    return allRoles.find((r) => r === role);
-};
-const AuthorBadge = (_a) => {
-    var { siteType, role, title, styles, className } = _a, rest = tslib_es6.__rest(_a, ["siteType", "role", "title", "styles", "className"]);
-    const { t } = useTranslations.useTranslations();
-    const matchedRole = role ? looselyMatchRole(role) : '';
-    const { classes, cx } = index_styles.useStyles(undefined, 
-    // Second argument is responsible for styles api integration
-    { name: 'AuthorBadge', styles });
-    return matchedRole && AuthorLabelTextMapping[matchedRole] ? (React__default["default"].createElement("div", Object.assign({ 
-        // className={styles.authorBadge}
-        className: cx(classes.root, className), "data-label-type": matchedRole, "data-is-marrybaby": siteType === 'marryBaby' }, rest), title || t(AuthorLabelTextMapping[matchedRole]))) : null;
-};
-
-const BtnChoice = ({ value: valueInit, choices, onChange }) => {
-    const [value, setValue] = React.useState(valueInit);
-    React.useEffect(() => {
-        setValue(valueInit);
-    }, [valueInit]);
-    return (React__default["default"].createElement(index_styles.StyledContainer, null, choices.map((i, idx) => (React__default["default"].createElement(index$2.Button, { dataEventCategory: i.dataEventCategory, dataEventAction: i.dataEventAction, dataEventLabel: i.dataEventLabel, size: "sm", variant: i.value === value ? 'primary' : 'tertiary', key: idx, onClick: () => {
-            setValue(i.value);
-            onChange === null || onChange === void 0 ? void 0 : onChange(i.value);
-        } }, i.label || '')))));
-};
-
-/**
- * @deprecated Consider to use mantine
- */
-const Divider = ({ type = 'solid', className, style }) => {
-    return (React__default["default"].createElement(index_styles.StyledDivider, { style: style, className: className, "data-diver-type": type, dividerType: type }));
+    return bookingId && bookingType ? (React__default["default"].createElement(index.Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
 };
 
 exports.AuthorBadge = AuthorBadge;

package/build/index-dba2e361.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-dcbd8bf3.js');
+var useTranslations = require('./useTranslations-200168a3.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var styles = {"loading":"tliWyii"};
+
+const Loading = ({ className, theme, hideText }) => {
+    const { t } = useTranslations.useTranslations();
+    return (React__default["default"].createElement("div", { className: `${styles.loading} ${className}` },
+        React__default["default"].createElement(index.Icon.Spinner, { isMarryBaby: theme === 'marryBaby' }),
+        !hideText && t('loading')));
+};
+
+exports.Loading = Loading;

package/build/{index-586f0a4f.js → index-dcbd8bf3.js}

@@ -1,11 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
 var React = require('react');
-var theme = require('./theme-416e0fd4.js');
-var defaultClassWrapper = require('./defaultClassWrapper-feaae206.js');
-var Instagram = require('./Instagram-5735e971.js');
-var index = require('./index-aefa01a7.js');
+var theme = require('./theme-e4f7f487.js');
+var WhatsApp = require('./WhatsApp-82018096.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -48,6 +46,23 @@ const CartWithAdd = (_a) => {
         React__default["default"].createElement("path", { d: "M8.938 4.812H7.25a.54.54 0 0 1-.4-.161.55.55 0 0 1-.162-.401q0-.24.161-.401a.55.55 0 0 1 .401-.162h1.688V2q0-.24.161-.4a.55.55 0 0 1 .401-.163q.24 0 .4.162a.55.55 0 0 1 .162.401v1.688h1.688q.24 0 .4.161a.55.55 0 0 1 .162.401q0 .24-.161.4a.55.55 0 0 1-.401.162h-1.687V6.5q0 .24-.162.4a.55.55 0 0 1-.401.162.54.54 0 0 1-.4-.161.55.55 0 0 1-.162-.401zM5.865 16.668q-.546 0-.93-.383a1.27 1.27 0 0 1-.382-.93q0-.546.383-.929t.93-.383.929.383.383.93q0 .546-.383.93a1.27 1.27 0 0 1-.93.382m7.27 0q-.547 0-.93-.383a1.27 1.27 0 0 1-.383-.93q0-.546.383-.929t.93-.383.93.383.382.93q0 .546-.383.93a1.27 1.27 0 0 1-.93.382M3.053 3.312h-.865a.54.54 0 0 1-.401-.161.55.55 0 0 1-.162-.401q0-.24.162-.4a.55.55 0 0 1 .4-.162h1.158q.192 0 .36.1a.63.63 0 0 1 .25.287l2.946 6.218h5.113q.065 0 .115-.032a.3.3 0 0 0 .087-.09l2.618-4.702a.5.5 0 0 1 .198-.21.56.56 0 0 1 .28-.071q.324 0 .485.275.162.276.006.557L13.2 9.232a1.35 1.35 0 0 1-.489.505q-.303.18-.665.181H6.575l-.868 1.587q-.058.086-.004.187t.162.101h8.02q.239 0 .4.162a.55.55 0 0 1 .162.401q0 .24-.162.4a.55.55 0 0 1-.4.162h-8.02q-.75 0-1.133-.64-.383-.642-.02-1.298l1.07-1.924z", fill: color })));
 };
 
+const Eye = (_a) => {
+    var { size, color: colorInit, useCurrentColor, isActive, activeColor } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
+    const color = useCurrentColor
+        ? 'currentColor'
+        : isActive
+            ? activeColor
+            : colorInit;
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 18 18", fill: "none" }, props),
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.00183 11.6827C9.85164 11.6827 10.5734 11.3852 11.1672 10.7903C11.7609 10.1955 12.0578 9.4731 12.0578 8.62328C12.0578 7.77346 11.7604 7.05168 11.1655 6.45793C10.5706 5.86418 9.84824 5.56731 8.99841 5.56731C8.1486 5.56731 7.42682 5.86474 6.83307 6.45962C6.23932 7.05451 5.94245 7.77686 5.94245 8.62669C5.94245 9.4765 6.23988 10.1983 6.83476 10.792C7.42965 11.3858 8.152 11.6827 9.00183 11.6827ZM9.00012 10.65C8.43762 10.65 7.9595 10.4531 7.56575 10.0594C7.172 9.66561 6.97512 9.18748 6.97512 8.62498C6.97512 8.06248 7.172 7.58436 7.56575 7.19061C7.9595 6.79686 8.43762 6.59998 9.00012 6.59998C9.56262 6.59998 10.0407 6.79686 10.4345 7.19061C10.8282 7.58436 11.0251 8.06248 11.0251 8.62498C11.0251 9.18748 10.8282 9.66561 10.4345 10.0594C10.0407 10.4531 9.56262 10.65 9.00012 10.65ZM9.00012 13.875C7.42128 13.875 5.9773 13.4538 4.66818 12.6115C3.35904 11.7692 2.31409 10.661 1.53333 9.28699C1.47083 9.1793 1.42515 9.07077 1.3963 8.96139C1.36745 8.85201 1.35303 8.73974 1.35303 8.62461C1.35303 8.50947 1.36745 8.39734 1.3963 8.28821C1.42515 8.17908 1.47083 8.07066 1.53333 7.96298C2.31409 6.58894 3.35904 5.48077 4.66818 4.63847C5.9773 3.79616 7.42128 3.375 9.00012 3.375C10.579 3.375 12.0229 3.79616 13.3321 4.63847C14.6412 5.48077 15.6862 6.58894 16.4669 7.96298C16.5294 8.07066 16.5751 8.17919 16.6039 8.28857C16.6328 8.39796 16.6472 8.51022 16.6472 8.62536C16.6472 8.74049 16.6328 8.85263 16.6039 8.96175C16.5751 9.07089 16.5294 9.1793 16.4669 9.28699C15.6862 10.661 14.6412 11.7692 13.3321 12.6115C12.0229 13.4538 10.579 13.875 9.00012 13.875ZM9.00012 12.75C10.4126 12.75 11.7095 12.3781 12.8907 11.6344C14.072 10.8906 14.9751 9.88748 15.6001 8.62498C14.9751 7.36248 14.072 6.35936 12.8907 5.61561C11.7095 4.87186 10.4126 4.49998 9.00012 4.49998C7.58762 4.49998 6.29075 4.87186 5.1095 5.61561C3.92825 6.35936 3.02512 7.36248 2.40012 8.62498C3.02512 9.88748 3.92825 10.8906 5.1095 11.6344C6.29075 12.3781 7.58762 12.75 9.00012 12.75Z", fill: color })));
+};
+Eye.defaultProps = {
+    size: 24,
+    color: theme.theme.colors.gray600,
+    activeColor: theme.theme.colors.primaryBase,
+};
+
 const Share = (_a) => {
     var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, activeColor = theme.theme.colors.primaryBase, isActive, isMarryBaby, isSolid = true } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "activeColor", "isActive", "isMarryBaby", "isSolid"]);
     const color = useCurrentColor
@@ -62,15 +77,28 @@ const Share = (_a) => {
         React__default["default"].createElement("path", { d: "M18.0011 21.75C17.2375 21.75 16.5881 21.4826 16.0529 20.9479C15.5176 20.4132 15.25 19.7639 15.25 19C15.25 18.8751 15.2599 18.7459 15.2798 18.6121C15.2997 18.4784 15.3295 18.3551 15.3692 18.2423L7.97305 13.9115C7.70895 14.1743 7.40831 14.3798 7.07113 14.5279C6.73394 14.6759 6.37689 14.75 5.99997 14.75C5.23609 14.75 4.58679 14.4827 4.05207 13.9482C3.51736 13.4137 3.25 12.7647 3.25 12.0011C3.25 11.2375 3.51736 10.5881 4.05207 10.0529C4.58679 9.51763 5.23609 9.25 5.99997 9.25C6.37689 9.25 6.73394 9.32403 7.07113 9.4721C7.40831 9.62018 7.70895 9.82563 7.97305 10.0885L15.3692 5.75768C15.3295 5.64486 15.2997 5.52157 15.2798 5.38783C15.2599 5.25409 15.25 5.12481 15.25 4.99998C15.25 4.23609 15.5173 3.58679 16.0518 3.05208C16.5863 2.51736 17.2353 2.25 17.9989 2.25C18.7624 2.25 19.4118 2.51725 19.9471 3.05175C20.4823 3.58625 20.75 4.23528 20.75 4.99885C20.75 5.76242 20.4826 6.41182 19.9479 6.94707C19.4132 7.48233 18.7639 7.74995 18 7.74995C17.6231 7.74995 17.266 7.67592 16.9288 7.52785C16.5916 7.37977 16.291 7.17432 16.0269 6.9115L8.63073 11.2423C8.67048 11.3551 8.70028 11.4782 8.72015 11.6115C8.74002 11.7447 8.74995 11.8736 8.74995 11.998C8.74995 12.1224 8.74002 12.2519 8.72015 12.3865C8.70028 12.5211 8.67048 12.6449 8.63073 12.7577L16.0269 17.0885C16.291 16.8256 16.5916 16.6202 16.9288 16.4721C17.266 16.324 17.6231 16.25 18 16.25C18.7639 16.25 19.4132 16.5173 19.9479 17.0518C20.4826 17.5863 20.75 18.2353 20.75 18.9989C20.75 19.7624 20.4827 20.4118 19.9482 20.9471C19.4137 21.4823 18.7647 21.75 18.0011 21.75ZM18 6.24998C18.3474 6.24998 18.6426 6.1285 18.8856 5.88555C19.1285 5.64258 19.25 5.34738 19.25 4.99995C19.25 4.65252 19.1285 4.35732 18.8856 4.11435C18.6426 3.87142 18.3474 3.74995 18 3.74995C17.6525 3.74995 17.3573 3.87143 17.1144 4.11438C16.8714 4.35734 16.75 4.65254 16.75 4.99998C16.75 5.34741 16.8714 5.64261 17.1144 5.88558C17.3573 6.12853 17.6525 6.24998 18 6.24998ZM5.99997 13.25C6.34741 13.25 6.64261 13.1285 6.88558 12.8856C7.12853 12.6426 7.25 12.3474 7.25 12C7.25 11.6525 7.12853 11.3573 6.88558 11.1144C6.64261 10.8714 6.34741 10.75 5.99997 10.75C5.65254 10.75 5.35734 10.8714 5.11438 11.1144C4.87143 11.3573 4.74995 11.6525 4.74995 12C4.74995 12.3474 4.87143 12.6426 5.11438 12.8856C5.35734 13.1285 5.65254 13.25 5.99997 13.25ZM18 20.25C18.3474 20.25 18.6426 20.1285 18.8856 19.8855C19.1285 19.6426 19.25 19.3474 19.25 19C19.25 18.6525 19.1285 18.3573 18.8856 18.1144C18.6426 17.8714 18.3474 17.75 18 17.75C17.6525 17.75 17.3573 17.8714 17.1144 18.1144C16.8714 18.3573 16.75 18.6525 16.75 19C16.75 19.3474 16.8714 19.6426 17.1144 19.8856C17.3573 20.1285 17.6525 20.25 18 20.25Z", fill: color })));
 };
 
+const Spinner = (_a) => {
+    var { size = 24, color, isMarryBaby } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "isMarryBaby"]);
+    return (React__default["default"].createElement("svg", Object.assign({ style: {
+            display: 'block',
+            shapeRendering: 'auto',
+        }, width: size, height: size, viewBox: "30 30 40 40", preserveAspectRatio: "xMidYMid" }, rest),
+        React__default["default"].createElement("circle", { cx: "50", cy: "50", fill: "none", stroke: color || (isMarryBaby ? '#e85388' : '#91caff'), strokeWidth: "7", r: "16", strokeDasharray: "75.39822368615503 27.132741228718345" },
+            React__default["default"].createElement("animateTransform", { attributeName: "transform", type: "rotate", repeatCount: "indefinite", dur: "1.2s", values: "0 50 50;360 50 50", keyTimes: "0;1" }))));
+};
+Spinner.defaultProps = {
+    size: 24,
+};
+
 const Icon = {
     Share,
-    Eye: defaultClassWrapper.Eye,
-    WhatsApp: index.WhatsApp,
+    Eye,
+    WhatsApp: WhatsApp.WhatsApp,
     ArrowRightTail,
-    Spinner: defaultClassWrapper.Spinner,
+    Spinner,
     Cart,
     CartWithAdd,
-    Instagram: Instagram.Instagram,
+    Instagram: WhatsApp.Instagram,
 };
 
 exports.Icon = Icon;

package/build/index-dd1392e3.js

@@ -0,0 +1,167 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var React = require('react');
+var core = require('@mantine/core');
+var styled = require('@emotion/styled');
+var theme = require('./theme-e4f7f487.js');
+var utils = require('./utils-524bda7c.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledInput = styled__default["default"].div `
+  position: relative;
+  width: 100%;
+
+  &[data-has-error] {
+    input {
+      border-color: ${theme.theme.colors.red700};
+    }
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px ${theme.theme.colors.gray200};
+    border-radius: ${theme.theme.borderRadius};
+
+    &:active,
+    &:focus,
+    &.focused {
+      border-color: ${(props) => props.color};
+      box-shadow: 0px 0px 2px 2px ${(props) => props.shadowColor};
+    }
+
+    &:disabled {
+      background-color: ${theme.theme.colors.gray100};
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-has-action-icon] {
+    input {
+      padding: 12px 48px 12px 16px;
+    }
+  }
+  &[data-has-display-icon] {
+    input {
+      padding: 12px 16px 12px 48px;
+    }
+  }
+
+  &[data-has-action-icon][data-has-display-icon] {
+    input {
+      padding: 12px 48px;
+    }
+  }
+
+  &[data-size='lg'] {
+    input {
+      font-size: 16px;
+      font-weight: ${theme.theme.sizes.fwRegular};
+      ${utils.MediaQueries.mbDown} {
+        font-size: 22px;
+        line-height: 1.2;
+      }
+
+      ${utils.MediaQueries.mbUp} {
+        font-size: 26px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='md'] {
+    input {
+      font-weight: ${theme.theme.sizes.fwRegular};
+      line-height: 22px;
+      ${utils.MediaQueries.mbDown} {
+        font-size: 14px;
+        line-height: 1.2;
+      }
+
+      ${utils.MediaQueries.mbUp} {
+        font-size: 16px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='sm'] {
+    input {
+      font-weight: ${theme.theme.sizes.fwRegular};
+      line-height: 20px;
+      ${utils.MediaQueries.mbDown} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      ${utils.MediaQueries.mbUp} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    }
+  }
+`;
+const StyledErrorLabel = styled__default["default"].label `
+  color: ${theme.theme.colors.red700};
+  font-weight: ${theme.theme.sizes.fwRegular};
+`;
+const StyledActionIcon = styled__default["default"].div `
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  cursor: pointer;
+  transform: translateY(-50%);
+`;
+const StyledDisplayIcon = styled__default["default"].div `
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  display: inline-flex;
+  cursor: default;
+  transform: translateY(-50%);
+`;
+
+var styles = {"label":"DjBFAbd"};
+
+/**
+ * @deprecated will removed soon
+ */
+const Label = ({ children, className, style, htmlFor, size }) => {
+    return (React__default["default"].createElement("label", { "data-size": size, className: `${styles.label} ${className || ''}`, style: style, htmlFor: htmlFor }, children));
+};
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Input = (_a) => {
+    var { name, value, errorMessage, isNumerousKeyboard = false, showErrorMessage = true, actionIcon: ActionIcon, displayIcon: DisplayIcon, onActionClick, label, className, onChange, isDisabled, CustomInput, size, style, autoComplete = 'off', type = 'text', inputClassName, trackingAttributes, enterKeyHint } = _a, rest = tslib_es6.__rest(_a, ["name", "value", "errorMessage", "isNumerousKeyboard", "showErrorMessage", "actionIcon", "displayIcon", "onActionClick", "label", "className", "onChange", "isDisabled", "CustomInput", "size", "style", "autoComplete", "type", "inputClassName", "trackingAttributes", "enterKeyHint"]);
+    const _theme = core.useMantineTheme();
+    const gaAttributes = React.useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    return (React__default["default"].createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][0], style: style },
+        label && (React__default["default"].createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
+        React__default["default"].createElement("div", { style: { position: 'relative' } },
+            CustomInput ? (CustomInput) : (React__default["default"].createElement("input", Object.assign({ id: name, name: name, onChange: (e) => onChange && onChange(e.target.value), type: type, "aria-label": type, value: value, disabled: isDisabled, autoComplete: autoComplete, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', className: inputClassName, enterKeyHint: enterKeyHint }, gaAttributes, rest))),
+            DisplayIcon && (React__default["default"].createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
+            ActionIcon && (React__default["default"].createElement(StyledActionIcon, { className: "actionIcon", onClick: onActionClick }, ActionIcon))),
+        errorMessage && errorMessage.length > 0 && showErrorMessage && (React__default["default"].createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
+};
+
+exports.Input = Input;
+exports.Label = Label;
+exports.StyledActionIcon = StyledActionIcon;
+exports.StyledDisplayIcon = StyledDisplayIcon;
+exports.StyledErrorLabel = StyledErrorLabel;

package/build/{index-875d81d3.js → index-def9867a.js}

@@ -1,20 +1,21 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
 var React = require('react');
-require('./index-e914bc7c.js');
+require('./index-05f106c2.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-517f6538.js');
-require('./index-0b957c10.js');
-require('./index-e932125b.js');
-require('./useMantineLocale-97b962eb.js');
-var index = require('./index-5aac5fb6.js');
-require('./theme-416e0fd4.js');
-require('./translationsContext-6f3c14ea.js');
+require('./index-a86ea1b6.js');
+require('./index-df5cd44b.js');
+require('./index-1efa7d84.js');
+require('./useMantineLocale-a4f0c61d.js');
+var index = require('./index-d34cd464.js');
+require('./index-a7de42d1.js');
+require('./theme-e4f7f487.js');
+require('./translationsContext-39528d2f.js');
 require('string-format');
 require('@mantine/hooks');
-require('./utils-3a589c92.js');
+require('./utils-524bda7c.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }