npm - @hhgtech/hhg-components - Versions diffs - 1.18.46 → 1.18.48 - Mend

@hhgtech/hhg-components 1.18.46 → 1.18.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2623) hide show

package/build/esm/together/components/molecules/inputCommentBar/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import{MediaQueries as e}from"../../../../misc/utils.js";import i from"styled-components";var t,r=i.div(t\|\|(t=n(["\n padding: 1rem;\n border-top: 1px solid #f2f2f2;\n &[data-is-reply='true'] {\n padding-right: 0;\n padding-left: 0;\n border-top: 1px solid #e4e8ec;\n margin-right: 1rem;\n margin-left: 1rem;\n }\n .error-text {\n padding: 1rem;\n color: ",";\n }\n .reply-to-container {\n display: flex;\n justify-content: space-between;\n padding-bottom: 0.75rem;\n margin-top: -0.25rem;\n .icon-close-comment {\n width: 16px;\n height: 16px;\n cursor: pointer;\n }\n a {\n text-decoration: none;\n }\n }\n .input-container {\n display: flex;\n align-items: center;\n .avatar-wrapper {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n margin-right: 0.5rem;\n &.avatar-wrapper-reply {\n width: 32px;\n height: 32px;\n .avatar {\n width: 32px;\n height: 32px;\n }\n }\n }\n .input-wrapper {\n margin-right: 0.5rem;\n &[data-has-error] {\n .as-input {\n border-color: ",";\n }\n }\n\n .as-input {\n .textarea {\n width: 100%;\n max-height: 225px;\n min-height: 75px;\n .ql-toolbar {\n padding: 0;\n }\n .ql-editor {\n padding-left: 0;\n padding-right: 0;\n }\n .quill {\n height: 0;\n }\n }\n width: 100%;\n padding: 12px 16px;\n border: solid 1px ",";\n border-radius: 6px;\n\n &:active,\n &:focus {\n border-color: ",";\n box-shadow: 0px 0px 2px 2px\n ",";\n }\n\n &:disabled {\n background-color: ",";\n cursor: not-allowed;\n }\n\n span {\n &[data-error='true'] {\n color: red;\n text-decoration: underline;\n }\n }\n }\n\n &[data-has-action-icon] {\n .as-input {\n padding: 12px 48px 12px 16px;\n }\n }\n &[data-has-display-icon] {\n .as-input {\n padding: 12px 16px 12px 48px;\n }\n }\n\n &[data-has-action-icon][data-has-display-icon] {\n .as-input {\n padding: 12px 48px;\n }\n }\n\n &[data-size='lg'] {\n .as-input {\n font-size: 16px;\n font-weight: ",";\n "," {\n font-size: 22px;\n line-height: 1.2;\n }\n\n "," {\n font-size: 26px;\n line-height: 1.2;\n }\n }\n }\n &[data-size='md'] {\n .as-input {\n font-weight: ",";\n line-height: 22px;\n "," {\n font-size: 14px;\n line-height: 1.2;\n }\n\n "," {\n font-size: 16px;\n line-height: 1.2;\n }\n }\n }\n &[data-size='sm'] {\n .as-input {\n font-weight: ",";\n line-height: 20px;\n "," {\n font-size: 13px;\n line-height: 1.5;\n }\n\n "," {\n font-size: 13px;\n line-height: 1.5;\n }\n }\n }\n }\n .images-input-label {\n height: 100%;\n cursor: pointer;\n .icon-images-input {\n width: 24px;\n height: 24px;\n vertical-align: middle;\n }\n }\n .send-button {\n display: flex;\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n &.send-button-post {\n background: ",";\n border-radius: 50%;\n }\n .icon-enter {\n width: 20px;\n height: 20px;\n vertical-align: middle;\n }\n &[data-is-loading='true'] {\n > div {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n }\n .preview-images-container {\n margin-top: 1rem;\n .image-src-wrapper {\n position: relative;\n width: 100%;\n padding-top: 66.67%;\n &:not(:last-child) {\n margin-bottom: 1rem;\n }\n .preview-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .icon-close-circle {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n }\n }\n"],["\n padding: 1rem;\n border-top: 1px solid #f2f2f2;\n &[data-is-reply='true'] {\n padding-right: 0;\n padding-left: 0;\n border-top: 1px solid #e4e8ec;\n margin-right: 1rem;\n margin-left: 1rem;\n }\n .error-text {\n padding: 1rem;\n color: ",";\n }\n .reply-to-container {\n display: flex;\n justify-content: space-between;\n padding-bottom: 0.75rem;\n margin-top: -0.25rem;\n .icon-close-comment {\n width: 16px;\n height: 16px;\n cursor: pointer;\n }\n a {\n text-decoration: none;\n }\n }\n .input-container {\n display: flex;\n align-items: center;\n .avatar-wrapper {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n margin-right: 0.5rem;\n &.avatar-wrapper-reply {\n width: 32px;\n height: 32px;\n .avatar {\n width: 32px;\n height: 32px;\n }\n }\n }\n .input-wrapper {\n margin-right: 0.5rem;\n &[data-has-error] {\n .as-input {\n border-color: ",";\n }\n }\n\n .as-input {\n .textarea {\n width: 100%;\n max-height: 225px;\n min-height: 75px;\n .ql-toolbar {\n padding: 0;\n }\n .ql-editor {\n padding-left: 0;\n padding-right: 0;\n }\n .quill {\n height: 0;\n }\n }\n width: 100%;\n padding: 12px 16px;\n border: solid 1px ",";\n border-radius: 6px;\n\n &:active,\n &:focus {\n border-color: ",";\n box-shadow: 0px 0px 2px 2px\n ",";\n }\n\n &:disabled {\n background-color: ",";\n cursor: not-allowed;\n }\n\n span {\n &[data-error='true'] {\n color: red;\n text-decoration: underline;\n }\n }\n }\n\n &[data-has-action-icon] {\n .as-input {\n padding: 12px 48px 12px 16px;\n }\n }\n &[data-has-display-icon] {\n .as-input {\n padding: 12px 16px 12px 48px;\n }\n }\n\n &[data-has-action-icon][data-has-display-icon] {\n .as-input {\n padding: 12px 48px;\n }\n }\n\n &[data-size='lg'] {\n .as-input {\n font-size: 16px;\n font-weight: ",";\n "," {\n font-size: 22px;\n line-height: 1.2;\n }\n\n "," {\n font-size: 26px;\n line-height: 1.2;\n }\n }\n }\n &[data-size='md'] {\n .as-input {\n font-weight: ",";\n line-height: 22px;\n "," {\n font-size: 14px;\n line-height: 1.2;\n }\n\n "," {\n font-size: 16px;\n line-height: 1.2;\n }\n }\n }\n &[data-size='sm'] {\n .as-input {\n font-weight: ",";\n line-height: 20px;\n "," {\n font-size: 13px;\n line-height: 1.5;\n }\n\n "," {\n font-size: 13px;\n line-height: 1.5;\n }\n }\n }\n }\n .images-input-label {\n height: 100%;\n cursor: pointer;\n .icon-images-input {\n width: 24px;\n height: 24px;\n vertical-align: middle;\n }\n }\n .send-button {\n display: flex;\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n &.send-button-post {\n background: ",";\n border-radius: 50%;\n }\n .icon-enter {\n width: 20px;\n height: 20px;\n vertical-align: middle;\n }\n &[data-is-loading='true'] {\n > div {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n }\n .preview-images-container {\n margin-top: 1rem;\n .image-src-wrapper {\n position: relative;\n width: 100%;\n padding-top: 66.67%;\n &:not(:last-child) {\n margin-bottom: 1rem;\n }\n .preview-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .icon-close-circle {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n }\n }\n"])),(function(n){return n.theme.colors.red700}),(function(n){return n.theme.colors.red700}),(function(n){return n.theme.colors.gray200}),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.blue200}),(function(n){return n.theme.colors.gray100}),(function(n){return n.theme.sizes.fwRegular}),e.mbDown,e.mbUp,(function(n){return n.theme.sizes.fwRegular}),e.mbDown,e.mbUp,(function(n){return n.theme.sizes.fwRegular}),e.mbDown,e.mbUp,(function(n){return n.theme.colors.neutral100}));export{r as StyledInputCommentBar};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/inputCommentBar/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/inputCommentBar/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledInputCommentBar = styled.div`\n padding: 1rem;\n border-top: 1px solid #f2f2f2;\n &[data-is-reply='true'] {\n padding-right: 0;\n padding-left: 0;\n border-top: 1px solid #e4e8ec;\n margin-right: 1rem;\n margin-left: 1rem;\n }\n .error-text {\n padding: 1rem;\n color: ${(props: ThemeProps) => props.theme.colors.red700};\n }\n .reply-to-container {\n display: flex;\n justify-content: space-between;\n padding-bottom: 0.75rem;\n margin-top: -0.25rem;\n .icon-close-comment {\n width: 16px;\n height: 16px;\n cursor: pointer;\n }\n a {\n text-decoration: none;\n }\n }\n .input-container {\n display: flex;\n align-items: center;\n .avatar-wrapper {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n margin-right: 0.5rem;\n &.avatar-wrapper-reply {\n width: 32px;\n height: 32px;\n .avatar {\n width: 32px;\n height: 32px;\n }\n }\n }\n .input-wrapper {\n margin-right: 0.5rem;\n &[data-has-error] {\n .as-input {\n border-color: ${(props: ThemeProps) => props.theme.colors.red700};\n }\n }\n\n .as-input {\n .textarea {\n width: 100%;\n max-height: 225px;\n min-height: 75px;\n .ql-toolbar {\n padding: 0;\n }\n .ql-editor {\n padding-left: 0;\n padding-right: 0;\n }\n .quill {\n height: 0;\n }\n }\n width: 100%;\n padding: 12px 16px;\n border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray200};\n border-radius: 6px;\n\n &:active,\n &:focus {\n border-color: ${(props: ThemeProps) =>\n props.theme.colors.primaryBase};\n box-shadow: 0px 0px 2px 2px\n ${(props: ThemeProps) => props.theme.colors.blue200};\n }\n\n &:disabled {\n background-color: ${(props: ThemeProps) =>\n props.theme.colors.gray100};\n cursor: not-allowed;\n }\n\n span {\n &[data-error='true'] {\n color: red;\n text-decoration: underline;\n }\n }\n }\n\n &[data-has-action-icon] {\n .as-input {\n padding: 12px 48px 12px 16px;\n }\n }\n &[data-has-display-icon] {\n .as-input {\n padding: 12px 16px 12px 48px;\n }\n }\n\n &[data-has-action-icon][data-has-display-icon] {\n .as-input {\n padding: 12px 48px;\n }\n }\n\n &[data-size='lg'] {\n .as-input {\n font-size: 16px;\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};\n ${MediaQueries.mbDown} {\n font-size: 22px;\n line-height: 1.2;\n }\n\n ${MediaQueries.mbUp} {\n font-size: 26px;\n line-height: 1.2;\n }\n }\n }\n &[data-size='md'] {\n .as-input {\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};\n line-height: 22px;\n ${MediaQueries.mbDown} {\n font-size: 14px;\n line-height: 1.2;\n }\n\n ${MediaQueries.mbUp} {\n font-size: 16px;\n line-height: 1.2;\n }\n }\n }\n &[data-size='sm'] {\n .as-input {\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};\n line-height: 20px;\n ${MediaQueries.mbDown} {\n font-size: 13px;\n line-height: 1.5;\n }\n\n ${MediaQueries.mbUp} {\n font-size: 13px;\n line-height: 1.5;\n }\n }\n }\n }\n .images-input-label {\n height: 100%;\n cursor: pointer;\n .icon-images-input {\n width: 24px;\n height: 24px;\n vertical-align: middle;\n }\n }\n .send-button {\n display: flex;\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n &.send-button-post {\n background: ${(props: ThemeProps) => props.theme.colors.neutral100};\n border-radius: 50%;\n }\n .icon-enter {\n width: 20px;\n height: 20px;\n vertical-align: middle;\n }\n &[data-is-loading='true'] {\n > div {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n }\n .preview-images-container {\n margin-top: 1rem;\n .image-src-wrapper {\n position: relative;\n width: 100%;\n padding-top: 66.67%;\n &:not(:last-child) {\n margin-bottom: 1rem;\n }\n .preview-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .icon-close-circle {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n cursor: pointer;\n }\n }\n }\n`\n"],"names":["StyledInputCommentBar","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","red700","gray200","primaryBase","blue200","gray100","sizes","fwRegular","MediaQueries","mbDown","mbUp","neutral100"],"mappings":"6KAIa,MAAAA,EAAwBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,6QAAA,oxBAAA,ycAAA,mGAAA,yDAAA,qEAAA,wpBAAA,gBAAA,6FAAA,4KAAA,8CAAA,6FAAA,4KAAA,8CAAA,6FAAA,4iBAAA,k5BAAA,CAAA,6QAYc,oxBAqCa,ycAsBG,mGAMnC,yDAEqB,qEAKzB,wpBAgCqC,gBAC5C,6FAKF,4KAQ8C,8CAE5C,6FAKF,4KAQ8C,8CAE5C,6FAKF,4iBA0B6C,q5BAtK7D,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,UAqC7B,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,UAsBxC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAK5C,SAACJ,GACf,OAAAA,EAAMC,MAAMC,OAAOG,eAEjB,SAACL,GAAsB,OAAAA,EAAMC,MAAMC,OAAOI,WAI1B,SAACN,GACnB,OAAAA,EAAMC,MAAMC,OAAOK,WAgCN,SAACP,GAAsB,OAAAA,EAAMC,MAAMO,MAAMC,YACtDC,EAAaC,OAKbD,EAAaE,MAQA,SAACZ,GAAsB,OAAAA,EAAMC,MAAMO,MAAMC,YAEtDC,EAAaC,OAKbD,EAAaE,MAQA,SAACZ,GAAsB,OAAAA,EAAMC,MAAMO,MAAMC,YAEtDC,EAAaC,OAKbD,EAAaE,MA0BH,SAACZ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOW"}

package/build/esm/together/components/molecules/inputCommentBar/mainInputTriggerContext.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{createContext as r}from"react";var o=r({});export{o as MainInputTriggerContext};
2	+ //# sourceMappingURL=mainInputTriggerContext.js.map

package/build/esm/together/components/molecules/inputCommentBar/mainInputTriggerContext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mainInputTriggerContext.js","sources":["../../../../../../src/together/components/molecules/inputCommentBar/mainInputTriggerContext.tsx"],"sourcesContent":["import React, { createContext, ReactNode, useState } from 'react'\n\nexport type Context = {\n trigger?: boolean\n onTrigger?: () => void\n}\n\nexport const MainInputTriggerContext = createContext({} as Context)\n\nexport const MainInputTriggerContextProvider = ({\n children,\n}: {\n children?: ReactNode\n}) => {\n const [trigger, setTrigger] = useState(false)\n return (\n <MainInputTriggerContext.Provider\n value={{\n trigger,\n onTrigger: () => setTrigger((v) => !v),\n }}\n >\n {children}\n </MainInputTriggerContext.Provider>\n )\n}\n"],"names":["MainInputTriggerContext","createContext"],"mappings":"0CAOaA,EAA0BC,EAAc"}

package/build/esm/together/components/molecules/popupDanger/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useContext as t,useState as a,useEffect as n}from"react";import{Button as o}from"../../../../components/atoms/button/index.js";import{Heading as m}from"../../../../components/atoms/heading/index.js";import{Text as r}from"../../../../components/atoms/text/index.js";import{toggleNoScroll as c}from"../../../../misc/utils.js";import*as i from"react-dom";import{TogetherComponentGlobalContext as s}from"../../../togetherComponentGlobalContext.js";import{PopupFrame as l}from"../popupFrame/index.js";import{StyledPopupDanger as p}from"./index.styled.js";var u=function(u){var d=u.className,f=u.isMarryBaby,b=u.style,y=u.title,h=u.description,E=u.acceptText,N=u.cancelText,x=u.onAccept,g=u.thumbnail,v=u.isThumbnailIcon,j=u.onClose,C=t(s).data.env.isMarryBaby,B="boolean"==typeof f?f:C,T=a(!1),k=T[0],z=T[1];return n((function(){return c(!0),setTimeout((function(){return z(!0)}),0),function(){return c(!1)}}),[]),i.createPortal(e.createElement(p,{"data-is-marrybaby":B,className:d,style:b,"data-open":k},e.createElement(l,{className:"popup-frame",isOpen:k,onClose:j},e.createElement("div",{className:"confirm-dialog",onClick:function(e){return e.stopPropagation()}},e.createElement("div",{className:"confirm-content"},g&&e.createElement("div",{className:"thumbnail-container ".concat(v?"is-icon":"")},e.createElement("img",{className:"thumbnail",src:g})),e.createElement(m,{className:"title",tag:"h2"},y),e.createElement(r,{className:"desc",size:"lg"},h),e.createElement("div",{className:"btn-group"},e.createElement(o,{theme:B?"marryBaby":"helloSites",size:"md",color:"secondary",onClick:function(){null==x\|\|x(),null==j\|\|j()}},E),e.createElement(o,{theme:B?"marryBaby":"helloSites",size:"md",onClick:j},N)))),B&&g&&e.createElement("div",{className:"thumbnail-container is-mobile ".concat(v?"is-icon":"")},e.createElement("img",{className:"thumbnail",src:g})))),document.body)};export{u as PopupDanger};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/popupDanger/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/popupDanger/index.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect, useState } from 'react'\n\nimport { Button } from 'components/atoms/button'\nimport { Heading } from 'components/atoms/heading'\nimport { Text } from 'components/atoms/text'\nimport { toggleNoScroll } from 'misc/utils'\nimport * as ReactDOM from 'react-dom'\nimport { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'\n\nimport { PopupFrame } from '../popupFrame/index'\nimport { StyledPopupDanger } from './index.styled'\n\nexport type Props = {\n className?: string\n style?: CSSProperties\n isMarryBaby?: boolean\n title?: string\n description?: string\n acceptText?: string\n cancelText?: string\n onAccept?: () => void\n thumbnail?: string\n isThumbnailIcon?: boolean\n onClose?: () => void\n}\n\nexport const PopupDanger = ({\n className,\n isMarryBaby: isMarryBabyProp,\n style,\n title,\n description,\n acceptText,\n cancelText,\n onAccept,\n thumbnail,\n isThumbnailIcon,\n onClose,\n}: Props) => {\n const {\n data: {\n env: { isMarryBaby: isMarryBabyContext },\n },\n } = useContext(TogetherComponentGlobalContext)\n const isMarryBaby =\n typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext\n const [isOpen, setIsOpen] = useState(false)\n useEffect(() => {\n toggleNoScroll(true)\n setTimeout(() => setIsOpen(true), 0)\n return () => toggleNoScroll(false)\n }, [])\n return ReactDOM.createPortal(\n <StyledPopupDanger\n data-is-marrybaby={isMarryBaby}\n className={className}\n style={style}\n data-open={isOpen}\n >\n <PopupFrame className=\"popup-frame\" isOpen={isOpen} onClose={onClose}>\n <div className=\"confirm-dialog\" onClick={(e) => e.stopPropagation()}>\n <div className=\"confirm-content\">\n {thumbnail && (\n <div\n className={`thumbnail-container ${\n isThumbnailIcon ? 'is-icon' : ''\n }`}\n >\n <img className=\"thumbnail\" src={thumbnail} />\n </div>\n )}\n <Heading className=\"title\" tag=\"h2\">\n {title}\n </Heading>\n <Text className=\"desc\" size=\"lg\">\n {description}\n </Text>\n <div className=\"btn-group\">\n <Button\n theme={isMarryBaby ? 'marryBaby' : 'helloSites'}\n size=\"md\"\n color=\"secondary\"\n onClick={() => {\n onAccept?.()\n onClose?.()\n }}\n >\n {acceptText}\n </Button>\n <Button\n theme={isMarryBaby ? 'marryBaby' : 'helloSites'}\n size=\"md\"\n onClick={onClose}\n >\n {cancelText}\n </Button>\n </div>\n </div>\n </div>\n {isMarryBaby && thumbnail && (\n <div\n className={`thumbnail-container is-mobile ${\n isThumbnailIcon ? 'is-icon' : ''\n }`}\n >\n <img className=\"thumbnail\" src={thumbnail} />\n </div>\n )}\n </PopupFrame>\n </StyledPopupDanger>,\n document.body,\n )\n}\n"],"names":["PopupDanger","_a","className","isMarryBabyProp","isMarryBaby","style","title","description","acceptText","cancelText","onAccept","thumbnail","isThumbnailIcon","onClose","isMarryBabyContext","useContext","TogetherComponentGlobalContext","_b","useState","isOpen","setIsOpen","useEffect","toggleNoScroll","setTimeout","ReactDOM","createPortal","React","createElement","StyledPopupDanger","PopupFrame","onClick","e","stopPropagation","concat","src","Heading","tag","Text","size","Button","theme","color","document","body"],"mappings":"gjBA0BO,IAAMA,EAAc,SAACC,GAC1B,IAAAC,EAASD,EAAAC,UACIC,EAAeF,EAAAG,YAC5BC,EAAKJ,EAAAI,MACLC,EAAKL,EAAAK,MACLC,gBACAC,EAAUP,EAAAO,WACVC,EAAUR,EAAAQ,WACVC,EAAQT,EAAAS,SACRC,EAASV,EAAAU,UACTC,EAAeX,EAAAW,gBACfC,EAAOZ,EAAAY,QAIiBC,EAEpBC,EAAWC,wBACTZ,EACuB,kBAApBD,EAAgCA,EAAkBW,EACrDG,EAAsBC,GAAS,GAA9BC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAMxB,OALAI,GAAU,WAGR,OAFAC,GAAe,GACfC,YAAW,WAAM,OAAAH,GAAU,KAAO,GAC3B,WAAM,OAAAE,GAAe,MAC3B,IACIE,EAASC,aACdC,EAAAC,cAACC,EACoB,CAAA,oBAAAxB,EACnBF,UAAWA,EACXG,MAAOA,cACIc,GAEXO,EAAAC,cAACE,EAAU,CAAC3B,UAAU,cAAciB,OAAQA,EAAQN,QAASA,GAC3Da,EAAAC,cAAA,MAAA,CAAKzB,UAAU,iBAAiB4B,QAAS,SAACC,GAAM,OAAAA,EAAEC,oBAChDN,EAAKC,cAAA,MAAA,CAAAzB,UAAU,mBACZS,GACCe,EACEC,cAAA,MAAA,CAAAzB,UAAW,uBACT+B,OAAArB,EAAkB,UAAY,KAGhCc,EAAKC,cAAA,MAAA,CAAAzB,UAAU,YAAYgC,IAAKvB,KAGpCe,EAACC,cAAAQ,EAAQ,CAAAjC,UAAU,QAAQkC,IAAI,MAC5B9B,GAEHoB,EAACC,cAAAU,EAAK,CAAAnC,UAAU,OAAOoC,KAAK,MACzB/B,GAEHmB,EAAKC,cAAA,MAAA,CAAAzB,UAAU,aACbwB,EAACC,cAAAY,GACCC,MAAOpC,EAAc,YAAc,aACnCkC,KAAK,KACLG,MAAM,YACNX,QAAS,WACPpB,SAAAA,IACAG,SAAAA,MAGDL,GAEHkB,EAACC,cAAAY,EACC,CAAAC,MAAOpC,EAAc,YAAc,aACnCkC,KAAK,KACLR,QAASjB,GAERJ,MAKRL,GAAeO,GACde,EAAAC,cAAA,MAAA,CACEzB,UAAW,iCAAA+B,OACTrB,EAAkB,UAAY,KAGhCc,EAAAC,cAAA,MAAA,CAAKzB,UAAU,YAAYgC,IAAKvB,OAKxC+B,SAASC"}

package/build/esm/together/components/molecules/popupDanger/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import{MediaQueries as t}from"../../../../misc/utils.js";import e from"styled-components";var i,o=e.div(i\|\|(i=n(["\n [data-type='confirm'] {\n width: min(360px, 100%);\n height: auto;\n &[data-open='false'] {\n top: calc(-100% - 500px);\n }\n }\n\n .header {\n display: none !important;\n }\n\n .confirm-dialog {\n position: relative;\n overflow: auto;\n width: 100%;\n padding-top: 44px;\n background: #fff;\n border-radius: 6px;\n\n .confirm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0 16px 16px;\n text-align: center;\n\n .title {\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 32px;\n word-break: break-word;\n overflow-wrap: break-word;\n }\n\n .desc {\n margin-bottom: 24px;\n color: ",";\n font-size: 18px;\n line-height: 24px;\n text-align: center;\n word-break: break-word;\n overflow-wrap: break-word;\n }\n\n .btn-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n\n button {\n margin: 0 4px 0.5rem;\n }\n }\n }\n }\n .thumbnail-container {\n width: 80px;\n height: 80px;\n margin-bottom: 32px;\n .thumbnail {\n width: 100%;\n height: 100%;\n }\n &.is-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: #e0e9fc;\n border-radius: 1rem;\n .thumbnail {\n width: 40px;\n height: 40px;\n }\n }\n }\n &[data-is-marrybaby='true'] {\n .popup-frame {\n > div:first-child {\n overflow: hidden;\n border-radius: 1rem;\n &[data-open='true'] {\n "," {\n top: 100%;\n transform: translate(-50%, -100%);\n max-width: unset;\n width: 100%;\n background: unset;\n overflow: unset;\n }\n }\n }\n .popup-content {\n .close-button {\n "," {\n display: none;\n }\n }\n .confirm-dialog {\n "," {\n background: unset;\n position: relative;\n overflow-x: hidden;\n &::before {\n content: '';\n width: 200%;\n background: #fff;\n position: absolute;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n z-index: -1;\n height: 100%;\n border-top-left-radius: 100%;\n border-top-right-radius: 100%;\n }\n }\n .confirm-content {\n padding: 0 40px 40px;\n "," {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n .btn-group {\n width: 100%;\n justify-content: space-between;\n button {\n flex: 1;\n margin: 0;\n &:first-child {\n margin-right: 0.5rem;\n }\n }\n }\n }\n }\n }\n .thumbnail-container {\n "," {\n display: none;\n }\n &.is-icon {\n background: #ffeaf1;\n border-radius: 24px;\n }\n &.is-mobile {\n position: absolute;\n top: 0;\n left: 50%;\n display: none;\n width: 48px;\n height: 48px;\n transform: translate(-50%, -50%);\n &.is-icon {\n border-radius: 1rem;\n .thumbnail {\n width: 24px;\n height: 24px;\n }\n }\n "," {\n display: flex;\n }\n }\n }\n }\n }\n"],["\n [data-type='confirm'] {\n width: min(360px, 100%);\n height: auto;\n &[data-open='false'] {\n top: calc(-100% - 500px);\n }\n }\n\n .header {\n display: none !important;\n }\n\n .confirm-dialog {\n position: relative;\n overflow: auto;\n width: 100%;\n padding-top: 44px;\n background: #fff;\n border-radius: 6px;\n\n .confirm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0 16px 16px;\n text-align: center;\n\n .title {\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 32px;\n word-break: break-word;\n overflow-wrap: break-word;\n }\n\n .desc {\n margin-bottom: 24px;\n color: ",";\n font-size: 18px;\n line-height: 24px;\n text-align: center;\n word-break: break-word;\n overflow-wrap: break-word;\n }\n\n .btn-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n\n button {\n margin: 0 4px 0.5rem;\n }\n }\n }\n }\n .thumbnail-container {\n width: 80px;\n height: 80px;\n margin-bottom: 32px;\n .thumbnail {\n width: 100%;\n height: 100%;\n }\n &.is-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: #e0e9fc;\n border-radius: 1rem;\n .thumbnail {\n width: 40px;\n height: 40px;\n }\n }\n }\n &[data-is-marrybaby='true'] {\n .popup-frame {\n > div:first-child {\n overflow: hidden;\n border-radius: 1rem;\n &[data-open='true'] {\n "," {\n top: 100%;\n transform: translate(-50%, -100%);\n max-width: unset;\n width: 100%;\n background: unset;\n overflow: unset;\n }\n }\n }\n .popup-content {\n .close-button {\n "," {\n display: none;\n }\n }\n .confirm-dialog {\n "," {\n background: unset;\n position: relative;\n overflow-x: hidden;\n &::before {\n content: '';\n width: 200%;\n background: #fff;\n position: absolute;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n z-index: -1;\n height: 100%;\n border-top-left-radius: 100%;\n border-top-right-radius: 100%;\n }\n }\n .confirm-content {\n padding: 0 40px 40px;\n "," {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n .btn-group {\n width: 100%;\n justify-content: space-between;\n button {\n flex: 1;\n margin: 0;\n &:first-child {\n margin-right: 0.5rem;\n }\n }\n }\n }\n }\n }\n .thumbnail-container {\n "," {\n display: none;\n }\n &.is-icon {\n background: #ffeaf1;\n border-radius: 24px;\n }\n &.is-mobile {\n position: absolute;\n top: 0;\n left: 50%;\n display: none;\n width: 48px;\n height: 48px;\n transform: translate(-50%, -50%);\n &.is-icon {\n border-radius: 1rem;\n .thumbnail {\n width: 24px;\n height: 24px;\n }\n }\n "," {\n display: flex;\n }\n }\n }\n }\n }\n"])),(function(n){return n.theme.colors.gray500}),t.mbDown,t.mbDown,t.mbDown,t.mbDown,t.mbDown,t.mbDown);export{o as StyledPopupDanger};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/popupDanger/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/popupDanger/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledPopupDanger = styled.div`\n [data-type='confirm'] {\n width: min(360px, 100%);\n height: auto;\n &[data-open='false'] {\n top: calc(-100% - 500px);\n }\n }\n\n .header {\n display: none !important;\n }\n\n .confirm-dialog {\n position: relative;\n overflow: auto;\n width: 100%;\n padding-top: 44px;\n background: #fff;\n border-radius: 6px;\n\n .confirm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0 16px 16px;\n text-align: center;\n\n .title {\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 32px;\n word-break: break-word;\n overflow-wrap: break-word;\n }\n\n .desc {\n margin-bottom: 24px;\n color: ${(props: ThemeProps) => props.theme.colors.gray500};\n font-size: 18px;\n line-height: 24px;\n text-align: center;\n word-break: break-word;\n overflow-wrap: break-word;\n }\n\n .btn-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n\n button {\n margin: 0 4px 0.5rem;\n }\n }\n }\n }\n .thumbnail-container {\n width: 80px;\n height: 80px;\n margin-bottom: 32px;\n .thumbnail {\n width: 100%;\n height: 100%;\n }\n &.is-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background: #e0e9fc;\n border-radius: 1rem;\n .thumbnail {\n width: 40px;\n height: 40px;\n }\n }\n }\n &[data-is-marrybaby='true'] {\n .popup-frame {\n > div:first-child {\n overflow: hidden;\n border-radius: 1rem;\n &[data-open='true'] {\n ${MediaQueries.mbDown} {\n top: 100%;\n transform: translate(-50%, -100%);\n max-width: unset;\n width: 100%;\n background: unset;\n overflow: unset;\n }\n }\n }\n .popup-content {\n .close-button {\n ${MediaQueries.mbDown} {\n display: none;\n }\n }\n .confirm-dialog {\n ${MediaQueries.mbDown} {\n background: unset;\n position: relative;\n overflow-x: hidden;\n &::before {\n content: '';\n width: 200%;\n background: #fff;\n position: absolute;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n z-index: -1;\n height: 100%;\n border-top-left-radius: 100%;\n border-top-right-radius: 100%;\n }\n }\n .confirm-content {\n padding: 0 40px 40px;\n ${MediaQueries.mbDown} {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n .btn-group {\n width: 100%;\n justify-content: space-between;\n button {\n flex: 1;\n margin: 0;\n &:first-child {\n margin-right: 0.5rem;\n }\n }\n }\n }\n }\n }\n .thumbnail-container {\n ${MediaQueries.mbDown} {\n display: none;\n }\n &.is-icon {\n background: #ffeaf1;\n border-radius: 24px;\n }\n &.is-mobile {\n position: absolute;\n top: 0;\n left: 50%;\n display: none;\n width: 48px;\n height: 48px;\n transform: translate(-50%, -50%);\n &.is-icon {\n border-radius: 1rem;\n .thumbnail {\n width: 24px;\n height: 24px;\n }\n }\n ${MediaQueries.mbDown} {\n display: flex;\n }\n }\n }\n }\n }\n`\n"],"names":["StyledPopupDanger","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","gray500","MediaQueries","mbDown"],"mappings":"6KAIO,MAAMA,EAAoBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gwBAAA,k8BAAA,kSAAA,gGAAA,wlBAAA,wdAAA,qhBAAA,iFAAA,CAAA,gwBAsCuB,k8BA8CnC,kSAYA,gGAKA,wlBAoBE,wdAmBJ,qhBAsBE,oFA5Hd,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,UA8C/CC,EAAaC,OAYbD,EAAaC,OAKbD,EAAaC,OAoBXD,EAAaC,OAmBjBD,EAAaC,OAsBXD,EAAaC"}

package/build/esm/together/components/molecules/popupDoctor/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as t,useEffect as n}from"react";import{Button as a}from"../../../../components/atoms/button/index.js";import{Text as o}from"../../../../components/atoms/text/index.js";import{useTranslations as l}from"../../../../hooks/useTranslations.js";import{theme as r}from"../../../../misc/theme.js";import{useId as i}from"react-id-generator";import{CARE_PATHS as c}from"../../../api/paths.js";import{callApi as m,getCarePath as s,domainLocales as d,getCareHospitalUrl as p,getCareDoctorUrl as u}from"../../../api/utils.js";import v from"../../../assets/images/avatar-default.png.js";import g from"../../../assets/svg/closeLight.svg.js";import E from"../../../assets/svg/reviewer-medical.svg.js";import{Loading as f}from"../../atoms/loading/index.js";import{StyledPopup as y,StyledProfileImage as b,StyledTitleContainer as N,StyledExperienceList as h,StyledPopupWrapper as j}from"./index.styled.js";var k=function(k){var x,z,C,w,A=k.isOpen,O=void 0===A\|\|A,_=k.onClose,B=k.enableAnimation,F=void 0===B\|\|B,T=k.doctorId,D=k.locale,I=k.isMobile,S=l().t,P=t(null),G=P[0],J=P[1],L=t(!1),M=L[0],R=L[1];n((function(){if(O&&T&&String(null==G?void 0:G.id)!==String(T)){R(!0);try{J(null),m(s(c.GET_DOCTOR_INFO,{doctorId:T,website_url:d[D]}),"get").then((function(e){J(null==e?void 0:e._data.doctor)}))}catch(e){console.error(e)}R(!1)}}),[O,T,null==G?void 0:G.id]);var U=(null==G?void 0:G.experiences)\|\|[],q=((null==G?void 0:G.specialties)\|\|[]).map((function(e){return(null==e?void 0:e.name)\|\|e})).join(" • "),H=U.map((function(e){try{return JSON.parse(e.description)}catch(t){return e.description}})).filter((function(e){return e.content})),K=i(null===(x=null==G?void 0:G.experiences)\|\|void 0===x?void 0:x.length);return e.createElement(e.Fragment,null,e.createElement(y,{"data-open":O,"data-animation":F,onClick:function(e){return e.stopPropagation()}},M\|\|!G?e.createElement(f,null):e.createElement("div",{className:"popup-content"},e.createElement("div",{className:"close-button",onClick:_},e.createElement("img",{src:g,style:{width:20,height:20},alt:"close-icon"})),e.createElement("div",{className:"main-info"},e.createElement("div",{className:"border-banner"}),e.createElement("div",{className:"avatar-title"},e.createElement(b,null,e.createElement("div",{className:"image-container"},e.createElement("div",{style:{position:"relative"}},e.createElement("img",{src:(null==G?void 0:G.avatar)?null==G?void 0:G.avatar:v,className:"profile-image",alt:"avatar"}),e.createElement("img",{className:"badge-avatar",src:E,alt:"badge"})))),e.createElement(N,null,e.createElement(o,{size:"s3",type:"semiBold",className:"full-name"},null==G?void 0:G.name),e.createElement("div",{className:"specialty"},q&&e.createElement(e.Fragment,null,e.createElement(o,{size:"p4",color:r.colors.gray800},q," • ")),e.createElement("a",{href:p({id:null===(z=null==G?void 0:G.organization)\|\|void 0===z?void 0:z.id,name:null===(C=null==G?void 0:G.organization)\|\|void 0===C?void 0:C.name,slug:null===(w=null==G?void 0:G.organization)\|\|void 0===w?void 0:w.slug,locale:D}),className:"organisation",target:"_blank",rel:"noreferrer"},e.createElement(o,{size:"p4",className:"organisation",color:r.colors.gray800,style:{textDecoration:"underline"}},null==G?void 0:G.organization.name))))),!I&&e.createElement("div",{className:"btn-wrapper"},e.createElement("a",{href:u({name:G.name,id:G.id,locale:D})},e.createElement(a,{color:"primary",size:"md",className:"btn-booking"},S("careBooking.bookAnAppointment"))))),H&&e.createElement(N,null,e.createElement("div",{className:"experience"},e.createElement(o,{type:"bold",size:"s3",color:r.colors.gray800,style:{paddingBottom:16}},S("expert.content.description").toUpperCase()),e.createElement(h,null,H.map((function(t,n){return e.createElement("li",{key:K[n]},e.createElement(o,{size:"p2"},function(e){return(null==e?void 0:e.year)?"".concat(e.year," ").concat(null==e?void 0:e.content):(null==e?void 0:e.content)?e.content:"string"==typeof e?e:""}(t)))}))),I?e.createElement("div",{className:"btn-wrapper"},e.createElement("a",{href:u({name:G.name,id:G.id,locale:D})},e.createElement(a,{color:"primary",size:"md",className:"btn-booking"},S("careBooking.bookAnAppointment")))):e.createElement("a",{href:u({name:G.name,id:G.id,locale:D})},e.createElement(o,{size:"s4",color:"#2D87F3",style:{paddingTop:24}},S("home.seeExpert"))))))),e.createElement(j,{"data-open":O,onClick:function(e){e.stopPropagation(),_()}}))};export{k as PopupDoctor};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/popupDoctor/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/popupDoctor/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\n\nimport { Button } from 'components/atoms/button'\nimport { Text } from 'components/atoms/text'\nimport { useTranslations } from 'hooks/useTranslations'\nimport { theme } from 'misc/theme'\nimport { useId } from 'react-id-generator'\nimport { LocaleType } from 'src/interfaces/types'\nimport { DoctorInfo } from 'src/together/interfaces/types'\n\nimport { CARE_PATHS } from '../../../api/paths'\nimport {\n callApi,\n domainLocales,\n getCareDoctorUrl,\n getCareHospitalUrl,\n getCarePath,\n} from '../../../api/utils'\nimport AvatarDefault from '../../../assets/images/avatar-default.png'\nimport CloseLight from '../../../assets/svg/closeLight.svg'\nimport ReviewerMedical from '../../../assets/svg/reviewer-medical.svg'\nimport { Loading } from '../../atoms/loading'\nimport {\n StyledExperienceList,\n StyledPopup,\n StyledPopupWrapper,\n StyledProfileImage,\n StyledTitleContainer,\n} from './index.styled'\n\ntype DoctorExperience = {\n content: string\n year: string | number\n}\n\nexport type Props = {\n isOpen: boolean\n onClose: () => void\n enableAnimation?: boolean\n doctorId: string\n locale?: LocaleType\n isMobile?: boolean\n}\n\nconst PopupDoctor = ({\n isOpen = true,\n onClose,\n enableAnimation = true,\n doctorId,\n locale,\n isMobile,\n}: Props) => {\n const { t } = useTranslations()\n const [doctorInfo, setDoctorInfo] = useState<DoctorInfo | null>(null)\n const [isLoading, setIsLoading] = useState(false)\n\n useEffect(() => {\n if (isOpen && doctorId && String(doctorInfo?.id) !== String(doctorId)) {\n setIsLoading(true)\n try {\n setDoctorInfo(null)\n callApi(\n getCarePath(CARE_PATHS.GET_DOCTOR_INFO, {\n doctorId: doctorId,\n website_url: domainLocales[locale],\n }),\n\n 'get',\n ).then((res) => {\n setDoctorInfo(res?._data.doctor)\n })\n } catch (error) {\n console.error(error)\n }\n setIsLoading(false)\n }\n }, [isOpen, doctorId, doctorInfo?.id])\n\n const experiences = doctorInfo?.experiences || []\n\n const specialty = doctorInfo?.specialties || []\n const specialtiesList = specialty\n .map((specialty: any) => specialty?.name || specialty)\n .join(' • ')\n\n const formattedExperiences = experiences\n .map((experience) => {\n try {\n return JSON.parse(experience.description)\n } catch (e) {\n return experience.description\n }\n })\n .filter((e: DoctorExperience) => e.content)\n\n const renderExperienceText = (experience: DoctorExperience) => {\n if (experience?.year) return `${experience.year} ${experience?.content}`\n if (experience?.content) return experience.content\n if (typeof experience === 'string') return experience\n return ''\n }\n const idList = useId(doctorInfo?.experiences?.length)\n return (\n <>\n <StyledPopup\n data-open={isOpen}\n data-animation={enableAnimation}\n onClick={(e) => e.stopPropagation()}\n >\n {isLoading || !doctorInfo ? (\n <Loading />\n ) : (\n <div className=\"popup-content\">\n <div className=\"close-button\" onClick={onClose}>\n <img\n src={CloseLight}\n style={{ width: 20, height: 20 }}\n alt=\"close-icon\"\n />\n </div>\n <div className=\"main-info\">\n <div className=\"border-banner\"></div>\n <div className=\"avatar-title\">\n <StyledProfileImage>\n <div className=\"image-container\">\n <div style={{ position: 'relative' }}>\n <img\n src={\n doctorInfo?.avatar\n ? doctorInfo?.avatar\n : AvatarDefault\n }\n className=\"profile-image\"\n alt=\"avatar\"\n />\n <img\n className=\"badge-avatar\"\n src={ReviewerMedical}\n alt=\"badge\"\n />\n </div>\n </div>\n </StyledProfileImage>\n <StyledTitleContainer>\n <Text size=\"s3\" type=\"semiBold\" className=\"full-name\">\n {doctorInfo?.name}\n </Text>\n <div className=\"specialty\">\n {specialtiesList && (\n <>\n <Text size=\"p4\" color={theme.colors.gray800}>\n {specialtiesList}\n {' • '}\n </Text>\n </>\n )}\n\n <a\n href={getCareHospitalUrl({\n id: doctorInfo?.organization?.id,\n name: doctorInfo?.organization?.name,\n slug: doctorInfo?.organization?.slug,\n locale,\n })}\n className=\"organisation\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Text\n size=\"p4\"\n className=\"organisation\"\n color={theme.colors.gray800}\n style={{ textDecoration: 'underline' }}\n >\n {doctorInfo?.organization.name}\n </Text>\n </a>\n </div>\n </StyledTitleContainer>\n </div>\n {!isMobile && (\n <div className=\"btn-wrapper\">\n <a\n href={getCareDoctorUrl({\n name: doctorInfo.name,\n id: doctorInfo.id,\n locale: locale as LocaleType,\n })}\n >\n <Button color=\"primary\" size=\"md\" className=\"btn-booking\">\n {t('careBooking.bookAnAppointment')}\n </Button>\n </a>\n </div>\n )}\n </div>\n {formattedExperiences && (\n <StyledTitleContainer>\n <div className=\"experience\">\n <Text\n type=\"bold\"\n size=\"s3\"\n color={theme.colors.gray800}\n style={{ paddingBottom: 16 }}\n >\n {t('expert.content.description').toUpperCase()}\n </Text>\n <StyledExperienceList>\n {formattedExperiences.map(\n (experience: DoctorExperience, i: number) => (\n <li key={idList[i]}>\n <Text size=\"p2\">\n {renderExperienceText(experience)}\n </Text>\n </li>\n ),\n )}\n </StyledExperienceList>\n {isMobile ? (\n <div className=\"btn-wrapper\">\n <a\n href={getCareDoctorUrl({\n name: doctorInfo.name,\n id: doctorInfo.id,\n locale: locale as LocaleType,\n })}\n >\n <Button\n color=\"primary\"\n size=\"md\"\n className=\"btn-booking\"\n >\n {t('careBooking.bookAnAppointment')}\n </Button>\n </a>\n </div>\n ) : (\n <a\n href={getCareDoctorUrl({\n name: doctorInfo.name,\n id: doctorInfo.id,\n locale: locale as LocaleType,\n })}\n >\n <Text\n size=\"s4\"\n color=\"#2D87F3\"\n style={{ paddingTop: 24 }}\n >\n {t('home.seeExpert')}\n </Text>\n </a>\n )}\n </div>\n </StyledTitleContainer>\n )}\n </div>\n )}\n </StyledPopup>\n <StyledPopupWrapper\n data-open={isOpen}\n onClick={(e) => {\n e.stopPropagation()\n onClose()\n }}\n />\n </>\n )\n}\n\nexport { PopupDoctor }\n"],"names":["PopupDoctor","_a","_f","isOpen","onClose","_g","enableAnimation","doctorId","locale","isMobile","t","useTranslations","_h","useState","doctorInfo","setDoctorInfo","_j","isLoading","setIsLoading","useEffect","String","id","callApi","getCarePath","CARE_PATHS","GET_DOCTOR_INFO","website_url","domainLocales","then","res","_data","doctor","error","console","experiences","specialtiesList","specialties","map","specialty","name","join","formattedExperiences","experience","JSON","parse","description","e","filter","content","idList","useId","_b","length","React","createElement","Fragment","StyledPopup","onClick","stopPropagation","Loading","className","src","CloseLight","style","width","height","alt","StyledProfileImage","position","avatar","AvatarDefault","ReviewerMedical","StyledTitleContainer","Text","size","type","color","theme","colors","gray800","href","getCareHospitalUrl","_c","organization","_d","slug","_e","target","rel","textDecoration","getCareDoctorUrl","Button","paddingBottom","toUpperCase","StyledExperienceList","i","key","year","concat","renderExperienceText","paddingTop","StyledPopupWrapper"],"mappings":"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"}

package/build/esm/together/components/molecules/popupDoctor/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import{MediaQueries as t}from"../../../../misc/utils.js";import i from"styled-components";var e=i.div(r\|\|(r=n(["\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 0px 4px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n "," {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n "," {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ",";\n border-radius: 6px;\n .btn-booking {\n display: flex;\n margin: 12px auto;\n }\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n"],["\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 0px 4px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n "," {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n "," {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ",";\n border-radius: 6px;\n .btn-booking {\n display: flex;\n margin: 12px auto;\n }\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray200}),t.tdUp,t.mbDown,(function(n){return n.theme.colors.blue50})),o=i.div(l\|\|(l=n(["\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n"],["\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n"]))),a=i.div(d\|\|(d=n(["\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n"],["\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n"]))),p=i.div(s\|\|(s=n(["\n position: relative;\n z-index: 9;\n .specialty {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n"],["\n position: relative;\n z-index: 9;\n .specialty {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n"])));i.span(x\|\|(x=n(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ",";\n"],["\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ",";\n"])),(function(n){return n.theme.colors.neutral300})),i.div(c\|\|(c=n(["\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ",";\n border-radius: 50%;\n"],["\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ",";\n border-radius: 50%;\n"])),(function(n){return n.theme.colors.gray400})),i.div(g\|\|(g=n(["\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n"],["\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n"])));var r,l,d,s,x,c,g,h,u=i.ul(h\|\|(h=n(["\n padding-left: 18px;\n li {\n list-style-type: disc;\n }\n"],["\n padding-left: 18px;\n li {\n list-style-type: disc;\n }\n"])));export{u as StyledExperienceList,e as StyledPopup,o as StyledPopupWrapper,a as StyledProfileImage,p as StyledTitleContainer};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/popupDoctor/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/popupDoctor/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledPopup = styled.div`\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 6px;\n box-shadow: 0px 0px 4px ${(props: ThemeProps) => props.theme.colors.gray200};\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n ${MediaQueries.tdUp} {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n ${MediaQueries.mbDown} {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ${(props: ThemeProps) => props.theme.colors.blue50};\n border-radius: 6px;\n .btn-booking {\n display: flex;\n margin: 12px auto;\n }\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n`\n\nexport const StyledPopupWrapper = styled.div`\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n`\n\nexport const StyledProfileImage = styled.div`\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n`\n\nexport const StyledTitleContainer = styled.div`\n position: relative;\n z-index: 9;\n .specialty {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n`\nexport const StyledSeparator = styled.span`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ${(props: ThemeProps) => props.theme.colors.neutral300};\n`\nexport const StyledDotSeparator = styled.div`\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ${(props: ThemeProps) => props.theme.colors.gray400};\n border-radius: 50%;\n`\n\nexport const StyledItem = styled.div`\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n`\n\nexport const StyledExperienceList = styled.ul`\n padding-left: 18px;\n li {\n list-style-type: disc;\n }\n`\n"],"names":["StyledPopup","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","white","gray200","MediaQueries","tdUp","mbDown","blue50","StyledPopupWrapper","templateObject_2","StyledProfileImage","templateObject_3","StyledTitleContainer","templateObject_4","span","templateObject_5","neutral300","templateObject_6","gray400","templateObject_7","StyledExperienceList","ul","templateObject_8"],"mappings":"6KAIO,IAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,4EAAA,uDAAA,oFAAA,mSAAA,olBAAA,gPAAA,CAAA,4EAIgC,uDAEQ,oFAIxD,mSAoBI,olBAgC+C,mPA1DlD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAEpC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,UAIlEC,EAAaC,KAoBXD,EAAaE,QAgCK,SAACP,GAAsB,OAAAA,EAAMC,MAAMC,OAAOM,UAerDC,EAAqBb,EAAOC,IAAGa,IAAAA,EAAAX,EAAA,CAAA,sNAAA,CAAA,yNAe/BY,EAAqBf,EAAOC,IAAGe,IAAAA,EAAAb,EAAA,CAAA,qcAAA,CAAA,wcA2B/Bc,EAAuBjB,EAAOC,IAAGiB,IAAAA,EAAAf,EAAA,CAAA,igBAAA,CAAA,ogBA8BfH,EAAOmB,KAAIC,IAAAA,EAAAjB,EAAA,CAAA,2GAAA,OAAA,CAAA,2GAKqB,UAApD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOe,cAEnBrB,EAAOC,IAAGqB,IAAAA,EAAAnB,EAAA,CAAA,gGAAA,8BAAA,CAAA,gGAK2B,iCAAjD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOiB,WAItCvB,EAAOC,IAAGuB,IAAAA,EAAArB,EAAA,CAAA,2GAAA,CAAA,8GAUvB,oBAAAsB,EAAuBzB,EAAO0B,GAAEC,IAAAA,EAAAxB,EAAA,CAAA,sEAAA,CAAA"}

package/build/esm/together/components/molecules/popupExpert/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as t,useEffect as a}from"react";import{Heading as r}from"../../../../components/atoms/heading/index.js";import{Text as o}from"../../../../components/atoms/text/index.js";import{useTranslations as l}from"../../../../hooks/useTranslations.js";import{theme as i}from"../../../../misc/theme.js";import{DISCOVER_PATHS as n}from"../../../api/paths.js";import{callApi as s,getDiscoverApiPath as m}from"../../../api/utils.js";import c from"../../../assets/images/avatar-default.png.js";import p from"../../../assets/svg/bullet-point.svg.js";import d from"../../../assets/svg/closeLight.svg.js";import v from"../../../assets/svg/reviewer-author.svg.js";import g from"../../../assets/svg/reviewer-editor.svg.js";import u from"../../../assets/svg/reviewer-expert.svg.js";import f from"../../../assets/svg/reviewer-fact-check.svg.js";import E from"../../../assets/svg/reviewer-medical.svg.js";import{Loading as h}from"../../atoms/loading/index.js";import{StyledPopup as y,StyledProfileImage as j,StyledTitleContainer as x,StyledItem as N,StyledPopupWrapper as b}from"./index.styled.js";var _={author:v,edtior:g,expert:u,"fact-check":f,medical:E},k=function(v){var g=v.isOpen,u=void 0===g\|\|g,f=v.onClose,E=v.enableAnimation,k=void 0===E\|\|E,z=v.expertId,w=l().t,C=t(null),T=C[0],B=C[1],D=t(!1),P=D[0],F=D[1];return a((function(){if(u&&z&&String(null==T?void 0:T.user_id)!==String(z)){F(!0);try{B(null),s(m(n.GET_EXPERT_BY_ID,{id:z}),"get").then((function(e){B(null==e?void 0:e.data)}))}catch(e){console.error(e)}F(!1)}}),[u,z,null==T?void 0:T.user_id]),e.createElement(e.Fragment,null,e.createElement(y,{"data-open":u,"data-animation":k,onClick:function(e){return e.stopPropagation()}},P\|\|!T?e.createElement(h,null):e.createElement("div",{className:"popup-content"},e.createElement("div",{className:"close-button",onClick:f},e.createElement("img",{src:d,style:{width:20,height:20},alt:"close-icon"})),e.createElement("div",{className:"main-info"},e.createElement("div",{className:"border-banner"}),e.createElement("div",{className:"avatar-title"},e.createElement(j,null,e.createElement("div",{className:"image-container"},e.createElement("div",{style:{position:"relative"}},e.createElement("img",{src:(null==T?void 0:T.avatar)?null==T?void 0:T.avatar:c,className:"profile-image",alt:"avatar"}),e.createElement("img",{className:"badge-avatar",src:_[null==T?void 0:T.role],alt:"badge"})))),e.createElement(x,null,e.createElement(o,{size:"s3",className:"full-name",type:"semiBold"},null==T?void 0:T.display_name),e.createElement("div",null,e.createElement(o,{size:"p4",color:i.colors.gray800},null==T?void 0:T.specialty," • "),e.createElement("a",{href:null==T?void 0:T.organisation_url,className:"organisation",target:"_blank",rel:"noreferrer"},e.createElement(o,{size:"p4",className:"organisation",color:i.colors.gray800,style:{textDecoration:"underline"}},null==T?void 0:T.organisation)))))),e.createElement(x,null,e.createElement("div",{className:"experience"},e.createElement(o,{type:"bold",size:"p4",color:i.colors.gray800,style:{paddingBottom:16}},w("expert.content.description").toUpperCase()),e.createElement("div",{className:"list-items"},!!(null==T?void 0:T.experiences)&&T.experiences.filter((function(e){return!(!e\|\|!e.title&&!e.organization)})).slice(0,3).map((function(t,a){return e.createElement(N,{key:a},e.createElement("img",{className:"bullet-point",src:p,alt:"point"}),e.createElement("div",{className:"text-contain"},e.createElement(r,{tag:"h6",color:i.colors.gray800},null==t?void 0:t.title),e.createElement(o,{size:"p2",color:i.colors.gray500},null==t?void 0:t.organization)))}))),e.createElement("a",{href:null==T?void 0:T.profile_url},e.createElement(o,{size:"s4",color:"#2D87F3",style:{paddingTop:24}},w("home.seeExpert"))))))),e.createElement(b,{"data-open":u,onClick:function(e){e.stopPropagation(),f()}}))};export{k as PopupExpert};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/popupExpert/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/popupExpert/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\n\nimport { Heading } from 'components/atoms/heading'\nimport { Text } from 'components/atoms/text'\nimport { useTranslations } from 'hooks/useTranslations'\nimport { theme } from 'misc/theme'\n\nimport { DISCOVER_PATHS } from '../../../api/paths'\nimport { callApi, getDiscoverApiPath } from '../../../api/utils'\nimport AvatarDefault from '../../../assets/images/avatar-default.png'\nimport BulletPoint from '../../../assets/svg/bullet-point.svg'\nimport CloseLight from '../../../assets/svg/closeLight.svg'\nimport ReviewerAuthor from '../../../assets/svg/reviewer-author.svg'\nimport ReviewerEditor from '../../../assets/svg/reviewer-editor.svg'\nimport ReviewerExpert from '../../../assets/svg/reviewer-expert.svg'\nimport ReviewerFactCheck from '../../../assets/svg/reviewer-fact-check.svg'\nimport ReviewerMedical from '../../../assets/svg/reviewer-medical.svg'\nimport { Loading } from '../../atoms/loading'\nimport {\n StyledItem,\n StyledPopup,\n StyledPopupWrapper,\n StyledProfileImage,\n StyledTitleContainer,\n} from './index.styled'\n\nconst ReviewerIconMap = {\n author: ReviewerAuthor,\n edtior: ReviewerEditor,\n expert: ReviewerExpert,\n 'fact-check': ReviewerFactCheck,\n medical: ReviewerMedical,\n}\n\nexport type Experience = {\n title: string\n organization: string\n duration: string\n}\nexport type ExpertInfo = {\n avatar?: string\n role?: string\n display_name: string\n specialty: string\n organisation: string\n experiences: Array<Experience>\n organisation_url: string\n profile_url: string\n user_id: number\n}\nexport type Props = {\n isOpen: boolean\n onClose: () => void\n enableAnimation?: boolean\n expertId: string\n}\n\nconst PopupExpert = ({\n isOpen = true,\n onClose,\n enableAnimation = true,\n expertId,\n}: Props) => {\n const { t } = useTranslations()\n const [expertInfo, setExpertInfo] = useState<ExpertInfo | null>(null)\n const [isLoading, setIsLoading] = useState(false)\n\n useEffect(() => {\n if (\n isOpen &&\n expertId &&\n String(expertInfo?.user_id) !== String(expertId)\n ) {\n setIsLoading(true)\n try {\n setExpertInfo(null)\n callApi(\n getDiscoverApiPath(DISCOVER_PATHS.GET_EXPERT_BY_ID, {\n id: expertId,\n }),\n 'get',\n ).then((res) => {\n setExpertInfo(res?.data)\n })\n } catch (error) {\n console.error(error)\n }\n setIsLoading(false)\n }\n }, [isOpen, expertId, expertInfo?.user_id])\n\n return (\n <>\n <StyledPopup\n data-open={isOpen}\n data-animation={enableAnimation}\n onClick={(e) => e.stopPropagation()}\n >\n {isLoading || !expertInfo ? (\n <Loading />\n ) : (\n <div className=\"popup-content\">\n <div className=\"close-button\" onClick={onClose}>\n <img\n src={CloseLight}\n style={{ width: 20, height: 20 }}\n alt=\"close-icon\"\n />\n </div>\n <div className=\"main-info\">\n <div className=\"border-banner\"></div>\n <div className=\"avatar-title\">\n <StyledProfileImage>\n <div className=\"image-container\">\n <div style={{ position: 'relative' }}>\n <img\n src={\n expertInfo?.avatar\n ? expertInfo?.avatar\n : AvatarDefault\n }\n className=\"profile-image\"\n alt=\"avatar\"\n />\n <img\n className=\"badge-avatar\"\n src={ReviewerIconMap[expertInfo?.role]}\n alt=\"badge\"\n />\n </div>\n </div>\n </StyledProfileImage>\n <StyledTitleContainer>\n <Text size=\"s3\" className=\"full-name\" type=\"semiBold\">\n {expertInfo?.display_name}\n </Text>\n <div>\n <Text size=\"p4\" color={theme.colors.gray800}>\n {expertInfo?.specialty}\n {' • '}\n </Text>\n <a\n href={expertInfo?.organisation_url}\n className=\"organisation\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Text\n size=\"p4\"\n className=\"organisation\"\n color={theme.colors.gray800}\n style={{ textDecoration: 'underline' }}\n >\n {expertInfo?.organisation}\n </Text>\n </a>\n </div>\n </StyledTitleContainer>\n </div>\n </div>\n <StyledTitleContainer>\n <div className=\"experience\">\n <Text\n type=\"bold\"\n size=\"p4\"\n color={theme.colors.gray800}\n style={{ paddingBottom: 16 }}\n >\n {t('expert.content.description').toUpperCase()}\n </Text>\n <div className=\"list-items\">\n {expertInfo?.experiences\n ? expertInfo.experiences\n .filter((e) => !!(e && (e.title || e.organization)))\n .slice(0, 3)\n .map((experience, index) => (\n <StyledItem key={index}>\n <img\n className=\"bullet-point\"\n src={BulletPoint}\n alt=\"point\"\n />\n <div className=\"text-contain\">\n <Heading tag=\"h6\" color={theme.colors.gray800}>\n {experience?.title}\n </Heading>\n <Text size=\"p2\" color={theme.colors.gray500}>\n {experience?.organization}\n </Text>\n </div>\n </StyledItem>\n ))\n : false}\n </div>\n <a href={expertInfo?.profile_url}>\n <Text size=\"s4\" color=\"#2D87F3\" style={{ paddingTop: 24 }}>\n {t('home.seeExpert')}\n </Text>\n </a>\n </div>\n </StyledTitleContainer>\n </div>\n )}\n </StyledPopup>\n <StyledPopupWrapper\n data-open={isOpen}\n onClick={(e) => {\n e.stopPropagation()\n onClose()\n }}\n />\n </>\n )\n}\n\nexport { PopupExpert }\n"],"names":["ReviewerIconMap","author","ReviewerAuthor","edtior","ReviewerEditor","expert","ReviewerExpert","ReviewerFactCheck","medical","ReviewerMedical","PopupExpert","_a","_b","isOpen","onClose","_c","enableAnimation","expertId","t","useTranslations","_d","useState","expertInfo","setExpertInfo","_e","isLoading","setIsLoading","useEffect","String","user_id","callApi","getDiscoverApiPath","DISCOVER_PATHS","GET_EXPERT_BY_ID","id","then","res","data","error","console","React","createElement","Fragment","StyledPopup","onClick","e","stopPropagation","Loading","className","src","CloseLight","style","width","height","alt","StyledProfileImage","position","avatar","AvatarDefault","role","StyledTitleContainer","Text","size","type","display_name","color","theme","colors","gray800","specialty","href","organisation_url","target","rel","textDecoration","organisation","paddingBottom","toUpperCase","experiences","filter","title","organization","slice","map","experience","index","StyledItem","key","BulletPoint","Heading","tag","gray500","profile_url","paddingTop","StyledPopupWrapper"],"mappings":"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"}

package/build/esm/together/components/molecules/popupExpert/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import{MediaQueries as t}from"../../../../misc/utils.js";import i from"styled-components";var e=i.div(r\|\|(r=n(["\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 0px 4px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n "," {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n "," {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ",";\n border-radius: 6px;\n\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n"],["\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 0px 4px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n "," {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n "," {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ",";\n border-radius: 6px;\n\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray200}),t.tdUp,t.mbDown,(function(n){return n.theme.colors.blue50})),o=i.div(d\|\|(d=n(["\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n"],["\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n"]))),a=i.div(l\|\|(l=n(["\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n"],["\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n"]))),p=i.div(s\|\|(s=n(["\n position: relative;\n z-index: 9;\n .specialty {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n"],["\n position: relative;\n z-index: 9;\n .specialty {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n"])));i.span(x\|\|(x=n(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ",";\n"],["\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ",";\n"])),(function(n){return n.theme.colors.neutral300})),i.div(c\|\|(c=n(["\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ",";\n border-radius: 50%;\n"],["\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ",";\n border-radius: 50%;\n"])),(function(n){return n.theme.colors.gray400}));var r,d,l,s,x,c,g,h=i.div(g\|\|(g=n(["\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n"],["\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n"])));export{h as StyledItem,e as StyledPopup,o as StyledPopupWrapper,a as StyledProfileImage,p as StyledTitleContainer};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/popupExpert/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/popupExpert/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledPopup = styled.div`\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 6px;\n box-shadow: 0px 0px 4px ${(props: ThemeProps) => props.theme.colors.gray200};\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n ${MediaQueries.tdUp} {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n ${MediaQueries.mbDown} {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ${(props: ThemeProps) => props.theme.colors.blue50};\n border-radius: 6px;\n\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n`\n\nexport const StyledPopupWrapper = styled.div`\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n`\n\nexport const StyledProfileImage = styled.div`\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n`\n\nexport const StyledTitleContainer = styled.div`\n position: relative;\n z-index: 9;\n .specialty {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n`\nexport const StyledSeparator = styled.span`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ${(props: ThemeProps) => props.theme.colors.neutral300};\n`\nexport const StyledDotSeparator = styled.div`\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ${(props: ThemeProps) => props.theme.colors.gray400};\n border-radius: 50%;\n`\n\nexport const StyledItem = styled.div`\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n`\n"],"names":["StyledPopup","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","white","gray200","MediaQueries","tdUp","mbDown","blue50","StyledPopupWrapper","templateObject_2","StyledProfileImage","templateObject_3","StyledTitleContainer","templateObject_4","span","templateObject_5","neutral300","templateObject_6","gray400","StyledItem","templateObject_7"],"mappings":"6KAIO,IAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,4EAAA,uDAAA,oFAAA,mSAAA,olBAAA,uKAAA,CAAA,4EAIgC,uDAEQ,oFAIxD,mSAoBI,olBAgC+C,0KA1DlD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAEpC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,UAIlEC,EAAaC,KAoBXD,EAAaE,QAgCK,SAACP,GAAsB,OAAAA,EAAMC,MAAMC,OAAOM,UAYrDC,EAAqBb,EAAOC,IAAGa,IAAAA,EAAAX,EAAA,CAAA,sNAAA,CAAA,yNAe/BY,EAAqBf,EAAOC,IAAGe,IAAAA,EAAAb,EAAA,CAAA,qcAAA,CAAA,wcA2B/Bc,EAAuBjB,EAAOC,IAAGiB,IAAAA,EAAAf,EAAA,CAAA,igBAAA,CAAA,ogBA8BfH,EAAOmB,KAAIC,IAAAA,EAAAjB,EAAA,CAAA,2GAAA,OAAA,CAAA,2GAKqB,UAApD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOe,cAEnBrB,EAAOC,IAAGqB,IAAAA,EAAAnB,EAAA,CAAA,gGAAA,8BAAA,CAAA,gGAK2B,iCAAjD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOiB,WAInD,kBAAAC,EAAaxB,EAAOC,IAAGwB,IAAAA,EAAAtB,EAAA,CAAA,2GAAA,CAAA"}

package/build/esm/together/components/molecules/popupFrame/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e from"react";import{Heading as o}from"../../../../components/atoms/heading/index.js";import{Popup as t}from"../../../../components/molecules/popup/index.js";import n from"../../../assets/svg/icon-close.svg.js";import{StyledPopupFrame as s}from"./index.styled.js";var r=function(r){var c=r.className,m=r.style,a=r.closeIcon,i=r.heading,l=void 0===i?"":i,p=r.children,d=r.isOpen,v=void 0!==d&&d,f=r.onClose,u=void 0===f?function(){return null}:f;return e.createElement(s,{className:c,style:m},e.createElement(t,{type:"confirm",onClose:u,isOpen:v,closeIcon:a\|\|e.createElement("img",{src:n})},e.createElement("div",{className:"header"},e.createElement(o,{tag:"h5"},l)),e.createElement("div",{className:"content"},p)))};export{r as PopupFrame};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/popupFrame/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/popupFrame/index.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from 'react'\n\nimport { Heading } from 'components/atoms/heading'\nimport { Popup } from 'components/molecules/popup'\n\nimport IconClose from '../../../assets/svg/icon-close.svg'\nimport { StyledPopupFrame } from './index.styled'\n\nexport type Props = {\n className?: string\n style?: CSSProperties\n closeIcon?: JSX.Element\n heading?: ReactNode\n children?: ReactNode\n isOpen?: boolean\n onClose?: () => void\n}\n\nexport const PopupFrame = ({\n className,\n style,\n closeIcon,\n heading = '',\n children,\n isOpen = false,\n onClose = () => null,\n}: Props) => {\n return (\n <StyledPopupFrame className={className} style={style}>\n <Popup\n type=\"confirm\"\n onClose={onClose}\n isOpen={isOpen}\n closeIcon={closeIcon || <img src={IconClose} />}\n >\n <div className=\"header\">\n <Heading tag=\"h5\">{heading}</Heading>\n </div>\n <div className=\"content\">{children}</div>\n </Popup>\n </StyledPopupFrame>\n )\n}\n"],"names":["PopupFrame","_a","className","style","closeIcon","_b","heading","children","_c","isOpen","_d","onClose","React","createElement","StyledPopupFrame","Popup","type","src","IconClose","Heading","tag"],"mappings":"+QAkBO,IAAMA,EAAa,SAACC,GACzB,IAAAC,EAASD,EAAAC,UACTC,EAAKF,EAAAE,MACLC,EAASH,EAAAG,UACTC,EAAAJ,EAAAK,QAAAA,OAAO,IAAAD,EAAG,GAAEA,EACZE,EAAQN,EAAAM,SACRC,EAAAP,EAAAQ,OAAAA,OAAS,IAAAD,KACTE,EAAAT,EAAAU,QAAAA,aAAU,WAAM,OAAA,MAAID,EAEpB,OACEE,EAACC,cAAAC,EAAiB,CAAAZ,UAAWA,EAAWC,MAAOA,GAC7CS,EAACC,cAAAE,GACCC,KAAK,UACLL,QAASA,EACTF,OAAQA,EACRL,UAAWA,GAAaQ,EAAKC,cAAA,MAAA,CAAAI,IAAKC,KAElCN,EAAKC,cAAA,MAAA,CAAAX,UAAU,UACbU,EAACC,cAAAM,GAAQC,IAAI,MAAMd,IAErBM,EAAKC,cAAA,MAAA,CAAAX,UAAU,WAAWK"}

package/build/esm/together/components/molecules/popupFrame/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import{MediaQueries as t}from"../../../../misc/utils.js";import e from"styled-components";var i,p=e.div(i\|\|(i=n(["\n [data-type='confirm'] {\n max-width: 468px;\n height: 486px;\n padding: 0;\n\n .popup-content {\n display: flex;\n flex-direction: column;\n padding: 0;\n\n .close-button {\n top: 16px;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: 5;\n }\n\n .header {\n display: flex;\n height: 56px;\n align-items: center;\n padding: 16px 56px 16px 32px;\n border-bottom: 1px solid\n ",";\n font-weight: 900;\n }\n\n .content {\n overflow: auto;\n flex: 1;\n .topic-list-wrapper {\n padding: 1rem;\n }\n }\n }\n }\n\n &.create-post-popup-frame {\n & > [data-type='confirm'] {\n height: 80vh;\n min-height: 486px;\n transition: all 0.3s ease-in-out;\n "," {\n top: 0;\n left: 0;\n transform: unset;\n width: 100vw;\n max-width: 100vw;\n min-height: unset;\n height: 100%;\n }\n &[data-open='false'] {\n transform: translate(-50%, calc(-100vh - 150%));\n }\n }\n\n &.center {\n .header {\n justify-content: center;\n }\n }\n }\n\n > div&[data-open='true'] {\n z-index: 250;\n &:last-child {\n z-index: 200;\n }\n }\n"],["\n [data-type='confirm'] {\n max-width: 468px;\n height: 486px;\n padding: 0;\n\n .popup-content {\n display: flex;\n flex-direction: column;\n padding: 0;\n\n .close-button {\n top: 16px;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: 5;\n }\n\n .header {\n display: flex;\n height: 56px;\n align-items: center;\n padding: 16px 56px 16px 32px;\n border-bottom: 1px solid\n ",";\n font-weight: 900;\n }\n\n .content {\n overflow: auto;\n flex: 1;\n .topic-list-wrapper {\n padding: 1rem;\n }\n }\n }\n }\n\n &.create-post-popup-frame {\n & > [data-type='confirm'] {\n height: 80vh;\n min-height: 486px;\n transition: all 0.3s ease-in-out;\n "," {\n top: 0;\n left: 0;\n transform: unset;\n width: 100vw;\n max-width: 100vw;\n min-height: unset;\n height: 100%;\n }\n &[data-open='false'] {\n transform: translate(-50%, calc(-100vh - 150%));\n }\n }\n\n &.center {\n .header {\n justify-content: center;\n }\n }\n }\n\n > div&[data-open='true'] {\n z-index: 250;\n &:last-child {\n z-index: 200;\n }\n }\n"])),(function(n){return n.theme.colors.neutral100}),t.mbDown);export{p as StyledPopupFrame};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/popupFrame/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/popupFrame/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledPopupFrame = styled.div`\n [data-type='confirm'] {\n max-width: 468px;\n height: 486px;\n padding: 0;\n\n .popup-content {\n display: flex;\n flex-direction: column;\n padding: 0;\n\n .close-button {\n top: 16px;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: 5;\n }\n\n .header {\n display: flex;\n height: 56px;\n align-items: center;\n padding: 16px 56px 16px 32px;\n border-bottom: 1px solid\n ${(props: ThemeProps) => props.theme.colors.neutral100};\n font-weight: 900;\n }\n\n .content {\n overflow: auto;\n flex: 1;\n .topic-list-wrapper {\n padding: 1rem;\n }\n }\n }\n }\n\n &.create-post-popup-frame {\n & > [data-type='confirm'] {\n height: 80vh;\n min-height: 486px;\n transition: all 0.3s ease-in-out;\n ${MediaQueries.mbDown} {\n top: 0;\n left: 0;\n transform: unset;\n width: 100vw;\n max-width: 100vw;\n min-height: unset;\n height: 100%;\n }\n &[data-open='false'] {\n transform: translate(-50%, calc(-100vh - 150%));\n }\n }\n\n &.center {\n .header {\n justify-content: center;\n }\n }\n }\n\n > div&[data-open='true'] {\n z-index: 250;\n &:last-child {\n z-index: 200;\n }\n }\n`\n"],"names":["StyledPopupFrame","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","neutral100","MediaQueries","mbDown"],"mappings":"6KAIO,MAAMA,EAAmBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,6fAAA,kWAAA,8dAAA,CAAA,6fAyBsB,kWAmBrC,ieAnBf,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,aAmB9CC,EAAaC"}

package/build/esm/together/components/molecules/popupFrame/popupShare.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import e,{useContext as t,useState as r,useEffect as o}from"react";import{Heading as a}from"../../../../components/atoms/heading/index.js";import{Text as i}from"../../../../components/atoms/text/index.js";import{useTranslations as s}from"../../../../hooks/useTranslations.js";import{MediaQueries as d,toggleNoScroll as m}from"../../../../misc/utils.js";import*as p from"react-dom";import l from"styled-components";import{TogetherComponentGlobalContext as h}from"../../../togetherComponentGlobalContext.js";import{PopupFrame as c}from"./index.js";import{ShareBox as b}from"../shareBox/index.js";var u,f=function(n){var d=n.className,l=n.style,u=n.url,f=n.avatar,x=n.text,w=n.onClose,y=t(h).data.env.isMarryBaby,_=s().t,v=r(!1),k=v[0],j=v[1];return o((function(){return m(!0),setTimeout((function(){return j(!0)}),0),function(){return m(!1)}}),[]),p.createPortal(e.createElement(g,{"data-is-marrybaby":y,className:d,style:l},e.createElement(c,{className:"share-popup",isOpen:k,onClose:w,heading:_("bottomBar.share")},y?e.createElement(i,{className:"share-mb-text",size:"sm"},_("article.shareOn")):e.createElement("div",{className:"custom-share__header"},f&&e.createElement("div",{className:"custom-share__header-image"},e.createElement("img",{src:f})),e.createElement("div",{className:"custom-share__header-info"},e.createElement(a,{tag:"h4"},x),e.createElement(i,{className:"desc",size:"md"},u))),k&&e.createElement(b,{shareUrl:u\|\|("undefined"!=typeof window?window.location.href:""),title:x}))),document.body)},g=l.div(u\|\|(u=n(["\n .share-popup {\n > div:first-child {\n height: unset;\n }\n .close-button {\n display: none;\n }\n .popup-content .header {\n display: none;\n }\n }\n .custom-share__header {\n display: flex;\n flex-wrap: no-wrap;\n align-items: center;\n padding: 1rem;\n border-bottom: 1px solid\n ",";\n margin-bottom: 16px;\n\n .custom-share__header-image {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n }\n\n .custom-share__header-info {\n flex: 1;\n padding: 0 8px;\n word-break: break-word;\n\n [data-tag='h4'] {\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: bold;\n line-height: 14px;\n }\n\n [data-size='md'] {\n color: #a5a5a5;\n font-size: 14px;\n line-height: 14px;\n }\n }\n }\n\n &[data-is-marrybaby='true'] {\n .share-popup {\n > div:first-child {\n overflow: hidden;\n border-radius: 1rem;\n &[data-open='true'] {\n "," {\n max-width: unset;\n width: 100%;\n top: 100%;\n transform: translate(-50%, -100%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n }\n .close-button {\n display: block;\n }\n .popup-content {\n .header {\n display: block;\n padding: 1rem;\n background-color: rgb(243, 243, 243);\n }\n .content {\n padding-bottom: 1rem;\n }\n }\n .share-mb-text {\n margin: 1rem 1rem 0.5rem;\n }\n }\n }\n"],["\n .share-popup {\n > div:first-child {\n height: unset;\n }\n .close-button {\n display: none;\n }\n .popup-content .header {\n display: none;\n }\n }\n .custom-share__header {\n display: flex;\n flex-wrap: no-wrap;\n align-items: center;\n padding: 1rem;\n border-bottom: 1px solid\n ",";\n margin-bottom: 16px;\n\n .custom-share__header-image {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n }\n\n .custom-share__header-info {\n flex: 1;\n padding: 0 8px;\n word-break: break-word;\n\n [data-tag='h4'] {\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: bold;\n line-height: 14px;\n }\n\n [data-size='md'] {\n color: #a5a5a5;\n font-size: 14px;\n line-height: 14px;\n }\n }\n }\n\n &[data-is-marrybaby='true'] {\n .share-popup {\n > div:first-child {\n overflow: hidden;\n border-radius: 1rem;\n &[data-open='true'] {\n "," {\n max-width: unset;\n width: 100%;\n top: 100%;\n transform: translate(-50%, -100%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n }\n .close-button {\n display: block;\n }\n .popup-content {\n .header {\n display: block;\n padding: 1rem;\n background-color: rgb(243, 243, 243);\n }\n .content {\n padding-bottom: 1rem;\n }\n }\n .share-mb-text {\n margin: 1rem 1rem 0.5rem;\n }\n }\n }\n"])),(function(n){return n.theme.colors.neutral100}),d.mbDown);export{f as SharePopup,g as StyledSharePopup};
2	+ //# sourceMappingURL=popupShare.js.map

package/build/esm/together/components/molecules/popupFrame/popupShare.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"popupShare.js","sources":["../../../../../../src/together/components/molecules/popupFrame/popupShare.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect, useState } from 'react'\n\nimport { Heading } from 'components/atoms/heading'\nimport { Text } from 'components/atoms/text'\nimport { useTranslations } from 'hooks/useTranslations'\nimport { ThemeProps } from 'misc/theme'\nimport { MediaQueries, toggleNoScroll } from 'misc/utils'\nimport * as ReactDOM from 'react-dom'\nimport styled from 'styled-components'\nimport { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'\n\nimport { PopupFrame } from '.'\nimport { ShareBox } from '../shareBox'\n\nexport type Props = {\n className?: string\n style?: CSSProperties\n url?: string\n avatar?: string\n text?: string\n onClose?: () => void\n}\n\nexport const SharePopup = ({\n className,\n style,\n url,\n avatar,\n text,\n onClose,\n}: Props) => {\n const {\n data: {\n env: { isMarryBaby },\n },\n } = useContext(TogetherComponentGlobalContext)\n const { t } = useTranslations()\n const [isOpen, setIsOpen] = useState(false)\n\n useEffect(() => {\n toggleNoScroll(true)\n setTimeout(() => setIsOpen(true), 0)\n return () => toggleNoScroll(false)\n }, [])\n return ReactDOM.createPortal(\n <StyledSharePopup\n data-is-marrybaby={isMarryBaby}\n className={className}\n style={style}\n >\n <PopupFrame\n className=\"share-popup\"\n isOpen={isOpen}\n onClose={onClose}\n heading={t('bottomBar.share')}\n >\n {isMarryBaby ? (\n <Text className=\"share-mb-text\" size=\"sm\">\n {t('article.shareOn')}\n </Text>\n ) : (\n <div className=\"custom-share__header\">\n {avatar && (\n <div className=\"custom-share__header-image\">\n <img src={avatar} />\n </div>\n )}\n <div className=\"custom-share__header-info\">\n <Heading tag=\"h4\">{text}</Heading>\n <Text className=\"desc\" size=\"md\">\n {url}\n </Text>\n </div>\n </div>\n )}\n\n {isOpen && (\n <ShareBox\n shareUrl={\n url || (typeof window !== 'undefined' ? window.location.href : '')\n }\n title={text}\n />\n )}\n </PopupFrame>\n </StyledSharePopup>,\n document.body,\n )\n}\n\nexport const StyledSharePopup = styled.div`\n .share-popup {\n > div:first-child {\n height: unset;\n }\n .close-button {\n display: none;\n }\n .popup-content .header {\n display: none;\n }\n }\n .custom-share__header {\n display: flex;\n flex-wrap: no-wrap;\n align-items: center;\n padding: 1rem;\n border-bottom: 1px solid\n ${(props: ThemeProps) => props.theme.colors.neutral100};\n margin-bottom: 16px;\n\n .custom-share__header-image {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n & > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n }\n\n .custom-share__header-info {\n flex: 1;\n padding: 0 8px;\n word-break: break-word;\n\n [data-tag='h4'] {\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: bold;\n line-height: 14px;\n }\n\n [data-size='md'] {\n color: #a5a5a5;\n font-size: 14px;\n line-height: 14px;\n }\n }\n }\n\n &[data-is-marrybaby='true'] {\n .share-popup {\n > div:first-child {\n overflow: hidden;\n border-radius: 1rem;\n &[data-open='true'] {\n ${MediaQueries.mbDown} {\n max-width: unset;\n width: 100%;\n top: 100%;\n transform: translate(-50%, -100%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n }\n .close-button {\n display: block;\n }\n .popup-content {\n .header {\n display: block;\n padding: 1rem;\n background-color: rgb(243, 243, 243);\n }\n .content {\n padding-bottom: 1rem;\n }\n }\n .share-mb-text {\n margin: 1rem 1rem 0.5rem;\n }\n }\n }\n`\n"],"names":["SharePopup","_a","className","style","url","avatar","text","onClose","isMarryBaby","useContext","TogetherComponentGlobalContext","t","useTranslations","_b","useState","isOpen","setIsOpen","useEffect","toggleNoScroll","setTimeout","ReactDOM","createPortal","React","StyledSharePopup","createElement","PopupFrame","heading","Text","size","src","Heading","tag","ShareBox","shareUrl","window","location","href","title","document","body","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","neutral100","MediaQueries","mbDown"],"mappings":"qqBAuBO,MAAMA,EAAa,SAACC,GACzB,IAAAC,EAASD,EAAAC,UACTC,EAAKF,EAAAE,MACLC,EAAGH,EAAAG,IACHC,WACAC,EAAIL,EAAAK,KACJC,EAAON,EAAAM,QAIIC,EAEPC,EAAWC,wBACPC,EAAMC,MACRC,EAAsBC,GAAS,GAA9BC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAOxB,OALAI,GAAU,WAGR,OAFAC,GAAe,GACfC,YAAW,WAAM,OAAAH,GAAU,KAAO,GAC3B,WAAM,OAAAE,GAAe,MAC3B,IACIE,EAASC,aACdC,gBAACC,EAAgB,CAAA,oBACIf,EACnBN,UAAWA,EACXC,MAAOA,GAEPmB,EAAAE,cAACC,EACC,CAAAvB,UAAU,cACVa,OAAQA,EACRR,QAASA,EACTmB,QAASf,EAAE,oBAEVH,EACCc,EAACE,cAAAG,EAAK,CAAAzB,UAAU,gBAAgB0B,KAAK,MAClCjB,EAAE,oBAGLW,EAAAE,cAAA,MAAA,CAAKtB,UAAU,wBACZG,GACCiB,EAAKE,cAAA,MAAA,CAAAtB,UAAU,8BACboB,EAAAE,cAAA,MAAA,CAAKK,IAAKxB,KAGdiB,EAAKE,cAAA,MAAA,CAAAtB,UAAU,6BACboB,EAAAE,cAACM,EAAQ,CAAAC,IAAI,MAAMzB,GACnBgB,EAAAE,cAACG,EAAI,CAACzB,UAAU,OAAO0B,KAAK,MACzBxB,KAMRW,GACCO,EAAAE,cAACQ,EACC,CAAAC,SACE7B,IAA0B,oBAAX8B,OAAyBA,OAAOC,SAASC,KAAO,IAEjEC,MAAO/B,MAKfgC,SAASC,OAIAhB,EAAmBiB,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yVAAA,k0BAAA,+mBAAA,CAAA,yVAkBkB,k0BAyC7B,knBAzCvB,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,aAyCtCC,EAAaC"}

package/build/esm/together/components/molecules/popupHospital/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as t,useEffect as a,useMemo as n}from"react";import{Button as o}from"../../../../components/atoms/button/index.js";import{Text as l}from"../../../../components/atoms/text/index.js";import{useTranslations as r}from"../../../../hooks/useTranslations.js";import{theme as i}from"../../../../misc/theme.js";import{CARE_PATHS as s}from"../../../api/paths.js";import{callApi as m,getCarePath as c,domainLocales as p,getCareHospitalUrl as d}from"../../../api/utils.js";import g from"../../../assets/images/avatar-default.png.js";import u from"../../../assets/svg/closeLight.svg.js";import v from"../../../assets/svg/reviewer-medical.svg.js";import{Loading as E}from"../../atoms/loading/index.js";import{StyledPopup as f,StyledProfileImage as b,StyledTitleContainer as h,StyledPopupWrapper as N}from"./index.styled.js";var y=function(y){var j=y.isOpen,k=void 0===j\|\|j,x=y.onClose,z=y.enableAnimation,_=void 0===z\|\|z,A=y.hospitalId,w=y.locale,C=y.isMobile,B=r().t,T=t(null),F=T[0],I=T[1],O=t(!1),P=O[0],S=O[1];a((function(){if(k&&A&&String(null==F?void 0:F.id)!==String(A)){S(!0);try{I(null),m(c(s.GET_HOSPITAL_INFO,{hospital_branch_id:A,website_url:p[w]}),"get").then((function(e){I(null==e?void 0:e._data.branch)}))}catch(e){console.error(e)}S(!1)}}),[k,A,null==F?void 0:F.id]);var D=(null==F?void 0:F.specialties)\|\|[],H=n((function(){return D.map((function(e){return e.name}))}),[D]);return e.createElement(e.Fragment,null,e.createElement(f,{"data-open":k,"data-animation":_,onClick:function(e){return e.stopPropagation()}},P\|\|!F?e.createElement(E,null):e.createElement("div",{className:"popup-content"},e.createElement("div",{className:"close-button",onClick:x},e.createElement("img",{src:u,style:{width:20,height:20},alt:"close-icon"})),e.createElement("div",{className:"main-info"},e.createElement("div",{className:"border-banner"}),e.createElement("div",{className:"avatar-title"},e.createElement(b,null,e.createElement("div",{className:"image-container"},e.createElement("div",{style:{position:"relative"}},e.createElement("img",{src:(null==F?void 0:F.logo)?null==F?void 0:F.logo:g,className:"profile-image",alt:"avatar"}),e.createElement("img",{className:"badge-avatar",src:v,alt:"badge"})))),e.createElement(h,null,e.createElement(l,{size:"s3",type:"semiBold",className:"full-name"},null==F?void 0:F.name),e.createElement("div",{className:"specialty"},D&&e.createElement(l,{size:"p4",color:i.colors.gray800},H.join(" • "),"•"),e.createElement("a",{href:d({id:F.id,name:F.name,slug:F.slug,locale:w}),className:"organisation",target:"_blank",rel:"noreferrer"},e.createElement(l,{size:"p4",className:"organisation",color:i.colors.gray800,style:{textDecoration:"underline"}},null==F?void 0:F.name))))),!C&&e.createElement("a",{href:d({id:F.id,name:F.name,slug:F.slug,locale:w})},e.createElement("div",{className:"btn-wrapper"},e.createElement(o,{color:"primary",size:"md",className:"btn-booking"},B("careBooking.bookAnAppointment"))))),e.createElement(h,null,e.createElement("div",{className:"experience"},e.createElement(l,{type:"bold",size:"s3",color:i.colors.gray800,style:{paddingBottom:16}},B("hospital.content.description").toUpperCase()),e.createElement(l,{size:"p2",color:i.colors.gray500},F.about),C?e.createElement("a",{href:d({id:F.id,name:F.name,slug:F.slug,locale:w})},e.createElement("div",{className:"btn-wrapper"},e.createElement(o,{color:"primary",size:"md",className:"btn-booking"},B("careBooking.bookAnAppointment")))):e.createElement("a",{href:d({id:F.id,name:F.name,slug:F.slug,locale:w})},e.createElement(l,{size:"s4",color:"#2D87F3",style:{paddingTop:24}},B("home.seeHospital"))))))),e.createElement(N,{"data-open":k,onClick:function(e){e.stopPropagation(),x()}}))};export{y as PopupHospital};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/popupHospital/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/popupHospital/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\n\nimport { Button } from 'components/atoms/button'\nimport { Text } from 'components/atoms/text'\nimport { useTranslations } from 'hooks/useTranslations'\nimport { theme } from 'misc/theme'\nimport { LocaleType } from 'src/interfaces/types'\n\nimport { CARE_PATHS } from '../../../api/paths'\nimport {\n callApi,\n domainLocales,\n getCareHospitalUrl,\n getCarePath,\n} from '../../../api/utils'\nimport AvatarDefault from '../../../assets/images/avatar-default.png'\nimport CloseLight from '../../../assets/svg/closeLight.svg'\nimport ReviewerMedical from '../../../assets/svg/reviewer-medical.svg'\nimport { Loading } from '../../atoms/loading'\nimport {\n StyledPopup,\n StyledPopupWrapper,\n StyledProfileImage,\n StyledTitleContainer,\n} from './index.styled'\n\nexport type Specialy = {\n id: string\n name: string\n slug: string\n thumbnail?: string\n}\n\nexport type HospitalInfo = {\n name: string\n about?: string\n specialties?: Array<Specialy>\n logo?: string\n address?: string\n city_id?: number\n total_available_doctor?: number\n total_available_service?: number\n slug: string\n id: number\n}\nexport type Props = {\n isOpen: boolean\n onClose: () => void\n enableAnimation?: boolean\n hospitalId: string\n locale?: LocaleType\n isMobile?: boolean\n}\n\nconst PopupHospital = ({\n isOpen = true,\n onClose,\n enableAnimation = true,\n hospitalId,\n locale,\n isMobile,\n}: Props) => {\n const { t } = useTranslations()\n const [hospitalInfo, setHospitalInfo] = useState<HospitalInfo | null>(null)\n const [isLoading, setIsLoading] = useState(false)\n\n useEffect(() => {\n if (\n isOpen &&\n hospitalId &&\n String(hospitalInfo?.id) !== String(hospitalId)\n ) {\n setIsLoading(true)\n try {\n setHospitalInfo(null)\n callApi(\n getCarePath(CARE_PATHS.GET_HOSPITAL_INFO, {\n hospital_branch_id: hospitalId,\n website_url: domainLocales[locale],\n }),\n 'get',\n ).then((res) => {\n setHospitalInfo(res?._data.branch)\n })\n } catch (error) {\n console.error(error)\n }\n setIsLoading(false)\n }\n }, [isOpen, hospitalId, hospitalInfo?.id])\n const specialties = hospitalInfo?.specialties || []\n const formatSpecialties: string[] = useMemo(\n () => specialties.map((specialty: any) => specialty.name),\n [specialties],\n )\n\n return (\n <>\n <StyledPopup\n data-open={isOpen}\n data-animation={enableAnimation}\n onClick={(e) => e.stopPropagation()}\n >\n {isLoading || !hospitalInfo ? (\n <Loading />\n ) : (\n <div className=\"popup-content\">\n <div className=\"close-button\" onClick={onClose}>\n <img\n src={CloseLight}\n style={{ width: 20, height: 20 }}\n alt=\"close-icon\"\n />\n </div>\n <div className=\"main-info\">\n <div className=\"border-banner\"></div>\n <div className=\"avatar-title\">\n <StyledProfileImage>\n <div className=\"image-container\">\n <div style={{ position: 'relative' }}>\n <img\n src={\n hospitalInfo?.logo\n ? hospitalInfo?.logo\n : AvatarDefault\n }\n className=\"profile-image\"\n alt=\"avatar\"\n />\n <img\n className=\"badge-avatar\"\n src={ReviewerMedical}\n alt=\"badge\"\n />\n </div>\n </div>\n </StyledProfileImage>\n <StyledTitleContainer>\n <Text size=\"s3\" type=\"semiBold\" className=\"full-name\">\n {hospitalInfo?.name}\n </Text>\n <div className=\"specialty\">\n {specialties && (\n <Text size=\"p4\" color={theme.colors.gray800}>\n {formatSpecialties.join(' • ')}\n {'•'}\n </Text>\n )}\n\n <a\n href={getCareHospitalUrl({\n id: hospitalInfo.id,\n name: hospitalInfo.name,\n slug: hospitalInfo.slug,\n locale,\n })}\n className=\"organisation\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Text\n size=\"p4\"\n className=\"organisation\"\n color={theme.colors.gray800}\n style={{ textDecoration: 'underline' }}\n >\n {hospitalInfo?.name}\n </Text>\n </a>\n </div>\n </StyledTitleContainer>\n </div>\n {!isMobile && (\n <a\n href={getCareHospitalUrl({\n id: hospitalInfo.id,\n name: hospitalInfo.name,\n slug: hospitalInfo.slug,\n locale,\n })}\n >\n <div className=\"btn-wrapper\">\n <Button color=\"primary\" size=\"md\" className=\"btn-booking\">\n {t('careBooking.bookAnAppointment')}\n </Button>\n </div>\n </a>\n )}\n </div>\n\n <StyledTitleContainer>\n <div className=\"experience\">\n <Text\n type=\"bold\"\n size=\"s3\"\n color={theme.colors.gray800}\n style={{ paddingBottom: 16 }}\n >\n {t('hospital.content.description').toUpperCase()}\n </Text>\n <Text size=\"p2\" color={theme.colors.gray500}>\n {hospitalInfo.about}\n </Text>\n {isMobile ? (\n <a\n href={getCareHospitalUrl({\n id: hospitalInfo.id,\n name: hospitalInfo.name,\n slug: hospitalInfo.slug,\n locale,\n })}\n >\n <div className=\"btn-wrapper\">\n <Button color=\"primary\" size=\"md\" className=\"btn-booking\">\n {t('careBooking.bookAnAppointment')}\n </Button>\n </div>\n </a>\n ) : (\n <a\n href={getCareHospitalUrl({\n id: hospitalInfo.id,\n name: hospitalInfo.name,\n slug: hospitalInfo.slug,\n locale,\n })}\n >\n <Text size=\"s4\" color=\"#2D87F3\" style={{ paddingTop: 24 }}>\n {t('home.seeHospital')}\n </Text>\n </a>\n )}\n </div>\n </StyledTitleContainer>\n </div>\n )}\n </StyledPopup>\n <StyledPopupWrapper\n data-open={isOpen}\n onClick={(e) => {\n e.stopPropagation()\n onClose()\n }}\n />\n </>\n )\n}\n\nexport { PopupHospital }\n"],"names":["PopupHospital","_a","_b","isOpen","onClose","_c","enableAnimation","hospitalId","locale","isMobile","t","useTranslations","_d","useState","hospitalInfo","setHospitalInfo","_e","isLoading","setIsLoading","useEffect","String","id","callApi","getCarePath","CARE_PATHS","GET_HOSPITAL_INFO","hospital_branch_id","website_url","domainLocales","then","res","_data","branch","error","console","specialties","formatSpecialties","useMemo","map","specialty","name","React","createElement","Fragment","StyledPopup","onClick","e","stopPropagation","Loading","className","src","CloseLight","style","width","height","alt","StyledProfileImage","position","logo","AvatarDefault","ReviewerMedical","StyledTitleContainer","Text","size","type","color","theme","colors","gray800","join","href","getCareHospitalUrl","slug","target","rel","textDecoration","Button","paddingBottom","toUpperCase","gray500","about","paddingTop","StyledPopupWrapper"],"mappings":"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"}

package/build/esm/together/components/molecules/popupHospital/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import{MediaQueries as t}from"../../../../misc/utils.js";import i from"styled-components";var e,o,a,p,r,d,l,s=i.div(e\|\|(e=n(["\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 0px 4px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n "," {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n "," {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ",";\n border-radius: 6px;\n .btn-booking {\n display: flex;\n margin: 12px auto;\n }\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n"],["\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 0px 4px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n "," {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n "," {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ",";\n border-radius: 6px;\n .btn-booking {\n display: flex;\n margin: 12px auto;\n }\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray200}),t.tdUp,t.mbDown,(function(n){return n.theme.colors.blue50})),x=i.div(o\|\|(o=n(["\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n"],["\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n"]))),c=i.div(a\|\|(a=n(["\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n"],["\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n"]))),g=i.div(p\|\|(p=n(["\n position: relative;\n z-index: 9;\n .specialty {\n display: block;\n min-width: 240px;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n }\n"],["\n position: relative;\n z-index: 9;\n .specialty {\n display: block;\n min-width: 240px;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n }\n"])));i.span(r\|\|(r=n(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ",";\n"],["\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ",";\n"])),(function(n){return n.theme.colors.neutral300})),i.div(d\|\|(d=n(["\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ",";\n border-radius: 50%;\n"],["\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ",";\n border-radius: 50%;\n"])),(function(n){return n.theme.colors.gray400})),i.div(l\|\|(l=n(["\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n"],["\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n"])));export{s as StyledPopup,x as StyledPopupWrapper,c as StyledProfileImage,g as StyledTitleContainer};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/popupHospital/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/popupHospital/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledPopup = styled.div`\n position: fixed;\n left: 50%;\n width: 343px;\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 6px;\n box-shadow: 0px 0px 4px ${(props: ThemeProps) => props.theme.colors.gray200};\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n\n ${MediaQueries.tdUp} {\n width: 750px;\n }\n\n &[data-animation='true'] {\n transition: all 0.5s ease-in-out;\n }\n\n &[data-open='true'] {\n z-index: 200;\n top: 50%;\n opacity: 1;\n visibility: visible;\n }\n\n &[data-open='false'] {\n top: -50%;\n }\n\n .popup-content {\n ${MediaQueries.mbDown} {\n display: block;\n }\n display: flex;\n position: relative;\n z-index: 111;\n height: 100%;\n .button-see-more {\n margin: 32px 0;\n padding: 0;\n > * {\n display: inline-block;\n }\n }\n .close-button {\n position: absolute;\n z-index: 100;\n top: 10px;\n right: 10px;\n cursor: pointer;\n width: unset;\n height: unset;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n }\n\n .main-info {\n padding-bottom: 32px;\n background-color: ${(props: ThemeProps) => props.theme.colors.blue50};\n border-radius: 6px;\n .btn-booking {\n display: flex;\n margin: 12px auto;\n }\n .avatar-title {\n position: relative;\n width: 100%;\n padding-top: 46px;\n text-align: center;\n }\n }\n`\n\nexport const StyledPopupWrapper = styled.div`\n position: fixed;\n z-index: 110;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n background: rgba(38, 38, 38, 0.3);\n\n &[data-open='false'] {\n display: none;\n }\n`\n\nexport const StyledProfileImage = styled.div`\n .image-container {\n .badge-avatar {\n position: absolute;\n right: 0;\n bottom: 0;\n top: 0;\n }\n }\n display: flex;\n justify-content: center;\n padding-bottom: 15px;\n text-align: center;\n .profile-image {\n width: 100px;\n min-width: 100px;\n height: 100px;\n min-height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n .badge-avatar {\n width: 24px;\n height: 24px;\n }\n`\n\nexport const StyledTitleContainer = styled.div`\n position: relative;\n z-index: 9;\n .specialty {\n display: block;\n min-width: 240px;\n }\n\n padding: 0px 16px;\n text-align: center;\n .specialty {\n justify-content: center;\n }\n\n .experience {\n padding: 16px 0px 32px;\n text-align: left;\n .btn-wrapper {\n margin-top: 24px;\n }\n }\n p {\n max-width: 100%;\n }\n`\nexport const StyledSeparator = styled.span`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 0.4em;\n color: ${(props: ThemeProps) => props.theme.colors.neutral300};\n`\nexport const StyledDotSeparator = styled.div`\n display: inline-block;\n width: 3px;\n height: 3px;\n margin: 0;\n background-color: ${(props: ThemeProps) => props.theme.colors.gray400};\n border-radius: 50%;\n`\n\nexport const StyledItem = styled.div`\n display: flex;\n margin-top: 8px;\n\n .bullet-point {\n width: 24px;\n height: 24px;\n }\n`\n"],"names":["StyledPopup","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","white","gray200","MediaQueries","tdUp","mbDown","blue50","StyledPopupWrapper","templateObject_2","StyledProfileImage","templateObject_3","StyledTitleContainer","templateObject_4","span","templateObject_5","neutral300","templateObject_6","gray400","templateObject_7"],"mappings":"6KAIO,kBAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,4EAAA,uDAAA,oFAAA,mSAAA,olBAAA,gPAAA,CAAA,4EAIgC,uDAEQ,oFAIxD,mSAoBI,olBAgC+C,mPA1DlD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAEpC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,UAIlEC,EAAaC,KAoBXD,EAAaE,QAgCK,SAACP,GAAsB,OAAAA,EAAMC,MAAMC,OAAOM,UAerDC,EAAqBb,EAAOC,IAAGa,IAAAA,EAAAX,EAAA,CAAA,sNAAA,CAAA,yNAe/BY,EAAqBf,EAAOC,IAAGe,IAAAA,EAAAb,EAAA,CAAA,qcAAA,CAAA,wcA2B/Bc,EAAuBjB,EAAOC,IAAGiB,IAAAA,EAAAf,EAAA,CAAA,iXAAA,CAAA,oXAyBfH,EAAOmB,KAAIC,IAAAA,EAAAjB,EAAA,CAAA,2GAAA,OAAA,CAAA,2GAKqB,UAApD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOe,cAEnBrB,EAAOC,IAAGqB,IAAAA,EAAAnB,EAAA,CAAA,gGAAA,8BAAA,CAAA,gGAK2B,iCAAjD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOiB,WAItCvB,EAAOC,IAAGuB,IAAAA,EAAArB,EAAA,CAAA,2GAAA,CAAA"}

package/build/esm/together/components/molecules/postContent/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as t,useContext as n,useMemo as o}from"react";import{useTranslations as r}from"../../../../hooks/useTranslations.js";import{TogetherComponentGlobalContext as s}from"../../../togetherComponentGlobalContext.js";import{useTogetherAuthRequiredAction as a}from"../../../hooks/useTogetherAuthRequiredAction.js";import{decodeMention as l,decodePostUrl as i}from"../../../utils/post.js";import{PopupExpert as c}from"../popupExpert/index.js";import{StyledPostContent as p}from"./index.styled.js";var m=function(m){var u=m.className,h=m.style,d=m.replyingTo,f=m.mentionedUser,g=m.description,v=m.disableShortenContent,y=m.mentions,C=void 0===y?[]:y,E=t(!1),x=E[0],S=E[1],j=r().t,M=a().authActionWrapper,N=t(!1),k=N[0],A=N[1],I=l(i(g\|\|"","display"),C),T=n(s).action.sanitizeFunction,w=o((function(){var e=T(I\|\|"");if(v\|\|x)return{showContent:e,hasSeeMore:!1};var t=e.slice(0,200),n=200-27((t.match(/<\/div>/g)\|\|[]).length-1),o=(t\|\|"").slice(0,n<40?40:n),r=T(o.replace(/(<\|<\/)( +\|[a-zA-Z])$/gi,"")),s=r.length<e.length-10;return{showContent:s?r:e,hasSeeMore:s}}),[v,x,I]),b=(null==f?void 0:f.name)\|\|d,z="expert"===(null==f?void 0:f.role)&&!!(null==f?void 0:f.partnerId);return e.createElement(e.Fragment,null,z&&e.createElement(c,{isOpen:k,onClose:function(){return A(!1)},expertId:String(null==f?void 0:f.partnerId)}),e.createElement(p,{className:"".concat(u," no-replace-click"),style:h},b&&e.createElement("span",{onClick:function(){return z&&A(!0)},className:"post-content-replying"},"@",b),(null==g?void 0:g.startsWith("[mention+id="))&&e.createElement("span",{className:"post-content-replying tag-only"},"@"),e.createElement("span",{dangerouslySetInnerHTML:{__html:w.showContent},className:"post-content ".concat(w.hasSeeMore?"has-see-more":"")}),w.hasSeeMore&&!x&&e.createElement("span",null,"... ",e.createElement("span",{onClick:function(e){e.preventDefault(),e.stopPropagation(),M((function(){return S(!0)}))},className:"see-more-text"},j("post.seeMore")))))};export{m as PostContent};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/postContent/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/postContent/index.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useMemo, useState } from 'react'\n\nimport { useTranslations } from 'hooks/useTranslations'\nimport { UserInfo } from 'together/interfaces/types'\nimport { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'\n\nimport { useTogetherAuthRequiredAction } from '../../../hooks/useTogetherAuthRequiredAction'\nimport { decodeMention, decodePostUrl } from '../../../utils/post'\nimport { PopupExpert } from '../popupExpert'\nimport { StyledPostContent } from './index.styled'\n\nexport type Props = {\n description?: string\n replyingTo?: string\n disableShortenContent?: boolean\n className?: string\n style?: CSSProperties\n mentionedUser?: UserInfo\n mentions?: {\n id: number\n name: string\n }[]\n}\n\nexport const PostContent = ({\n className,\n style,\n replyingTo,\n mentionedUser,\n description: rawDescription,\n disableShortenContent,\n mentions = [],\n}: Props) => {\n const [showAll, setShowAll] = useState(false)\n const { t } = useTranslations()\n const { authActionWrapper } = useTogetherAuthRequiredAction()\n const [openPopupExpert, setOpenPopupExpert] = useState(false)\n const description = decodeMention(\n decodePostUrl(rawDescription || '', 'display'),\n mentions,\n )\n const {\n action: { sanitizeFunction },\n } = useContext(TogetherComponentGlobalContext)\n const shortenSanitizedContentData = useMemo(() => {\n const sanitizedContent = sanitizeFunction(description || '')\n if (disableShortenContent || showAll)\n return {\n showContent: sanitizedContent,\n hasSeeMore: false,\n }\n const firstRound = sanitizedContent.slice(0, 200)\n const newLineCompensateLength =\n 200 - ((firstRound.match(/<\\/div>/g) || []).length - 1) * 27\n const shortenFirstRound = (firstRound || '').slice(\n 0,\n newLineCompensateLength < 40 ? 40 : newLineCompensateLength,\n )\n\n // remove < if we cut off right before start of a new html tag\n const secondRound = sanitizeFunction(\n shortenFirstRound.replace(/(<|<\\/)( +|[a-zA-Z]*)$/gi, ''),\n )\n // don't show see more if not much difference\n const hasSeeMore = secondRound.length < sanitizedContent.length - 10\n return {\n showContent: hasSeeMore ? secondRound : sanitizedContent,\n hasSeeMore,\n }\n }, [disableShortenContent, showAll, description])\n\n const replyName = mentionedUser?.name || replyingTo\n const hasExpert =\n mentionedUser?.role === 'expert' && !!mentionedUser?.partnerId\n return (\n <>\n {hasExpert && (\n <PopupExpert\n isOpen={openPopupExpert}\n onClose={() => setOpenPopupExpert(false)}\n expertId={String(mentionedUser?.partnerId)}\n ></PopupExpert>\n )}\n <StyledPostContent\n className={`${className} no-replace-click`}\n style={style}\n >\n {replyName && (\n <span\n onClick={() => hasExpert && setOpenPopupExpert(true)}\n className=\"post-content-replying\"\n >\n @{replyName}\n </span>\n )}\n {rawDescription?.startsWith('[mention+id=') && (\n <span className=\"post-content-replying tag-only\">@</span>\n )}\n <span\n dangerouslySetInnerHTML={{\n __html: shortenSanitizedContentData.showContent,\n }}\n className={`post-content ${\n shortenSanitizedContentData.hasSeeMore ? 'has-see-more' : ''\n }`}\n ></span>\n {shortenSanitizedContentData.hasSeeMore && !showAll && (\n <span>\n {`... `}\n <span\n onClick={(e) => {\n e.preventDefault()\n e.stopPropagation()\n authActionWrapper(() => setShowAll(true))\n }}\n className=\"see-more-text\"\n >\n {t('post.seeMore')}\n </span>\n </span>\n )}\n </StyledPostContent>\n </>\n )\n}\n"],"names":["PostContent","_a","className","style","replyingTo","mentionedUser","rawDescription","description","disableShortenContent","_b","mentions","_c","useState","showAll","setShowAll","t","useTranslations","authActionWrapper","useTogetherAuthRequiredAction","_d","openPopupExpert","setOpenPopupExpert","decodeMention","decodePostUrl","sanitizeFunction","useContext","TogetherComponentGlobalContext","shortenSanitizedContentData","useMemo","sanitizedContent","showContent","hasSeeMore","firstRound","slice","newLineCompensateLength","match","length","shortenFirstRound","secondRound","replace","replyName","name","hasExpert","role","partnerId","React","createElement","Fragment","PopupExpert","isOpen","onClose","expertId","String","StyledPostContent","concat","onClick","startsWith","dangerouslySetInnerHTML","__html","e","preventDefault","stopPropagation"],"mappings":"0fAwBO,IAAMA,EAAc,SAACC,OAC1BC,EAASD,EAAAC,UACTC,EAAKF,EAAAE,MACLC,EAAUH,EAAAG,WACVC,EAAaJ,EAAAI,cACAC,EAAcL,EAAAM,YAC3BC,EAAqBP,EAAAO,sBACrBC,aAAAC,OAAW,IAAAD,EAAA,GAAEA,EAEPE,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAClBI,EAAMC,MACNC,EAAsBC,sBACxBC,EAAwCP,GAAS,GAAhDQ,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GACpCZ,EAAce,EAClBC,EAAcjB,GAAkB,GAAI,WACpCI,GAGUc,EACRC,EAAWC,2BACTC,EAA8BC,GAAQ,WAC1C,IAAMC,EAAmBL,EAAiBjB,GAAe,IACzD,GAAIC,GAAyBK,EAC3B,MAAO,CACLiB,YAAaD,EACbE,YAAY,GAEhB,IAAMC,EAAaH,EAAiBI,MAAM,EAAG,KACvCC,EACJ,IAA0D,KAAlDF,EAAWG,MAAM,aAAe,IAAIC,OAAS,GACjDC,GAAqBL,GAAc,IAAIC,MAC3C,EACAC,EAA0B,GAAK,GAAKA,GAIhCI,EAAcd,EAClBa,EAAkBE,QAAQ,2BAA4B,KAGlDR,EAAaO,EAAYF,OAASP,EAAiBO,OAAS,GAClE,MAAO,CACLN,YAAaC,EAAaO,EAAcT,EACxCE,WAAUA,KAEX,CAACvB,EAAuBK,EAASN,IAE9BiC,GAAYnC,aAAA,EAAAA,EAAeoC,OAAQrC,EACnCsC,EACoB,YAAxBrC,aAAA,EAAAA,EAAesC,UAAuBtC,eAAAA,EAAeuC,WACvD,OACEC,EAAAC,cAAAD,EAAAE,SAAA,KACGL,GACCG,EAACC,cAAAE,GACCC,OAAQ7B,EACR8B,QAAS,WAAM,OAAA7B,GAAmB,IAClC8B,SAAUC,OAAO/C,eAAAA,EAAeuC,aAGpCC,EAACC,cAAAO,EACC,CAAAnD,UAAW,GAAAoD,OAAGpD,EAA4B,qBAC1CC,MAAOA,GAENqC,GACCK,EAAAC,cAAA,OAAA,CACES,QAAS,WAAM,OAAAb,GAAarB,GAAmB,IAC/CnB,UAAU,6BAERsC,IAGLlC,aAAA,EAAAA,EAAgBkD,WAAW,kBAC1BX,EAAAC,cAAA,OAAA,CAAM5C,UAAU,uCAElB2C,EAAAC,cAAA,OAAA,CACEW,wBAAyB,CACvBC,OAAQ/B,EAA4BG,aAEtC5B,UAAW,gBACToD,OAAA3B,EAA4BI,WAAa,eAAiB,MAG7DJ,EAA4BI,aAAelB,GAC1CgC,4BACG,OACDA,EACEC,cAAA,OAAA,CAAAS,QAAS,SAACI,GACRA,EAAEC,iBACFD,EAAEE,kBACF5C,GAAkB,WAAM,OAAAH,GAAW,OAErCZ,UAAU,iBAETa,EAAE"}

package/build/esm/together/components/molecules/postContent/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var e,t=i.div(e\|\|(e=n(["\n padding: 0.5rem 1rem 1rem;\n line-height: 1.5;\n word-break: break-word;\n .post-content-replying {\n margin-right: 5px;\n color: ",";\n cursor: pointer;\n display: inline-block;\n &.tag-only {\n margin-right: 0;\n }\n }\n .post-content {\n display: inline;\n white-space: pre-wrap;\n /* > :first-child, /\n > mention:first-child ~ * {\n &:not(ul),\n &:not(ol) {\n display: inline-block;\n }\n }\n > mention:first-child {\n margin-right: 5px;\n }\n &.has-see-more {\n :last-child {\n &:not(ul),\n &:not(ol) {\n display: inline;\n }\n }\n }\n img {\n width: 100%;\n height: unset;\n }\n ul,\n ol {\n list-style-position: inside;\n padding-left: 1rem;\n display: block;\n }\n ol {\n list-style-type: decimal;\n }\n ul {\n list-style-type: disc;\n }\n mention {\n color: #1890ff;\n padding-right: 4px;\n :hover {\n text-decoration: underline;\n }\n }\n }\n .see-more-text {\n color: #1890ff;\n cursor: pointer;\n }\n"],["\n padding: 0.5rem 1rem 1rem;\n line-height: 1.5;\n word-break: break-word;\n .post-content-replying {\n margin-right: 5px;\n color: ",";\n cursor: pointer;\n display: inline-block;\n &.tag-only {\n margin-right: 0;\n }\n }\n .post-content {\n display: inline;\n white-space: pre-wrap;\n / > :first-child, /\n > mention:first-child ~ * {\n &:not(ul),\n &:not(ol) {\n display: inline-block;\n }\n }\n > mention:first-child {\n margin-right: 5px;\n }\n &.has-see-more {\n *:last-child {\n &:not(ul),\n &:not(ol) {\n display: inline;\n }\n }\n }\n img {\n width: 100%;\n height: unset;\n }\n ul,\n ol {\n list-style-position: inside;\n padding-left: 1rem;\n display: block;\n }\n ol {\n list-style-type: decimal;\n }\n ul {\n list-style-type: disc;\n }\n mention {\n color: #1890ff;\n padding-right: 4px;\n :hover {\n text-decoration: underline;\n }\n }\n }\n .see-more-text {\n color: #1890ff;\n cursor: pointer;\n }\n"])),(function(n){return n.theme.colors.primaryBase}));export{t as StyledPostContent};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/together/components/molecules/postContent/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/together/components/molecules/postContent/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport styled from 'styled-components'\n\nexport const StyledPostContent = styled.div`\n padding: 0.5rem 1rem 1rem;\n line-height: 1.5;\n word-break: break-word;\n .post-content-replying {\n margin-right: 5px;\n color: ${(props: ThemeProps) => props.theme.colors.primaryBase};\n cursor: pointer;\n display: inline-block;\n &.tag-only {\n margin-right: 0;\n }\n }\n .post-content {\n display: inline;\n white-space: pre-wrap;\n /* > *:first-child, */\n > mention:first-child ~ * {\n &:not(ul),\n &:not(ol) {\n display: inline-block;\n }\n }\n > mention:first-child {\n margin-right: 5px;\n }\n &.has-see-more {\n *:last-child {\n &:not(ul),\n &:not(ol) {\n display: inline;\n }\n }\n }\n img {\n width: 100%;\n height: unset;\n }\n ul,\n ol {\n list-style-position: inside;\n padding-left: 1rem;\n display: block;\n }\n ol {\n list-style-type: decimal;\n }\n ul {\n list-style-type: disc;\n }\n mention {\n color: #1890ff;\n padding-right: 4px;\n :hover {\n text-decoration: underline;\n }\n }\n }\n .see-more-text {\n color: #1890ff;\n cursor: pointer;\n }\n`\n"],"names":["StyledPostContent","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","primaryBase"],"mappings":"oHAGa,MAAAA,EAAoBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,kJAAA,4+BAAA,CAAA,kJAMuB,++BAArD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC"}

package/build/esm/together/components/molecules/postImagePreview/imagePreviewPopup.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as t,useEffect as o}from"react";import{Text as r}from"../../../../components/atoms/text/index.js";import{useTranslations as a}from"../../../../hooks/useTranslations.js";import*as n from"react-dom";import s from"../../../assets/svg/icon-arrow-left.svg.js";import{StyledImagePreviewPopup as m}from"./index.styled.js";var i=function(i){var c=i.className,l=i.style,p=i.authorName,f=i.images,u=i.onClose,d=i.onOpenSingleView,g=a().t,v=t(!1),y=v[0],N=v[1];return o((function(){setTimeout((function(){N(!0)}),0)}),[]),n.createPortal(e.createElement(m,{className:c,style:l,"data-open":y},e.createElement("div",{className:"top-bar"},e.createElement("img",{className:"icon-arrow-left",src:s,onClick:u,alt:"go back"}),e.createElement(r,{size:"p2",type:"bold",style:{textAlign:"center"}},g("previewPhotos.title",{name:p}))),e.createElement("div",{className:"container"},f.map((function(t,o){return e.createElement("img",{className:"img-preview",key:o,src:t,onClick:function(){return null==d?void 0:d(o)},alt:"post img"})})))),document.body)};export{i as ImagePreviewPopup};
2	+ //# sourceMappingURL=imagePreviewPopup.js.map

package/build/esm/together/components/molecules/postImagePreview/imagePreviewPopup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"imagePreviewPopup.js","sources":["../../../../../../src/together/components/molecules/postImagePreview/imagePreviewPopup.tsx"],"sourcesContent":["import React, { CSSProperties, useEffect, useState } from 'react'\n\nimport { Text } from 'components/atoms/text'\nimport { useTranslations } from 'hooks/useTranslations'\nimport * as ReactDOM from 'react-dom'\n\nimport IconArrowLeft from '../../../assets/svg/icon-arrow-left.svg'\nimport { StyledImagePreviewPopup } from './index.styled'\n\nexport type Props = {\n className?: string\n style?: CSSProperties\n images: string[]\n authorName: string\n onClose?: () => void\n onOpenSingleView?: (index: number) => void\n}\n\nexport const ImagePreviewPopup = ({\n className,\n style,\n authorName,\n images,\n onClose,\n onOpenSingleView,\n}: Props) => {\n const { t } = useTranslations()\n const [isOpen, setIsOpen] = useState(false)\n useEffect(() => {\n setTimeout(() => {\n setIsOpen(true)\n }, 0)\n }, [])\n return ReactDOM.createPortal(\n <StyledImagePreviewPopup\n className={className}\n style={style}\n data-open={isOpen}\n >\n <div className=\"top-bar\">\n <img\n className=\"icon-arrow-left\"\n src={IconArrowLeft}\n onClick={onClose}\n alt=\"go back\"\n ></img>\n <Text\n size=\"p2\"\n type=\"bold\"\n style={{\n textAlign: 'center',\n }}\n >\n {t('previewPhotos.title', {\n name: authorName,\n })}\n </Text>\n </div>\n <div className=\"container\">\n {images.map((image, index) => (\n <img\n className=\"img-preview\"\n key={index}\n src={image}\n onClick={() => onOpenSingleView?.(index)}\n alt=\"post img\"\n />\n ))}\n </div>\n </StyledImagePreviewPopup>,\n document.body,\n )\n}\n"],"names":["ImagePreviewPopup","_a","className","style","authorName","images","onClose","onOpenSingleView","t","useTranslations","_b","useState","isOpen","setIsOpen","useEffect","setTimeout","ReactDOM","createPortal","React","StyledImagePreviewPopup","createElement","src","IconArrowLeft","onClick","alt","Text","size","type","textAlign","name","map","image","index","key","document","body"],"mappings":"8UAkBO,IAAMA,EAAoB,SAACC,GAChC,IAAAC,EAASD,EAAAC,UACTC,EAAKF,EAAAE,MACLC,EAAUH,EAAAG,WACVC,WACAC,EAAOL,EAAAK,QACPC,EAAgBN,EAAAM,iBAERC,EAAMC,MACRC,EAAsBC,GAAS,GAA9BC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAMxB,OALAI,GAAU,WACRC,YAAW,WACTF,GAAU,KACT,KACF,IACIG,EAASC,aACdC,gBAACC,EAAuB,CACtBjB,UAAWA,EACXC,MAAOA,cACIS,GAEXM,EAAKE,cAAA,MAAA,CAAAlB,UAAU,WACbgB,EAAAE,cAAA,MAAA,CACElB,UAAU,kBACVmB,IAAKC,EACLC,QAASjB,EACTkB,IAAI,YAENN,EAACE,cAAAK,EACC,CAAAC,KAAK,KACLC,KAAK,OACLxB,MAAO,CACLyB,UAAW,WAGZpB,EAAE,sBAAuB,CACxBqB,KAAMzB,MAIZc,EAAKE,cAAA,MAAA,CAAAlB,UAAU,aACZG,EAAOyB,KAAI,SAACC,EAAOC,GAAU,OAC5Bd,EACEE,cAAA,MAAA,CAAAlB,UAAU,cACV+B,IAAKD,EACLX,IAAKU,EACLR,QAAS,WAAM,OAAAhB,aAAgB,EAAhBA,EAAmByB,IAClCR,IAAI,kBAKZU,SAASC"}

package/build/esm/together/components/molecules/postImagePreview/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useContext as t,useState as n,useEffect as r,useRef as a}from"react";import{Heading as i}from"../../../../components/atoms/heading/index.js";import{lazyLoadInstance as o}from"../../../../misc/lazyLoad.js";import{toggleNoScroll as m}from"../../../../misc/utils.js";import{TogetherComponentGlobalContext as l}from"../../../togetherComponentGlobalContext.js";import{ImagePreviewPopup as c}from"./imagePreviewPopup.js";import{StyledPostImagePreview as s}from"./index.styled.js";import{PostSingleImageViewPopup as u}from"./postSingleImageViewPopup/index.js";var p=function(p){var g=p.className,d=p.images,f=void 0===d?[]:d,v=p.style,y=p.authorName,h=t(l).data.env.isMarryBaby,E="+ ".concat((f.length\|\|0)-4),j=n(!1),w=j[0],N=j[1],x=n(-1),b=x[0],C=x[1];r((function(){setTimeout((function(){return null==o?void 0:o.update()}),100)}),[null==f?void 0:f.slice(0,5).join("\|")]);var z=f.length>5,P=a(!1);return r((function(){return function(){P.current&&m(!1)}}),[]),r((function(){w\|\|b>=0?(m(!0),P.current=!0):(m(!1),P.current=!1)}),[w,b]),e.createElement(e.Fragment,null,e.createElement(s,{className:g,style:v,"data-image-count":z?5:f.length\|\|0,"data-is-marrybaby":h},null==f?void 0:f.slice(0,5).map((function(t,n){return e.createElement("div",{className:"img-wrapper",key:n,onClick:function(){n>=4&&z?N(!0):C(n)}},!h&&e.createElement("img",{className:"lazy img-preview-blur","data-src":t}),e.createElement("img",{className:"lazy img-preview","data-src":t}),4===n&&z&&e.createElement("div",{className:"img-more-overlay"},e.createElement(i,{tag:"h1",color:"white"},E)))}))),w&&e.createElement(c,{authorName:y\|\|"",images:f,onClose:function(){return N(!1)},onOpenSingleView:C}),b>=0&&e.createElement(u,{images:f,initialViewIndex:b,onClose:function(){return C(-1)}}))};export{p as PostImagePreview};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/together/components/molecules/postImagePreview/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/together/components/molecules/postImagePreview/index.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\n\nimport { Heading } from 'components/atoms/heading'\nimport { lazyLoadInstance } from 'misc/lazyLoad'\nimport { toggleNoScroll } from 'misc/utils'\nimport { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'\n\nimport { ImagePreviewPopup } from './imagePreviewPopup'\nimport { StyledPostImagePreview } from './index.styled'\nimport { PostSingleImageViewPopup } from './postSingleImageViewPopup'\n\nexport type Props = {\n images?: string[]\n authorName?: string\n className?: string\n style?: CSSProperties\n}\n\nconst PostImagePreview = ({\n className,\n images = [],\n style,\n authorName,\n}: Props) => {\n const {\n data: {\n env: { isMarryBaby },\n },\n } = useContext(TogetherComponentGlobalContext)\n const moreImageCount = `+ ${(images.length || 0) - 4}`\n const [isOpenImagePreview, setIsOpenImagePreview] = useState(false)\n const [singleImageViewIndex, setSingleImageViewIndex] = useState(-1)\n\n useEffect(() => {\n setTimeout(() => lazyLoadInstance?.update(), 100)\n }, [images?.slice(0, 5).join('|')])\n const hasMore = images.length > 5\n // Check if this component has set no scroll previously and clean it up\n const hasSetNoScroll = useRef(false)\n useEffect(() => {\n return () => {\n if (hasSetNoScroll.current) {\n toggleNoScroll(false)\n }\n }\n }, [])\n useEffect(() => {\n if (isOpenImagePreview || singleImageViewIndex >= 0) {\n toggleNoScroll(true)\n hasSetNoScroll.current = true\n } else {\n toggleNoScroll(false)\n hasSetNoScroll.current = false\n }\n }, [isOpenImagePreview, singleImageViewIndex])\n return (\n <>\n <StyledPostImagePreview\n className={className}\n style={style}\n data-image-count={hasMore ? 5 : images.length || 0}\n data-is-marrybaby={isMarryBaby}\n >\n {images?.slice(0, 5).map((image, index) => (\n <div\n className={`img-wrapper`}\n key={index}\n onClick={() => {\n if (index >= 4 && hasMore) {\n setIsOpenImagePreview(true)\n } else {\n setSingleImageViewIndex(index)\n }\n }}\n >\n {!isMarryBaby && (\n <img className=\"lazy img-preview-blur\" data-src={image} />\n )}\n <img className=\"lazy img-preview\" data-src={image} />\n {index === 4 && hasMore && (\n <div className=\"img-more-overlay\">\n <Heading tag=\"h1\" color=\"white\">\n {moreImageCount}\n </Heading>\n </div>\n )}\n </div>\n ))}\n </StyledPostImagePreview>\n {isOpenImagePreview && (\n <ImagePreviewPopup\n authorName={authorName || ''}\n images={images}\n onClose={() => setIsOpenImagePreview(false)}\n onOpenSingleView={setSingleImageViewIndex}\n />\n )}\n {singleImageViewIndex >= 0 && (\n <PostSingleImageViewPopup\n images={images}\n initialViewIndex={singleImageViewIndex}\n onClose={() => setSingleImageViewIndex(-1)}\n />\n )}\n </>\n )\n}\n\nexport { PostImagePreview }\n"],"names":["PostImagePreview","_a","className","_b","images","style","authorName","isMarryBaby","useContext","TogetherComponentGlobalContext","moreImageCount","concat","length","_c","useState","isOpenImagePreview","setIsOpenImagePreview","_d","singleImageViewIndex","setSingleImageViewIndex","useEffect","setTimeout","lazyLoadInstance","update","slice","join","hasMore","hasSetNoScroll","useRef","current","toggleNoScroll","React","createElement","Fragment","StyledPostImagePreview","map","image","index","key","onClick","Heading","tag","color","ImagePreviewPopup","onClose","onOpenSingleView","PostSingleImageViewPopup","initialViewIndex"],"mappings":"mjBAwBM,IAAAA,EAAmB,SAACC,GACxB,IAAAC,EAASD,EAAAC,UACTC,EAAWF,EAAAG,OAAXA,OAAM,IAAAD,EAAG,GAAEA,EACXE,EAAKJ,EAAAI,MACLC,EAAUL,EAAAK,WAICC,EAEPC,EAAWC,wBACTC,EAAiB,KAAKC,QAACP,EAAOQ,QAAU,GAAK,GAC7CC,EAA8CC,GAAS,GAAtDC,EAAkBF,EAAA,GAAEG,EAAqBH,EAAA,GAC1CI,EAAkDH,GAAU,GAA3DI,EAAoBD,EAAA,GAAEE,EAAuBF,EAAA,GAEpDG,GAAU,WACRC,YAAW,WAAM,OAAAC,aAAA,EAAAA,EAAkBC,WAAU,OAC5C,CAACnB,aAAA,EAAAA,EAAQoB,MAAM,EAAG,GAAGC,KAAK,OAC7B,IAAMC,EAAUtB,EAAOQ,OAAS,EAE1Be,EAAiBC,GAAO,GAiB9B,OAhBAR,GAAU,WACR,OAAO,WACDO,EAAeE,SACjBC,GAAe,MAGlB,IACHV,GAAU,WACJL,GAAsBG,GAAwB,GAChDY,GAAe,GACfH,EAAeE,SAAU,IAEzBC,GAAe,GACfH,EAAeE,SAAU,KAE1B,CAACd,EAAoBG,IAEtBa,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAACC,cAAAE,EACC,CAAAhC,UAAWA,EACXG,MAAOA,EACW,mBAAAqB,EAAU,EAAItB,EAAOQ,QAAU,EAAC,oBAC/BL,GAElBH,aAAA,EAAAA,EAAQoB,MAAM,EAAG,GAAGW,KAAI,SAACC,EAAOC,GAAU,OACzCN,EACEC,cAAA,MAAA,CAAA9B,UAAW,cACXoC,IAAKD,EACLE,QAAS,WACHF,GAAS,GAAKX,EAChBV,GAAsB,GAEtBG,EAAwBkB,MAI1B9B,GACAwB,EAAKC,cAAA,MAAA,CAAA9B,UAAU,wBAAuB,WAAWkC,IAEnDL,EAAAC,cAAA,MAAA,CAAK9B,UAAU,mBAAkB,WAAWkC,IACjC,IAAVC,GAAeX,GACdK,EAAAC,cAAA,MAAA,CAAK9B,UAAU,oBACb6B,EAAAC,cAACQ,EAAQ,CAAAC,IAAI,KAAKC,MAAM,SACrBhC,SAOZK,GACCgB,EAACC,cAAAW,EACC,CAAArC,WAAYA,GAAc,GAC1BF,OAAQA,EACRwC,QAAS,WAAM,OAAA5B,GAAsB,IACrC6B,iBAAkB1B,IAGrBD,GAAwB,GACvBa,EAACC,cAAAc,EACC,CAAA1C,OAAQA,EACR2C,iBAAkB7B,EAClB0B,QAAS,WAAM,OAAAzB,GAAyB"}

package/build/esm/together/components/molecules/postImagePreview/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var i,e,o=t.div(i\|\|(i=n(["\n display: grid;\n cursor: pointer;\n grid-gap: 3px;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto;\n .img-wrapper {\n position: relative;\n overflow: hidden;\n width: 100%;\n padding-top: 56.25%;\n grid-column: auto;\n .img-preview-blur {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 110%;\n height: 110%;\n /* Add the blur effect /\n -webkit-filter: blur(8px);\n filter: blur(8px);\n object-fit: cover;\n object-position: center;\n opacity: 0.8;\n transform: translate(-50%, -50%);\n }\n .img-preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center;\n }\n .img-more-overlay {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.5);\n }\n }\n &[data-image-count='1'] {\n .img-wrapper {\n / padding-top: 100%; /\n grid-column: 1/3;\n }\n }\n &[data-image-count='2'] {\n .img-wrapper {\n / padding-top: 100%; /\n }\n }\n &[data-image-count='3'] {\n .img-wrapper {\n &:first-child {\n grid-column: 1/3;\n }\n }\n }\n &[data-image-count='4'] {\n .img-wrapper {\n / padding-top: 100%; /\n }\n }\n &[data-image-count='5'] {\n grid-template-columns: repeat(6, 1fr);\n .img-wrapper {\n / padding-top: 100%; /\n grid-column: auto/ span 2;\n\n &:first-child {\n padding-top: 56.25%;\n grid-column: 1/4;\n }\n &:nth-child(2) {\n padding-top: 56.25%;\n grid-column: 4/7;\n }\n }\n }\n\n &[data-is-marrybaby='true'] {\n grid-gap: 8px;\n .img-wrapper {\n padding-top: 66.66%;\n border-radius: 1rem;\n .img-preview {\n object-fit: cover;\n }\n }\n &[data-image-count='3'] {\n grid-template-columns: 1fr 1fr 1fr;\n .img-wrapper {\n &:first-child {\n padding-top: 100%;\n grid-column: 1/3;\n grid-row: 1/3;\n }\n }\n }\n }\n"],["\n display: grid;\n cursor: pointer;\n grid-gap: 3px;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto;\n .img-wrapper {\n position: relative;\n overflow: hidden;\n width: 100%;\n padding-top: 56.25%;\n grid-column: auto;\n .img-preview-blur {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 110%;\n height: 110%;\n / Add the blur effect /\n -webkit-filter: blur(8px);\n filter: blur(8px);\n object-fit: cover;\n object-position: center;\n opacity: 0.8;\n transform: translate(-50%, -50%);\n }\n .img-preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center;\n }\n .img-more-overlay {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.5);\n }\n }\n &[data-image-count='1'] {\n .img-wrapper {\n / padding-top: 100%; /\n grid-column: 1/3;\n }\n }\n &[data-image-count='2'] {\n .img-wrapper {\n / padding-top: 100%; /\n }\n }\n &[data-image-count='3'] {\n .img-wrapper {\n &:first-child {\n grid-column: 1/3;\n }\n }\n }\n &[data-image-count='4'] {\n .img-wrapper {\n / padding-top: 100%; /\n }\n }\n &[data-image-count='5'] {\n grid-template-columns: repeat(6, 1fr);\n .img-wrapper {\n / padding-top: 100%; */\n grid-column: auto/ span 2;\n\n &:first-child {\n padding-top: 56.25%;\n grid-column: 1/4;\n }\n &:nth-child(2) {\n padding-top: 56.25%;\n grid-column: 4/7;\n }\n }\n }\n\n &[data-is-marrybaby='true'] {\n grid-gap: 8px;\n .img-wrapper {\n padding-top: 66.66%;\n border-radius: 1rem;\n .img-preview {\n object-fit: cover;\n }\n }\n &[data-image-count='3'] {\n grid-template-columns: 1fr 1fr 1fr;\n .img-wrapper {\n &:first-child {\n padding-top: 100%;\n grid-column: 1/3;\n grid-row: 1/3;\n }\n }\n }\n }\n"]))),r=t.div(e\|\|(e=n(["\n position: fixed;\n z-index: 999;\n top: 0;\n left: 0;\n display: flex;\n overflow: hidden;\n width: 100vw;\n height: 100vh;\n flex-direction: column;\n background: white;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s linear;\n &[data-open='true'] {\n opacity: 1;\n pointer-events: auto;\n }\n .top-bar {\n position: relative;\n padding: 20px 40px;\n .icon-arrow-left {\n position: absolute;\n top: 50%;\n left: 20px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n transform: translateY(-50%);\n }\n }\n .container {\n flex: 1;\n overflow-y: auto;\n .img-preview {\n width: 100%;\n min-width: 100%;\n margin-bottom: 0.5rem;\n cursor: pointer;\n max-height: 100%;\n object-fit: cover;\n }\n }\n"],["\n position: fixed;\n z-index: 999;\n top: 0;\n left: 0;\n display: flex;\n overflow: hidden;\n width: 100vw;\n height: 100vh;\n flex-direction: column;\n background: white;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s linear;\n &[data-open='true'] {\n opacity: 1;\n pointer-events: auto;\n }\n .top-bar {\n position: relative;\n padding: 20px 40px;\n .icon-arrow-left {\n position: absolute;\n top: 50%;\n left: 20px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n transform: translateY(-50%);\n }\n }\n .container {\n flex: 1;\n overflow-y: auto;\n .img-preview {\n width: 100%;\n min-width: 100%;\n margin-bottom: 0.5rem;\n cursor: pointer;\n max-height: 100%;\n object-fit: cover;\n }\n }\n"])));export{r as StyledImagePreviewPopup,o as StyledPostImagePreview};
2	+ //# sourceMappingURL=index.styled.js.map