@hhgtech/hhg-components 1.29.432-beta-4 → 1.29.433

package/build/index-59cce189.js

@@ -1,1173 +0,0 @@
-'use strict';
-
-var React = require('react');
-var index = require('./index-c3fa290e.js');
-var styled = require('@emotion/styled');
-var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-8a70a784.js');
-var core = require('@mantine/core');
-var hooks = require('@mantine/hooks');
-var index$1 = require('./index-aae14037.js');
-var index$2 = require('./index-669f98a8.js');
-var tslib_es6 = require('./tslib.es6-94baf781.js');
-var index$3 = require('./index-aa67ff25.js');
-var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var flattenChildren = require('react-keyed-flatten-children');
-var index$4 = require('./index-cfe47555.js');
-var Close = require('./Close-c027a751.js');
-var carousel = require('@mantine/carousel');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
-
-var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
-
-/* eslint-disable prettier/prettier */
-const Upload = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none" }, props),
-    React__namespace.createElement("path", { d: "M9.82324 8.7033L10.8228 9.70287C10.9267 9.80662 11.056 9.8573 11.2107 9.85493C11.3655 9.85255 11.4948 9.79943 11.5987 9.69555C11.7026 9.59168 11.7545 9.46074 11.7545 9.30274C11.7545 9.14474 11.7026 9.01462 11.5987 8.91237L9.7353 7.04899C9.59968 6.91337 9.44149 6.84555 9.26074 6.84555C9.07999 6.84555 8.9218 6.91337 8.78618 7.04899L6.91549 8.91968C6.81174 9.02355 6.75987 9.15287 6.75987 9.30762C6.75987 9.46237 6.81174 9.59168 6.91549 9.69555C7.01937 9.79943 7.1503 9.85137 7.3083 9.85137C7.4663 9.85137 7.59643 9.79943 7.69868 9.69555L8.69824 8.7033L8.69824 11.5576C8.69824 11.717 8.75218 11.8506 8.86005 11.9583C8.96793 12.0662 9.10156 12.1201 9.26093 12.1201C9.42043 12.1201 9.55399 12.0662 9.66162 11.9583C9.76937 11.8506 9.82324 11.717 9.82324 11.5576L9.82324 8.7033ZM16.3857 9.3063C16.3857 10.2918 16.1987 11.2181 15.8247 12.0852C15.4507 12.9524 14.9432 13.7066 14.3021 14.348C13.6609 14.9894 12.907 15.4972 12.0402 15.8714C11.1735 16.2456 10.2474 16.4326 9.26205 16.4326C8.27655 16.4326 7.35024 16.2456 6.48312 15.8716C5.61599 15.4976 4.86174 14.9901 4.22037 14.3489C3.57899 13.7078 3.07118 12.9539 2.69693 12.0871C2.3228 11.2204 2.13574 10.2943 2.13574 9.30893C2.13574 8.32343 2.32274 7.39712 2.69674 6.52999C3.07074 5.66287 3.5783 4.90862 4.21943 4.26724C4.86055 3.62587 5.61449 3.11805 6.48124 2.7438C7.34799 2.36968 8.27405 2.18262 9.25943 2.18262C10.2449 2.18262 11.1712 2.36962 12.0384 2.74362C12.9055 3.11762 13.6597 3.62518 14.3011 4.2663C14.9425 4.90743 15.4503 5.66137 15.8246 6.52812C16.1987 7.39487 16.3857 8.32093 16.3857 9.3063ZM15.2607 9.30762C15.2607 7.63262 14.6795 6.21387 13.517 5.05137C12.3545 3.88887 10.9357 3.30762 9.26074 3.30762C7.58574 3.30762 6.16699 3.88887 5.00449 5.05137C3.84199 6.21387 3.26074 7.63262 3.26074 9.30762C3.26074 10.9826 3.84199 12.4014 5.00449 13.5639C6.16699 14.7264 7.58574 15.3076 9.26074 15.3076C10.9357 15.3076 12.3545 14.7264 13.517 13.5639C14.6795 12.4014 15.2607 10.9826 15.2607 9.30762Z", fill: "#595959" })));
-
-/**
- * @deprecated Consider to use Mantine
- */
-const Alert = ({ style, onClose, text, type, contentIcon, closeIcon, className, description, }) => {
-    return (React__namespace["default"].createElement("div", { className: `${styles.alert} ${className || ''}`, style: style, "data-alert-type": type },
-        React__namespace["default"].createElement("div", { className: styles.content },
-            React__namespace["default"].createElement("div", { className: "icon-title" },
-                contentIcon,
-                React__namespace["default"].createElement(index.Text, { weight: "bold", size: "label1" }, text)),
-            React__namespace["default"].createElement(index.Text, { weight: "regular", size: "p3" }, description)),
-        React__namespace["default"].createElement("div", { className: styles.close, onClick: onClose }, closeIcon)));
-};
-
-const renderNotificationStyles = (type, size, hasIcon, color) => {
-    let sizeparams = '';
-    if (type === 'numeric') {
-        switch (size) {
-            case 'medium':
-                sizeparams = `
-          height: 16px;
-          font-size: 11px;
-          padding: 1px 6px;
-        `;
-            case 'large':
-                sizeparams = `
-          height: 24px;
-          font-size: 13px;
-          padding: 1px 10px;
-        `;
-        }
-    }
-    let icon = '';
-    if (hasIcon) {
-        icon = `
-      position: absolute;
-      top: 0;
-      left: 75%;
-    `;
-    }
-    let numericIcon;
-    if (hasIcon) {
-        numericIcon = `
-      left: 70%;
-
-      ${size === 'large'
-            ? `
-        top: -7px;
-      `
-            : size === 'medium'
-                ? `
-       top: -2px;
-       width: 16px;
-       height: 16px;
-      `
-                : ''}
-    `;
-    }
-    let notificationColor = '';
-    switch (color) {
-        case 'primary':
-            notificationColor = `
-      background: ${miscTheme.theme.colors.primary50};
-      color: ${miscTheme.theme.colors.primary600};  
-    `;
-            break;
-        case 'error':
-            notificationColor = `
-        background: ${miscTheme.theme.colors.error};
-        color: white;
-      `;
-            break;
-    }
-    switch (type) {
-        case 'dot':
-            return `
-        ${icon}
-        width: 8px;
-        height: 8px;
-        font-size: 0px;
-        border-radius: 50%;
-        ${notificationColor}
-      `;
-        case 'numeric':
-            return `
-        ${icon}
-        width: max-content;
-        border-radius: 32px;
-        ${sizeparams}
-        ${numericIcon}
-        ${notificationColor}
-      `;
-    }
-};
-const StyledBadge = styled__default["default"].div `
-  position: relative;
-
-  > div {
-    width: max-content;
-    position: relative;
-  }
-
-  span {
-    font-weight: ${miscTheme.theme.sizes.fwBold};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    ${(props) => renderNotificationStyles(props.notificationType, props.notificationSize, props.hasIcon, props.notificationColor)}
-  }
-
-  ${(props) => props.hasIcon &&
-    `
-    svg {
-      width: 40px;
-      height: 40px;
-    }
-  `}
-`;
-
-/**
- * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
- */
-const Badge = ({ amount, type, size = 'medium', color = 'primary', icon, className, }) => {
-    return (React__namespace["default"].createElement(StyledBadge, { "data-notification-type": type, "data-notification-size": size, "data-notification-color": color, "data-has-icon": !!icon || undefined, notificationType: type, notificationSize: size, notificationColor: color, hasIcon: !!icon, className: className },
-        React__namespace["default"].createElement("div", null,
-            amount && React__namespace["default"].createElement("span", null, amount),
-            " ",
-            icon && React__namespace["default"].createElement("div", null, icon))));
-};
-
-const StyledBorderHeading = styled__default["default"].h4 `
-  position: relative;
-  line-height: 18px;
-
-  &:after {
-    position: absolute;
-    top: 1px;
-    left: 0;
-    width: 4px;
-    height: 18px;
-    background-color: ${miscTheme.theme.colors.primaryBase};
-    content: '';
-  }
-
-  &[data-size='lg'] {
-    font-size: 18px;
-    padding-left: 12px;
-  }
-
-  &[data-size='sm'] {
-    font-size: 14px;
-    padding-left: 8px;
-
-    &::after {
-      width: 2px;
-      height: 15px;
-    }
-  }
-
-  &[data-type='bold'] {
-    font-weight: ${miscTheme.theme.sizes.fwBold};
-  }
-  &[data-type='semiBold'] {
-    font-weight: ${miscTheme.theme.sizes.fwSemiBold};
-  }
-
-  &[data-uppercase] {
-    text-transform: uppercase;
-  }
-
-  ${utils.MediaQueries.mbDown} {
-    &[data-size='lg'] {
-      font-size: 16px;
-    }
-  }
-`;
-
-const BorderHeading = ({ style, children, className, size = 'lg', type = 'bold', upperCase, as = 'h4', color, }) => (React__namespace["default"].createElement(StyledBorderHeading, { style: Object.assign({ color }, style), className: className, "data-size": size, "data-type": type, "data-uppercase": upperCase, as: as }, children));
-
-const StyledArrowDownIcon = styled__default["default"](index$1.ShapedArrowDown) `
-  flex-shrink: 0;
-  color: ${miscTheme.theme.colors.neutral800};
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s ease-in-out;
-  transform: rotate(-180deg);
-  &[data-is-collapsed='true'] {
-    transform: rotate(0deg);
-  }
-`;
-const StyledCardCollapse = styled__default["default"].div `
-  background-color: white;
-  .icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    color: ${miscTheme.theme.colors.neutral800};
-  }
-  .title-collapse {
-    color: #111111;
-    font-weight: var(--fwSemiBold);
-    font-size: 1.0625rem;
-    line-height: 1.5rem;
-    flex-grow: 1;
-  }
-`;
-const StyledBox = styled__default["default"].div `
-  display: flex;
-  padding: 1rem;
-  gap: 0.75rem;
-  align-items: center;
-`;
-
-function CardCollapse({ children, title, icon, defaultOpened = true, haveCollapse = true, id, }) {
-    const [opened, { toggle }] = hooks.useDisclosure(defaultOpened);
-    const handleClick = () => {
-        if (haveCollapse) {
-            toggle();
-        }
-    };
-    return (React__namespace["default"].createElement(StyledCardCollapse, { id: id },
-        React__namespace["default"].createElement(StyledBox, { onClick: handleClick },
-            haveCollapse && icon,
-            React__namespace["default"].createElement("div", { className: "title-collapse" }, title),
-            haveCollapse && React__namespace["default"].createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
-        React__namespace["default"].createElement(core.Collapse, { in: haveCollapse ? opened : true, transitionDuration: 200, transitionTimingFunction: "ease" }, children)));
-}
-
-const StyledDropdown = styled__default["default"].div `
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid ${miscTheme.theme.colors.gray200};
-  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
-  background-position: right 16px center;
-  border-radius: ${miscTheme.theme.borderRadius};
-
-  &[data-has-icons='true'] {
-    border: none;
-    background: ${miscTheme.theme.colors.gray100};
-
-    img,
-    svg {
-      display: inline-block;
-      max-width: 16px;
-      margin-right: 6px;
-    }
-
-    span {
-      vertical-align: middle;
-      display: inline-block;
-    }
-
-    &:hover {
-      box-shadow: none;
-    }
-    > div {
-      position: relative;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    }
-    > div::after {
-      content: '';
-      right: 12px;
-      top: 50%;
-      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-      width: 10px;
-      height: 8px;
-      position: absolute;
-      background-repeat: no-repeat;
-      transform: translateY(-50%);
-    }
-  }
-
-  &:hover {
-    box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
-  }
-`;
-const StyledDropdownName = styled__default["default"].div `
-  padding: 12px 18px 12px 16px;
-  cursor: pointer;
-  &[data-dropdown-open] {
-    padding: 11px 15px 11px 15px;
-    border: 1px solid ${miscTheme.theme.colors.primaryBase};
-    border-radius: ${miscTheme.theme.borderRadius};
-    box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
-  }
-
-  & > svg {
-    height: 16px;
-    width: 16px;
-  }
-`;
-const StyledDropdownList = styled__default["default"].ul `
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  display: block;
-  margin-top: 4px;
-  background: ${miscTheme.theme.colors.white};
-  border-radius: ${miscTheme.theme.borderRadius};
-  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-    -2px 2px 5px rgba(67, 86, 100, 0.123689);
-  cursor: pointer;
-
-  &[data-has-icons='true'] {
-    background: white;
-    box-shadow: none;
-    border: 1px solid ${miscTheme.theme.colors.gray200};
-    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
-  }
-`;
-const StyledDropdownOption = styled__default["default"].li `
-  margin: 8px;
-  padding: 12px 18px 12px 16px;
-  border-radius: ${miscTheme.theme.borderRadius};
-  display: flex;
-  &:hover,
-  :active {
-    background: ${miscTheme.theme.colors.gray100};
-  }
-`;
-const StyledIcon = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
-
-  & > svg {
-    height: 16px;
-    width: 16px;
-  }
-`;
-
-const ShareIconPathStyle = () => (React__namespace["default"].createElement("style", null, '.file-dropdown-path{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'));
-const DefaultFileIcon = () => (React__namespace["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 12.17 14.83" },
-    React__namespace["default"].createElement("defs", null,
-        React__namespace["default"].createElement("clipPath", { id: "prefix__clip-path", transform: "translate(-1.92 -1.54)" },
-            React__namespace["default"].createElement("path", { fill: "none", d: "M0 .96h16v16H0z" }))),
-    React__namespace["default"].createElement("title", null, 'File'),
-    React__namespace["default"].createElement("g", { clipPath: "url(#prefix__clip-path)" },
-        React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29H4a1.33 1.33 0 00-1.33 1.33v10.67A1.33 1.33 0 004 15.62h8a1.33 1.33 0 001.33-1.33V7z", transform: "translate(-1.92 -1.54)" }),
-        React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29V7h4.66", transform: "translate(-1.92 -1.54)" }))));
-const DownloadIcon = () => (React__namespace["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
-    React__namespace["default"].createElement("title", null, 'download'),
-    React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M4.67 7.62L8 11l3.33-3.34M8 11V3", transform: "translate(-1.25 -2.21)" })));
-const UploadIcon = () => (React__namespace["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
-    React__namespace["default"].createElement("title", null, 'upload'),
-    React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M11.33 6.29L8 3 4.67 6.29M8 3v8", transform: "translate(-1.25 -2.21)" })));
-const FileDropdown = ({ className, value, options, onUploadSelected, id, placeholderIcon, placeholder, style, }) => {
-    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-    const showDropdown = () => setIsDropdownOpen(!isDropdownOpen);
-    const inputList = React.useRef(options.map((option) => {
-        return (option.type === 'upload' && (React__namespace["default"].createElement("input", { id: 'uploader-dropdown-input-' + id + '-' + option.value, key: 'uploader-dropdown-input-' + id + '-' + option.value, accept: option.fileAcceptedType, multiple: option.multiple, type: "file", style: { display: 'none' }, onChange: (e) => {
-                console.log('change');
-                onUploadSelected(e.target.files);
-            } })));
-    }));
-    const onUpload = (dropdownId) => {
-        var _a;
-        (_a = document.querySelector(dropdownId)) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    const onDownload = (url) => {
-        url && window.open(url, '_blank');
-    };
-    return (React__namespace["default"].createElement(StyledDropdown, { className: className, "data-dropdown-open": !!isDropdownOpen, id: id, "data-has-icons": true, style: style, onBlur: () => setIsDropdownOpen(false), tabIndex: 0 },
-        React__namespace["default"].createElement(ShareIconPathStyle, null),
-        React__namespace["default"].createElement(StyledDropdownName, { onClick: showDropdown },
-            placeholderIcon || React__namespace["default"].createElement(DefaultFileIcon, null),
-            ' ',
-            React__namespace["default"].createElement("span", null, value && value.value ? value.label : placeholder)),
-        isDropdownOpen && (React__namespace["default"].createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": true }, options.map((option) => (React__namespace["default"].createElement(StyledDropdownOption, { key: `${id}-${option.value}`, "data-selected": (value && value.value === option.value) || undefined, onClick: () => option.type === 'upload'
-                ? onUpload('#uploader-dropdown-input-' + id + '-' + option.value)
-                : onDownload(option.url) },
-            React__namespace["default"].createElement(StyledIcon, null, option.icon || option.type === 'download' ? (React__namespace["default"].createElement(DownloadIcon, null)) : (React__namespace["default"].createElement(UploadIcon, null))),
-            option.label))))),
-        React__namespace["default"].createElement(React__namespace["default"].Fragment, null, inputList.current)));
-};
-
-const StyledGrid = styled__default["default"].div `
-  --columns: var(--grid-template-columns, repeat(var(--columns-count), 1fr));
-  --columns-desktop: var(
-    --grid-template-columns-desktop,
-    repeat(var(--columns-count-desktop), 1fr)
-  );
-  display: grid;
-  grid-template-columns: var(--columns);
-  grid-gap: var(--grid-gap);
-  align-items: var(--align-items);
-
-  ${utils.MediaQueries.tdUp} {
-    grid-template-columns: var(--columns-desktop);
-  }
-
-  > * {
-    justify-self: var(--justify-children);
-  }
-`;
-
-/**
- * @deprecated Consider to use mantine
- */
-const Grid = ({ className, columns, columnsDesktop, gridTemplateColumns, gridTemplateColumnsDesktop, gap, children, justifyChildren, style, alignItems, }) => {
-    return (React__namespace["default"].createElement(StyledGrid, { className: className, style: Object.assign({ '--columns-count': columns, '--columns-count-desktop': columnsDesktop, '--grid-template-columns': gridTemplateColumns, '--grid-template-columns-desktop': gridTemplateColumnsDesktop, '--justify-children': justifyChildren, '--grid-gap': gap, '--align-items': alignItems }, style) }, children));
-};
-
-/**
- * @deprecated Consider to use import { Radio } from '@mantine/core'
- */
-const Radio = ({ size = 'small', label, name, checked, value, className, isDisabled = false, onChange, dataEventCategory, dataEventAction, dataEventLabel, }) => {
-    const isHasTracking = !!dataEventAction && !!dataEventCategory && !!dataEventLabel;
-    const trackingProps = isHasTracking
-        ? {
-            'data-event-category': dataEventCategory,
-            'data-event-action': dataEventAction,
-            'data-event-label': dataEventLabel,
-        }
-        : {};
-    return (React__namespace["default"].createElement(index$2.Radio
-    // type,
-    , Object.assign({ 
-        // type,
-        size: size === 'small' ? 'md' : 'lg', label: label, name: name, checked: checked, value: value, className: className, disabled: isDisabled, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value) }, trackingProps)));
-};
-
-const StyledRateStars = styled__default["default"].div `
-  display: inline-flex;
-
-  gap: calc(var(--gap) * 1px);
-  > svg {
-    width: calc(var(--star-size) * 1px);
-    height: calc(var(--star-size) * 1px);
-  }
-
-  &[data-selectable='true'] {
-    > svg {
-      cursor: pointer;
-    }
-  }
-`;
-
-const StarHalfIcon = (props) => {
-    return (React__namespace["default"].createElement("svg", Object.assign({}, props, { viewBox: "0 0 24 24", fill: "none" }),
-        React__namespace["default"].createElement("path", { d: "m139.287 144.772 5.17 3.12c.38.23.85-.11.75-.54l-1.37-5.88 4.56-3.95c.33-.29.16-.84-.29-.88l-6.01-.51-2.35-5.54a.498.498 0 0 0-.92 0l-2.35 5.54-6.01.51a.499.499 0 0 0-.28.88l4.56 3.95-1.37 5.88c-.1.43.37.77.75.54z", fill: "#E4E8EC" }),
-        React__namespace["default"].createElement("path", { d: "M139.289 144.771s.013-14.488 0-14.488a.49.49 0 0 0-.46.308l-2.35 5.54-6.01.51a.499.499 0 0 0-.28.88l4.56 3.95-1.37 5.88c-.1.43.37.77.75.54z", fill: "#FFC326" })));
-};
-
-const StarIcon = (_a) => {
-    var { isFull } = _a, props = tslib_es6.__rest(_a, ["isFull"]);
-    return (React__namespace["default"].createElement("svg", Object.assign({}, props, { viewBox: "0 0 32 32", fill: "none" }),
-        React__namespace["default"].createElement("path", { d: "m16 23.027 6.893 4.16c.507.306 1.134-.147 1-.72l-1.826-7.84 6.08-5.267a.67.67 0 0 0-.387-1.173l-8.013-.68-3.134-7.387a.664.664 0 0 0-1.226 0l-3.133 7.387-8.014.68a.668.668 0 0 0-.373 1.173l6.08 5.267-1.827 7.84c-.133.573.493 1.026 1 .72z", fill: isFull ? '#FFC326' : '#D2D6DC' })));
-};
-
-/**
- *
- * Show 5 (or more) stars and allow user vote (optional)
- *
- */
-const RateStars = ({ gap = 2, size = 24, star, totalStars = 5, onSelect, hideEmptyStars, style, className, }) => {
-    const numberOfFullStars = Math.floor(star);
-    const numberOfHalfStars = star - numberOfFullStars >= 0.5 ? 1 : 0;
-    const [tempStar, setTempStar] = React.useState(null);
-    const tempFullStars = tempStar || numberOfFullStars;
-    const tempHalfStars = tempStar ? 0 : numberOfHalfStars;
-    return (React__namespace["default"].createElement(StyledRateStars, { "data-selectable": !!onSelect, style: Object.assign({ '--gap': gap, '--star-size': size }, style), className: className }, Array.from({
-        length: hideEmptyStars
-            ? numberOfFullStars + numberOfHalfStars
-            : totalStars,
-    }).map((_, index) => {
-        const onMouseOver = () => !!onSelect && setTempStar(index + 1);
-        const onMouseLeave = () => !!onSelect && setTempStar(null);
-        return index + 1 <= tempFullStars ? (React__namespace["default"].createElement(StarIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave, isFull: true })) : index + 1 === tempFullStars + tempHalfStars ? (React__namespace["default"].createElement(StarHalfIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave })) : (React__namespace["default"].createElement(StarIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave }));
-    })));
-};
-
-const getTag = (tag, isLight) => {
-    switch (tag) {
-        case 'yellow': {
-            const color = isLight ? miscTheme.theme.colors.yellow50 : miscTheme.theme.colors.yellow600;
-            return `
-        background: ${color};
-        p {
-          color: var(
-            --text-props-color,
-            ${miscTheme.theme.colors.gray800}
-          );
-        }
-      `;
-        }
-        case 'standard': {
-            return `
-      background: ${miscTheme.theme.colors.white};
-      border: 1px solid ${miscTheme.theme.colors.gray200};
-  
-      p {
-        color: var(
-          --text-props-color,
-          ${miscTheme.theme.colors.gray800}
-        );
-      }
-  
-      &:hover {
-        background: ${miscTheme.theme.colors.gray100};
-      }
-      `;
-        }
-        case 'red': {
-            const color = isLight ? miscTheme.theme.colors.red50 : miscTheme.theme.colors.red500;
-            return `
-         background: ${color};
-        `;
-        }
-        case 'green': {
-            const color = isLight ? miscTheme.theme.colors.green50 : miscTheme.theme.colors.green500;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'blue': {
-            const color = isLight ? miscTheme.theme.colors.primary50 : miscTheme.theme.colors.primaryBase;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'teal': {
-            const color = isLight ? miscTheme.theme.colors.teal100 : miscTheme.theme.colors.teal600;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'pink': {
-            const color = isLight ? miscTheme.theme.colors.pink200 : miscTheme.theme.colors.pink800;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'violet': {
-            const color = isLight ? miscTheme.theme.colors.violet100 : miscTheme.theme.colors.violet500;
-            return `
-          background: ${color};
-      `;
-        }
-        case 'grey': {
-            const color = isLight ? miscTheme.theme.colors.gray100 : miscTheme.theme.colors.gray600;
-            return `
-          background: ${color};
-      `;
-        }
-    }
-};
-const StyledTag = styled__default["default"].div `
-  --padding-horizontal: 8px;
-  --pading-vertical: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--pading-vertical) var(--padding-horizontal);
-  border-radius: 24px;
-
-  ${(props) => props.tagType === 'sponsored' &&
-    `
-    --offset-size: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
-    position: relative;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
-    border-radius: 0 4px 18px 0;
-    height: 24px;
-    width: 90px;
-    border-left: var(--offset-size) solid ${miscTheme.theme.colors.accentLight};
-    padding: 0;
-    margin-left: calc(var(--offset-size) * -1);
-
-    p {
-      font-weight: ${miscTheme.theme.sizes.fwBold};
-      color: var(
-        --text-props-color,
-        ${miscTheme.theme.colors.secondaryDark}
-      );
-      font-size: 11px;
-      margin-left: calc(var(--offset-size) * -1);
-    }
-
-    &::after {
-      width: calc(var(--offset-size) * 2);
-      height: var(--offset-size);
-      background: ${miscTheme.theme.colors.accentMain};
-      position: absolute;
-      left: calc(var(--offset-size) * -1);
-      bottom: calc(var(--offset-size) * -1);
-      clip-path: polygon(0 1%, 100% 0%, 100% 100%);
-      content: '';
-    }
-  `}
-
-  ${(props) => props.isInline &&
-    `
-      display: inline-block;
-  `}
-
-  ${(props) => props.tagHasMorePadding &&
-    `
-    &[data-has-more-padding] {
-      padding: calc(var(--pading-vertical) + 5px) var(--padding-horizontal);
-    }
-  `}
-
-  p {
-    ${(props) => props.tagIsLight
-    ? `
-      color: var(--text-props-color, #000);
-      `
-    : `
-      color: var(--text-props-color, ${miscTheme.theme.colors.white});
-        `}
-  }
-
-  ${(props) => getTag(props.tagType, props.tagIsLight)}
-
-  ${(props) => props.tagIsSquared &&
-    props.tagType !== 'sponsored' &&
-    `
-    border-radius: 4px;
-  `}
-
-  ${(props) => props.tagIsALink &&
-    `
-    cursor: pointer;
-  `} 
-
-  &[data-is-selected],
-  &:active {
-    background: ${miscTheme.theme.colors.primary50};
-  }
-`;
-
-const Tag = ({ type, children, style, isInline, isSquared = false, className, isLight, hasMorePadding, isLink, isSelected, textProps = {
-    size: 'sm',
-}, }) => {
-    const textColor = textProps.color
-        ? { '--text-props-color': textProps.color }
-        : {};
-    return (React__namespace["default"].createElement(StyledTag, { "data-is-squared": isSquared || undefined, "data-tag-type": type, "data-is-light": isLight || undefined, "data-has-more-padding": hasMorePadding || undefined, "data-is-inline": isInline || undefined, style: Object.assign(Object.assign({}, style), textColor), className: className, "data-is-selected": isSelected || undefined, "data-is-link": isLink || undefined, tagType: type, isInline: isInline, tagHasMorePadding: hasMorePadding, tagIsLight: isLight, tagIsSquared: isSquared, tagIsALink: isLink },
-        React__namespace["default"].createElement(index$3.Text, Object.assign({}, textProps), children)));
-};
-
-const heightIcon = '24px';
-const StyledToggleIcon = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].span `
-    position: relative;
-    display: block;
-    width: 40px;
-    height: ${heightIcon};
-    background: #c3cbd4;
-    border-radius: 100px;
-    cursor: pointer;
-
-    &:after {
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      width: 20px;
-      height: 20px;
-      background: #fff;
-      border-radius: 90px;
-      content: '';
-      transition: 0.3s;
-    }
-  `, 'hhgcomp-toggle-icon');
-const StyledToggleLabel = styled__default["default"].span `
-  padding-left: 15px;
-`;
-const StyledToggle = styled__default["default"].div `
-  height: ${heightIcon};
-
-  input[type='checkbox'] {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-  }
-
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    color: ${miscTheme.theme.colors.gray600};
-  }
-
-  input:checked + label ${StyledToggleIcon.classSelector} {
-    background: ${miscTheme.theme.colors.primaryBase};
-    &:after {
-      left: calc(100% - 2px);
-      transform: translateX(-100%);
-    }
-  }
-`;
-
-/**
- * @deprecated Consider to use {@link Switch} at {@link https://www.npmjs.com/package/@hhgtech/hhg-components/mantine}
- */
-const Toggle = ({ className, id, onChange, checked, style, label }) => (React__namespace["default"].createElement(StyledToggle, { className: className, style: style },
-    React__namespace["default"].createElement("input", { type: "checkbox", id: id, onChange: onChange, checked: checked }),
-    React__namespace["default"].createElement("label", { htmlFor: id },
-        React__namespace["default"].createElement(StyledToggleIcon, null),
-        label && React__namespace["default"].createElement(StyledToggleLabel, null, label))));
-
-// define shared context
-const StepRendererContext = React.createContext({
-    currentStep: 0,
-    setCurrentStep: () => false,
-    setMaxStep: () => false,
-    nextStep: () => false,
-    prevStep: () => false,
-});
-const StepRenderer = ({ children, onStepChange }) => {
-    const [currentStep, setCurrentStep] = React.useState(0);
-    const [maxStep, setMaxStep] = React.useState(0);
-    const childrenCount = React__namespace["default"].Children.count(children);
-    React.useEffect(() => {
-        setMaxStep(childrenCount - 1);
-    }, [childrenCount]);
-    React.useEffect(() => {
-        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(currentStep);
-    }, [currentStep]);
-    const nextStep = () => currentStep + 1 <= maxStep && setCurrentStep(currentStep + 1);
-    const prevStep = () => currentStep - 1 >= 0 && setCurrentStep(currentStep - 1);
-    return (React__namespace["default"].createElement(StepRendererContext.Provider, { value: {
-            currentStep,
-            setCurrentStep,
-            setMaxStep,
-            nextStep,
-            prevStep,
-        } }, flattenChildren__default["default"](children).map((element, idx) => {
-        const active = idx === currentStep;
-        return (React__namespace["default"].createElement(React.Fragment, { key: idx }, !React__namespace["default"].isValidElement(element)
-            ? active
-                ? element
-                : null
-            : element.props.alwaysRender || active
-                ? React__namespace["default"].cloneElement(element, {
-                    isActive: idx === currentStep,
-                    stepIndex: idx,
-                })
-                : null));
-    })));
-};
-
-const StyledIconHeading = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const StyledTitle = styled__default["default"](index$4.Heading) `
-  font-weight: var(--fwBold);
-`;
-
-const IconHeading = ({ icon, title, className, style }) => {
-    return (React__namespace["default"].createElement(StyledIconHeading, { className: className, style: style },
-        icon,
-        React__namespace["default"].createElement(StyledTitle, { tag: "h6", color: "var(--secondaryDark)" }, title)));
-};
-
-const sanitizeHtml = (data) => {
-    if (!data)
-        return '';
-    const convertNewlinesToHtmlBreaks = data
-        .replace(/\n$/, '')
-        .replace(/\n/g, '<br />');
-    return convertNewlinesToHtmlBreaks;
-};
-const HtmlContent = ({ htmlContent, className }) => {
-    const htmlClean = sanitizeHtml(htmlContent);
-    return (React__namespace["default"].createElement("div", { className: className, dangerouslySetInnerHTML: { __html: htmlClean } }));
-};
-
-exports.FILE_UPLOAD_ACCEPTED_RATIOS = void 0;
-(function (FILE_UPLOAD_ACCEPTED_RATIOS) {
-    FILE_UPLOAD_ACCEPTED_RATIOS["ONE_TO_ONE"] = "1:1";
-    FILE_UPLOAD_ACCEPTED_RATIOS["THREE_TO_ONE"] = "3:1";
-})(exports.FILE_UPLOAD_ACCEPTED_RATIOS || (exports.FILE_UPLOAD_ACCEPTED_RATIOS = {}));
-exports.FILE_UPLOAD_ACCEPTED_TYPES = void 0;
-(function (FILE_UPLOAD_ACCEPTED_TYPES) {
-    FILE_UPLOAD_ACCEPTED_TYPES["PNG"] = ".png";
-    FILE_UPLOAD_ACCEPTED_TYPES["JPG"] = ".jpg";
-    FILE_UPLOAD_ACCEPTED_TYPES["JPEG"] = ".jpeg";
-})(exports.FILE_UPLOAD_ACCEPTED_TYPES || (exports.FILE_UPLOAD_ACCEPTED_TYPES = {}));
-
-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) => tslib_es6.__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__default["default"].div `
-  display: flex;
-  flex-direction: column;
-
-  .image-upload-input-error {
-    margin-top: ${core.rem(12)};
-    display: flex;
-    flex-direction: column;
-    gap: ${core.rem(4)};
-  }
-`;
-const StyledImageUploadContent = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  gap: ${core.rem(4)};
-  margin-top: ${core.rem(4)};
-
-  span {
-    color: ${miscTheme.theme.colors.neutral500};
-  }
-`;
-const StyledImageUploadInputWrapper = styled__default["default"].div `
-  position: relative;
-  width: fit-content;
-  padding: ${core.rem(8)} ${core.rem(12)};
-  border-radius: ${core.rem(12)};
-  border: ${core.rem(1)} solid ${miscTheme.theme.colors.neutral200};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: ${core.rem(8)};
-  margin-top: ${core.rem(18)};
-
-  &.image-upload-dragover {
-    border-color: ${miscTheme.theme.colors.primaryBase};
-  }
-
-  &.image-upload-error {
-    border-color: ${miscTheme.theme.colors.error};
-  }
-
-  &.image-upload-disabled {
-    cursor: not-allowed;
-    background-color: ${miscTheme.theme.colors.gray100};
-    color: ${miscTheme.theme.colors.gray400};
-    border-color: ${miscTheme.theme.colors.gray200};
-  }
-
-  svg {
-    width: ${core.rem(18)};
-    height: ${core.rem(18)};
-  }
-
-  input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    z-index: -1;
-  }
-`;
-const StyledImageUploadPreviewContainer = styled__default["default"].div `
-  position: relative;
-  width: ${core.rem(90)};
-  height: ${core.rem(90)};
-  border-radius: ${core.rem(12)};
-  overflow: hidden;
-  background-color: ${miscTheme.theme.colors.gray100};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  svg {
-    width: ${core.rem(14)};
-    height: ${core.rem(14)};
-    color: ${miscTheme.theme.colors.white};
-  }
-
-  .image-upload-remove-button {
-    cursor: pointer;
-    position: absolute;
-    top: ${core.rem(6)};
-    right: ${core.rem(6)};
-    background: ${miscTheme.theme.colors.black};
-    border-radius: ${core.rem(12)};
-    padding: ${core.rem(2)};
-    display: flex;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-`;
-const StyledImageUploadPreviewContainerGroup = styled__default["default"].div `
-  display: flex;
-  gap: ${core.rem(8)};
-  margin-top: ${core.rem(18)};
-`;
-
-const ImageUpload = React.forwardRef(({ label, name, error, acceptedTypes = [
-    exports.FILE_UPLOAD_ACCEPTED_TYPES.PNG,
-    exports.FILE_UPLOAD_ACCEPTED_TYPES.JPG,
-    exports.FILE_UPLOAD_ACCEPTED_TYPES.JPEG,
-], maxSize = 1, acceptedRatios, multiple = false, disabled = false, id, className, onChange, value, showValidationRules = false, description, useBase64 = false, placeholder = 'Upload photo', }, ref) => {
-    const [isDragOver, setIsDragOver] = React.useState(false);
-    const [validationErrors, setValidationErrors] = React.useState([]);
-    const fileInputRef = React.useRef(null);
-    const hasError = Boolean(error) || validationErrors.length > 0;
-    const normalizedValue = React.useMemo(() => {
-        if (!value)
-            return [];
-        return Array.isArray(value) ? value : [value];
-    }, [value]);
-    const validateFile = React.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 = React.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 = React.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 = React.useCallback((files) => tslib_es6.__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 = React.useCallback((e) => {
-        fileInputRef.current = e;
-        if (typeof ref === 'function') {
-            ref(e);
-        }
-        else if (ref) {
-            ref.current = e;
-        }
-    }, [ref]);
-    const handleClick = React.useCallback(() => {
-        if (!disabled && fileInputRef.current) {
-            fileInputRef.current.click();
-        }
-    }, [disabled]);
-    const handleDragEnter = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragOver(true);
-    }, []);
-    const handleDragLeave = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragOver(false);
-    }, []);
-    const handleDragOver = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
-    const handleDrop = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragOver(false);
-        const files = e.dataTransfer.files;
-        if (files.length > 0) {
-            processFiles(files);
-        }
-    }, [processFiles]);
-    return (React__namespace["default"].createElement(StyledImageUploadWrapper, { className: className },
-        React__namespace["default"].createElement("label", { htmlFor: id || name },
-            typeof label === 'string' ? (React__namespace["default"].createElement(index.Text, { size: "title2" }, label)) : (label),
-            description && (React__namespace["default"].createElement(index.Text, { size: "p3", mt: core.rem(4), color: miscTheme.theme.colors.gray700 }, description))),
-        showValidationRules && (React__namespace["default"].createElement(StyledImageUploadContent, null,
-            React__namespace["default"].createElement(index.Text, { size: "p3" },
-                "Formats: ",
-                acceptedTypes.join('/')),
-            acceptedRatios && (React__namespace["default"].createElement(index.Text, { size: "p3" },
-                "Max size: ",
-                maxSize,
-                "MB - Accepted ratios:",
-                ' ',
-                acceptedRatios.join('/'))))),
-        (multiple || normalizedValue.length === 0) && (React__namespace["default"].createElement(StyledImageUploadInputWrapper, { className: core.clsx(isDragOver && 'image-upload-dragover', hasError && 'image-upload-error', disabled && 'image-upload-disabled'), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick },
-            React__namespace["default"].createElement("input", { ref: combinedRef, type: "file", id: id || name, name: name, accept: acceptedTypes.join(','), multiple: multiple, onChange: handleFileInputChange, disabled: disabled }),
-            React__namespace["default"].createElement(Upload, null),
-            React__namespace["default"].createElement(index.Text, { size: "p3", fw: 500 }, placeholder))),
-        normalizedValue.length > 0 && (React__namespace["default"].createElement(StyledImageUploadPreviewContainerGroup, null, previewList.map((img, index) => (React__namespace["default"].createElement(StyledImageUploadPreviewContainer, { key: index },
-            React__namespace["default"].createElement("img", { src: img, alt: `Uploaded file ${index + 1}`, className: "image-upload-preview-image" }),
-            React__namespace["default"].createElement("button", { onClick: (e) => {
-                    e.stopPropagation();
-                    removeFile(index);
-                }, className: "image-upload-remove-button" },
-                React__namespace["default"].createElement(Close.Close, null))))))),
-        hasError && (React__namespace["default"].createElement("div", { className: "image-upload-input-error" }, [...validationErrors, error].map((err) => (React__namespace["default"].createElement(index.Text, { key: err, className: "error-text", size: "c1", color: miscTheme.theme.colors.red600 }, err)))))));
-});
-
-const StyledCarousel = styled__default["default"](carousel.Carousel) `
-  & .mantine-Carousel-control {
-    width: auto;
-  }
-`;
-
-const DragFreeCarousel = (_a) => {
-    var { children, gapItem = 8, slideSize = 'auto', withControls = false, withIndicators = false, dragFree = true, align = 'start' } = _a, otherProps = tslib_es6.__rest(_a, ["children", "gapItem", "slideSize", "withControls", "withIndicators", "dragFree", "align"]);
-    return (React__namespace["default"].createElement(StyledCarousel, Object.assign({ slideSize: slideSize, slideGap: gapItem, withControls: withControls, withIndicators: withIndicators, dragFree: dragFree, align: align, containScroll: "trimSnaps" }, otherProps), React__namespace["default"].Children.map(children, (child, index) => (React__namespace["default"].createElement(carousel.Carousel.Slide, { key: index }, child)))));
-};
-
-exports.Alert = Alert;
-exports.Badge = Badge;
-exports.BorderHeading = BorderHeading;
-exports.CardCollapse = CardCollapse;
-exports.DragFreeCarousel = DragFreeCarousel;
-exports.FileDropdown = FileDropdown;
-exports.Grid = Grid;
-exports.HtmlContent = HtmlContent;
-exports.IconHeading = IconHeading;
-exports.ImageUpload = ImageUpload;
-exports.Radio = Radio;
-exports.RateStars = RateStars;
-exports.StepRenderer = StepRenderer;
-exports.StepRendererContext = StepRendererContext;
-exports.Tag = Tag;
-exports.Toggle = Toggle;
-exports.Upload = Upload;