@hhgtech/hhg-components 1.29.434-beta-20 → 1.29.435

package/build/ImageUpload.types-740802a9.js

@@ -0,0 +1,822 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-c96f8955.js');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+var utils = require('./utils-62c243a8.js');
+var core = require('@mantine/core');
+var hooks = require('@mantine/hooks');
+var index$1 = require('./index-4771346b.js');
+var index$2 = require('./index-e9f494fb.js');
+var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var index$3 = require('./index-8b8d97cf.js');
+var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
+var flattenChildren = require('react-keyed-flatten-children');
+var index$4 = require('./index-feb676d3.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
+
+var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
+
+/**
+ * @deprecated Consider to use Mantine
+ */
+const Alert = ({ style, onClose, text, type, contentIcon, closeIcon, className, description, }) => {
+    return (React__default["default"].createElement("div", { className: `${styles.alert} ${className || ''}`, style: style, "data-alert-type": type },
+        React__default["default"].createElement("div", { className: styles.content },
+            React__default["default"].createElement("div", { className: "icon-title" },
+                contentIcon,
+                React__default["default"].createElement(index.Text, { weight: "bold", size: "label1" }, text)),
+            React__default["default"].createElement(index.Text, { weight: "regular", size: "p3" }, description)),
+        React__default["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__default["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__default["default"].createElement("div", null,
+            amount && React__default["default"].createElement("span", null, amount),
+            " ",
+            icon && React__default["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__default["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 {
+    color: #111111;
+    font-weight: var(--fwSemiBold);
+    font-size: 0.9375rem;
+    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, id, }) {
+    const [opened, { toggle }] = hooks.useDisclosure(defaultOpened);
+    return (React__default["default"].createElement(StyledCardCollapse, { id: id },
+        React__default["default"].createElement(StyledBox, { onClick: toggle },
+            icon,
+            React__default["default"].createElement("div", { className: "title" }, title),
+            React__default["default"].createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
+        React__default["default"].createElement(core.Collapse, { in: opened, 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__default["default"].createElement("style", null, '.file-dropdown-path{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'));
+const DefaultFileIcon = () => (React__default["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 12.17 14.83" },
+    React__default["default"].createElement("defs", null,
+        React__default["default"].createElement("clipPath", { id: "prefix__clip-path", transform: "translate(-1.92 -1.54)" },
+            React__default["default"].createElement("path", { fill: "none", d: "M0 .96h16v16H0z" }))),
+    React__default["default"].createElement("title", null, 'File'),
+    React__default["default"].createElement("g", { clipPath: "url(#prefix__clip-path)" },
+        React__default["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__default["default"].createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29V7h4.66", transform: "translate(-1.92 -1.54)" }))));
+const DownloadIcon = () => (React__default["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
+    React__default["default"].createElement("title", null, 'download'),
+    React__default["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__default["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
+    React__default["default"].createElement("title", null, 'upload'),
+    React__default["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__default["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__default["default"].createElement(StyledDropdown, { className: className, "data-dropdown-open": !!isDropdownOpen, id: id, "data-has-icons": true, style: style, onBlur: () => setIsDropdownOpen(false), tabIndex: 0 },
+        React__default["default"].createElement(ShareIconPathStyle, null),
+        React__default["default"].createElement(StyledDropdownName, { onClick: showDropdown },
+            placeholderIcon || React__default["default"].createElement(DefaultFileIcon, null),
+            ' ',
+            React__default["default"].createElement("span", null, value && value.value ? value.label : placeholder)),
+        isDropdownOpen && (React__default["default"].createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": true }, options.map((option) => (React__default["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__default["default"].createElement(StyledIcon, null, option.icon || option.type === 'download' ? (React__default["default"].createElement(DownloadIcon, null)) : (React__default["default"].createElement(UploadIcon, null))),
+            option.label))))),
+        React__default["default"].createElement(React__default["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__default["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__default["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__default["default"].createElement("svg", Object.assign({}, props, { viewBox: "0 0 24 24", fill: "none" }),
+        React__default["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__default["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__default["default"].createElement("svg", Object.assign({}, props, { viewBox: "0 0 32 32", fill: "none" }),
+        React__default["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__default["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__default["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__default["default"].createElement(StarHalfIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave })) : (React__default["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__default["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__default["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__default["default"].createElement(StyledToggle, { className: className, style: style },
+    React__default["default"].createElement("input", { type: "checkbox", id: id, onChange: onChange, checked: checked }),
+    React__default["default"].createElement("label", { htmlFor: id },
+        React__default["default"].createElement(StyledToggleIcon, null),
+        label && React__default["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__default["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__default["default"].createElement(StepRendererContext.Provider, { value: {
+            currentStep,
+            setCurrentStep,
+            setMaxStep,
+            nextStep,
+            prevStep,
+        } }, flattenChildren__default["default"](children).map((element, idx) => {
+        const active = idx === currentStep;
+        return (React__default["default"].createElement(React.Fragment, { key: idx }, !React__default["default"].isValidElement(element)
+            ? active
+                ? element
+                : null
+            : element.props.alwaysRender || active
+                ? React__default["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__default["default"].createElement(StyledIconHeading, { className: className, style: style },
+        icon,
+        React__default["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__default["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 = {}));
+
+exports.Alert = Alert;
+exports.Badge = Badge;
+exports.BorderHeading = BorderHeading;
+exports.CardCollapse = CardCollapse;
+exports.FileDropdown = FileDropdown;
+exports.Grid = Grid;
+exports.HtmlContent = HtmlContent;
+exports.IconHeading = IconHeading;
+exports.Radio = Radio;
+exports.RateStars = RateStars;
+exports.StepRenderer = StepRenderer;
+exports.StepRendererContext = StepRendererContext;
+exports.Tag = Tag;
+exports.Toggle = Toggle;