@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/esm/index.styles-5add27c5.js

@@ -0,0 +1,1303 @@
+import styled, { css } from 'styled-components';
+import { t as theme } from './theme-e74db08c.js';
+import { M as MediaQueries } from './utils-2c484c05.js';
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default, { useState, forwardRef, createContext, useEffect, Fragment } from 'react';
+import { L as Label, b as StyledDisplayIcon, d as StyledActionIcon, e as StyledErrorLabel } from './constants-b77ffe3d.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-3d5edc39.js';
+import { createStyles, rem } from '@mantine/core';
+import flattenChildren from 'react-keyed-flatten-children';
+
+const StyledAvatar = styled.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.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.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.colors.primary50};
+      color: ${theme.colors.primary600};  
+    `;
+            break;
+        case 'error':
+            notificationColor = `
+        background: ${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.div `
+  position: relative;
+
+  > div {
+    width: max-content;
+    position: relative;
+  }
+
+  span {
+    font-weight: ${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.h4 `
+  position: relative;
+  line-height: 18px;
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    left: 0;
+    width: 4px;
+    height: 18px;
+    background-color: ${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.sizes.fwBold};
+  }
+  &[data-type='semiBold'] {
+    font-weight: ${theme.sizes.fwSemiBold};
+  }
+
+  &[data-uppercase] {
+    text-transform: uppercase;
+  }
+
+  ${MediaQueries.mbDown} {
+    &[data-size='lg'] {
+      font-size: 16px;
+    }
+  }
+`;
+
+const StyledDivider = styled.hr `
+  border-width: 1px;
+  border-color: ${theme.colors.neutral200};
+  border-style: ${(props) => props.dividerType};
+`;
+
+const StyledDropdown = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid ${theme.colors.gray200};
+  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
+  background-position: right 16px center;
+  border-radius: ${theme.borderRadius};
+
+  &[data-has-icons='true'] {
+    border: none;
+    background: ${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.colors.primary200};
+  }
+`;
+const StyledDropdownName = styled.div `
+  padding: 12px 18px 12px 16px;
+  cursor: pointer;
+  &[data-dropdown-open] {
+    padding: 11px 15px 11px 15px;
+    border: 1px solid ${theme.colors.primaryBase};
+    border-radius: ${theme.borderRadius};
+    box-shadow: 0 0 2px 2px ${theme.colors.primary200};
+  }
+
+  & > svg {
+    height: 16px;
+    width: 16px;
+  }
+`;
+const StyledDropdownList = styled.ul `
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: block;
+  margin-top: 4px;
+  background: ${theme.colors.white};
+  border-radius: ${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.colors.gray200};
+    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
+  }
+`;
+const StyledDropdownOption = styled.li `
+  margin: 8px;
+  padding: 12px 18px 12px 16px;
+  border-radius: ${theme.borderRadius};
+  display: flex;
+  &:hover,
+  :active {
+    background: ${theme.colors.gray100};
+  }
+`;
+const StyledIcon = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+
+  & > svg {
+    height: 16px;
+    width: 16px;
+  }
+`;
+
+const StyledGrid = styled.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);
+
+  ${MediaQueries.tdUp} {
+    grid-template-columns: var(--columns-desktop);
+  }
+
+  > * {
+    justify-self: var(--justify-children);
+  }
+`;
+
+const StyledPagination = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+  li {
+    transition: all 0.3s ease;
+  }
+  [data-page-active] {
+    background: ${theme.colors.primaryBase};
+    color: ${theme.colors.white};
+
+    > a {
+      color: ${theme.colors.white};
+    }
+  }
+`;
+const StyledPageBlock = styled.div `
+  display: flex;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${theme.colors.gray200};
+  margin: 0 2px;
+  border-radius: 4px;
+  color: ${theme.colors.gray800};
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: ${theme.sizes.fwBold};
+
+  &[data-last-page] {
+    border: none;
+    background-color: ${theme.colors.gray100};
+    cursor: not-allowed;
+    pointer-events: none;
+
+    svg {
+      path {
+        stroke: ${theme.colors.gray300};
+      }
+    }
+  }
+`;
+const StyledPaginationBlock = styled.li `
+  display: flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 2px;
+  border-radius: 4px;
+  color: ${theme.colors.gray800};
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: ${theme.sizes.fwBold};
+
+  > a {
+    color: ${theme.colors.gray800};
+    text-decoration: unset;
+    display: block;
+    width: 100%;
+    height: 100%;
+    line-height: 32px;
+    text-align: center;
+  }
+`;
+
+const StyledInput = styled.div `
+  position: relative;
+  width: 100%;
+
+  &[data-has-error] {
+    input {
+      border-color: ${theme.colors.red700};
+    }
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px ${theme.colors.gray200};
+    border-radius: ${theme.borderRadius};
+
+    &:active,
+    &:focus,
+    .focused & {
+      border-color: ${theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
+    }
+
+    &:disabled {
+      background-color: ${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.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 22px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 26px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='md'] {
+    input {
+      font-weight: ${theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 14px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 16px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='sm'] {
+    input {
+      font-weight: ${theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    }
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const PureInput = React__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 = __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] = 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.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.createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
+        React__default.createElement("div", { style: { position: 'relative' } },
+            CustomInput ? (CustomInput) : (React__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.createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
+            ActionIcon && (React__default.createElement(StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
+        errorMessage && errorMessage.length > 0 && (React__default.createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
+});
+PureInput.displayName = 'PureInput';
+
+const getTag = (tag, isLight) => {
+    switch (tag) {
+        case 'yellow': {
+            const color = isLight ? theme.colors.yellow50 : theme.colors.yellow600;
+            return `
+        background: ${color};
+        p {
+          color: var(
+            --text-props-color,
+            ${theme.colors.gray800}
+          );
+        }
+      `;
+        }
+        case 'standard': {
+            return `
+      background: ${theme.colors.white};
+      border: 1px solid ${theme.colors.gray200};
+  
+      p {
+        color: var(
+          --text-props-color,
+          ${theme.colors.gray800}
+        );
+      }
+  
+      &:hover {
+        background: ${theme.colors.gray100};
+      }
+      `;
+        }
+        case 'red': {
+            const color = isLight ? theme.colors.red50 : theme.colors.red500;
+            return `
+         background: ${color};
+        `;
+        }
+        case 'green': {
+            const color = isLight ? theme.colors.green50 : theme.colors.green500;
+            return `
+         background: ${color};
+      `;
+        }
+        case 'blue': {
+            const color = isLight ? theme.colors.primary50 : theme.colors.primaryBase;
+            return `
+         background: ${color};
+      `;
+        }
+        case 'teal': {
+            const color = isLight ? theme.colors.teal100 : theme.colors.teal600;
+            return `
+         background: ${color};
+      `;
+        }
+        case 'pink': {
+            const color = isLight ? theme.colors.pink200 : theme.colors.pink800;
+            return `
+         background: ${color};
+      `;
+        }
+        case 'violet': {
+            const color = isLight ? theme.colors.violet100 : theme.colors.violet500;
+            return `
+          background: ${color};
+      `;
+        }
+        case 'grey': {
+            const color = isLight ? theme.colors.gray100 : theme.colors.gray600;
+            return `
+          background: ${color};
+      `;
+        }
+    }
+};
+const StyledTag = styled.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.colors.accentLight};
+    padding: 0;
+    margin-left: calc(var(--offset-size) * -1);
+
+    p {
+      font-weight: ${theme.sizes.fwBold};
+      color: var(
+        --text-props-color,
+        ${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.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.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.colors.primary50};
+  }
+`;
+
+const getDefaultClassWrapper = (Comp, defaultClassName) => forwardRef((_a, _ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React__default.createElement(Comp, Object.assign({ ref: _ref, className: `${defaultClassName} ${className || ''}` }, rest)));
+});
+
+const heightIcon = '24px';
+const _StyledToggleIcon = styled.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;
+  }
+`;
+const StyledToggleIconClass = 'hhgcomp-toggle-icon';
+const StyledToggleIcon = getDefaultClassWrapper(_StyledToggleIcon, StyledToggleIconClass);
+const StyledToggleLabel = styled.span `
+  padding-left: 15px;
+`;
+const StyledToggle = styled.div `
+  height: ${heightIcon};
+
+  input[type='checkbox'] {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+  }
+
+  label {
+    cursor: pointer;
+    display: inline-flex;
+    color: ${theme.colors.gray600};
+  }
+
+  input:checked + label .${StyledToggleIconClass} {
+    background: ${theme.colors.primaryBase};
+    &:after {
+      left: calc(100% - 2px);
+      transform: translateX(-100%);
+    }
+  }
+`;
+
+const StyledTextArea = styled.div `
+  textarea {
+    width: 100%;
+    height: var(--textarea-height, 116px);
+    padding: 1rem;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 6px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    resize: none;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px #91caff;
+    }
+
+    &::placeholder {
+      color: ${theme.colors.gray500};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.neutral50};
+      cursor: not-allowed;
+    }
+  }
+`;
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const TextArea = React__default.forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
+    return (React__default.createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
+        labelText && (React__default.createElement(Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
+        React__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.div `
+  display: flex;
+  cursor: pointer;
+
+  &[data-theme='marryBaby'] {
+    input {
+      width: 20px;
+      height: 20px;
+      border: 1.3px solid ${theme.mbColors.midGray};
+      border-radius: 9px;
+
+      cursor: inherit;
+      transition: border-color 0.4s, box-shadow 0.4s;
+
+      &:hover,
+      &:active {
+        border-color: ${theme.mbColors.cobalt};
+        box-shadow: 0 0 2px 2px ${theme.mbColors.cobalt};
+      }
+
+      &:focus-visible {
+        border: 2px solid ${theme.mbColors.cobalt};
+      }
+
+      &:checked {
+        border: 0;
+        background: ${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.mbColors.gray};
+    }
+  }
+  input {
+    width: 20px;
+    height: 20px;
+    border: solid 1px ${theme.colors.gray500};
+    border-radius: 2px;
+
+    cursor: inherit;
+    transition: border-color 0.4s, box-shadow 0.4s;
+
+    &:hover,
+    &:active {
+      border-color: ${theme.colors.primaryBase};
+      box-shadow: 0 0 2px 2px ${theme.colors.primary200};
+    }
+
+    &:focus-visible {
+      border: 2px solid ${theme.colors.primaryActive};
+    }
+
+    &:checked {
+      border: 0;
+      background: ${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.sizes.fwRegular};
+    width: calc(100% - 24px);
+    cursor: inherit;
+
+    ${MediaQueries.mbDown} {
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    ${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.colors.neutral100};
+    border-radius: 32px;
+
+    &::after {
+      color: ${theme.colors.gray800};
+      content: attr(data-label-text);
+      font-size: 13px;
+    }
+    &:checked {
+      border-color: ${theme.colors.primary50};
+      &::after {
+        color: ${theme.colors.primaryBase};
+      }
+    }
+    &:checked {
+      background: ${theme.colors.primary50};
+    }
+  }
+
+  &[data-disabled] {
+    color: ${theme.colors.gray300};
+    cursor: not-allowed;
+    input {
+      border-color: ${theme.colors.gray300};
+      &:hover {
+        border-color: ${theme.colors.gray300};
+        box-shadow: none;
+      }
+    }
+  }
+`;
+
+const StyledRateStars = styled.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 css `
+        top: 0;
+        width: 100%;
+        border-radius: 0px 0px 6px 6px;
+        ${open
+                ? css `
+              animation: ${slideInDown} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutUp} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        case 'right':
+            return css `
+        right: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 6px 0px 0px 6px;
+
+        ${open
+                ? css `
+              animation: ${slideInRight} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutRight} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        case 'bottom':
+            return css `
+        bottom: 0;
+        width: 100%;
+        border-radius: 6px 6px 0px 0px;
+        ${open
+                ? css `
+              animation: ${slideInUp} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutDown} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        case 'left':
+            return css `
+        left: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 0px 6px 6px 0px;
+
+        ${open
+                ? css `
+              animation: ${slideInLeft} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutLeft} ${DURATION} ease-in-out forwards;
+        }
+      `;
+        default:
+            return css `
+        left: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 0px 6px 6px 0px;
+
+        ${open
+                ? css `
+              animation: ${slideInUp} ${DURATION} ease-in-out forwards;
+            `
+                : null}
+
+        &.slideOut {
+          animation: ${slideOutDown} ${DURATION} ease-in-out forwards;
+        }
+      `;
+    }
+};
+
+const StyledDrawer = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: ${theme.zIndexes.drawer};
+  pointer-events: ${(props) => (props.open ? 'auto' : 'none')};
+`;
+const StyledDrawerPanel = styled.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
+    ? css `
+            border-bottom: 1px solid ${theme.colors.neutral100};
+          `
+    : null}
+  }
+
+  .close-button {
+    margin-left: auto;
+  }
+
+  ${(props) => generateStyleBasedOnPlacement(props.placement, props.open)}
+`;
+const StyledDrawerContent = styled.div `
+  min-height: 200px;
+  padding: 16px;
+  overflow-y: auto;
+`;
+
+const StyledBackdrop = styled.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.div `
+  display: flex;
+  width: 100%;
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+  }
+
+  &[data-direction='horizontal'] {
+    flex-wrap: wrap;
+  }
+`;
+const StyledRadioImageItem = styled.div `
+  display: flex;
+
+  padding: 8px;
+
+  border-radius: ${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.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;
+    }
+  }
+`;
+
+var useStyles$1 = 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],
+            },
+        },
+    };
+});
+
+// define shared context
+const StepRendererContext = createContext({
+    currentStep: 0,
+    setCurrentStep: () => false,
+    setMaxStep: () => false,
+    nextStep: () => false,
+    prevStep: () => false,
+});
+const StepRenderer = ({ children, onStepChange }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const [maxStep, setMaxStep] = useState(0);
+    const childrenCount = React__default.Children.count(children);
+    useEffect(() => {
+        setMaxStep(childrenCount - 1);
+    }, [childrenCount]);
+    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.createElement(StepRendererContext.Provider, { value: {
+            currentStep,
+            setCurrentStep,
+            setMaxStep,
+            nextStep,
+            prevStep,
+        } }, flattenChildren(children).map((element, idx) => {
+        const active = idx === currentStep;
+        return (React__default.createElement(Fragment, { key: idx }, !React__default.isValidElement(element)
+            ? active
+                ? element
+                : null
+            : element.props.alwaysRender || active
+                ? React__default.cloneElement(element, {
+                    isActive: idx === currentStep,
+                    stepIndex: idx,
+                })
+                : null));
+    })));
+};
+
+var useStyles = createStyles((theme) => {
+    return {
+        root: {},
+        wrapper: {
+            gap: rem(8),
+        },
+        groupErr: {
+            fontSize: rem(14),
+        },
+        itemRoot: {
+            flexGrow: 1,
+            width: '50%',
+            '&[data-checked="true"]': {
+                '.mantine-Radio-label': {
+                    borderColor: theme.fn.primaryColor(),
+                },
+            },
+        },
+        itemLabelWrapper: {
+            padding: 0,
+            width: '100%',
+        },
+        itemLabel: {
+            position: 'relative',
+            padding: `${rem(6)} ${rem(16)}`,
+            border: `1px solid ${theme.colors.gray[2]}`,
+            borderRadius: rem(4),
+            cursor: 'pointer',
+            '&[data-disabled="true"]': {
+                background: theme.colors.gray[1],
+                color: `${theme.colors.gray[4]} !important`,
+                img: {
+                    opacity: 0.5,
+                },
+            },
+            img: {
+                height: rem(26),
+            },
+        },
+        itemInner: {
+            display: 'none',
+        },
+    };
+});
+
+export { StyledDrawerContent as A, StyledRadioImageGroup as B, StyledRadioImageItem as C, PureInput as P, StepRenderer as S, TextArea as T, StepRendererContext as a, StyledAvatar as b, StyledBadge as c, StyledBorderHeading as d, StyledDropdown as e, StyledDropdownName as f, getDefaultClassWrapper as g, StyledDropdownList as h, StyledDropdownOption as i, StyledIcon as j, StyledGrid as k, StyledPagination as l, StyledPageBlock as m, StyledPaginationBlock as n, StyledTag as o, StyledToggle as p, StyledToggleIcon as q, StyledToggleLabel as r, StyledCheckbox as s, StyledRateStars as t, useStyles as u, StyledDivider as v, useStyles$1 as w, StyledBackdrop as x, StyledDrawer as y, StyledDrawerPanel as z };