@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/index.styles-61201019.js

@@ -1,1361 +0,0 @@
-'use strict';
-
-var core = require('@mantine/core');
-var styled = require('@emotion/styled');
-var theme = require('./theme-416e0fd4.js');
-var utils = require('./utils-3a589c92.js');
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
-var React = require('react');
-var index = require('./index-6036e2a0.js');
-var defaultClassWrapper = require('./defaultClassWrapper-feaae206.js');
-var react = require('@emotion/react');
-var animation = require('./animation-21a29164.js');
-var flattenChildren = require('react-keyed-flatten-children');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-var React__default = /*#__PURE__*/_interopDefault(React);
-var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
-
-var useStyles$1 = core.createStyles((theme) => {
-    return {
-        root: {
-            display: 'inline-block',
-            // height: 1rem,
-            flexShrink: 0,
-            padding: '2px 0.5rem',
-            marginLeft: '4px',
-            borderRadius: theme.radius.xs,
-            // color: white,
-            fontSize: '12px',
-            fontWeight: 400,
-            lineHeight: '18px',
-            '&[data-label-type="admin"]': {
-                background: theme.primaryColor[0],
-                color: theme.primaryColor[9],
-                // &[data-is-marrybaby='true'] {
-                //   background: #{map-get($mbColors, 'tonePink')};
-                //   color: #{map-get($mbColors, 'cRed')};
-                // }
-            },
-            '&[data-label-type="local admin"]': {
-                background: theme.primaryColor[8],
-            },
-            '&[data-label-type="ambassador"]': {
-                background: theme.colors.green[4],
-            },
-            '&[data-label-type="expert"]': {
-                background: theme.colors.yellow[6],
-                // &[data-is-marrybaby='true'] {
-                //   background: #{map-get($mbColors, 'cOrange')};
-                //   color: #{map-get($colors, 'cWhite')};
-                // }
-            },
-            '&[data-label-type="moderator"]': {
-                background: theme.colors.red[0],
-                color: theme.colors.red[8],
-                // &[data-is-marrybaby='true'] {
-                //   background: #{map-get($mbColors, 'toneBlue')};
-                //   color: #{map-get($mbColors, 'cobalt')};
-                // }
-            },
-            '&[data-label-type="sponsor"]': {
-                background: theme.colors.teal[4],
-            },
-            '&[data-label-type="guide"]': {
-                background: theme.colors.teal[4],
-            },
-            '&[data-label-type="influencer"]': {
-                background: theme.colors.teal[4],
-            },
-        },
-    };
-});
-
-const StyledContainer = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  button[data-color='tertiary'] {
-    background: white;
-  }
-`;
-
-const StyledDivider = styled__default["default"].hr `
-  border-width: 1px;
-  border-color: ${theme.theme.colors.neutral200};
-  border-style: ${(props) => props.dividerType};
-`;
-
-const StyledAvatar = styled__default["default"].div `
-  background-color: var(--background-color, transparent);
-  color: white;
-  cursor: pointer;
-  img {
-    --width: var(--width-prop, 40px);
-    --height: var(--height-prop, 40px);
-    width: var(--width);
-    height: var(--height);
-  }
-  &[data-has-max='true'] {
-    img {
-      max-width: var(--width);
-      max-height: var(--height);
-    }
-  }
-
-  &[data-avatar-type='square'] {
-    img {
-      --width: var(--width-prop, 72px);
-      --height: var(--height-prop, 72px);
-      border-radius: ${theme.theme.borderRadius};
-    }
-  }
-
-  &[data-avatar-type='rounded'] {
-    img {
-      border-radius: 50%;
-    }
-  }
-
-  &[data-custom-size='true'] {
-    display: flex;
-    overflow: hidden;
-    overflow: hidden;
-    width: var(--size);
-    height: var(--size);
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-    font-size: calc(var(--size) / 2);
-    font-weight: bold;
-    &[data-avatar-type='square'] {
-      border-radius: ${theme.theme.borderRadius};
-    }
-    &[data-avatar-type='rounded'] {
-      border-radius: 50%;
-      img {
-        --width: 100%;
-        --height: 100%;
-      }
-    }
-    img {
-      object-fit: cover;
-    }
-  }
-`;
-
-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: ${theme.theme.colors.primary50};
-      color: ${theme.theme.colors.primary600};  
-    `;
-            break;
-        case 'error':
-            notificationColor = `
-        background: ${theme.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: ${theme.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;
-    }
-  `}
-`;
-
-const StyledBorderHeading = styled__default["default"].h4 `
-  position: relative;
-  line-height: 18px;
-
-  &:after {
-    position: absolute;
-    top: 1px;
-    left: 0;
-    width: 4px;
-    height: 18px;
-    background-color: ${theme.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: ${theme.theme.sizes.fwBold};
-  }
-  &[data-type='semiBold'] {
-    font-weight: ${theme.theme.sizes.fwSemiBold};
-  }
-
-  &[data-uppercase] {
-    text-transform: uppercase;
-  }
-
-  ${utils.MediaQueries.mbDown} {
-    &[data-size='lg'] {
-      font-size: 16px;
-    }
-  }
-`;
-
-const StyledDropdown = styled__default["default"].div `
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid ${theme.theme.colors.gray200};
-  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
-  background-position: right 16px center;
-  border-radius: ${theme.theme.borderRadius};
-
-  &[data-has-icons='true'] {
-    border: none;
-    background: ${theme.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 ${theme.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 ${theme.theme.colors.primaryBase};
-    border-radius: ${theme.theme.borderRadius};
-    box-shadow: 0 0 2px 2px ${theme.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: ${theme.theme.colors.white};
-  border-radius: ${theme.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 ${theme.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: ${theme.theme.borderRadius};
-  display: flex;
-  &:hover,
-  :active {
-    background: ${theme.theme.colors.gray100};
-  }
-`;
-const StyledIcon = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
-
-  & > svg {
-    height: 16px;
-    width: 16px;
-  }
-`;
-
-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);
-  }
-`;
-
-const StyledPagination = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  user-select: none;
-  li {
-    transition: all 0.3s ease;
-  }
-  [data-page-active] {
-    background: ${theme.theme.colors.primaryBase};
-    color: ${theme.theme.colors.white};
-
-    > a {
-      color: ${theme.theme.colors.white};
-    }
-  }
-`;
-const StyledPageBlock = styled__default["default"].div `
-  display: flex;
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid ${theme.theme.colors.gray200};
-  margin: 0 2px;
-  border-radius: 4px;
-  color: ${theme.theme.colors.gray800};
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: ${theme.theme.sizes.fwBold};
-
-  &[data-last-page] {
-    border: none;
-    background-color: ${theme.theme.colors.gray100};
-    cursor: not-allowed;
-    pointer-events: none;
-
-    svg {
-      path {
-        stroke: ${theme.theme.colors.gray300};
-      }
-    }
-  }
-`;
-const StyledPaginationBlock = styled__default["default"].li `
-  display: flex;
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  justify-content: center;
-  margin: 0 2px;
-  border-radius: 4px;
-  color: ${theme.theme.colors.gray800};
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: ${theme.theme.sizes.fwBold};
-
-  > a {
-    color: ${theme.theme.colors.gray800};
-    text-decoration: unset;
-    display: block;
-    width: 100%;
-    height: 100%;
-    line-height: 32px;
-    text-align: center;
-  }
-`;
-
-const StyledInput = styled__default["default"].div `
-  position: relative;
-  width: 100%;
-
-  &[data-has-error] {
-    input {
-      border-color: ${theme.theme.colors.red700};
-    }
-  }
-
-  input {
-    width: 100%;
-    padding: 12px 16px;
-    border: solid 1px ${theme.theme.colors.gray200};
-    border-radius: ${theme.theme.borderRadius};
-
-    &:active,
-    &:focus,
-    .focused & {
-      border-color: ${theme.theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px ${theme.theme.colors.primary200};
-    }
-
-    &:disabled {
-      background-color: ${theme.theme.colors.gray100};
-      cursor: not-allowed;
-    }
-  }
-
-  &[data-has-action-icon] {
-    input {
-      padding: 12px 48px 12px 16px;
-    }
-  }
-  &[data-has-display-icon] {
-    input {
-      padding: 12px 16px 12px 48px;
-    }
-  }
-
-  &[data-has-action-icon][data-has-display-icon] {
-    input {
-      padding: 12px 48px;
-    }
-  }
-
-  &[data-size='lg'] {
-    input {
-      font-size: 16px;
-      font-weight: ${theme.theme.sizes.fwRegular};
-      ${utils.MediaQueries.mbDown} {
-        font-size: 22px;
-        line-height: 1.2;
-      }
-
-      ${utils.MediaQueries.mbUp} {
-        font-size: 26px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='md'] {
-    input {
-      font-weight: ${theme.theme.sizes.fwRegular};
-      ${utils.MediaQueries.mbDown} {
-        font-size: 14px;
-        line-height: 1.2;
-      }
-
-      ${utils.MediaQueries.mbUp} {
-        font-size: 16px;
-        line-height: 1.2;
-      }
-    }
-  }
-  &[data-size='sm'] {
-    input {
-      font-weight: ${theme.theme.sizes.fwRegular};
-      ${utils.MediaQueries.mbDown} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-
-      ${utils.MediaQueries.mbUp} {
-        font-size: 13px;
-        line-height: 1.5;
-      }
-    }
-  }
-`;
-
-/**
- * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
- */
-const PureInput = React__default["default"].forwardRef((_a, ref) => {
-    var { name, errorMessage, autoComplete = 'off', defaultValue, actionIcon: ActionIcon, displayIcon: DisplayIcon, isDeleteAction, onActionClick, label, placeholder, className, onChange, onKeyPress, isDisabled, CustomInput, size, style, autoFocus, type = 'text', isNumerousKeyboard = false, onFocus, enterKeyHint, nativeOnChange } = _a, other = tslib_es6.__rest(_a, ["name", "errorMessage", "autoComplete", "defaultValue", "actionIcon", "displayIcon", "isDeleteAction", "onActionClick", "label", "placeholder", "className", "onChange", "onKeyPress", "isDisabled", "CustomInput", "size", "style", "autoFocus", "type", "isNumerousKeyboard", "onFocus", "enterKeyHint", "nativeOnChange"]);
-    const [localValue, setLocalValue] = React.useState(defaultValue);
-    const handleOnChange = (v) => {
-        setLocalValue(v);
-        onChange(v);
-    };
-    const handleOnActionClick = () => {
-        var _a;
-        if (isDeleteAction) {
-            setLocalValue('');
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        onActionClick && onActionClick();
-    };
-    return (React__default["default"].createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, style: style },
-        label && (React__default["default"].createElement(index.Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
-        React__default["default"].createElement("div", { style: { position: 'relative' } },
-            CustomInput ? (CustomInput) : (React__default["default"].createElement("input", Object.assign({ id: name, name: name, placeholder: placeholder, onChange: nativeOnChange !== null && nativeOnChange !== void 0 ? nativeOnChange : ((e) => handleOnChange(e.target.value)), onKeyPress: onKeyPress, type: type, "aria-label": type, disabled: isDisabled, value: localValue, autoComplete: autoComplete, ref: ref, autoFocus: autoFocus, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', onFocus: onFocus, enterKeyHint: enterKeyHint }, other))),
-            DisplayIcon && (React__default["default"].createElement(index.StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
-            ActionIcon && (React__default["default"].createElement(index.StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
-        errorMessage && errorMessage.length > 0 && (React__default["default"].createElement(index.StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
-});
-PureInput.displayName = 'PureInput';
-
-const getTag = (tag, isLight) => {
-    switch (tag) {
-        case 'yellow': {
-            const color = isLight ? theme.theme.colors.yellow50 : theme.theme.colors.yellow600;
-            return `
-        background: ${color};
-        p {
-          color: var(
-            --text-props-color,
-            ${theme.theme.colors.gray800}
-          );
-        }
-      `;
-        }
-        case 'standard': {
-            return `
-      background: ${theme.theme.colors.white};
-      border: 1px solid ${theme.theme.colors.gray200};
-  
-      p {
-        color: var(
-          --text-props-color,
-          ${theme.theme.colors.gray800}
-        );
-      }
-  
-      &:hover {
-        background: ${theme.theme.colors.gray100};
-      }
-      `;
-        }
-        case 'red': {
-            const color = isLight ? theme.theme.colors.red50 : theme.theme.colors.red500;
-            return `
-         background: ${color};
-        `;
-        }
-        case 'green': {
-            const color = isLight ? theme.theme.colors.green50 : theme.theme.colors.green500;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'blue': {
-            const color = isLight ? theme.theme.colors.primary50 : theme.theme.colors.primaryBase;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'teal': {
-            const color = isLight ? theme.theme.colors.teal100 : theme.theme.colors.teal600;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'pink': {
-            const color = isLight ? theme.theme.colors.pink200 : theme.theme.colors.pink800;
-            return `
-         background: ${color};
-      `;
-        }
-        case 'violet': {
-            const color = isLight ? theme.theme.colors.violet100 : theme.theme.colors.violet500;
-            return `
-          background: ${color};
-      `;
-        }
-        case 'grey': {
-            const color = isLight ? theme.theme.colors.gray100 : theme.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 ${theme.theme.colors.accentLight};
-    padding: 0;
-    margin-left: calc(var(--offset-size) * -1);
-
-    p {
-      font-weight: ${theme.theme.sizes.fwBold};
-      color: var(
-        --text-props-color,
-        ${theme.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: ${theme.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, ${theme.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: ${theme.theme.colors.primary50};
-  }
-`;
-
-const heightIcon = '24px';
-const StyledToggleIcon = defaultClassWrapper.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: ${theme.theme.colors.gray600};
-  }
-
-  input:checked + label ${StyledToggleIcon.classSelector} {
-    background: ${theme.theme.colors.primaryBase};
-    &:after {
-      left: calc(100% - 2px);
-      transform: translateX(-100%);
-    }
-  }
-`;
-
-const StyledTextArea = styled__default["default"].div `
-  textarea {
-    width: 100%;
-    height: var(--textarea-height, 116px);
-    padding: 1rem;
-    border: 1px solid ${theme.theme.colors.gray200};
-    border-radius: 6px;
-    color: ${theme.theme.colors.gray800};
-    font-size: 14px;
-    resize: none;
-
-    &:focus {
-      box-shadow: 0px 0px 2px 2px #91caff;
-    }
-
-    &::placeholder {
-      color: ${theme.theme.colors.gray500};
-    }
-
-    &:disabled {
-      background-color: ${theme.theme.colors.neutral50};
-      cursor: not-allowed;
-    }
-  }
-`;
-/**
- * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
- */
-const TextArea = React__default["default"].forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
-    return (React__default["default"].createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
-        labelText && (React__default["default"].createElement(index.Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
-        React__default["default"].createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value), 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
-});
-
-const StyledCheckbox = styled__default["default"].div `
-  display: flex;
-  cursor: pointer;
-
-  &[data-theme='marryBaby'] {
-    input {
-      width: 20px;
-      height: 20px;
-      border: 1.3px solid ${theme.theme.mbColors.midGray};
-      border-radius: 9px;
-
-      cursor: inherit;
-      transition: border-color 0.4s, box-shadow 0.4s;
-
-      &:hover,
-      &:active {
-        border-color: ${theme.theme.mbColors.cobalt};
-        box-shadow: 0 0 2px 2px ${theme.theme.mbColors.cobalt};
-      }
-
-      &:focus-visible {
-        border: 2px solid ${theme.theme.mbColors.cobalt};
-      }
-
-      &:checked {
-        border: 0;
-        background: ${theme.theme.mbColors.cobalt}
-          url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4L3.45455 6L8 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
-          no-repeat center center;
-      }
-    }
-
-    label {
-      max-width: 15rem;
-      margin-left: 8px;
-      width: calc(100% - 24px);
-      cursor: inherit;
-      font-weight: 600;
-      font-size: 12px;
-      line-height: 20px;
-      letter-spacing: -0.2px;
-      color: ${theme.theme.mbColors.gray};
-    }
-  }
-  input {
-    width: 20px;
-    height: 20px;
-    border: solid 1px ${theme.theme.colors.gray500};
-    border-radius: 2px;
-
-    cursor: inherit;
-    transition: border-color 0.4s, box-shadow 0.4s;
-
-    &:hover,
-    &:active {
-      border-color: ${theme.theme.colors.primaryBase};
-      box-shadow: 0 0 2px 2px ${theme.theme.colors.primary200};
-    }
-
-    &:focus-visible {
-      border: 2px solid ${theme.theme.colors.primaryActive};
-    }
-
-    &:checked {
-      border: 0;
-      background: ${theme.theme.colors.primaryBase}
-        url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
-        no-repeat center center;
-    }
-  }
-
-  label {
-    max-width: 15rem;
-    margin-left: 8px;
-    font-weight: ${theme.theme.sizes.fwRegular};
-    width: calc(100% - 24px);
-    cursor: inherit;
-
-    ${utils.MediaQueries.mbDown} {
-      font-size: 14px;
-      line-height: 24px;
-    }
-
-    ${utils.MediaQueries.mbUp} {
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-
-  &[data-is-rectangle] > input {
-    position: relative;
-    width: unset;
-    height: unset;
-    padding: 5px 12px;
-    border: 1px solid ${theme.theme.colors.neutral100};
-    border-radius: 32px;
-
-    &::after {
-      color: ${theme.theme.colors.gray800};
-      content: attr(data-label-text);
-      font-size: 13px;
-    }
-    &:checked {
-      border-color: ${theme.theme.colors.primary50};
-      &::after {
-        color: ${theme.theme.colors.primaryBase};
-      }
-    }
-    &:checked {
-      background: ${theme.theme.colors.primary50};
-    }
-  }
-
-  &[data-disabled] {
-    color: ${theme.theme.colors.gray300};
-    cursor: not-allowed;
-    input {
-      border-color: ${theme.theme.colors.gray300};
-      &:hover {
-        border-color: ${theme.theme.colors.gray300};
-        box-shadow: none;
-      }
-    }
-  }
-`;
-
-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 DURATION = '600ms';
-const generateStyleBasedOnPlacement = (placement, open) => {
-    switch (placement) {
-        case 'top':
-            return react.css `
-        top: 0;
-        width: 100%;
-        border-radius: 0px 0px 6px 6px;
-        ${open
-                ? react.css `
-              animation: ${animation.slideInDown} ${DURATION} ease-in-out forwards;
-            `
-                : null}
-
-        &.slideOut {
-          animation: ${animation.slideOutUp} ${DURATION} ease-in-out forwards;
-        }
-      `;
-        case 'right':
-            return react.css `
-        right: 0;
-        height: 100%;
-        min-width: 300px;
-        border-radius: 6px 0px 0px 6px;
-
-        ${open
-                ? react.css `
-              animation: ${animation.slideInRight} ${DURATION} ease-in-out forwards;
-            `
-                : null}
-
-        &.slideOut {
-          animation: ${animation.slideOutRight} ${DURATION} ease-in-out forwards;
-        }
-      `;
-        case 'bottom':
-            return react.css `
-        bottom: 0;
-        width: 100%;
-        border-radius: 6px 6px 0px 0px;
-        ${open
-                ? react.css `
-              animation: ${animation.slideInUp} ${DURATION} ease-in-out forwards;
-            `
-                : null}
-
-        &.slideOut {
-          animation: ${animation.slideOutDown} ${DURATION} ease-in-out forwards;
-        }
-      `;
-        case 'left':
-            return react.css `
-        left: 0;
-        height: 100%;
-        min-width: 300px;
-        border-radius: 0px 6px 6px 0px;
-
-        ${open
-                ? react.css `
-              animation: ${animation.slideInLeft} ${DURATION} ease-in-out forwards;
-            `
-                : null}
-
-        &.slideOut {
-          animation: ${animation.slideOutLeft} ${DURATION} ease-in-out forwards;
-        }
-      `;
-        default:
-            return react.css `
-        left: 0;
-        height: 100%;
-        min-width: 300px;
-        border-radius: 0px 6px 6px 0px;
-
-        ${open
-                ? react.css `
-              animation: ${animation.slideInUp} ${DURATION} ease-in-out forwards;
-            `
-                : null}
-
-        &.slideOut {
-          animation: ${animation.slideOutDown} ${DURATION} ease-in-out forwards;
-        }
-      `;
-    }
-};
-
-const StyledDrawer = styled__default["default"].div `
-  position: fixed;
-  inset: 0;
-  z-index: ${theme.theme.zIndexes.drawer};
-  pointer-events: ${(props) => (props.open ? 'auto' : 'none')};
-`;
-const StyledDrawerPanel = styled__default["default"].div `
-  position: fixed;
-  z-index: 300;
-  background: #ffffff;
-  visibility: ${(props) => (props.open ? 'visible' : 'hidden')};
-  max-height: calc(100vh - 100px);
-  display: flex;
-  flex-direction: column;
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-    ${(props) => props.hasTitle
-    ? react.css `
-            border-bottom: 1px solid ${theme.theme.colors.neutral100};
-          `
-    : null}
-  }
-
-  .close-button {
-    margin-left: auto;
-  }
-
-  ${(props) => generateStyleBasedOnPlacement(props.placement, props.open)}
-`;
-const StyledDrawerContent = styled__default["default"].div `
-  min-height: 200px;
-  padding: 16px;
-  overflow-y: auto;
-`;
-
-const StyledBackdrop = styled__default["default"].div `
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: 0;
-  background-color: rgba(38, 38, 38, 0.3);
-  z-index: 1;
-  &[data-open='false'] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-  &[data-open='true'] {
-    visibility: visible;
-    pointer-events: auto;
-  }
-`;
-
-const StyledRadioImageGroup = styled__default["default"].div `
-  display: flex;
-  width: 100%;
-
-  &[data-direction='vertical'] {
-    flex-direction: column;
-  }
-
-  &[data-direction='horizontal'] {
-    flex-wrap: wrap;
-  }
-`;
-const StyledRadioImageItem = styled__default["default"].div `
-  display: flex;
-
-  padding: 8px;
-
-  border-radius: ${theme.theme.borderRadius};
-  cursor: pointer;
-
-  & > div {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  &[data-is-mb='false'] {
-    &[data-selected='true'] {
-      border: 1px solid #2d87f3;
-      background: white;
-    }
-    &[data-selected='false'] {
-      border: 1px solid #f2f2f2;
-      box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
-    }
-  }
-
-  &[data-is-mb='true'] {
-    border-radius: 16px;
-    background: white;
-    padding: 16px auto;
-
-    &[data-selected='true'] {
-      border: 1px solid ${theme.theme.mbColors.mint};
-      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
-    }
-    &[data-selected='false'] {
-      border: none;
-    }
-  }
-
-  &[data-disabled='true'] {
-    cursor: auto;
-  }
-
-  .radio-group-item-heading {
-    margin-top: 8px;
-    //height: 48px;
-    text-align: center;
-  }
-
-  .gender-image {
-    width: 70px;
-    height: 70px;
-    &[data-is-mobile='true'] {
-      width: 40px;
-      height: 40px;
-    }
-  }
-`;
-
-// 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));
-    })));
-};
-
-var useStyles = core.createStyles((theme, { type }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: {},
-        wrapper: Object.assign({ gap: core.rem(8) }, (type === 'radio' && {
-            justifyContent: 'flex-end',
-            gap: core.rem(24),
-        })),
-        groupErr: {
-            fontSize: core.rem(14),
-        },
-        itemRoot: Object.assign({}, (type === 'button'
-            ? {
-                flexGrow: 1,
-                width: '50%',
-                '&[data-checked="true"]': {
-                    '.mantine-Radio-label': {
-                        borderColor: theme.fn.primaryColor(),
-                    },
-                },
-            }
-            : type === 'radio'
-                ? { padding: `${core.rem(10)} 0`, margin: 0 }
-                : {})),
-        itemLabelWrapper: {
-            padding: 0,
-            width: '100%',
-        },
-        itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
-            ? {
-                position: 'relative',
-                padding: `${core.rem(6)} ${core.rem(16)}`,
-                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
-                borderRadius: core.rem(isMarryBaby ? 16 : 4),
-                cursor: 'pointer',
-                '&[data-disabled="true"]': {
-                    background: theme.colors.gray[1],
-                    color: `${theme.colors.gray[4]} !important`,
-                    img: {
-                        opacity: 0.5,
-                    },
-                },
-                img: {
-                    height: core.rem(26),
-                },
-            }
-            : type === 'radio'
-                ? { fontSize: core.rem(14) }
-                : {})),
-        itemInner: Object.assign(Object.assign({}, (type === 'button' && {
-            display: 'none',
-        })), (type === 'radio' && {
-            alignSelf: 'center',
-        })),
-        itemBody: Object.assign({}, (type === 'radio' && {
-            alignItems: 'center',
-        })),
-    };
-});
-
-exports.PureInput = PureInput;
-exports.StepRenderer = StepRenderer;
-exports.StepRendererContext = StepRendererContext;
-exports.StyledAvatar = StyledAvatar;
-exports.StyledBackdrop = StyledBackdrop;
-exports.StyledBadge = StyledBadge;
-exports.StyledBorderHeading = StyledBorderHeading;
-exports.StyledCheckbox = StyledCheckbox;
-exports.StyledContainer = StyledContainer;
-exports.StyledDivider = StyledDivider;
-exports.StyledDrawer = StyledDrawer;
-exports.StyledDrawerContent = StyledDrawerContent;
-exports.StyledDrawerPanel = StyledDrawerPanel;
-exports.StyledDropdown = StyledDropdown;
-exports.StyledDropdownList = StyledDropdownList;
-exports.StyledDropdownName = StyledDropdownName;
-exports.StyledDropdownOption = StyledDropdownOption;
-exports.StyledGrid = StyledGrid;
-exports.StyledIcon = StyledIcon;
-exports.StyledPageBlock = StyledPageBlock;
-exports.StyledPagination = StyledPagination;
-exports.StyledPaginationBlock = StyledPaginationBlock;
-exports.StyledRadioImageGroup = StyledRadioImageGroup;
-exports.StyledRadioImageItem = StyledRadioImageItem;
-exports.StyledRateStars = StyledRateStars;
-exports.StyledTag = StyledTag;
-exports.StyledToggle = StyledToggle;
-exports.StyledToggleIcon = StyledToggleIcon;
-exports.StyledToggleLabel = StyledToggleLabel;
-exports.TextArea = TextArea;
-exports.useStyles = useStyles$1;
-exports.useStyles$1 = useStyles;