@hhgtech/hhg-components 1.29.500-beta-8 → 1.29.500-beta-10

package/build/esm/{index-b822b3cf.js → index-f6a105d2.js}

@@ -1,25 +1,24 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-2f445f16.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2d444edf.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-3923b84e.js';
-import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-387202c9.js';
-import { u as useScreenSize, I as ImageWrap } from './index-09d84cb2.js';
+import { C as CommonGAssets } from './index-646b9a16.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-3a65e1d5.js';
+import { u as useScreenSize, I as ImageWrap } from './index-e6c725d8.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-5d5fa64f.js';
-import { t as themeColors } from './index-b59b9112.js';
+import { T as Text } from './index-d82a9c5b.js';
+import { t as themeColors } from './index-fa131ed2.js';
 import { theme } from './miscTheme.js';
-import { A as ANIMATION_DURATION } from './shared-89616447.js';
 import classNames from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-f4d100cc.js';
+import { a as useUniqueId } from './useUniqueId-83dcaba5.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-5147a3f7.js';
+import { B as Button } from './index-22e04fca.js';
 
 var useStyles$4 = createStyles((theme, { variantStyle }) => {
     const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
@@ -323,96 +322,16 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-const sizeMap = {
-    lg: {
-        height: 48,
-        fontSize: rem(16),
-        lineHeight: '24px',
-    },
-    md: {
-        height: 40,
-        fontSize: rem(14),
-        lineHeight: '22px',
-    },
-    sm: {
-        height: 32,
-        fontSize: rem(14),
-        lineHeight: '22px',
-    },
-    xs: {
-        height: 32,
-        fontSize: rem(13),
-        lineHeight: rem(20),
-        letterSpacing: '-0.3px',
-    },
-};
-var useStyles$1 = createStyles((theme, { variantStyle, size, }) => {
+var useStyles$1 = createStyles((theme, { variantStyle }) => {
     const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
-    const base = sizeMap[size] || {};
-    const leadgenPatch = isLeadgenStyle
-        ? size === 'sm'
-            ? { height: 36, fontSize: rem(13), letterSpacing: '-0.3px' }
-            : { fontSize: rem(15), letterSpacing: '-0.3px' }
-        : {};
-    // const commonStyle = {
-    //   fontSize: rem(15),
-    //   lineHeight: rem(24),
-    //   letterSpacing: '-0.3px',
-    //   color: theme.colors.gray[4],
-    // }
+    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 ${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: rem(16) }, (isLeadgenStyle && {
-                        fontSize: rem(15),
-                    }));
-                case 'md':
-                    return Object.assign({ fontSize: rem(14) }, (isLeadgenStyle && {
-                        fontSize: rem(15),
-                        letterSpacing: '-0.3px',
-                    }));
-                case 'sm':
-                    return Object.assign({ height: 32, fontSize: rem(14), lineHeight: '22px' }, (isLeadgenStyle && {
-                        height: 36,
-                        fontSize: rem(13),
-                        letterSpacing: '-0.3px',
-                    }));
-                case 'xs':
-                    return {
-                        height: 32,
-                        lineHeight: rem(20),
-                        fontSize: rem(13),
-                        letterSpacing: '-0.3px',
-                    };
-            }
-        })()),
+        input: Object.assign({}, (isLeadgenStyle && Object.assign(Object.assign({}, commonStyle), { color: '#111111', paddingLeft: 16, paddingRight: 16, '&::placeholder': Object.assign(Object.assign({}, commonStyle), { color: theme.colors.gray[4] }) }))),
     };
 });
 
@@ -423,25 +342,20 @@ const emotionCache = createEmotionCache({
 });
 
 const NumberInput = (_a) => {
-    var { value: _value, onChange: _onChange, size = 'md', styles, classNames } = _a, props = __rest(_a, ["value", "onChange", "size", "styles", "classNames"]);
+    var { value: _value, onChange: _onChange } = _a, props = __rest(_a, ["value", "onChange"]);
     const [value, setValue] = useState(_value);
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
-    const variantStyle = useTemplateVariant();
-    const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles, classNames });
     useEffect(() => {
         _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
     }, [debounced]);
     useEffect(() => {
         setValue(_value);
     }, [_value]);
-    return (React__default.createElement(NumberInput$1, Object.assign({ stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
+    return (React__default.createElement(NumberInput$1, Object.assign({ size: "md", 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,
-        } })));
+        }, removeTrailingZeros: true, value: value }, props)));
 };
 
 const EyeVisible = CommonGAssets.getAssetPath('EyeVisible.svg');
@@ -835,9 +749,9 @@ FloatingLabelControl.Control = FloatingLabelControlControl;
 FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = forwardRef((_a, ref) => {
-    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error, size = 'md' } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error", "size"]);
+    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
     const variantStyle = useTemplateVariant();
-    const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles });
+    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -848,9 +762,7 @@ const InputWrapper = forwardRef((_a, ref) => {
     }, [_value]);
     const commonProps = Object.assign(Object.assign({ classNames: {
             input: classes.input,
-            rightSection: classes.rightSection,
-        }, ref,
-        size, onChange: (event) => {
+        }, ref, size: 'md', onChange: (event) => {
             if (typeof maxLength === 'number' &&
                 event.currentTarget.value.length > maxLength) {
                 return;
@@ -862,11 +774,15 @@ const InputWrapper = forwardRef((_a, ref) => {
         error }, props), { maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` });
     if (withFloatingLabel) {
         return (React__default.createElement(FloatingLabelControl, { shrink: !!value },
-            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(TextInput, Object.assign({}, commonProps, { error: error && React__default.createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
+            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(TextInput, Object.assign({}, commonProps, { classNames: {
+                    input: classes.input,
+                }, error: error && React__default.createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
                     input: Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: FontWeight.halfBold }),
                 }) }))))));
     }
-    return React__default.createElement(TextInput, Object.assign({}, commonProps));
+    return (React__default.createElement(TextInput, Object.assign({}, commonProps, { classNames: {
+            input: classes.input,
+        } })));
 });
 const Input = InputWrapper;
 Input.File = FileInput;
@@ -1878,4 +1794,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Avatar as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Carousel as a, Anchor as b, AspectRatio as c, Checkbox as d, ErrorLabel as e, CentralCarousel as f, ChipButton as g, ErrorBoundary as h, PasswordInput as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };
+export { Avatar as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Carousel as a, Anchor as b, AspectRatio as c, ErrorLabel as d, Checkbox as e, CentralCarousel as f, ChipButton as g, PasswordInput as h, ErrorBoundary as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };

package/build/esm/{index-b59b9112.js → index-fa131ed2.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-2f445f16.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-2d444edf.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-fb82ecb3.js';
-import { L as LOCALE } from './Locale-ef683d9e.js';
+import './index-ad5e059d.js';
+import { L as LOCALE } from './Locale-c8bad356.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-eb08f67a.js';
-import { em, rem } from '@mantine/core';
-import { C as CommonGAssets } from './index-3923b84e.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-df8bd47e.js';
+import { em } from '@mantine/core';
+import { C as CommonGAssets } from './index-646b9a16.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-2895afd9.js';
-import { C as CustomStylesType, F as FontWeight } from './index-387202c9.js';
-import { A as ANIMATION_DURATION } from './shared-89616447.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-7a0636fe.js';
+import { C as CustomStylesType, F as FontWeight } from './index-3a65e1d5.js';
+import { A as ANIMATION_DURATION } from './shared-8956551b.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {
@@ -541,20 +541,17 @@ const GlobalHeadingStyle = (version = CustomStylesType.NONE) => {
     };
 };
 
-const GlobalInputStyle = (locale) => {
+const GlobalInputStyle = (locale, version) => {
     var _a;
     return ({
         InputWrapper: {
             styles: {
-                label: {
-                    display: 'inline-flex',
-                    gap: 4,
-                    marginBottom: '0.25rem',
+                label: Object.assign({ display: 'inline-flex', gap: 4, marginBottom: '0.25rem' }, (version === CustomStylesType.NONE && {
                     fontWeight: 600,
-                    fontSize: rem(14),
+                    fontSize: '14px',
                     lineHeight: '22px',
                     color: theme.colors.gray600,
-                },
+                })),
                 description: {
                     fontWeight: 400,
                     fontSize: '12px',
@@ -580,26 +577,20 @@ const GlobalInputStyle = (locale) => {
                     ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
                         switch (size) {
                             case 'lg':
-                                return {
-                                    height: 48,
-                                    minHeight: 'unset',
+                                return Object.assign({ height: 48, minHeight: 'unset' }, (version === CustomStylesType.NONE && {
                                     fontSize: 16,
                                     lineHeight: '24px',
-                                };
+                                }));
                             case 'md':
-                                return {
-                                    height: 40,
-                                    minHeight: 'unset',
-                                    fontSize: rem(14),
+                                return Object.assign({ height: 40, minHeight: 'unset' }, (version === CustomStylesType.NONE && {
+                                    fontSize: 14,
                                     lineHeight: '22px',
-                                };
+                                }));
                             case 'sm':
-                                return {
-                                    height: 32,
-                                    minHeight: 'unset',
-                                    fontSize: rem(14),
+                                return Object.assign({ height: 32, minHeight: 'unset' }, (version === CustomStylesType.NONE && {
+                                    fontSize: 14,
                                     lineHeight: '22px',
-                                };
+                                }));
                         }
                     })()),
                     '&:hover': {
@@ -658,7 +649,7 @@ const getMantineThemeOverride = (locale, template = 'hb', version) => {
             lg: em(Breakpoints.BREAK_POINT_PC),
             xl: em(Breakpoints.BREAK_POINT_LGPC),
         },
-        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle()), GlobalHeadingStyle(version)), GlobalContainerStyle),
+        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale, version)), getGlobalRadioStyle), GlobalButtonStyle()), GlobalHeadingStyle(version)), GlobalContainerStyle),
         other: {
             template,
             customStyleType: version,

package/build/esm/{index-6169fea7.js → index-fa7506cd.js}

@@ -1,6 +1,6 @@
 import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
-import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-387202c9.js';
-import { _ as __rest } from './tslib.es6-2f445f16.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './index-3a65e1d5.js';
+import { _ as __rest } from './tslib.es6-2d444edf.js';
 import React__default, { createContext, useState, useEffect, useContext, useCallback } from 'react';
 import { useClickOutside } from '@mantine/hooks';
 import { css } from '@emotion/react';

package/build/esm/{index-13c2b248.js → index-fbf4f93a.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-2f445f16.js';
+import { _ as __rest } from './tslib.es6-2d444edf.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-fb82ecb3.js';
+import './index-ad5e059d.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-3923b84e.js';
+import { C as CommonGAssets } from './index-646b9a16.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-09d84cb2.js';
-import { T as Text } from './index-e7d7c97b.js';
-import { L as LOCALE } from './Locale-ef683d9e.js';
-import { f as CentralCarousel } from './index-b822b3cf.js';
+import { I as ImageWrap } from './index-e6c725d8.js';
+import { T as Text } from './index-2bb8e821.js';
+import { L as LOCALE } from './Locale-c8bad356.js';
+import { f as CentralCarousel } from './index-f6a105d2.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;