@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/index.styles-0ef0135c.js

@@ -1,1322 +0,0 @@
-import styled from '@emotion/styled';
-import { t as theme } from './theme-0af1cc3d.js';
-import { M as MediaQueries } from './utils-511a24f4.js';
-import { _ as __rest } from './tslib.es6-2673b49d.js';
-import React__default, { useState, createContext, useEffect, Fragment } from 'react';
-import { L as Label, b as StyledDisplayIcon, d as StyledActionIcon, e as StyledErrorLabel } from './constants-508ba335.js';
-import { s as setDefaultClass } from './utils-dee27bfd.js';
-import { css } from '@emotion/react';
-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-bf170ee9.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 heightIcon = '24px';
-const StyledToggleIcon = setDefaultClass(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;
-    }
-  `, 'hhgcomp-toggle-icon');
-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 ${StyledToggleIcon.classSelector} {
-    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],
-            },
-        },
-    };
-});
-
-const StyledContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  button[data-color='tertiary'] {
-    background: white;
-  }
-`;
-
-// 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, { type }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: {},
-        wrapper: Object.assign({ gap: rem(8) }, (type === 'radio' && {
-            justifyContent: 'flex-end',
-            gap: rem(24),
-        })),
-        groupErr: {
-            fontSize: rem(14),
-        },
-        itemRoot: Object.assign({}, (type === 'button'
-            ? {
-                flexGrow: 1,
-                width: '50%',
-                '&[data-checked="true"]': {
-                    '.mantine-Radio-label': {
-                        borderColor: theme.fn.primaryColor(),
-                    },
-                },
-            }
-            : type === 'radio'
-                ? { padding: `${rem(10)} 0`, margin: 0 }
-                : {})),
-        itemLabelWrapper: {
-            padding: 0,
-            width: '100%',
-        },
-        itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
-            ? {
-                position: 'relative',
-                padding: `${rem(6)} ${rem(16)}`,
-                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
-                borderRadius: 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: rem(26),
-                },
-            }
-            : type === 'radio'
-                ? { fontSize: rem(14) }
-                : {})),
-        itemInner: Object.assign(Object.assign({}, (type === 'button' && {
-            display: 'none',
-        })), (type === 'radio' && {
-            alignSelf: 'center',
-        })),
-        itemBody: Object.assign({}, (type === 'radio' && {
-            alignItems: 'center',
-        })),
-    };
-});
-
-export { StyledRadioImageGroup as A, StyledRadioImageItem as B, useStyles 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, StyledDropdownList as g, StyledDropdownOption as h, StyledIcon as i, StyledGrid as j, StyledPagination as k, StyledPageBlock as l, StyledPaginationBlock as m, StyledTag as n, StyledToggle as o, StyledToggleIcon as p, StyledToggleLabel as q, StyledCheckbox as r, StyledRateStars as s, StyledDivider as t, useStyles$1 as u, StyledContainer as v, StyledBackdrop as w, StyledDrawer as x, StyledDrawerPanel as y, StyledDrawerContent as z };