@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/{index-05f106c2.js → index-df9447b3.js}

@@ -1,22 +1,24 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index$3 = require('./index-1efa7d84.js');
-var utils = require('./utils-524bda7c.js');
+var index$2 = require('./index-6e7aede8.js');
+var utils = require('./utils-928b4701.js');
 var styled = require('@emotion/styled');
 var carousel = require('@mantine/carousel');
-var index$4 = require('./index-d34cd464.js');
-var index$2 = require('./index-df5cd44b.js');
-var theme = require('./theme-e4f7f487.js');
-var useMantineLocale = require('./useMantineLocale-a4f0c61d.js');
-var index = require('./index-a86ea1b6.js');
-var index$1 = require('./index-a7de42d1.js');
+var index$3 = require('./index-036fe55d.js');
+require('./index-d91f52cc.js');
+var miscTheme = require('./miscTheme.js');
+var useMantineLocale = require('./useMantineLocale-f9195d27.js');
+var index = require('./index-617bff8c.js');
+var index$1 = require('./index-8cb3f562.js');
+var Locale = require('./Locale-0b86b849.js');
 var cn = require('classnames');
-var useUniqueId = require('./useUniqueId-8929fe5f.js');
+var useUniqueId = require('./useUniqueId-3c52a5c5.js');
+var constantsSite = require('./constantsSite.js');
 var core$1 = require('@hhgtech/icons/core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -64,13 +66,13 @@ const GlobalInputStyle = (locale) => {
                     fontWeight: 600,
                     fontSize: '14px',
                     lineHeight: '22px',
-                    color: theme.theme.colors.gray600,
+                    color: miscTheme.theme.colors.gray600,
                 },
                 description: {
                     fontWeight: 400,
                     fontSize: '12px',
                     lineHeight: '18px',
-                    color: theme.theme.colors.gray600,
+                    color: miscTheme.theme.colors.gray600,
                     marginBottom: '0.25rem',
                 },
                 error: {
@@ -86,7 +88,7 @@ const GlobalInputStyle = (locale) => {
         Input: {
             styles: (_theme, _, { size }) => ({
                 input: {
-                    border: `1px solid ${theme.theme.colors.gray200}`,
+                    border: `1px solid ${miscTheme.theme.colors.gray200}`,
                     transition: `all ${index$1.ANIMATION_DURATION} ease-in-out`,
                     ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
                         switch (size) {
@@ -122,7 +124,7 @@ const GlobalInputStyle = (locale) => {
                     },
                 },
                 '&[data-invalid="true"]': {
-                    border: `1px solid ${theme.theme.colors.red600}`,
+                    border: `1px solid ${miscTheme.theme.colors.red600}`,
                     color: '#000',
                 },
             }),
@@ -321,12 +323,12 @@ const getMantineThemeOverride = (locale, template = 'hb') => {
     return {
         defaultRadius: template === 'hb' ? 8 : 16,
         cursorType: 'pointer',
-        colors: Object.assign(Object.assign(Object.assign({}, themeColors), theme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
+        colors: Object.assign(Object.assign(Object.assign({}, themeColors), miscTheme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
         primaryColor: template,
         primaryShade: 6,
-        fontFamily: (locale === index$2.LOCALE.Cambodia
+        fontFamily: (locale === Locale.LOCALE.Cambodia
             ? 'Battambang'
-            : locale === index$2.LOCALE.Thailand
+            : locale === Locale.LOCALE.Thailand
                 ? 'Noto Sans Thai'
                 : 'Inter') +
             `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
@@ -340,7 +342,7 @@ const getMantineThemeOverride = (locale, template = 'hb') => {
         components: Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), useMantineLocale.GlobalHeadingStyle),
         other: {
             template,
-            defaultImage: index$3.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+            defaultImage: index$2.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
         },
     };
 };
@@ -362,8 +364,8 @@ const StyledImage = styled__default["default"].img `
   }
 `;
 
-const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$3.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$3.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$2.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$2.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
 
 const EnglishRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -410,8 +412,8 @@ const EnglishSquareIcon = (props) => (React__namespace["default"].createElement(
         React__namespace["default"].createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
         React__namespace["default"].createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
 
-const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round india flag", src: index$3.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: index$3.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
+const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round india flag", src: index$2.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: index$2.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
 
 const IndonesiaRoundIcon = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
@@ -493,8 +495,8 @@ const MyanmarSquareIcon = (props) => (React__namespace["default"].createElement(
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z", fill: "white" })));
 
-const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: index$3.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: index$3.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
+const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: index$2.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: index$2.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
 
 const TaiwanRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -673,7 +675,7 @@ const _AutoComplete = React.forwardRef((_a, ref) => {
     const onClear = () => {
         handleChange('');
     };
-    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$3.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
+    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$2.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))),
@@ -816,7 +818,7 @@ var useStyles$3 = core.createStyles((_theme, _params) => {
 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$4.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+    return React__namespace["default"].createElement(index$3.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
 };
 
 const BreadcrumbItem = (_a) => {
@@ -893,7 +895,7 @@ const StyledTextArea = styled__default["default"](core.Textarea) `
   .mantine-Textarea-input {
     padding: 12px 16px;
     background: #ffffff;
-    border: 1px solid ${theme.theme.colors.gray200};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
     border-radius: 4px;
   }
 `;
@@ -944,19 +946,19 @@ const StyledAccordion = styled__default["default"](core.Accordion) `
         width: 16px;
         height: 16px;
         background-position: center;
-        background-image: url(${(props) => props.closeChevron || index$3.CommonGAssets.getAssetPath('plus-icon.svg')});
+        background-image: url(${(props) => props.closeChevron || index$2.CommonGAssets.getAssetPath('plus-icon.svg')});
       }
     }
     &[data-active='true'] {
       .mantine-Accordion-chevron {
         > div {
-          background-image: url(${(props) => props.openChevron || index$3.CommonGAssets.getAssetPath('minus-icon.svg')});
+          background-image: url(${(props) => props.openChevron || index$2.CommonGAssets.getAssetPath('minus-icon.svg')});
         }
       }
     }
   }
   .mantine-Accordion-panel {
-    border-radius: ${theme.theme.borderRadius};
+    border-radius: ${miscTheme.theme.borderRadius};
   }
   .mantine-Accordion-content {
     white-space: pre-wrap;
@@ -972,7 +974,7 @@ Accordion.Control = core.Accordion.Control;
 Accordion.Item = core.Accordion.Item;
 Accordion.Panel = core.Accordion.Panel;
 
-const DEFAULT_AVATAR = index$3.CommonGAssets.getAssetPath('avatar.jpg');
+const DEFAULT_AVATAR = index$2.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"]);
@@ -1019,8 +1021,8 @@ const NumberInput = (_a) => {
         }, removeTrailingZeros: true, value: value }, props)));
 };
 
-const EyeVisible = index$3.CommonGAssets.getAssetPath('EyeVisible.svg');
-const EyeHidden = index$3.CommonGAssets.getAssetPath('EyeHidden.svg');
+const EyeVisible = index$2.CommonGAssets.getAssetPath('EyeVisible.svg');
+const EyeHidden = index$2.CommonGAssets.getAssetPath('EyeHidden.svg');
 const PasswordInput = React.forwardRef((props, ref) => {
     const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = tslib_es6.__rest(props, ["size", "visibilityToggleIcon"]);
     const visibilityToggleIcon = visibilityToggleIconProps ||
@@ -1210,7 +1212,7 @@ Checkbox.Group = core.Checkbox.Group;
 
 const StyledSlider = styled__default["default"](core.Slider) `
   ${(props) => {
-    const color = props.color || theme.theme.colors.primaryBase;
+    const color = props.color || miscTheme.theme.colors.primaryBase;
     return `
       .mantine-Slider-bar {
         background-color: ${color};
@@ -1223,7 +1225,7 @@ const StyledSlider = styled__default["default"](core.Slider) `
 }}
   [data-theme='marryBaby'] & {
     ${(props) => {
-    const color = props.color || theme.theme.mbColors.pink;
+    const color = props.color || miscTheme.theme.mbColors.pink;
     return `
         .mantine-Slider-bar {
           background-color: ${color};
@@ -1251,13 +1253,13 @@ const StyledSliderWrapper = styled__default["default"].div `
   }
   button {
     path:not([stroke]) {
-      stroke: ${theme.theme.colors.primaryBase};
+      stroke: ${miscTheme.theme.colors.primaryBase};
     }
   }
   [data-theme='marryBaby'] & {
     button {
       path:not([stroke]) {
-        stroke: ${theme.theme.mbColors.pink};
+        stroke: ${miscTheme.theme.mbColors.pink};
       }
     }
   }
@@ -1432,7 +1434,7 @@ const OTPFowardRef = (props, ref) => {
 };
 const OTP = React.forwardRef(OTPFowardRef);
 
-const countriesDefault = Object.values(index.siteOptions).reduce((countries, { phoneCountry: phone }) => {
+const countriesDefault = Object.values(constantsSite.siteOptions).reduce((countries, { phoneCountry: phone }) => {
     if (!countries.includes(phone)) {
         countries.push(phone);
     }
@@ -1604,7 +1606,7 @@ const _Tabs = (_a) => {
         setDisableNext(((_a = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + scrollPosition.x ===
             ((_b = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _b === void 0 ? void 0 : _b.scrollWidth));
     }, [scrollPosition]);
-    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__namespace["default"].createElement(TabComponentDisplay, null, text)) : (React__namespace["default"].createElement(index$4.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
+    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__namespace["default"].createElement(TabComponentDisplay, null, text)) : (React__namespace["default"].createElement(index$3.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
     return (React__namespace["default"].createElement(core.Tabs, Object.assign({}, props, rest), children || (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
         React__namespace["default"].createElement(core.ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
             React__namespace["default"].createElement(core.Tabs.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__namespace["default"].createElement(core.Tabs.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),