@hhgtech/hhg-components 1.29.436 → 1.29.437-beta-2

package/build/esm/adapters.js

@@ -1,39 +1,39 @@
-export { B as Button } from './index-89239154.js';
-export { T as Text } from './index-2191c5e9.js';
-export { H as Heading } from './index-bae12515.js';
-import './tslib.es6-ebff6537.js';
+export { B as Button } from './index-da73aaf5.js';
+export { T as Text } from './index-9a610726.js';
+export { H as Heading } from './index-506d305b.js';
+import './tslib.es6-af7a282c.js';
 import 'react';
-import './index-4ff18fd8.js';
+import './index-511c42e5.js';
 import '@mantine/core';
-import './shared-66ffcc74.js';
-import './text-7bd13052.js';
-import './index-21c766d8.js';
+import './shared-f5013f25.js';
+import './text-926c1207.js';
+import './index-318a1878.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-82b4f2b6.js';
+import './index-bbafc45e.js';
 import './constantsDomainLocales.js';
-import './Locale-bd1932d4.js';
+import './Locale-c5e86e5b.js';
 import './constantsIsProduction.js';
-import './index-6e4aa339.js';
-import './utils-d47134bf.js';
+import './index-e11c67f5.js';
+import './utils-b81640f2.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-e59166dc.js';
-import './index-0f3f5dab.js';
+import './index-8d616ffa.js';
+import './index-664210c7.js';
 import 'dayjs';
-import './index-af40ae57.js';
+import './index-cb741f64.js';
 import '@mantine/notifications';
-import './index-d02e9c01.js';
+import './index-facc4954.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-9d4a4d99.js';
+import './useUniqueId-e8e6f0da.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-43d79a33.js';
-import './translationsContext-15f0b183.js';
-import './index-f1fa7f42.js';
+import './index.styles-3fdcbb0f.js';
+import './translationsContext-bf770015.js';
+import './index-dfb584cb.js';

package/build/esm/atoms.js

@@ -1,387 +1,76 @@
-import { f as FILE_UPLOAD_ACCEPTED_TYPES } from './index-4d17dd75.js';
-export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, e as FILE_UPLOAD_ACCEPTED_RATIOS, f as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-4d17dd75.js';
-export { A as Avatar, D as DistanceTag, a as DrawerBottom, I as IconWrapper } from './index-098cbd8c.js';
-export { B as Button } from './index-89239154.js';
-export { C as Checkbox, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-bd3a8cf9.js';
-export { C as Container } from './index-efb19164.js';
-export { D as Divider } from './index-a2e2adc6.js';
-export { D as Drawer } from './index-b02d7d2b.js';
-export { F as Flag } from './index-21c766d8.js';
-export { H as Heading } from './index-bae12515.js';
-export { I as Icon } from './index-5b9a7a03.js';
-export { I as Input, L as Label } from './index-24cd82ca.js';
-export { L as Logo } from './index-ff6cc432.js';
-export { R as RadioImageGroup } from './index-a3b54f42.js';
-export { T as Text } from './index-2191c5e9.js';
-export { T as TextArea } from './index-8182a3ba.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-ce719781.js';
-export { B as BtnChoice } from './index-0df2e861.js';
-export { C as CustomReferenceDot } from './index-dd851d45.js';
-export { I as ImageWrap } from './index-6e4aa339.js';
-export { L as LogoIcon } from './logoIcon-21632207.js';
-export { G as GenderOptionControl } from './index-a395e851.js';
-export { L as Loading } from './index-b4082cca.js';
-export { D as DrawerComponent } from './index-26c25e9f.js';
-export { I as InputDate } from './InputDate-6c8bbff7.js';
-import { a as __awaiter } from './tslib.es6-ebff6537.js';
-import React__default, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
-import { rem, clsx } from '@mantine/core';
-import { C as Close } from './Close-867d5bf6.js';
-import { U as Upload } from './Upload-7bc9425d.js';
-import styled from '@emotion/styled';
-import { theme } from './miscTheme.js';
-import { u as useTranslations } from './index-ea8c2de9.js';
-import { T as Text } from './index-e59166dc.js';
-import './utils-d47134bf.js';
+export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-29563a39.js';
+export { A as Avatar, D as DistanceTag, a as DrawerBottom, I as IconWrapper } from './index-d7c85a80.js';
+export { B as Button } from './index-da73aaf5.js';
+export { C as Checkbox, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-411e9a55.js';
+export { C as Container } from './index-7c89a3db.js';
+export { D as Divider } from './index-232e8385.js';
+export { D as Drawer } from './index-1c9184e9.js';
+export { F as Flag } from './index-318a1878.js';
+export { H as Heading } from './index-506d305b.js';
+export { I as Icon } from './index-d6dce3f0.js';
+export { I as Input, L as Label } from './index-e8846cf6.js';
+export { L as Logo } from './index-a686fefd.js';
+export { R as RadioImageGroup } from './index-5335c043.js';
+export { T as Text } from './index-9a610726.js';
+export { T as TextArea } from './index-1833a093.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-c953059b.js';
+export { B as BtnChoice } from './index-9bf080a8.js';
+export { C as CustomReferenceDot } from './index-0ad990c7.js';
+export { I as ImageWrap } from './index-e11c67f5.js';
+export { L as LogoIcon } from './logoIcon-84e7a9d7.js';
+export { G as GenderOptionControl } from './index-71695d10.js';
+export { L as Loading } from './index-37279730.js';
+export { D as DrawerComponent } from './index-462a07a7.js';
+export { I as InputDate } from './InputDate-3840847a.js';
+import 'react';
+import './index-8d616ffa.js';
+import './tslib.es6-af7a282c.js';
+import '@mantine/core';
+import './text-926c1207.js';
+import '@emotion/styled';
+import './miscTheme.js';
+import './utils-b81640f2.js';
 import '@mantine/hooks';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
+import './Close-db512ca0.js';
+import './index-9d14e1c6.js';
+import './translationsContext-bf770015.js';
 import '@mantine/carousel';
 import 'vaul';
-import './index-d02e9c01.js';
+import './index-facc4954.js';
 import 'date-fns/locale';
-import './index-af40ae57.js';
-import './Locale-bd1932d4.js';
+import './index-cb741f64.js';
+import './Locale-c5e86e5b.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-4ff18fd8.js';
-import './shared-66ffcc74.js';
-import './text-7bd13052.js';
+import './index-511c42e5.js';
+import './shared-f5013f25.js';
 import '@mantine/dates';
-import './index-82b4f2b6.js';
-import './index-0f3f5dab.js';
+import './index-bbafc45e.js';
+import './index-664210c7.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index.styles-43d79a33.js';
-import './translationsContext-15f0b183.js';
-import './index-f1fa7f42.js';
+import './index.styles-3fdcbb0f.js';
+import './index-dfb584cb.js';
 import '@hhgtech/icons/other';
 import '@emotion/react';
-import './animation-1ff993ba.js';
+import './animation-050bd7bb.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-9d4a4d99.js';
+import './useUniqueId-e8e6f0da.js';
 import '@hhgtech/icons/core';
-import './WhatsApp-c3402166.js';
-import './Spinner-0f89e0d9.js';
-import './index-0cffe926.js';
-import './paths-1c30bf22.js';
-import './constants-ea2378da.js';
-import './utils-bc200f7b.js';
-import './index-0bcf0fab.js';
+import './WhatsApp-8f47d8de.js';
+import './Spinner-bff8e494.js';
+import './index-317b76e3.js';
+import './paths-93661eb9.js';
+import './constants-dda703eb.js';
+import './utils-07df3431.js';
+import './index-f431e78f.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-dc6e8945.js';
-
-const getBase64 = (file) => {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-    });
-};
-const handleMultipleImageFiles = (fileList) => __awaiter(void 0, void 0, void 0, function* () {
-    if (fileList.length === 0) {
-        return [];
-    }
-    const base64List = yield Promise.all(fileList.map((file) => getBase64(file)));
-    return base64List;
-});
-
-const StyledImageUploadWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  .image-upload-input-error {
-    margin-top: ${rem(12)};
-    display: flex;
-    flex-direction: column;
-    gap: ${rem(4)};
-  }
-`;
-const StyledImageUploadContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${rem(4)};
-  margin-top: ${rem(4)};
-
-  span {
-    color: ${theme.colors.neutral500};
-  }
-`;
-const StyledImageUploadInputWrapper = styled.div `
-  position: relative;
-  width: fit-content;
-  padding: ${rem(8)} ${rem(12)};
-  border-radius: ${rem(12)};
-  border: ${rem(1)} solid ${theme.colors.neutral200};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: ${rem(8)};
-  margin-top: ${rem(18)};
-
-  &.image-upload-dragover {
-    border-color: ${theme.colors.primaryBase};
-  }
-
-  &.image-upload-error {
-    border-color: ${theme.colors.error};
-  }
-
-  &.image-upload-disabled {
-    cursor: not-allowed;
-    background-color: ${theme.colors.gray100};
-    color: ${theme.colors.gray400};
-    border-color: ${theme.colors.gray200};
-  }
-
-  svg {
-    width: ${rem(18)};
-    height: ${rem(18)};
-  }
-
-  input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    z-index: -1;
-  }
-`;
-const StyledImageUploadPreviewContainer = styled.div `
-  position: relative;
-  width: ${rem(90)};
-  height: ${rem(90)};
-  border-radius: ${rem(12)};
-  overflow: hidden;
-  background-color: ${theme.colors.gray100};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  svg {
-    width: ${rem(14)};
-    height: ${rem(14)};
-    color: ${theme.colors.white};
-  }
-
-  .image-upload-remove-button {
-    cursor: pointer;
-    position: absolute;
-    top: ${rem(6)};
-    right: ${rem(6)};
-    background: ${theme.colors.black};
-    border-radius: ${rem(12)};
-    padding: ${rem(2)};
-    display: flex;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-`;
-const StyledImageUploadPreviewContainerGroup = styled.div `
-  display: flex;
-  gap: ${rem(8)};
-  margin-top: ${rem(18)};
-`;
-
-forwardRef(({ label, name, error, acceptedTypes = [
-    FILE_UPLOAD_ACCEPTED_TYPES.PNG,
-    FILE_UPLOAD_ACCEPTED_TYPES.JPG,
-    FILE_UPLOAD_ACCEPTED_TYPES.JPEG,
-], maxSize = 1, acceptedRatios, multiple = false, disabled = false, id, className, onChange, value, showValidationRules = false, description, useBase64 = false, placeholder, }, ref) => {
-    const { t } = useTranslations();
-    const [isDragOver, setIsDragOver] = useState(false);
-    const [validationErrors, setValidationErrors] = useState([]);
-    const fileInputRef = useRef(null);
-    const hasError = Boolean(error) || validationErrors.length > 0;
-    const normalizedValue = useMemo(() => {
-        if (!value)
-            return [];
-        return Array.isArray(value) ? value : [value];
-    }, [value]);
-    const validateFile = useCallback((file) => {
-        var _a;
-        const errors = [];
-        const fileExtension = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
-        if (!acceptedTypes.includes(fileExtension)) {
-            errors.push(`Unsupported file format. Please upload a ${acceptedTypes.join(', ')} file.`);
-        }
-        const fileSizeMB = file.size / (1024 * 1024);
-        if (fileSizeMB > maxSize) {
-            errors.push(`File too large. Please upload an image smaller than ${maxSize}MB.`);
-        }
-        return {
-            file,
-            isValid: errors.length === 0,
-            errors,
-        };
-    }, [acceptedTypes, maxSize]);
-    const validateImageRatio = useCallback((file) => {
-        return new Promise((resolve) => {
-            if (!acceptedRatios ||
-                !acceptedRatios.length ||
-                !file.type.startsWith('image/')) {
-                resolve([]);
-                return;
-            }
-            const img = new Image();
-            img.onload = () => {
-                const ratio = img.width / img.height;
-                const ratioString = `${ratio.toFixed(1)}:1`;
-                const isValidRatio = acceptedRatios.some((acceptedRatio) => {
-                    const [w, h] = acceptedRatio.split(':');
-                    const expectedRatio = parseInt(w) / parseInt(h);
-                    return Math.abs(ratio - expectedRatio) < 0.1;
-                });
-                resolve(isValidRatio
-                    ? []
-                    : [`Image ratio ${ratioString} is not accepted.`]);
-            };
-            img.onerror = () => resolve(['Invalid image file']);
-            img.src = URL.createObjectURL(file);
-        });
-    }, [acceptedRatios]);
-    const previewList = useMemo(() => {
-        return normalizedValue
-            .map((val) => {
-            if (typeof val === 'string')
-                return val;
-            if (val instanceof File)
-                return URL.createObjectURL(val);
-            return '';
-        })
-            .filter(Boolean);
-    }, [normalizedValue]);
-    const processFiles = useCallback((files) => __awaiter(void 0, void 0, void 0, function* () {
-        const fileArray = Array.from(files);
-        const allErrors = [];
-        const validFiles = [];
-        for (const file of fileArray) {
-            const validation = validateFile(file);
-            const ratioErrors = yield validateImageRatio(file);
-            const allFileErrors = [...validation.errors, ...ratioErrors];
-            if (allFileErrors.length === 0) {
-                validFiles.push(file);
-            }
-            else {
-                allErrors.push(...allFileErrors);
-            }
-        }
-        setValidationErrors(allErrors);
-        if (validFiles.length === 0)
-            return;
-        const resultList = useBase64
-            ? yield handleMultipleImageFiles(validFiles)
-            : validFiles;
-        onChange({
-            target: {
-                name,
-                value: multiple
-                    ? [...normalizedValue, ...resultList]
-                    : resultList.slice(0, 1),
-            },
-        });
-    }), [
-        validateFile,
-        validateImageRatio,
-        multiple,
-        onChange,
-        name,
-        normalizedValue,
-    ]);
-    const handleFileInputChange = (e) => {
-        const files = e.target.files;
-        if (files && files.length > 0) {
-            processFiles(files);
-        }
-    };
-    const removeFile = (index) => {
-        const newFiles = normalizedValue.filter((_, i) => i !== index);
-        setValidationErrors([]);
-        onChange({
-            target: {
-                name,
-                value: multiple ? newFiles : '', // empty string if not multiple
-            },
-        });
-    };
-    const combinedRef = useCallback((e) => {
-        fileInputRef.current = e;
-        if (typeof ref === 'function') {
-            ref(e);
-        }
-        else if (ref) {
-            ref.current = e;
-        }
-    }, [ref]);
-    const handleClick = useCallback(() => {
-        if (!disabled && fileInputRef.current) {
-            fileInputRef.current.click();
-        }
-    }, [disabled]);
-    const handleDragEnter = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragOver(true);
-    }, []);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragOver(false);
-    }, []);
-    const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragOver(false);
-        const files = e.dataTransfer.files;
-        if (files.length > 0) {
-            processFiles(files);
-        }
-    }, [processFiles]);
-    return (React__default.createElement(StyledImageUploadWrapper, { className: className },
-        React__default.createElement("label", { htmlFor: id || name },
-            typeof label === 'string' ? (React__default.createElement(Text, { size: "title2" }, label)) : (label),
-            description && (React__default.createElement(Text, { size: "p3", mt: rem(4), color: theme.colors.gray700 }, description))),
-        showValidationRules && (React__default.createElement(StyledImageUploadContent, null,
-            React__default.createElement(Text, { size: "p3" },
-                "Formats: ",
-                acceptedTypes.join('/')),
-            acceptedRatios && (React__default.createElement(Text, { size: "p3" },
-                "Max size: ",
-                maxSize,
-                "MB - Accepted ratios:",
-                ' ',
-                acceptedRatios.join('/'))))),
-        (multiple || normalizedValue.length === 0) && (React__default.createElement(StyledImageUploadInputWrapper, { className: clsx(isDragOver && 'image-upload-dragover', hasError && 'image-upload-error', disabled && 'image-upload-disabled'), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick },
-            React__default.createElement("input", { ref: combinedRef, type: "file", id: id || name, name: name, accept: acceptedTypes.join(','), multiple: multiple, onChange: handleFileInputChange, disabled: disabled }),
-            React__default.createElement(Upload, null),
-            React__default.createElement(Text, { size: "p3", fw: 500 }, placeholder || t('common.btn.uploadPhoto')))),
-        normalizedValue.length > 0 && (React__default.createElement(StyledImageUploadPreviewContainerGroup, null, previewList.map((img, index) => (React__default.createElement(StyledImageUploadPreviewContainer, { key: index },
-            React__default.createElement("img", { src: img, alt: `Uploaded file ${index + 1}`, className: "image-upload-preview-image" }),
-            React__default.createElement("button", { onClick: (e) => {
-                    e.stopPropagation();
-                    removeFile(index);
-                }, className: "image-upload-remove-button" },
-                React__default.createElement(Close, null))))))),
-        hasError && (React__default.createElement("div", { className: "image-upload-input-error" }, [...validationErrors, error].map((err) => (React__default.createElement(Text, { key: err, className: "error-text", size: "c1", color: theme.colors.red600 }, err)))))));
-});
+import './constants-9a73232c.js';