@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/index-9625ab6c.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var core = require('@mantine/core');
+
+const Switch = core.Switch;
+
+exports.Switch = Switch;

package/build/index-970717a9.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var core = require('@mantine/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var FontWeight;
+(function (FontWeight) {
+    FontWeight[FontWeight["regular"] = 400] = "regular";
+    FontWeight[FontWeight["semiBold"] = 600] = "semiBold";
+    FontWeight[FontWeight["bold"] = 700] = "bold";
+})(FontWeight || (FontWeight = {}));
+const GlobalTextStyle = {
+    fontSize: {
+        base: [core.rem(16), core.rem(16)],
+        lg: [core.rem(18), core.rem(16)],
+        md: [core.rem(18), core.rem(16)],
+        sm: [core.rem(16), core.rem(14)],
+        xs: [core.rem(14), core.rem(12)],
+        s1: [core.rem(22), core.rem(18)],
+        s2: [core.rem(18), core.rem(16)],
+        s3: [core.rem(16), core.rem(14)],
+        s4: [core.rem(14), core.rem(12)],
+        s5: [core.rem(12), core.rem(12)],
+        p1: [core.rem(18), core.rem(16)],
+        p2: [core.rem(16), core.rem(16)],
+        p3: [core.rem(16), core.rem(14)],
+        p4: [core.rem(14), core.rem(12)],
+        p5: [core.rem(12), core.rem(12)],
+        c1: [core.rem(16), core.rem(14)],
+        c2: [core.rem(14), core.rem(12)],
+        n1: [core.rem(12), core.rem(12)],
+        label1: [core.rem(14), core.rem(14)],
+        label2: [core.rem(12), core.rem(12)],
+        h1: [core.rem(40), core.rem(26)],
+        h2: [core.rem(32), core.rem(24)],
+        h3: [core.rem(26), core.rem(20)],
+        h4: [core.rem(22), core.rem(18)],
+        h5: [core.rem(18), core.rem(16)],
+        h6: [core.rem(16), core.rem(14)],
+    },
+    lineHeight: {
+        base: [core.rem(24), core.rem(24)],
+        lg: [core.rem(32), core.rem(28)],
+        md: [core.rem(32), core.rem(28)],
+        sm: [core.rem(24), core.rem(22)],
+        xs: [core.rem(24), core.rem(18)],
+        s1: [core.rem(32), core.rem(26)],
+        s2: [core.rem(28), core.rem(24)],
+        s3: [core.rem(24), core.rem(24)],
+        s4: [core.rem(22), core.rem(18)],
+        s5: [core.rem(18), core.rem(18)],
+        p1: [core.rem(28), core.rem(28)],
+        p2: [core.rem(24), core.rem(24)],
+        p3: [core.rem(24), core.rem(22)],
+        p4: [core.rem(22), core.rem(18)],
+        c1: [core.rem(24), core.rem(22)],
+        c2: [core.rem(22), core.rem(18)],
+        n1: [core.rem(18), core.rem(18)],
+        label1: [core.rem(22), core.rem(22)],
+        label2: [core.rem(18), core.rem(18)],
+        h1: [core.rem(52), core.rem(34)],
+        h2: [core.rem(42), core.rem(32)],
+        h3: [core.rem(36), core.rem(26)],
+        h4: [core.rem(32), core.rem(26)],
+        h5: [core.rem(28), core.rem(24)],
+        h6: [core.rem(24), core.rem(22)],
+    },
+    letterSpacing: {
+        lg: [-0.2, 0],
+        md: [-0.2, 0],
+        sm: [0, -0.2],
+        s1: [-0.6, -0.6],
+        s2: [-0.4, -0.2],
+        s3: [0, -0.2],
+        s4: [0, -0.2],
+        p1: [-0.2, -0.2],
+        p2: [0, -0.2],
+        p3: [0, -0.2],
+        p4: [-0.2, 0],
+        label1: [0, -0.2],
+        h1: [-1.2, -0.9],
+        h2: [-1, -0.8],
+        h3: [-0.8, -0.7],
+        h4: [-0.6, -0.6],
+        h5: [-0.2, -0.2],
+        h6: [0, -0.2],
+    },
+    fontWeightBySize: {
+        s1: FontWeight.semiBold,
+        s2: FontWeight.semiBold,
+        s3: FontWeight.semiBold,
+        s4: FontWeight.semiBold,
+        h1: FontWeight.bold,
+        h2: FontWeight.bold,
+        h3: FontWeight.bold,
+        h4: FontWeight.bold,
+        h5: FontWeight.bold,
+        h6: FontWeight.bold,
+    },
+    fontWeight: FontWeight,
+};
+
+const OTHER_THEME_CONFIG = Object.assign({}, GlobalTextStyle);
+
+var useStyles = core.createStyles((theme, _params) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const TextConfig = Object.assign({}, OTHER_THEME_CONFIG);
+    const getFontSize = (_a = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _a === void 0 ? void 0 : _a[0];
+    const getLineHeight = (_b = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _b === void 0 ? void 0 : _b[0];
+    const getLetterSpacing = (_e = (_d = (_c = TextConfig.letterSpacing) === null || _c === void 0 ? void 0 : _c[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : 0;
+    const getFontSizeMbDown = (_f = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _f === void 0 ? void 0 : _f[1];
+    const getLineHeightMbDown = (_g = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _g === void 0 ? void 0 : _g[1];
+    const getLetterSpacingMbDown = (_k = (_j = (_h = TextConfig.letterSpacing) === null || _h === void 0 ? void 0 : _h[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _j === void 0 ? void 0 : _j[1]) !== null && _k !== void 0 ? _k : 0;
+    return {
+        root: Object.assign(Object.assign({}, ((_params === null || _params === void 0 ? void 0 : _params.size) && {
+            fontWeight: (_params === null || _params === void 0 ? void 0 : _params.as) === 'label'
+                ? FontWeight.semiBold
+                : TextConfig.fontWeightBySize[_params === null || _params === void 0 ? void 0 : _params.size] ||
+                    TextConfig.fontWeight[_params.weight],
+            fontSize: `${getFontSize}`,
+            lineHeight: `${getLineHeight}`,
+            letterSpacing: getLetterSpacing,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: `${getFontSizeMbDown}`,
+                lineHeight: `${getLineHeightMbDown}`,
+                letterSpacing: getLetterSpacingMbDown,
+            },
+        })), { '&[data-event-category] > *': {
+                pointerEvents: 'none',
+            } }),
+    };
+});
+
+const Text = (_a) => {
+    var _b;
+    var { size, color, weight = 'regular', as = 'p', styles, className, dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "weight", "as", "styles", "className", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
+    const { theme, classes, cx } = useStyles({ size, weight: weight === 'caption' ? 'bold' : weight, as }, { name: 'Text', styles });
+    return (React__default["default"].createElement(core.Text, Object.assign({ className: cx(classes.root, className), color: color ||
+            (as === 'label'
+                ? theme.colors.gray[6]
+                : ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb'
+                    ? theme.colors.delftGray[7]
+                    : theme.colors.gray[7]), component: as, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, classNames: {
+            root: Object.assign(Object.assign({}, (rest.wordWrap ? { 'word-wrap': rest.wordWrap } : undefined)), (rest.isUppercase || weight === 'caption'
+                ? { 'text-transform': 'uppercase' }
+                : undefined)),
+        } }, rest)));
+};
+
+exports.OTHER_THEME_CONFIG = OTHER_THEME_CONFIG;
+exports.Text = Text;

package/build/index-97f95550.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index = require('./index-970717a9.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @deprecated Consider to use import { Title } from '@mantine/core'
+ * if need to use custom tag, use Text from mantine instead
+ */
+const Heading = (_a) => {
+    var { as, tag, color, fontWeight, dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = tslib_es6.__rest(_a, ["as", "tag", "color", "fontWeight", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
+    const asTag = as || tag;
+    const theme = core.useMantineTheme();
+    return (React__default["default"].createElement(index.Text, Object.assign({ as: asTag, color: color || theme.colors.gray[8], "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, weight: fontWeight === 'semibold' ? 'semiBold' : 'bold', size: tag }, rest)));
+};
+
+exports.Heading = Heading;

package/build/index-a00da8f4.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var theme = require('./theme-30426d81.js');
+var utils = require('./utils-386fbc52.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ArrowRightTail = (_a) => {
+    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.theme.colors.primaryBase } = _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({ viewBox: "0 0 18 18", fill: "none" }, props),
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.74707 4.22754C9.89332 4.08091 10.0854 4.00635 10.2773 4.00635C10.4692 4.00635 10.661 4.08091 10.8076 4.22754L15.0498 8.46973C15.3431 8.76223 15.3431 9.23702 15.0498 9.53027L10.8076 13.7725C10.5151 14.0657 10.0403 14.0657 9.74707 13.7725L9.68262 13.708C9.38937 13.4155 9.38937 12.9407 9.68262 12.6475L12.5801 9.75H2.77734C2.36334 9.75 2.02734 9.414 2.02734 9C2.02734 8.586 2.36334 8.25 2.77734 8.25H12.5801L9.68262 5.35254C9.38937 5.06004 9.38937 4.58524 9.68262 4.29199L9.74707 4.22754Z", fill: color })));
+};
+
+const Cart = (_a) => {
+    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, isSolid, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "useCurrentColor", "isActive", "isSolid", "activeColor"]);
+    const color = useCurrentColor
+        ? 'currentColor'
+        : isActive
+            ? activeColor
+            : colorInit;
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isSolid ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M7.154 21.558q-.73 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24t1.24-.51q.729 0 1.24.51.51.51.51 1.24 0 .729-.51 1.24-.511.51-1.24.51m9.692 0q-.729 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24.511-.51 1.24-.51.73 0 1.24.51t.51 1.24-.51 1.24-1.24.51M5.296 4.25h13.885q.613 0 .928.522t.03 1.066l-3.204 5.804a1.8 1.8 0 0 1-.651.674 1.7 1.7 0 0 1-.888.242H8.1l-1.158 2.115q-.077.115-.005.25.073.135.217.135h10.692q.32 0 .535.215a.73.73 0 0 1 .215.535.73.73 0 0 1-.215.534.73.73 0 0 1-.535.216H7.154q-1 0-1.503-.863-.503-.862-.036-1.722l1.427-2.565L3.404 3.75H2.25a.73.73 0 0 1-.535-.215A.73.73 0 0 1 1.5 3q0-.32.215-.535a.73.73 0 0 1 .535-.215h1.529a.9.9 0 0 1 .813.517z", fill: color }))) : (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M7.154 21.558q-.73 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24t1.24-.51q.729 0 1.24.51.51.51.51 1.24 0 .729-.51 1.24-.511.51-1.24.51m9.692 0q-.729 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24.511-.51 1.24-.51.73 0 1.24.51t.51 1.24-.51 1.24-1.24.51M6.016 5.75l2.534 5.308h6.817a.3.3 0 0 0 .154-.044.4.4 0 0 0 .116-.12l2.682-4.875q.058-.105.01-.187t-.164-.082zm-.72-1.5h13.885q.613 0 .928.522.315.523.03 1.066l-3.204 5.804a1.8 1.8 0 0 1-.651.674 1.7 1.7 0 0 1-.888.242H8.1l-1.158 2.115q-.077.115-.005.25.073.135.217.135h10.692q.32 0 .535.215a.73.73 0 0 1 .215.535.73.73 0 0 1-.215.534.73.73 0 0 1-.535.216H7.154q-1 0-1.503-.863-.503-.862-.036-1.722l1.427-2.565L3.404 3.75H2.25a.73.73 0 0 1-.535-.215A.73.73 0 0 1 1.5 3q0-.32.215-.535a.73.73 0 0 1 .535-.215h1.529a.9.9 0 0 1 .813.517z", fill: color })));
+};
+
+const CartWithAdd = (_a) => {
+    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.theme.colors.primaryBase } = _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({ viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        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 Icon = {
+    Share: utils.Share,
+    Eye: utils.Eye,
+    WhatsApp: utils.WhatsApp,
+    ArrowRightTail,
+    Spinner: utils.Spinner,
+    Cart,
+    CartWithAdd,
+};
+
+exports.Icon = Icon;

package/build/index-a69b48c2.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-abc17c4d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var theme = require('./theme-30426d81.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Indicator = (_a) => {
+    var { styles, color = theme.theme.colors.red700 } = _a, props = tslib_es6.__rest(_a, ["styles", "color"]);
+    return (React__default["default"].createElement(core.Indicator, Object.assign({ inline: true, position: "top-end", offset: 4, styles: Object.assign({ processing: {
+                // FIX: Safari blink
+                animationDirection: 'alternate',
+            } }, styles), color: color }, props)));
+};
+
+exports.Indicator = Indicator;