(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5897],{49738:function(e,t,i){"use strict";i.d(t,{C:function(){return h},a:function(){return D}});var a=i(67294),n=i(94044),r=i(36308),o=i(58499),l=i(47440),s=i(40254),d=i(83129),p=i(93867),c=i(22470),m=i(10917),g=i(78156),h="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3e%3c/svg%3e";const u=p.Z.div`
  padding: 14px 16px 14px 17px;
  background: ${e=>e.bgColor};
  border-left: 3px solid ${e=>e.highlight};

  ${r.M.mbUp} {
    padding: 12px 12px 12px 17px;
  }
`,x=p.Z.div`
  display: flex;
`,f=p.Z.div`
  font-size: 12px;
  line-height: 18px;

  &[data-has-icon='true'] {
    margin-left: 10px;
  }
`,b=p.Z.div`
  flex-shrink: 0;
`,w=p.Z.div`
  display: grid;
  grid-gap: 3px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  .img-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    grid-column: auto;

    & > img {
      cursor: zoom-in;
    }

    .img-preview-blur {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 110%;
      height: 110%;
      /* Add the blur effect */
      -webkit-filter: blur(8px);
      filter: blur(8px);
      object-fit: cover;
      object-position: center;
      opacity: 0.8;
      transform: translate(-50%, -50%);
    }
    .img-preview {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .img-more-overlay {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      z-index: 4;
    }
  }
  &[data-image-count='1'] {
    .img-wrapper {
      /* padding-top: 100%; */
      grid-column: 1/3;
    }
  }
  &[data-image-count='2'] {
    .img-wrapper {
      /* padding-top: 100%; */
    }
  }
  &[data-image-count='3'] {
    .img-wrapper {
      &:first-child {
        grid-column: 1/3;
      }
    }
  }
  &[data-image-count='4'] {
    .img-wrapper {
      /* padding-top: 100%; */
    }
  }
  &[data-image-count='5'] {
    grid-template-columns: repeat(6, 1fr);
    .img-wrapper {
      /* padding-top: 100%; */
      grid-column: auto/ span 2;

      &:first-child {
        padding-top: 56.25%;
        grid-column: 1/4;
      }
      &:nth-child(2) {
        padding-top: 56.25%;
        grid-column: 4/7;
      }
    }
  }

  &[data-is-marrybaby='true'] {
    grid-gap: 8px;
    .img-wrapper {
      padding-top: 66.66%;
      border-radius: 1rem;
      .img-preview {
        object-fit: cover;
      }
    }
    &[data-image-count='3'] {
      grid-template-columns: 1fr 1fr 1fr;
      .img-wrapper {
        &:first-child {
          padding-top: 100%;
          grid-column: 1/3;
          grid-row: 1/3;
        }
      }
    }
  }
`,v=p.Z.div`
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  background: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
  &[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
  }
  .top-bar {
    position: relative;
    padding: 20px 40px;
    .icon-arrow-left {
      position: absolute;
      top: 50%;
      left: 20px;
      height: 24px;
      width: 24px;
      cursor: pointer;
      transform: translateY(-50%);
    }
  }
  .container {
    flex: 1;
    overflow-y: auto;
    .img-preview {
      width: 100%;
      min-width: 100%;
      margin-bottom: 0.5rem;
      cursor: pointer;
      max-height: 100%;
      object-fit: cover;
    }
  }
`,y=(0,p.Z)((e=>{var{icon:t,bgColor:i=m.r.colors.yellow50,highlightColor:n=m.r.colors.yellow800,message:r}=e,o=(0,c._)(e,["icon","bgColor","highlightColor","message"]);return a.createElement(u,Object.assign({bgColor:i,highlight:n},o),a.createElement(x,null,t&&a.createElement(b,null,t),a.createElement(f,{"data-has-icon":Boolean(t)},r)))}))`
  margin-bottom: 16px;
  &.noti-bottom {
    border-left: none;
    margin-top: 4px;
    padding: 4px 8px;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 4px;
  }
`,E=({className:e,style:t,authorName:i,images:n,onClose:r,onOpenSingleView:l,alt:p})=>{const{t:c}=(0,o.u)(),[m,g]=(0,a.useState)(!1);return(0,a.useEffect)((()=>{setTimeout((()=>{g(!0)}),0)}),[]),a.createElement(s.h,null,a.createElement(v,{className:e,style:t,"data-open":m},a.createElement("div",{className:"top-bar"},a.createElement("img",{className:"icon-arrow-left",src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M10.05 18.06 4 12.038l6.05-6.025M4.002 12.035h15'/%3e%3c/svg%3e",onClick:r,alt:"go back",loading:"lazy"}),a.createElement(d.T,{size:"p2",weight:"bold",style:{textAlign:"center"}},c("previewPhotos.title",{name:i}))),a.createElement("div",{className:"container"},n.map(((e,t)=>a.createElement("img",{className:"img-preview",key:t,src:e,onClick:()=>null===l||void 0===l?void 0:l(t),alt:p,loading:"lazy"}))))),",")},k=p.Z.div`
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
  &[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
  }
`,C=p.Z.div`
  padding: 1rem;
  background: white;
  .icon-close {
    width: 26px;
    height: 26px;
    cursor: pointer;
  }
`,z=p.Z.div`
  position: relative;
  flex: 1;
  overflow: hidden;
  > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
`,N=p.Z.div`
  --inner-padding: max(16px, 20%);
  height: 100%;
  position: absolute;
  left: 0;
  padding: 8px;
  padding-right: var(--inner-padding);
  display: flex;
  align-items: center;
  top: 0;
  cursor: pointer;
  &[data-right] {
    padding-right: 8px;
    padding-left: var(--inner-padding);
    left: unset;
    right: 0;
  }
  &[data-disabled='true'] {
    cursor: not-allowed;
  }
`,$=p.Z.div`
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  > img {
    width: 16px;
    height: 16px;
    &[data-disabled='true'] {
      opacity: 0.5;
    }
  }
  ${r.M.tdUp} {
    padding: 8px;
    > img {
      width: 30px;
      height: 30px;
    }
  }
`;var M="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m6 12.813 4-4-4-4'/%3e%3c/svg%3e";const j=({initialViewIndex:e,images:t,onClose:i,alt:n})=>{const[r,o]=(0,a.useState)(e),[l,d]=(0,a.useState)(!1);(0,a.useEffect)((()=>{setTimeout((()=>{d(!0)}),0)}),[]);const p=null===t||void 0===t?void 0:t[r],c=0===r,m=!(null===t||void 0===t?void 0:t.length)||r===(null===t||void 0===t?void 0:t.length)-1;return a.createElement(s.h,null,a.createElement(k,{"data-open":l&&!!p},a.createElement(C,null,a.createElement("img",{src:h,className:"icon-close",onClick:i,alt:"close",loading:"lazy"})),p&&r>=0&&a.createElement(a.Fragment,null,a.createElement(z,null,a.createElement("img",{className:"img-preview",src:p,alt:n,loading:"lazy"}),a.createElement(N,{"data-disabled":c,onClick:()=>!c&&o(r-1)},a.createElement($,null,a.createElement("img",{src:M,style:{transform:"rotate(180deg)"},alt:"left arrow","data-disabled":c,loading:"lazy"}))),a.createElement(N,{"data-right":!0,"data-disabled":m,onClick:()=>!m&&o(r+1)},a.createElement($,null,a.createElement("img",{src:M,alt:"right arrow","data-disabled":m,loading:"lazy"})))))))},Z=(0,g.Z)(p.Z.div`
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  `,"hhgcomp-sensitivemask-inner"),O=p.Z.div``,S=p.Z.div`
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: white;
  cursor: pointer;

  &,
  * {
    // transition: all 300ms;
    transform-origin: bottom left;
  }

  img {
    transition: none;
  }
  .img-preview {
    width: 100%;
  }
  &[data-is-blurred='true'] {
    .img-preview {
      /* Add the blur effect */
      -webkit-filter: blur(24px);
      filter: blur(24px);
    }
  }

  &[data-is-blurred='false'] {
    background: transparent;
    cursor: zoom-in;

    ${Z.classSelector} {
      top: auto;
      right: auto;
      left: 8px;
      bottom: 8px;
      background: rgba(0, 0, 0, 0);
      align-items: flex-end;
      justify-content: flex-start;
    }
  }
`,B=({image:e,showIcon:t=!0})=>{const[i,n]=(0,a.useState)(!0);return a.createElement(S,{"data-is-blurred":i,onClick:e=>i&&e.stopPropagation()},a.createElement("img",{loading:"lazy",className:"img-preview",src:e}),a.createElement(Z,{onClick:e=>{e.stopPropagation(),n(!i)}},t&&a.createElement(O,null,i?a.createElement("svg",{width:"22",height:"20",viewBox:"0 0 22 20",fill:"none"},a.createElement("path",{d:"M1.71 2.54a.996.996 0 0 1 0-1.41c.39-.39 1.03-.39 1.42 0l16.31 16.33a.996.996 0 1 1-1.41 1.41l-2.72-2.72c-1.34.52-2.79.82-4.31.82-5 0-9.27-3.11-11-7.5C.77 7.5 2.06 5.8 3.68 4.51zM16 9.47c0-2.76-2.24-5-5-5-.51 0-1 .1-1.47.24L7.36 2.54c1.15-.37 2.37-.57 3.64-.57 5 0 9.27 3.11 11 7.49-.69 1.76-1.79 3.3-3.18 4.53l-3.06-3.06c.14-.46.24-.95.24-1.46m-5 5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14L8.06 8.9c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07l1.57 1.57c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z",fill:"#fff"})):a.createElement("svg",{width:"23",height:"16",viewBox:"0 0 23 16",fill:"none"},a.createElement("path",{d:"M12 0C5.142 0 1.886 5.879 1.096 7.557c-.132.28-.132.604 0 .884C1.886 10.121 5.142 16 12 16c6.834 0 10.092-5.837 10.896-7.54a1.08 1.08 0 0 0 0-.92C22.092 5.836 18.834 0 12 0m0 3a5 5 0 1 1-.001 10.001 5 5 0 0 1 0-10.001m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6",fill:"#2D87F3"})))))},D=({className:e,images:t=[],style:i,authorName:s,isSensitive:d=!1,alt:p,positionAlert:c="top"})=>{const{data:{env:{isMarryBaby:m}}}=(0,a.useContext)(l.T),{t:g}=(0,o.u)(),h="+ "+((t.length||0)-4),[u,x]=(0,a.useState)(!1),[f,b]=(0,a.useState)(-1),v=t.length>5,k=(0,a.useRef)(!1);return(0,a.useEffect)((()=>()=>{k.current&&(0,r.t)(!1)}),[]),(0,a.useEffect)((()=>{u||f>=0?((0,r.t)(!0),k.current=!0):((0,r.t)(!1),k.current=!1)}),[u,f]),a.createElement(a.Fragment,null,d&&"top"===c&&a.createElement(y,{message:g("sensitiveMask.contentWarningDescription"),icon:a.createElement("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none"},a.createElement("path",{d:"M9 .667A8.336 8.336 0 0 0 .667 9c0 4.6 3.733 8.333 8.333 8.333S17.333 13.6 17.333 9 13.6.667 9 .667m0 9.166A.836.836 0 0 1 8.167 9V5.667c0-.459.375-.834.833-.834s.833.375.833.834V9A.836.836 0 0 1 9 9.833M8.167 11.5v1.667h1.666V11.5z",fill:"#FE921D"}))}),a.createElement(w,{className:e,style:i,"data-image-count":v?5:t.length||0,"data-is-marrybaby":m,"data-cursor-pointer":!d},null===t||void 0===t?void 0:t.slice(0,5).map(((e,t)=>{const i=4===t&&v;return a.createElement("div",{className:"img-wrapper",key:t,onClick:()=>{t>=4&&v?x(!0):b(t)}},d&&a.createElement(B,{image:e,showIcon:!i}),!m&&a.createElement("img",{loading:"lazy",className:"img-preview-blur",src:e,alt:p}),a.createElement("img",{loading:"lazy",className:"img-preview",src:e,alt:p}),i&&a.createElement("div",{className:"img-more-overlay"},a.createElement(n.H,{tag:"h1",as:"h2",color:"white"},h)))}))),u&&a.createElement(E,{authorName:s||"",images:t,onClose:()=>x(!1),onOpenSingleView:b,alt:p}),f>=0&&a.createElement(j,{images:t,initialViewIndex:f,onClose:()=>b(-1),alt:p}),d&&"bottom"===c&&a.createElement(y,{message:g("sensitiveMask.contentWarningDescription.community"),className:"noti-bottom",icon:a.createElement("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none"},a.createElement("path",{d:"M9 .667A8.336 8.336 0 0 0 .667 9c0 4.6 3.733 8.333 8.333 8.333S17.333 13.6 17.333 9 13.6.667 9 .667m0 9.166A.836.836 0 0 1 8.167 9V5.667c0-.459.375-.834.833-.834s.833.375.833.834V9A.836.836 0 0 1 9 9.833M8.167 11.5v1.667h1.666V11.5z",fill:"#FE921D"}))}))}},99025:function(e,t,i){"use strict";i.d(t,{P:function(){return d}});var a=i(67294),n=i(93867),r=i(36308),o=i(10917);const l=n.Z.div`
  position: fixed;
  left: 50%;

  padding: 0 16px 32px;
  background-color: ${o.r.colors.white};
  border-radius: ${o.r.borderRadius};
  box-shadow: 0px 4px 8px ${o.r.colors.gray200};
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;
  visibility: hidden;

  &[data-open='true'] {
    z-index: 400;
    top: 50%;
    opacity: 1;
    visibility: visible;
  }

  &[data-open='false'] {
    top: -50%;
  }

  &[data-type='lead'] {
    width: 332px;
    height: 460px;

    div {
      top: -15px;
      right: -15px;
    }
  }

  &[data-type='form'] {
    width: 496px;
    height: 548px;
    ${r.M.mbDown} {
      width: 340px;
    }
  }

  &[data-type='confirm'] {
    ${r.M.mbDown} {
      width: calc(100% - 32px);
    }
    ${r.M.mbUp} {
      width: 100%;
      max-width: 407px;
    }
  }

  .popup-content {
    position: relative;
    z-index: 111;
    height: 100%;
    padding: 16px;
  }

  .close-button {
    position: absolute;
    top: 16px;
    right: 0;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
`,s=n.Z.div`
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  background: rgba(38, 38, 38, 0.3);

  &[data-open='false'] {
    display: none;
  }
`,d=({type:e="lead",closeIcon:t,isOpen:i=!0,onClose:n,children:r,className:o="",enableAnimation:d=!0,disableClickOutside:p=!1})=>a.createElement(a.Fragment,null,a.createElement(l,{"data-open":i,"data-type":e,"data-animation":d},a.createElement("div",{className:`${o||""} popup-content`},!!t&&a.createElement("div",{className:"close-button",onClick:n},t),r)),a.createElement(s,{"data-open":i,onClick:()=>{!p&&n()}}))},45897:function(e,t,i){"use strict";i.d(t,{P:function(){return C},S:function(){return z},a:function(){return E}});var a=i(67294),n=i(57849),r=i(94044),o=i(83129),l=i(36308),s=i(73935),d=i(47440),p=i(93867),c=i(10917),m=i(58499),g=i(40254),h=i(76623),u=function(e,t){var i={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(i[a]=e[a]);if(null!=e&&"function"===typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)t.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(i[a[n]]=e[a[n]])}return i};var x=e=>{var{size:t=24,color:i=h.SQ,isExpand:n,useCurrentColor:r,isActive:o,activeColor:l=h.SK}=e,s=u(e,["size","color","isExpand","useCurrentColor","isActive","activeColor"]);const d=r?"currentColor":o?l:i,p=Object.assign({width:t,height:t},s);return n?a.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"none"},p),a.createElement("path",{d:"M15.1801 4C14.6212 4 14.3418 4.67561 14.7373 5.07108L16.0864 6.42229L6.42229 16.0864L5.07108 14.7373C4.67561 14.3418 4 14.6212 4 15.1801V19.3718C4 19.7187 4.28026 20 4.62617 20H8.81987C9.37881 20 9.6582 19.3244 9.26272 18.9289L7.91357 17.5777L17.5777 7.91357L18.9289 9.26272C19.3244 9.6582 20 9.37881 20 8.81987V4.62617C20 4.28026 19.7187 4 19.3718 4H15.1801Z",fill:d})):a.createElement("svg",Object.assign({width:t,height:t,viewBox:"0 0 14 14",fill:d},s),a.createElement("path",{d:"M9.64991 0.333008C9.18412 0.333008 8.9513 0.896013 9.28086 1.22558L10.4052 2.35159L2.35171 10.405L1.2257 9.28074C0.896135 8.95118 0.33313 9.184 0.33313 9.64979V13.1428C0.33313 13.432 0.566681 13.6663 0.854939 13.6663H4.34969C4.81547 13.6663 5.04829 13.1033 4.71873 12.7738L3.59444 11.6478L11.6479 3.59432L12.7739 4.71861C13.1035 5.04817 13.6665 4.81535 13.6665 4.34957V0.854817C13.6665 0.566559 13.4321 0.333008 13.1429 0.333008H9.64991Z"}))},f=i(99025),b=i(49738),w=i(26191);const v=p.Z.div`
  [data-type='confirm'] {
    max-width: 468px;
    /* height: 486px; */
    padding: 0;

    .popup-content {
      display: flex;
      flex-direction: column;
      padding: 0;

      .close-button {
        top: 16px;
        right: 16px;
        width: 24px;
        height: 24px;
        z-index: 5;
      }

      .header {
        display: flex;
        height: 56px;
        align-items: center;
        padding: 16px 56px 16px 32px;
        border-bottom: 1px solid ${c.r.colors.neutral100};
        font-weight: 900;
        width: 100%;
        justify-content: space-between;
      }

      .content {
        overflow: auto;
        flex: 1;
        .topic-list-wrapper {
          padding: 1rem;
        }
      }
    }
  }

  > div&[data-open='true'] {
    z-index: 250;
    &:last-child {
      z-index: 200;
    }
  }

  ${e=>e.isExpand&&"\n      & > div[data-open] {\n        width: 100%;\n        height: 100%;\n        max-width: none;\n        max-height: none;\n      }\n    "}

  ${e=>e.hasFullscreen&&"\n      & > div[data-open] {\n        transition: all 0.5s ease-in-out, width 0s, height 0s;\n      }\n    "}
`,y=p.Z.div`
  cursor: pointer;
  display: flex;
  align-items: center;
`,E=({className:e,style:t,closeIcon:i,heading:n="",children:o,isOpen:l=!1,hasFullscreen:s=!1,disableClickOutside:d=!1,initExpand:p=!1,onExpandChange:c,onClose:m=(()=>null)})=>{const[g,h]=(0,a.useState)(p);return a.createElement(v,{className:e,style:t,isExpand:g,hasFullscreen:s},a.createElement(f.P,{type:"confirm",onClose:m,isOpen:l,closeIcon:i||a.createElement("img",{src:b.C,loading:"lazy"}),enableAnimation:!s,disableClickOutside:d},a.createElement("div",{className:"header"},a.createElement(r.H,{tag:"h5"},n),s&&a.createElement(y,{onClick:()=>{null===c||void 0===c||c(),h(!g)}},a.createElement(x,{size:14,isExpand:g}))),a.createElement("div",{className:"content"},"function"===typeof o?o(g):o)))};const k=p.Z.div`
  [data-type='confirm'] {
    width: min(360px, 100%);
    height: auto;
    &[data-open='false'] {
      top: calc(-100% - 500px);
    }
  }
  z-index: 600;

  .header {
    display: none !important;
  }

  .confirm-dialog {
    position: relative;
    overflow: auto;
    width: 100%;
    padding-top: 44px;
    background: #fff;
    border-radius: ${c.r.borderRadius};

    .confirm-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 16px 16px;
      text-align: center;

      .title {
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 32px;
        word-break: break-word;
        overflow-wrap: break-word;
      }

      .desc {
        margin-bottom: 24px;
        color: ${c.r.colors.gray500};
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
      }

      .btn-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        button {
          margin: 0 4px 0.5rem;
        }
      }
    }
  }
  .thumbnail-container {
    width: 80px;
    height: 80px;
    margin-bottom: 32px;
    .thumbnail {
      width: 100%;
      height: 100%;
    }
    &.is-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e0e9fc;
      border-radius: 1rem;
      .thumbnail {
        width: 40px;
        height: 40px;
      }
    }
  }
  &[data-is-marrybaby='true'] {
    .popup-frame {
      > div:first-child {
        overflow: hidden;
        border-radius: 1rem;
        &[data-open='true'] {
          ${l.M.mbDown} {
            top: 100%;
            transform: translate(-50%, -100%);
            max-width: unset;
            width: 100%;
            background: unset;
            overflow: unset;
          }
        }
      }
      .popup-content {
        .close-button {
          ${l.M.mbDown} {
            display: none;
          }
        }
        .confirm-dialog {
          ${l.M.mbDown} {
            background: unset;
            position: relative;
            overflow-x: hidden;
            &::before {
              content: '';
              width: 200%;
              background: #fff;
              position: absolute;
              left: 50%;
              top: 0;
              transform: translateX(-50%);
              z-index: -1;
              height: 100%;
              border-top-left-radius: 100%;
              border-top-right-radius: 100%;
            }
          }
          .confirm-content {
            padding: 0 40px 40px;
            ${l.M.mbDown} {
              padding-left: 1.5rem;
              padding-right: 1.5rem;
            }
            .btn-group {
              width: 100%;
              justify-content: space-between;
              button {
                flex: 1;
                margin: 0;
                &:first-child {
                  margin-right: 0.5rem;
                }
              }
            }
          }
        }
      }
      .thumbnail-container {
        ${l.M.mbDown} {
          display: none;
        }
        &.is-icon {
          background: #ffeaf1;
          border-radius: 24px;
        }
        &.is-mobile {
          position: absolute;
          top: 0;
          left: 50%;
          display: none;
          width: 48px;
          height: 48px;
          transform: translate(-50%, -50%);
          &.is-icon {
            border-radius: 1rem;
            .thumbnail {
              width: 24px;
              height: 24px;
            }
          }
          ${l.M.mbDown} {
            display: flex;
          }
        }
      }
    }
  }
`,C=({className:e,isMarryBaby:t,style:i,title:p,description:c,acceptText:m,cancelText:g,onAccept:h,onCancel:u,thumbnail:x,isThumbnailIcon:f,onClose:b,acceptBtnTracking:w,acceptBtnProps:v,cancelBtnProps:y})=>{const{data:{env:{isMarryBaby:C}}}=(0,a.useContext)(d.T),z="boolean"===typeof t?t:C,[N,$]=(0,a.useState)(!1);return(0,a.useEffect)((()=>((0,l.t)(!0),setTimeout((()=>$(!0)),0),()=>(0,l.t)(!1))),[]),"undefined"===typeof window?null:s.createPortal(a.createElement(k,{"data-is-marrybaby":z,className:e,style:i,"data-open":N},a.createElement(E,{className:"popup-frame",isOpen:N,onClose:b},a.createElement("div",{className:"confirm-dialog",onClick:e=>e.stopPropagation()},a.createElement("div",{className:"confirm-content"},x&&a.createElement("div",{className:"thumbnail-container "+(f?"is-icon":"")},a.createElement("img",{className:"thumbnail",src:x,loading:"lazy"})),a.createElement(r.H,{className:"title",tag:"h2"},p),a.createElement(o.T,{className:"desc",size:"lg"},c),a.createElement("div",{className:"btn-group"},a.createElement(n.B,Object.assign({theme:z?"marryBaby":"helloSites",size:"md",color:"tertiary",onClick:()=>{null===h||void 0===h||h(),null===b||void 0===b||b()}},v,w),m),a.createElement(n.B,Object.assign({theme:z?"marryBaby":"helloSites",size:"md",onClick:()=>{null===u||void 0===u||u(),null===b||void 0===b||b()}},y),g)))),z&&x&&a.createElement("div",{className:"thumbnail-container is-mobile "+(f?"is-icon":"")},a.createElement("img",{className:"thumbnail",src:x,loading:"lazy"})))),(0,l.a)())};p.Z.div`
  padding: 1rem;
  border-top: 1px solid #f2f2f2;
  &[data-is-reply='true'] {
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid #e4e8ec;
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .error-text {
    padding: 1rem;
    color: ${c.r.colors.red700};
  }
  .reply-to-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-top: -0.25rem;
    .icon-close-comment {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    a {
      text-decoration: none;
    }
  }
  .input-container {
    display: flex;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      margin-right: 0.5rem;
      &.avatar-wrapper-reply {
        width: 32px;
        height: 32px;
        .avatar {
          width: 32px;
          height: 32px;
        }
      }
    }
    .input-wrapper {
      margin-right: 0.5rem;
      &[data-has-error] {
        .as-input {
          border-color: ${c.r.colors.red700};
        }
      }

      .as-input {
        .textarea {
          width: 100%;
          max-height: 225px;
          min-height: 75px;
          .ql-toolbar {
            padding: 0;
          }
          .ql-editor {
            padding-left: 0;
            padding-right: 0;
          }
          .quill {
            height: 0;
          }
        }
        width: 100%;
        padding: 12px 16px;
        border: solid 1px ${c.r.colors.gray200};
        border-radius: ${c.r.borderRadius};

        &:active,
        &:focus {
          border-color: ${c.r.colors.primaryBase};
          box-shadow: 0px 0px 2px 2px ${c.r.colors.primary200};
        }

        &:disabled {
          background-color: ${c.r.colors.gray100};
          cursor: not-allowed;
        }

        span {
          &[data-error='true'] {
            color: red;
            text-decoration: underline;
          }
        }
      }

      &[data-has-action-icon] {
        .as-input {
          padding: 12px 48px 12px 16px;
        }
      }
      &[data-has-display-icon] {
        .as-input {
          padding: 12px 16px 12px 48px;
        }
      }

      &[data-has-action-icon][data-has-display-icon] {
        .as-input {
          padding: 12px 48px;
        }
      }

      &[data-size='lg'] {
        .as-input {
          font-size: 16px;
          font-weight: ${c.r.sizes.fwRegular};
          ${l.M.mbDown} {
            font-size: 22px;
            line-height: 1.2;
          }

          ${l.M.mbUp} {
            font-size: 26px;
            line-height: 1.2;
          }
        }
      }
      &[data-size='md'] {
        .as-input {
          font-weight: ${c.r.sizes.fwRegular};
          line-height: 22px;
          ${l.M.mbDown} {
            font-size: 14px;
            line-height: 1.2;
          }

          ${l.M.mbUp} {
            font-size: 16px;
            line-height: 1.2;
          }
        }
      }
      &[data-size='sm'] {
        .as-input {
          font-weight: ${c.r.sizes.fwRegular};
          line-height: 20px;
          ${l.M.mbDown} {
            font-size: 13px;
            line-height: 1.5;
          }

          ${l.M.mbUp} {
            font-size: 13px;
            line-height: 1.5;
          }
        }
      }
    }
    .images-input-label {
      height: 100%;
      cursor: pointer;
      .icon-images-input {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
    }
    .send-button {
      display: flex;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      &.send-button-post {
        background: ${c.r.colors.neutral100};
        border-radius: 50%;
      }
      .icon-enter {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
      &[data-is-loading='true'] {
        > div {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .preview-images-container {
    margin-top: 1rem;
    .image-src-wrapper {
      position: relative;
      width: 100%;
      padding-top: 66.67%;
      &:not(:last-child) {
        margin-bottom: 1rem;
      }
      .preview-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .icon-close-circle {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
`,(0,a.createContext)({});const z=({trackingCategory:e,className:t,style:i,url:n,text:r,onClose:o})=>{const{data:{env:{isMarryBaby:s}}}=(0,a.useContext)(d.T),{t:p}=(0,m.u)(),[c,h]=(0,a.useState)(!1);return(0,a.useEffect)((()=>((0,l.t)(!0),setTimeout((()=>h(!0)),0),()=>(0,l.t)(!1))),[]),a.createElement(g.h,null,a.createElement(N,{"data-is-marrybaby":s,className:t,style:i},a.createElement(E,{className:"share-popup",isOpen:c,onClose:o,heading:p("bottomBar.share")},c&&a.createElement(w.r,{trackingCategory:e,shareUrl:n||("undefined"!==typeof window?window.location.href:""),title:r}))))},N=p.Z.div`
  .share-popup {
    > div:first-child {
      height: unset;
    }
  }
  .custom-share__header {
    display: flex;
    flex-wrap: no-wrap;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid ${c.r.colors.neutral100};
    margin-bottom: 16px;

    .custom-share__header-image {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .custom-share__header-info {
      flex: 1;
      padding: 0 8px;
      word-break: break-word;

      [data-tag='h4'] {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
      }

      [data-size='md'] {
        color: #a5a5a5;
        font-size: 14px;
        line-height: 14px;
      }
    }
  }

  &[data-is-marrybaby='true'] {
    .share-popup {
      > div:first-child {
        overflow: hidden;
        border-radius: 1rem;
        &[data-open='true'] {
          ${l.M.mbDown} {
            max-width: unset;
            width: 100%;
            top: 100%;
            transform: translate(-50%, -100%);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }
      .close-button {
        display: block;
      }
      .popup-content {
        .header {
          display: block;
          padding: 1rem;
          background-color: rgb(243, 243, 243);
        }
        .content {
          padding-bottom: 1rem;
        }
      }
      .share-mb-text {
        margin: 1rem 1rem 0.5rem;
      }
    }
  }
`;p.Z.div`
  padding: 0 8px;
  margin-top: 18px;

  .report-list {
    margin-bottom: 18px;

    .report-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-weight: 600;

      & > img {
        width: 12px;
        height: 12px;
        margin-right: 8px;
      }

      .__label {
        font-size: 14px;
      }
    }
  }

  .report-submit {
    width: 100%;
  }
  &[data-is-marrybaby='true'] {
    padding: 0 1rem 1rem;
  }
`}}]);