@hhgtech/hhg-components 1.28.44 → 1.28.46

package/build/index.styles-ce607f17.js

@@ -0,0 +1,839 @@
+"use strict";var e=require("styled-components"),t=require("./theme-98a7bede.js"),r=require("./utils-469dda3f.js"),o=require("./tslib.es6-d46558cb.js"),a=require("react"),i=require("@mantine/core"),n=require("./constants-627c575a.js"),s=require("./animation-1e9aff6a.js"),l=require("react-keyed-flatten-children");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e),c=d(a),h=d(l);const u=p.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: ${t.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: ${t.theme.borderRadius};
+    }
+    &[data-avatar-type='rounded'] {
+      border-radius: 50%;
+      img {
+        --width: 100%;
+        --height: 100%;
+      }
+    }
+    img {
+      object-fit: cover;
+    }
+  }
+`,g=p.default.div`
+  position: relative;
+
+  > div {
+    width: max-content;
+    position: relative;
+  }
+
+  span {
+    font-weight: ${t.theme.sizes.fwBold};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ${e=>((e,r,o,a)=>{let i="";if("numeric"===e)switch(r){case"medium":i="\n          height: 16px;\n          font-size: 11px;\n          padding: 1px 6px;\n        ";case"large":i="\n          height: 24px;\n          font-size: 13px;\n          padding: 1px 10px;\n        "}let n,s="";o&&(s="\n      position: absolute;\n      top: 0;\n      left: 75%;\n    "),o&&(n=`\n      left: 70%;\n\n      ${"large"===r?"\n        top: -7px;\n      ":"medium"===r?"\n       top: -2px;\n       width: 16px;\n       height: 16px;\n      ":""}\n    `);let l="";switch(a){case"primary":l=`\n      background: ${t.theme.colors.primary50};\n      color: ${t.theme.colors.primary600};  \n    `;break;case"error":l=`\n        background: ${t.theme.colors.error};\n        color: white;\n      `}switch(e){case"dot":return`\n        ${s}\n        width: 8px;\n        height: 8px;\n        font-size: 0px;\n        border-radius: 50%;\n        ${l}\n      `;case"numeric":return`\n        ${s}\n        width: max-content;\n        border-radius: 32px;\n        ${i}\n        ${n}\n        ${l}\n      `}})(e.notificationType,e.notificationSize,e.hasIcon,e.notificationColor)}
+  }
+
+  ${e=>e.hasIcon&&"\n    svg {\n      width: 40px;\n      height: 40px;\n    }\n  "}
+`,x=p.default.h4`
+  position: relative;
+  line-height: 18px;
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    left: 0;
+    width: 4px;
+    height: 18px;
+    background-color: ${t.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: ${t.theme.sizes.fwBold};
+  }
+  &[data-type='semiBold'] {
+    font-weight: ${t.theme.sizes.fwSemiBold};
+  }
+
+  &[data-uppercase] {
+    text-transform: uppercase;
+  }
+
+  ${r.MediaQueries.mbDown} {
+    &[data-size='lg'] {
+      font-size: 16px;
+    }
+  }
+`,m=p.default.hr`
+  border-width: 1px;
+  border-color: ${t.theme.colors.neutral200};
+  border-style: ${e=>e.dividerType};
+`,f=p.default.div`
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid ${t.theme.colors.gray200};
+  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
+  background-position: right 16px center;
+  border-radius: ${t.theme.borderRadius};
+
+  &[data-has-icons='true'] {
+    border: none;
+    background: ${t.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 ${t.theme.colors.primary200};
+  }
+`,b=p.default.div`
+  padding: 12px 18px 12px 16px;
+  cursor: pointer;
+  &[data-dropdown-open] {
+    padding: 11px 15px 11px 15px;
+    border: 1px solid ${t.theme.colors.primaryBase};
+    border-radius: ${t.theme.borderRadius};
+    box-shadow: 0 0 2px 2px ${t.theme.colors.primary200};
+  }
+
+  & > svg {
+    height: 16px;
+    width: 16px;
+  }
+`,y=p.default.ul`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: block;
+  margin-top: 4px;
+  background: ${t.theme.colors.white};
+  border-radius: ${t.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 ${t.theme.colors.gray200};
+    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
+  }
+`,v=p.default.li`
+  margin: 8px;
+  padding: 12px 18px 12px 16px;
+  border-radius: ${t.theme.borderRadius};
+  display: flex;
+  &:hover,
+  :active {
+    background: ${t.theme.colors.gray100};
+  }
+`,w=p.default.div`
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+
+  & > svg {
+    height: 16px;
+    width: 16px;
+  }
+`,$=p.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);
+
+  ${r.MediaQueries.tdUp} {
+    grid-template-columns: var(--columns-desktop);
+  }
+
+  > * {
+    justify-self: var(--justify-children);
+  }
+`;var k="xzO2I0N";const z=i.createStyles((()=>({root:{}}))),S=p.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+  li {
+    transition: all 0.3s ease;
+  }
+  [data-page-active] {
+    background: ${t.theme.colors.primaryBase};
+    color: ${t.theme.colors.white};
+
+    > a {
+      color: ${t.theme.colors.white};
+    }
+  }
+`,C=p.default.div`
+  display: flex;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${t.theme.colors.gray200};
+  margin: 0 2px;
+  border-radius: 4px;
+  color: ${t.theme.colors.gray800};
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: ${t.theme.sizes.fwBold};
+
+  &[data-last-page] {
+    border: none;
+    background-color: ${t.theme.colors.gray100};
+    cursor: not-allowed;
+    pointer-events: none;
+
+    svg {
+      path {
+        stroke: ${t.theme.colors.gray300};
+      }
+    }
+  }
+`,E=p.default.li`
+  display: flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 2px;
+  border-radius: 4px;
+  color: ${t.theme.colors.gray800};
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: ${t.theme.sizes.fwBold};
+
+  > a {
+    color: ${t.theme.colors.gray800};
+    text-decoration: unset;
+    display: block;
+    width: 100%;
+    height: 100%;
+    line-height: 32px;
+    text-align: center;
+  }
+`,I=p.default.div`
+  position: relative;
+  width: 100%;
+
+  &[data-has-error] {
+    input {
+      border-color: ${t.theme.colors.red700};
+    }
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px ${t.theme.colors.gray200};
+    border-radius: ${t.theme.borderRadius};
+
+    &:active,
+    &:focus,
+    .focused & {
+      border-color: ${t.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${t.theme.colors.primary200};
+    }
+
+    &:disabled {
+      background-color: ${t.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: ${t.theme.sizes.fwRegular};
+      ${r.MediaQueries.mbDown} {
+        font-size: 22px;
+        line-height: 1.2;
+      }
+
+      ${r.MediaQueries.mbUp} {
+        font-size: 26px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='md'] {
+    input {
+      font-weight: ${t.theme.sizes.fwRegular};
+      ${r.MediaQueries.mbDown} {
+        font-size: 14px;
+        line-height: 1.2;
+      }
+
+      ${r.MediaQueries.mbUp} {
+        font-size: 16px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='sm'] {
+    input {
+      font-weight: ${t.theme.sizes.fwRegular};
+      ${r.MediaQueries.mbDown} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      ${r.MediaQueries.mbUp} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    }
+  }
+`;p.default.label`
+  display: inline-block;
+  margin-bottom: 4px;
+  color: ${t.theme.colors.gray600};
+  font-weight: ${t.theme.sizes.fwBold};
+`;const R=p.default.label`
+  color: ${t.theme.colors.red700};
+  font-weight: ${t.theme.sizes.fwRegular};
+`,j=p.default.div`
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  display: inline-flex;
+  cursor: pointer;
+  transform: translateY(-50%);
+`,B=p.default.div`
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  display: inline-flex;
+  cursor: default;
+  transform: translateY(-50%);
+`,L=c.default.forwardRef(((e,t)=>{var{name:r,errorMessage:i,autoComplete:s="off",defaultValue:l,actionIcon:d,displayIcon:p,isDeleteAction:h,onActionClick:u,label:g,placeholder:x,className:m,onChange:f,onKeyPress:b,isDisabled:y,CustomInput:v,size:w,style:$,autoFocus:k,type:z="text",isNumerousKeyboard:S=!1,onFocus:C,enterKeyHint:E,nativeOnChange:L}=e,D=o.__rest(e,["name","errorMessage","autoComplete","defaultValue","actionIcon","displayIcon","isDeleteAction","onActionClick","label","placeholder","className","onChange","onKeyPress","isDisabled","CustomInput","size","style","autoFocus","type","isNumerousKeyboard","onFocus","enterKeyHint","nativeOnChange"]);const[M,N]=a.useState(l);return c.default.createElement(I,{"data-size":w,className:m,"data-has-action-icon":!!d||void 0,"data-has-display-icon":!!p||void 0,"data-has-error":i&&i.length>0||void 0,style:$},g&&c.default.createElement(n.Label,{size:"label2",htmlFor:r,className:"inputLabel"},g),c.default.createElement("div",{style:{position:"relative"}},v||c.default.createElement("input",Object.assign({id:r,name:r,placeholder:x,onChange:null!=L?L:e=>{return t=e.target.value,N(t),void f(t);var t},onKeyPress:b,type:z,"aria-label":z,disabled:y,value:M,autoComplete:s,ref:t,autoFocus:k,inputMode:S||"number"===z?"numeric":z,pattern:S?"[0-9]*":".*",onFocus:C,enterKeyHint:E},D)),p&&c.default.createElement(B,{className:"displayIcon"},p),d&&c.default.createElement(j,{className:"actionIcon",onClick:()=>{var e;h&&(N(""),null===(e=t.current)||void 0===e||e.focus()),u&&u()}},d)),i&&i.length>0&&c.default.createElement(R,{className:"errorLabel"},i))}));L.displayName="PureInput";const D=p.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;
+
+  ${e=>"sponsored"===e.tagType&&`\n    --offset-size: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    position: relative;\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);\n    border-radius: 0 4px 18px 0;\n    height: 24px;\n    width: 90px;\n    border-left: var(--offset-size) solid ${t.theme.colors.accentLight};\n    padding: 0;\n    margin-left: calc(var(--offset-size) * -1);\n\n    p {\n      font-weight: ${t.theme.sizes.fwBold};\n      color: var(\n        --text-props-color,\n        ${t.theme.colors.secondaryDark}\n      );\n      font-size: 11px;\n      margin-left: calc(var(--offset-size) * -1);\n    }\n\n    &::after {\n      width: calc(var(--offset-size) * 2);\n      height: var(--offset-size);\n      background: ${t.theme.colors.accentMain};\n      position: absolute;\n      left: calc(var(--offset-size) * -1);\n      bottom: calc(var(--offset-size) * -1);\n      clip-path: polygon(0 1%, 100% 0%, 100% 100%);\n      content: '';\n    }\n  `}
+
+  ${e=>e.isInline&&"\n      display: inline-block;\n  "}
+
+  ${e=>e.tagHasMorePadding&&"\n    &[data-has-more-padding] {\n      padding: calc(var(--pading-vertical) + 5px) var(--padding-horizontal);\n    }\n  "}
+
+  p {
+    ${e=>e.tagIsLight?"\n      color: var(--text-props-color, #000);\n      ":`\n      color: var(--text-props-color, ${t.theme.colors.white});\n        `}
+  }
+
+  ${e=>((e,r)=>{switch(e){case"yellow":return`\n        background: ${r?t.theme.colors.yellow50:t.theme.colors.yellow600};\n        p {\n          color: var(\n            --text-props-color,\n            ${t.theme.colors.gray800}\n          );\n        }\n      `;case"standard":return`\n      background: ${t.theme.colors.white};\n      border: 1px solid ${t.theme.colors.gray200};\n  \n      p {\n        color: var(\n          --text-props-color,\n          ${t.theme.colors.gray800}\n        );\n      }\n  \n      &:hover {\n        background: ${t.theme.colors.gray100};\n      }\n      `;case"red":return`\n         background: ${r?t.theme.colors.red50:t.theme.colors.red500};\n        `;case"green":return`\n         background: ${r?t.theme.colors.green50:t.theme.colors.green500};\n      `;case"blue":return`\n         background: ${r?t.theme.colors.primary50:t.theme.colors.primaryBase};\n      `;case"teal":return`\n         background: ${r?t.theme.colors.teal100:t.theme.colors.teal600};\n      `;case"pink":return`\n         background: ${r?t.theme.colors.pink200:t.theme.colors.pink800};\n      `;case"violet":return`\n          background: ${r?t.theme.colors.violet100:t.theme.colors.violet500};\n      `;case"grey":return`\n          background: ${r?t.theme.colors.gray100:t.theme.colors.gray600};\n      `}})(e.tagType,e.tagIsLight)}
+
+  ${e=>e.tagIsSquared&&"sponsored"!==e.tagType&&"\n    border-radius: 4px;\n  "}
+
+  ${e=>e.tagIsALink&&"\n    cursor: pointer;\n  "} 
+
+  &[data-is-selected],
+  &:active {
+    background: ${t.theme.colors.primary50};
+  }
+`,M=(e,t)=>a.forwardRef(((r,a)=>{var{className:i}=r,n=o.__rest(r,["className"]);return c.default.createElement(e,Object.assign({ref:a,className:`${t} ${i||""}`},n))})),N="24px",O="hhgcomp-toggle-icon",A=M(p.default.span`
+  position: relative;
+  display: block;
+  width: 40px;
+  height: ${N};
+  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;
+  }
+`,O),P=p.default.span`
+  padding-left: 15px;
+`,q=p.default.div`
+  height: ${N};
+
+  input[type='checkbox'] {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+  }
+
+  label {
+    cursor: pointer;
+    display: inline-flex;
+    color: ${t.theme.colors.gray600};
+  }
+
+  input:checked + label .${O} {
+    background: ${t.theme.colors.primaryBase};
+    &:after {
+      left: calc(100% - 2px);
+      transform: translateX(-100%);
+    }
+  }
+`,T=p.default.div`
+  textarea {
+    width: 100%;
+    height: var(--textarea-height, 116px);
+    padding: 1rem;
+    border: 1px solid ${t.theme.colors.gray200};
+    border-radius: 6px;
+    color: ${t.theme.colors.gray800};
+    font-size: 14px;
+    resize: none;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px #91caff;
+    }
+
+    &::placeholder {
+      color: ${t.theme.colors.gray500};
+    }
+
+    &:disabled {
+      background-color: ${t.theme.colors.neutral50};
+      cursor: not-allowed;
+    }
+  }
+`,K=c.default.forwardRef((({height:e,placeholder:t,labelText:r,labelColor:o,id:a,name:i,onChange:s,value:l,className:d,onKeyPress:p,disabled:h=!1},u)=>c.default.createElement(T,{className:d,style:{"--textarea-height":e||"116px"}},r&&c.default.createElement(n.Label,{size:"label2",style:{color:o||"#595959"},htmlFor:a},r),c.default.createElement("textarea",{name:i,ref:u,placeholder:t,id:a,onChange:e=>s&&s(e.target.value),onKeyPress:e=>p&&p(e),value:l,disabled:h})))),Q=p.default.div`
+  display: flex;
+  cursor: pointer;
+
+  &[data-theme='marryBaby'] {
+    input {
+      width: 20px;
+      height: 20px;
+      border: 1.3px solid ${t.theme.mbColors.midGray};
+      border-radius: 9px;
+
+      cursor: inherit;
+      transition: border-color 0.4s, box-shadow 0.4s;
+
+      &:hover,
+      &:active {
+        border-color: ${t.theme.mbColors.cobalt};
+        box-shadow: 0 0 2px 2px ${t.theme.mbColors.cobalt};
+      }
+
+      &:focus-visible {
+        border: 2px solid ${t.theme.mbColors.cobalt};
+      }
+
+      &:checked {
+        border: 0;
+        background: ${t.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: ${t.theme.mbColors.gray};
+    }
+  }
+  input {
+    width: 20px;
+    height: 20px;
+    border: solid 1px ${t.theme.colors.gray500};
+    border-radius: 2px;
+
+    cursor: inherit;
+    transition: border-color 0.4s, box-shadow 0.4s;
+
+    &:hover,
+    &:active {
+      border-color: ${t.theme.colors.primaryBase};
+      box-shadow: 0 0 2px 2px ${t.theme.colors.primary200};
+    }
+
+    &:focus-visible {
+      border: 2px solid ${t.theme.colors.primaryActive};
+    }
+
+    &:checked {
+      border: 0;
+      background: ${t.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: ${t.theme.sizes.fwRegular};
+    width: calc(100% - 24px);
+    cursor: inherit;
+
+    ${r.MediaQueries.mbDown} {
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    ${r.MediaQueries.mbUp} {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+
+  &[data-is-rectangle] > input {
+    position: relative;
+    width: unset;
+    height: unset;
+    padding: 5px 12px;
+    border: 1px solid ${t.theme.colors.neutral100};
+    border-radius: 32px;
+
+    &::after {
+      color: ${t.theme.colors.gray800};
+      content: attr(data-label-text);
+      font-size: 13px;
+    }
+    &:checked {
+      border-color: ${t.theme.colors.primary50};
+      &::after {
+        color: ${t.theme.colors.primaryBase};
+      }
+    }
+    &:checked {
+      background: ${t.theme.colors.primary50};
+    }
+  }
+
+  &[data-disabled] {
+    color: ${t.theme.colors.gray300};
+    cursor: not-allowed;
+    input {
+      border-color: ${t.theme.colors.gray300};
+      &:hover {
+        border-color: ${t.theme.colors.gray300};
+        box-shadow: none;
+      }
+    }
+  }
+`,F=p.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;
+    }
+  }
+`,H="600ms",U=p.default.div`
+  position: fixed;
+  inset: 0;
+  z-index: ${t.theme.zIndexes.drawer};
+  pointer-events: ${e=>e.open?"auto":"none"};
+`,_=p.default.div`
+  position: fixed;
+  z-index: 300;
+  background: #ffffff;
+  visibility: ${e=>e.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;
+    ${r=>r.hasTitle?e.css`
+            border-bottom: 1px solid ${t.theme.colors.neutral100};
+          `:null}
+  }
+
+  .close-button {
+    margin-left: auto;
+  }
+
+  ${t=>((t,r)=>{switch(t){case"top":return e.css`
+        top: 0;
+        width: 100%;
+        border-radius: 0px 0px 6px 6px;
+        ${r?e.css`
+              animation: ${s.slideInDown} ${H} ease-in-out forwards;
+            `:null}
+
+        &.slideOut {
+          animation: ${s.slideOutUp} ${H} ease-in-out forwards;
+        }
+      `;case"right":return e.css`
+        right: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 6px 0px 0px 6px;
+
+        ${r?e.css`
+              animation: ${s.slideInRight} ${H} ease-in-out forwards;
+            `:null}
+
+        &.slideOut {
+          animation: ${s.slideOutRight} ${H} ease-in-out forwards;
+        }
+      `;case"bottom":return e.css`
+        bottom: 0;
+        width: 100%;
+        border-radius: 6px 6px 0px 0px;
+        ${r?e.css`
+              animation: ${s.slideInUp} ${H} ease-in-out forwards;
+            `:null}
+
+        &.slideOut {
+          animation: ${s.slideOutDown} ${H} ease-in-out forwards;
+        }
+      `;case"left":return e.css`
+        left: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 0px 6px 6px 0px;
+
+        ${r?e.css`
+              animation: ${s.slideInLeft} ${H} ease-in-out forwards;
+            `:null}
+
+        &.slideOut {
+          animation: ${s.slideOutLeft} ${H} ease-in-out forwards;
+        }
+      `;default:return e.css`
+        left: 0;
+        height: 100%;
+        min-width: 300px;
+        border-radius: 0px 6px 6px 0px;
+
+        ${r?e.css`
+              animation: ${s.slideInUp} ${H} ease-in-out forwards;
+            `:null}
+
+        &.slideOut {
+          animation: ${s.slideOutDown} ${H} ease-in-out forwards;
+        }
+      `}})(t.placement,t.open)}
+`,W=p.default.div`
+  min-height: 200px;
+  padding: 16px;
+  overflow-y: auto;
+`,G=p.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;
+  }
+`,V=p.default.div`
+  display: flex;
+  width: 100%;
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+  }
+
+  &[data-direction='horizontal'] {
+    flex-wrap: wrap;
+  }
+`,Y=p.default.div`
+  display: flex;
+
+  padding: 8px;
+
+  border-radius: ${t.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 ${t.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 X=i.createStyles((e=>({root:{display:"inline-block",flexShrink:0,padding:"2px 0.5rem",marginLeft:"4px",borderRadius:e.radius.xs,fontSize:"12px",fontWeight:400,lineHeight:"18px",'&[data-label-type="admin"]':{background:e.primaryColor[0],color:e.primaryColor[9]},'&[data-label-type="local admin"]':{background:e.primaryColor[8]},'&[data-label-type="ambassador"]':{background:e.colors.green[4]},'&[data-label-type="expert"]':{background:e.colors.yellow[6]},'&[data-label-type="moderator"]':{background:e.colors.red[0],color:e.colors.red[8]},'&[data-label-type="sponsor"]':{background:e.colors.teal[4]},'&[data-label-type="guide"]':{background:e.colors.teal[4]},'&[data-label-type="influencer"]':{background:e.colors.teal[4]}}})));const J=a.createContext({currentStep:0,setCurrentStep:()=>!1,setMaxStep:()=>!1,nextStep:()=>!1,prevStep:()=>!1});var Z=i.createStyles((e=>({root:{},wrapper:{gap:i.rem(8)},groupErr:{fontSize:i.rem(14)},itemRoot:{flexGrow:1,width:"50%",'&[data-checked="true"]':{".mantine-Radio-label":{borderColor:e.fn.primaryColor()}}},itemLabelWrapper:{padding:0,width:"100%"},itemLabel:{position:"relative",padding:`${i.rem(6)} ${i.rem(16)}`,border:`1px solid ${e.colors.gray[2]}`,borderRadius:i.rem(4),cursor:"pointer",'&[data-disabled="true"]':{background:e.colors.gray[1],color:`${e.colors.gray[4]} !important`,img:{opacity:.5}},img:{height:i.rem(26)}},itemInner:{display:"none"}})));exports.Heading=e=>{var t,{as:r,tag:a,className:i,children:n,title:s,color:l,style:d,fontWeight:p,dataEventCategory:h,dataEventAction:u,dataEventLabel:g}=e,x=o.__rest(e,["as","tag","className","children","title","color","style","fontWeight","dataEventCategory","dataEventAction","dataEventLabel"]);const m=r||a,{theme:f}=z(void 0,{name:"Heading"});return c.default.createElement(m,Object.assign({title:s,style:Object.assign({"--custom-heading-color":l||("mb"===(null===(t=null==f?void 0:f.other)||void 0===t?void 0:t.template)?f.colors.gray[9]:f.colors.gray[8])},d),"data-tag":a,"data-font-weight":p||void 0,"data-event-category":h,"data-event-action":u,"data-event-label":g,className:`${k} ${i||""}`},x),n)},exports.PureInput=L,exports.StepRenderer=({children:e,onStepChange:t})=>{const[r,o]=a.useState(0),[i,n]=a.useState(0),s=c.default.Children.count(e);a.useEffect((()=>{n(s-1)}),[s]),a.useEffect((()=>{null==t||t(r)}),[r]);return c.default.createElement(J.Provider,{value:{currentStep:r,setCurrentStep:o,setMaxStep:n,nextStep:()=>r+1<=i&&o(r+1),prevStep:()=>r-1>=0&&o(r-1)}},h.default(e).map(((e,t)=>{const o=t===r;return c.default.createElement(a.Fragment,{key:t},c.default.isValidElement(e)?e.props.alwaysRender||o?c.default.cloneElement(e,{isActive:t===r,stepIndex:t}):null:o?e:null)})))},exports.StepRendererContext=J,exports.StyledAvatar=u,exports.StyledBackdrop=G,exports.StyledBadge=g,exports.StyledBorderHeading=x,exports.StyledCheckbox=Q,exports.StyledDivider=m,exports.StyledDrawer=U,exports.StyledDrawerContent=W,exports.StyledDrawerPanel=_,exports.StyledDropdown=f,exports.StyledDropdownList=y,exports.StyledDropdownName=b,exports.StyledDropdownOption=v,exports.StyledGrid=$,exports.StyledIcon=w,exports.StyledPageBlock=C,exports.StyledPagination=S,exports.StyledPaginationBlock=E,exports.StyledRadioImageGroup=V,exports.StyledRadioImageItem=Y,exports.StyledRateStars=F,exports.StyledTag=D,exports.StyledToggle=q,exports.StyledToggleIcon=A,exports.StyledToggleLabel=P,exports.TextArea=K,exports.getDefaultClassWrapper=M,exports.useStyles=Z,exports.useStyles$1=X;