@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/esm/index-c2da5293.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+var styles = {"container":"d76E4SH"};
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Container = ({ children, className, style, type }) => {
+    return (React__default.createElement("div", { className: `${styles.container} ${className || ''}`, style: style, "data-type": type }, children));
+};
+
+export { Container as C };

package/build/esm/index-c56d60db.js

@@ -0,0 +1,370 @@
+import React__default, { useRef, useEffect, useState } from 'react';
+import { Portal } from '@mantine/core';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-2c484c05.js';
+import { x as StyledBackdrop, y as StyledDrawer, z as StyledDrawerPanel, A as StyledDrawerContent, B as StyledRadioImageGroup, C as StyledRadioImageItem, g as getDefaultClassWrapper } from './index.styles-5add27c5.js';
+import { T as Text } from './index-3474401a.js';
+import { u as useScrollbarSize } from './useScrollbarSize-51ce1374.js';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { t as theme } from './theme-e74db08c.js';
+import { BabyBoyMB, GenderChooseBoy, BabyGirlMB, GenderChooseGirl } from '@hhgtech/icons/other';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import { G as Gender } from './Subot-3289bd8e.js';
+import { M as MarryBabyText, a as MarryBabyHeading } from './index-81f295b7.js';
+import { T as Text$1 } from './index-7af5242a.js';
+
+const Backdrop = ({ open = false, onClickOutside, }) => {
+    return (React__default.createElement(StyledBackdrop, { "data-open": open, onClick: onClickOutside }));
+};
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Drawer = ({ children, title, onClose, open = false, placement = 'left', destroyOnClose = false, isPropagationEvent = true, className, }) => {
+    const ref = useRef();
+    useEffect(() => {
+        toggleNoScroll(open);
+        return () => toggleNoScroll(false);
+    }, [open]);
+    const onCloseDrawer = () => {
+        ref.current.classList.add('slideOut');
+        setTimeout(() => {
+            onClose();
+        }, 800);
+    };
+    if (!open && destroyOnClose) {
+        return null;
+    }
+    return (React__default.createElement(Portal, null,
+        React__default.createElement(StyledDrawer, { className: className, open: open },
+            React__default.createElement(Backdrop, { open: open, onClickOutside: onCloseDrawer }),
+            React__default.createElement(StyledDrawerPanel, { open: open, placement: placement, ref: ref, hasTitle: Boolean(title) },
+                React__default.createElement("div", { className: "title" },
+                    title && (React__default.createElement(Text, { size: "s2", weight: "semiBold" }, title)),
+                    React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "close-button", onClick: onCloseDrawer },
+                        React__default.createElement("path", { d: "M5.99007 4.99067C5.79114 4.99072 5.59674 5.0501 5.43173 5.16121C5.26672 5.27233 5.1386 5.43013 5.06374 5.61444C4.98889 5.79875 4.9707 6.0012 5.0115 6.1959C5.05231 6.39061 5.15025 6.56872 5.29281 6.70747L10.5858 12.0004L5.29281 17.2934C5.19684 17.3855 5.12021 17.4959 5.06743 17.618C5.01464 17.7402 4.98676 17.8716 4.9854 18.0046C4.98405 18.1377 5.00926 18.2697 5.05954 18.3928C5.10983 18.516 5.1842 18.6279 5.27827 18.722C5.37235 18.8161 5.48426 18.8904 5.60743 18.9407C5.73061 18.991 5.86259 19.0162 5.99563 19.0149C6.12867 19.0135 6.2601 18.9856 6.38223 18.9328C6.50436 18.8801 6.61473 18.8034 6.70687 18.7075L11.9998 13.4145L17.2928 18.7075C17.385 18.8034 17.4953 18.8801 17.6175 18.9328C17.7396 18.9856 17.871 19.0135 18.0041 19.0149C18.1371 19.0162 18.2691 18.991 18.3922 18.9407C18.5154 18.8904 18.6273 18.8161 18.7214 18.722C18.8155 18.6279 18.8899 18.516 18.9401 18.3928C18.9904 18.2697 19.0156 18.1377 19.0143 18.0047C19.0129 17.8716 18.985 17.7402 18.9323 17.618C18.8795 17.4959 18.8028 17.3855 18.7069 17.2934L13.4139 12.0004L18.7069 6.70747C18.8514 6.567 18.9501 6.38616 18.99 6.18864C19.03 5.99112 19.0093 5.78614 18.9308 5.60055C18.8523 5.41497 18.7195 5.25744 18.5499 5.14861C18.3803 5.03978 18.1817 4.98473 17.9803 4.99067C17.7205 4.99841 17.4739 5.10699 17.2928 5.2934L11.9998 10.5864L6.70687 5.2934C6.61368 5.19761 6.50224 5.12146 6.37912 5.06947C6.25601 5.01747 6.12372 4.99068 5.99007 4.99067Z", fill: "#595959" }))),
+                React__default.createElement(StyledDrawerContent, { onClick: (e) => {
+                        if (isPropagationEvent) {
+                            e.stopPropagation();
+                        }
+                    } }, children &&
+                    (React__default.isValidElement(children)
+                        ? children
+                        : typeof children === 'function'
+                            ? children({
+                                internalClose: onCloseDrawer,
+                            })
+                            : null))))));
+};
+
+const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
+    const [check, setCheck] = useState(value);
+    const handleOnChange = (v) => {
+        if (isDisabled)
+            return;
+        setCheck(v);
+        onChange && onChange(v);
+    };
+    const isMarryBaby = siteType === 'marryBaby';
+    return (React__default.createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default.createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index, onClick: () => {
+            handleOnChange(option.value);
+        } },
+        React__default.createElement("div", null,
+            option.content,
+            option.label && (React__default.createElement(React__default.Fragment, null, isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
+                    ? theme.mbColors.dark
+                    : theme.mbColors.midGray }, option.label)) : (React__default.createElement(Text$1, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+const _StyledModal = styled.div `
+  position: relative;
+  z-index: 200;
+  background-color: ${theme.colors.white};
+  border-radius: ${theme.borderRadius};
+  box-shadow: 0px 4px 8px ${theme.colors.gray200};
+  &[data-site-type='marryBaby'] {
+    border-radius: 16px;
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+
+      padding: 24px;
+    }
+  }
+  .hhg-modal__content {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    padding: 16px;
+  }
+  .hhg-modal__video {
+    position: relative;
+    z-index: 111;
+    height: 100%;
+    background-color: none;
+    box-shadow: none;
+  }
+`;
+const StyledModalClass = 'hhgcomp-modal-modal';
+const StyledModal = getDefaultClassWrapper(_StyledModal, StyledModalClass);
+const StyledModalWrapper = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  background-color: rgba(38, 38, 38, 0.3);
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    visibility: visible;
+  }
+
+  &.slideTop {
+    .${StyledModalClass} {
+      transform: translate(0, -100vh);
+      transition: all 0.5s ease;
+    }
+
+    &[data-open='true'] {
+      .${StyledModalClass} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    .${StyledModalClass} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      .${StyledModalClass} {
+        transition: all 0.3s ease-out;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    .${StyledModalClass} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    .${StyledModalClass} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    .${StyledModalClass} {
+      height: 100%;
+      max-height: 539px;
+      ${MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    .${StyledModalClass} {
+      width: 100%;
+      max-width: 407px;
+      ${MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'slideTop', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = useState(false);
+    const elRef = useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return createPortal(React__default.createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default.createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default.createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default.createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+const StyledBabyGrowthGender = styled.div `
+  & > :not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  .gender-selector {
+    & > :not(:last-child) {
+      margin-right: 16px;
+    }
+
+    & > div {
+      width: calc(50% - 8px);
+
+      ${MediaQueries.mbUp} {
+        justify-self: left;
+      }
+    }
+  }
+`;
+const StyledBabyGrowthGenderOption = styled(RadioImageGroup) `
+  & > div > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    gap: 8px;
+    padding-block: 5px;
+  }
+  .radio-group-item-heading {
+    margin-top: 0;
+  }
+`;
+
+const BabyGrowthGender = ({ value, onChange, siteType, }) => {
+    const { t } = useTranslations();
+    const isMarryBaby = siteType == 'marryBaby';
+    return (React__default.createElement(StyledBabyGrowthGender, { "data-is-marryBaby": isMarryBaby },
+        isMarryBaby ? (React__default.createElement(MarryBabyHeading, { type: "h4", color: theme.mbColors.dark }, t('tools.selectBabyGender'))) : (React__default.createElement(Text, { size: "label2", weight: "bold", style: { marginBottom: '0.5rem' } }, t('tools.selectBabyGender'))),
+        React__default.createElement(StyledBabyGrowthGenderOption, { siteType: siteType, options: [
+                {
+                    value: Gender.Boy,
+                    label: t('gender.male'),
+                    content: isMarryBaby ? React__default.createElement(BabyBoyMB, null) : React__default.createElement(GenderChooseBoy, null),
+                },
+                {
+                    value: Gender.Girl,
+                    label: t('gender.female'),
+                    content: isMarryBaby ? React__default.createElement(BabyGirlMB, null) : React__default.createElement(GenderChooseGirl, null),
+                },
+            ], value: value, onChange: onChange, className: "gender-selector" })));
+};
+
+export { BabyGrowthGender as B, Drawer as D, Modal as M, RadioImageGroup as R };

package/build/esm/index-c5d7f692.js

@@ -0,0 +1,24 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default from 'react';
+import { Modal as Modal$1, CloseButton } from '@mantine/core';
+import { C as CommonGAssets } from './index-8858383e.js';
+import { i as useStyles } from './index-32e53dac.js';
+import { T as Text } from './index-3474401a.js';
+
+const Modal = (_a) => {
+    var { title, styles } = _a, rest = __rest(_a, ["title", "styles"]);
+    const { classes } = useStyles(undefined, { name: 'Modal', styles });
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Modal$1, Object.assign({ centered: true, classNames: classes }, rest, { withCloseButton: false, title: rest.withCloseButton && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Text, { size: "s2", weight: "semiBold", as: "span" }, title),
+                React__default.createElement(CloseButton, Object.assign({}, rest.closeButtonProps, { onClick: () => { var _a; return (_a = rest.onClose) === null || _a === void 0 ? void 0 : _a.call(rest); }, sx: {
+                        ':focus': {
+                            outline: 0,
+                        },
+                    } }),
+                    React__default.createElement("img", { loading: "lazy", className: "mantine-Modal-close", src: CommonGAssets.getAssetPath('CloseModal.svg'), style: {
+                            width: '16px',
+                        } })))) }))));
+};
+
+export { Modal as M };

package/build/esm/index-cc93e010.js

@@ -0,0 +1,53 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default from 'react';
+import { t as theme } from './theme-e74db08c.js';
+import { S as Share, E as Eye, W as WhatsApp, w as Spinner } from './utils-70718e9c.js';
+
+const ArrowRightTail = (_a) => {
+    var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __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.createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none" }, props),
+        React__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.colors.gray600, useCurrentColor, isActive, isSolid, activeColor = theme.colors.primaryBase } = _a, rest = __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.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__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.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__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.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __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.createElement("svg", Object.assign({ viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__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,
+    Eye,
+    WhatsApp,
+    ArrowRightTail,
+    Spinner,
+    Cart,
+    CartWithAdd,
+};
+
+export { Icon as I };

package/build/esm/index-d7f046db.js

@@ -0,0 +1,5 @@
+import { Switch as Switch$1 } from '@mantine/core';
+
+const Switch = Switch$1;
+
+export { Switch as S };

package/build/esm/index-d8177667.js

@@ -0,0 +1,14 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default from 'react';
+import { Indicator as Indicator$1 } from '@mantine/core';
+import { t as theme } from './theme-e74db08c.js';
+
+const Indicator = (_a) => {
+    var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);
+    return (React__default.createElement(Indicator$1, Object.assign({ inline: true, position: "top-end", offset: 4, styles: Object.assign({ processing: {
+                // FIX: Safari blink
+                animationDirection: 'alternate',
+            } }, styles), color: color }, props)));
+};
+
+export { Indicator as I };