npm - @hhgtech/hhg-components - Versions diffs - 1.18.47 → 1.18.49 - Mend

@hhgtech/hhg-components 1.18.47 → 1.18.49

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/components/molecules/dropdown/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";var e,i,r,t,d,p,a=o.div(e\|\|(e=n(["\n --dropdown-padding: 12px 18px 12px 16px;\n position: relative;\n box-sizing: border-box;\n border: 1px solid ",";\n background: url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\")\n no-repeat;\n background-position: right 16px center;\n border-radius: 6px;\n\n &[data-disabled='true'],\n :disabled {\n background-color: #f2f2f2;\n cursor: not-allowed;\n }\n\n &[data-size='sm'] {\n font-size: 13px;\n line-height: 20px;\n }\n &[data-size='md'] {\n font-size: 14px;\n line-height: 21px;\n }\n &[data-size='lg'] {\n font-size: 16px;\n line-height: 24px;\n }\n\n &[data-has-icons='true'] {\n border: none;\n background: ",";\n\n img,\n svg {\n display: inline-block;\n max-width: 16px;\n margin-right: 6px;\n }\n\n span {\n display: inline-block;\n vertical-align: middle;\n }\n\n &:hover {\n box-shadow: none;\n }\n > div {\n position: relative;\n display: flex;\n width: 100%;\n box-sizing: border-box;\n align-items: center;\n }\n > div::after {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 10px;\n height: 8px;\n background-image: url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n content: '';\n transform: translateY(-50%);\n }\n }\n\n &:hover {\n box-shadow: 0 0 2px 2px ",";\n }\n\n &[data-is-native='true'] {\n padding: var(--dropdown-padding);\n line-height: 24px;\n\n &:focus {\n box-shadow: 0px 0px 2px 2px\n ",";\n }\n }\n"],["\n --dropdown-padding: 12px 18px 12px 16px;\n position: relative;\n box-sizing: border-box;\n border: 1px solid ",";\n background: url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\")\n no-repeat;\n background-position: right 16px center;\n border-radius: 6px;\n\n &[data-disabled='true'],\n :disabled {\n background-color: #f2f2f2;\n cursor: not-allowed;\n }\n\n &[data-size='sm'] {\n font-size: 13px;\n line-height: 20px;\n }\n &[data-size='md'] {\n font-size: 14px;\n line-height: 21px;\n }\n &[data-size='lg'] {\n font-size: 16px;\n line-height: 24px;\n }\n\n &[data-has-icons='true'] {\n border: none;\n background: ",";\n\n img,\n svg {\n display: inline-block;\n max-width: 16px;\n margin-right: 6px;\n }\n\n span {\n display: inline-block;\n vertical-align: middle;\n }\n\n &:hover {\n box-shadow: none;\n }\n > div {\n position: relative;\n display: flex;\n width: 100%;\n box-sizing: border-box;\n align-items: center;\n }\n > div::after {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 10px;\n height: 8px;\n background-image: url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n content: '';\n transform: translateY(-50%);\n }\n }\n\n &:hover {\n box-shadow: 0 0 2px 2px ",";\n }\n\n &[data-is-native='true'] {\n padding: var(--dropdown-padding);\n line-height: 24px;\n\n &:focus {\n box-shadow: 0px 0px 2px 2px\n ",";\n }\n }\n"])),(function(n){return n.theme.colors.gray200}),(function(n){return n.theme.colors.gray100}),(function(n){return n.theme.colors.blue200}),(function(n){return n.theme.colors.blue200})),s=o.div(i\|\|(i=n(["\n padding: var(--dropdown-padding);\n cursor: pointer;\n\n &.with-label {\n padding-top: 34px;\n padding-bottom: 12px;\n }\n &[data-dropdown-open] {\n padding: 11px 15px 11px 15px;\n border: 1px solid ",";\n border-radius: 6px;\n box-shadow: 0 0 2px 2px ",";\n }\n"],["\n padding: var(--dropdown-padding);\n cursor: pointer;\n\n &.with-label {\n padding-top: 34px;\n padding-bottom: 12px;\n }\n &[data-dropdown-open] {\n padding: 11px 15px 11px 15px;\n border: 1px solid ",";\n border-radius: 6px;\n box-shadow: 0 0 2px 2px ",";\n }\n"])),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.blue200})),x=o.ul(r\|\|(r=n(["\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n display: block;\n margin-top: 4px;\n background: ",";\n border-radius: 6px;\n box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),\n -2px 2px 5px rgba(67, 86, 100, 0.123689);\n cursor: pointer;\n\n &[data-has-icons='true'] {\n border: 1px solid ",";\n background: white;\n box-shadow: none;\n filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));\n }\n"],["\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n display: block;\n margin-top: 4px;\n background: ",";\n border-radius: 6px;\n box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),\n -2px 2px 5px rgba(67, 86, 100, 0.123689);\n cursor: pointer;\n\n &[data-has-icons='true'] {\n border: 1px solid ",";\n background: white;\n box-shadow: none;\n filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray200})),l=o.li(t\|\|(t=n(["\n display: flex;\n padding: 12px 18px 12px 16px;\n &[data-disabled='true'] {\n cursor: not-allowed;\n color: #bfbfbf;\n & > * {\n pointer-events: none;\n }\n }\n &:hover,\n :active {\n background: ",";\n }\n"],["\n display: flex;\n padding: 12px 18px 12px 16px;\n &[data-disabled='true'] {\n cursor: not-allowed;\n color: #bfbfbf;\n & > * {\n pointer-events: none;\n }\n }\n &:hover,\n :active {\n background: ",";\n }\n"])),(function(n){return n.theme.colors.gray100})),g=o.div(d\|\|(d=n(["\n max-width: 16px;\n margin-right: 8px;\n"],["\n max-width: 16px;\n margin-right: 8px;\n"]))),h=o.div(p\|\|(p=n(["\n position: absolute;\n top: 12px;\n left: 16px;\n pointer-events: none;\n"],["\n position: absolute;\n top: 12px;\n left: 16px;\n pointer-events: none;\n"])));export{a as StyledDropdown,h as StyledDropdownLabel,x as StyledDropdownList,s as StyledDropdownName,l as StyledDropdownOption,g as StyledIcon};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/dropdown/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport styled from 'styled-components'\n\nexport const StyledDropdown = styled.div`\n --dropdown-padding: 12px 18px 12px 16px;\n position: relative;\n box-sizing: border-box;\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};\n background: url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\")\n no-repeat;\n background-position: right 16px center;\n border-radius: 6px;\n\n &[data-disabled='true'],\n :disabled {\n background-color: #f2f2f2;\n cursor: not-allowed;\n }\n\n &[data-size='sm'] {\n font-size: 13px;\n line-height: 20px;\n }\n &[data-size='md'] {\n font-size: 14px;\n line-height: 21px;\n }\n &[data-size='lg'] {\n font-size: 16px;\n line-height: 24px;\n }\n\n &[data-has-icons='true'] {\n border: none;\n background: ${(props: ThemeProps) => props.theme.colors.gray100};\n\n img,\n svg {\n display: inline-block;\n max-width: 16px;\n margin-right: 6px;\n }\n\n span {\n display: inline-block;\n vertical-align: middle;\n }\n\n &:hover {\n box-shadow: none;\n }\n > div {\n position: relative;\n display: flex;\n width: 100%;\n box-sizing: border-box;\n align-items: center;\n }\n > div::after {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 10px;\n height: 8px;\n background-image: url(\"data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n content: '';\n transform: translateY(-50%);\n }\n }\n\n &:hover {\n box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};\n }\n\n &[data-is-native='true'] {\n padding: var(--dropdown-padding);\n line-height: 24px;\n\n &:focus {\n box-shadow: 0px 0px 2px 2px\n ${(props: ThemeProps) => props.theme.colors.blue200};\n }\n }\n`\n\nexport const StyledDropdownName = styled.div`\n padding: var(--dropdown-padding);\n cursor: pointer;\n\n &.with-label {\n padding-top: 34px;\n padding-bottom: 12px;\n }\n &[data-dropdown-open] {\n padding: 11px 15px 11px 15px;\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};\n border-radius: 6px;\n box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};\n }\n`\n\nexport const StyledDropdownList = styled.ul`\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n display: block;\n margin-top: 4px;\n background: ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 6px;\n box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),\n -2px 2px 5px rgba(67, 86, 100, 0.123689);\n cursor: pointer;\n\n &[data-has-icons='true'] {\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};\n background: white;\n box-shadow: none;\n filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));\n }\n`\n\nexport const StyledDropdownOption = styled.li`\n display: flex;\n padding: 12px 18px 12px 16px;\n &[data-disabled='true'] {\n cursor: not-allowed;\n color: #bfbfbf;\n & > * {\n pointer-events: none;\n }\n }\n &:hover,\n :active {\n background: ${(props: ThemeProps) => props.theme.colors.gray100};\n }\n`\nexport const StyledIcon = styled.div`\n max-width: 16px;\n margin-right: 8px;\n`\n\nexport const StyledDropdownLabel = styled.div`\n position: absolute;\n top: 12px;\n left: 16px;\n pointer-events: none;\n`\n"],"names":["StyledDropdown","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","gray200","gray100","blue200","StyledDropdownName","templateObject_2","primaryBase","StyledDropdownList","ul","templateObject_3","white","StyledDropdownOption","li","templateObject_4","StyledIcon","templateObject_5","StyledDropdownLabel","templateObject_6"],"mappings":"iHAGO,gBAAMA,EAAiBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,uHAAA,kvBAAA,i7BAAA,sKAAA,mBAAA,CAAA,uHAI+B,kvBA2BJ,i7BAsCY,sKASpB,sBA1ErC,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,WA2B9C,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAsC9B,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,WAS9D,SAACL,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,WAKvCC,EAAqBV,EAAOC,IAAGU,IAAAA,EAAAR,EAAA,CAAA,8NAAA,2DAAA,YAAA,CAAA,8NAUiC,2DAEE,eAFvD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOM,eAEpC,SAACR,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,WAI3DI,EAAqBb,EAAOc,GAAEC,IAAAA,EAAAZ,EAAA,CAAA,wHAAA,4MAAA,wHAAA,CAAA,wHAOoB,4MAOU,2HAPzD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOU,SAOlC,SAACZ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,WAOrDU,EAAuBjB,EAAOkB,GAAEC,IAAAA,EAAAhB,EAAA,CAAA,mOAAA,YAAA,CAAA,mOAYsB,eAAjD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAG/CY,EAAapB,EAAOC,IAAGoB,IAAAA,EAAAlB,EAAA,CAAA,gDAAA,CAAA,mDAKvBmB,EAAsBtB,EAAOC,IAAGsB,IAAAA,EAAApB,EAAA,CAAA,mFAAA,CAAA"}

package/build/esm/components/molecules/floatButtonGroup/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as n,useEffect as o}from"react";import{StyledFloatButtonGroup as l,StyledFloatButtonGroupBackgroundPanel as a,StyledFloatButtonGroupContent as i,StyledFloatButtonGroupItemsWrapper as c,StyledFloatButtonGroupButton as s,TRANSITION_TIMING as m,StyledFloatButtonGroupButtonLabel as r,StyledFloatButtonGroupButtonIcon as d,StyledFloatButtonGroupToggleIcon as p}from"./index.styled.js";var u=function(u){var y=u.items,f=u.className,g=u.style,b=u.backgroundPanelStyle,h=u.isOpen,k=u.onOpen,E=u.onClose,_=u.disableBackdropClick,v=u.siteType,z=void 0===v?"hb":v,C=u.animationType,N=void 0===C?"zoom":C,x=u.zIndex,D=void 0===x?300:x,I=n(!!h),O=I[0],j=I[1];o((function(){j(!!h)}),[h]);var T=function(){j(!1),E&&E()};return t.createElement(l,{style:g,className:f,"data-floatmenu-open":O,"data-site-type":z,"data-animation-type":N},t.createElement(a,{className:"float-button-group__panel",style:e({zIndex:D},b),onClick:_?void 0:T}),t.createElement(i,{className:"float-button-group___content",style:{zIndex:D}},t.createElement(c,null,y.map((function(n,o){return t.createElement(s,{className:"float-item-button-".concat(o),style:e(e({},"zoom"===N&&{bottom:64(y.length-1-o),transitionDelay:"".concat(m/y.length(O?y.length-1-o:o),"ms")}),"slide"===N&&{bottom:64(y.length-1-o),transitionDelay:"".concat(m/y.length(O?o:y.length-1-o),"ms")}),key:o,onClick:function(){n.onClick(),n.keepMenuOnClick\|\|j(!1)}},t.createElement(r,{style:e({},"zoom"===N&&{transitionDelay:"".concat(m/y.length(O?y.length-1-o:o),"ms")})},n.label),t.createElement(d,{className:"float-item-button__icon-wrapper",style:e({},("zoom"===N\|\|"slide"===N)&&{transitionDelay:"".concat(m/y.length(O?y.length-1-o:o),"ms")})},n.icon))}))),t.createElement(p,{onClick:O?T:function(){j(!0),k&&k()}})))};export{u as FloatButtonGroup};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/floatButtonGroup/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\n\nimport { CSSProperties } from 'styled-components'\n\nimport {\n StyledFloatButtonGroup,\n StyledFloatButtonGroupBackgroundPanel,\n StyledFloatButtonGroupButton,\n StyledFloatButtonGroupButtonIcon,\n StyledFloatButtonGroupButtonLabel,\n StyledFloatButtonGroupContent,\n StyledFloatButtonGroupItemsWrapper,\n StyledFloatButtonGroupToggleIcon,\n TRANSITION_TIMING,\n} from './index.styled'\n\ntype Item = {\n value?: string | number\n label: string\n icon: JSX.Element\n onClick: () => void\n keepMenuOnClick?: boolean\n}\n\nexport type FloatButtonGroupType = {\n items: Item[]\n className?: string\n style?: CSSProperties\n backgroundPanelStyle?: CSSProperties\n isOpen?: boolean\n onOpen?: () => void\n onClose?: () => void\n disableBackdropClick?: boolean\n siteType?: 'hb' | 'mb'\n animationType?: 'zoom' | 'slide' | 'scale'\n zIndex?: number\n}\n\nexport const FloatButtonGroup = ({\n items,\n className,\n style,\n backgroundPanelStyle,\n isOpen: isOpenProp,\n onOpen,\n onClose,\n disableBackdropClick,\n siteType = 'hb',\n animationType = 'zoom',\n zIndex = 300,\n}: FloatButtonGroupType) => {\n const [isOpen, setIsOpen] = useState<boolean>(!!isOpenProp)\n\n useEffect(() => {\n setIsOpen(!!isOpenProp)\n }, [isOpenProp])\n\n const handleOpen = () => {\n setIsOpen(true)\n if (onOpen) {\n onOpen()\n }\n }\n\n const handleClose = () => {\n setIsOpen(false)\n if (onClose) {\n onClose()\n }\n }\n\n return (\n <StyledFloatButtonGroup\n style={style}\n className={className}\n data-floatmenu-open={isOpen}\n data-site-type={siteType}\n data-animation-type={animationType}\n >\n <StyledFloatButtonGroupBackgroundPanel\n className=\"float-button-group__panel\"\n style={{ zIndex, ...backgroundPanelStyle }}\n onClick={!disableBackdropClick ? handleClose : undefined}\n />\n <StyledFloatButtonGroupContent\n className=\"float-button-group___content\"\n style={{ zIndex }}\n >\n <StyledFloatButtonGroupItemsWrapper>\n {items.map((item, index) => {\n return (\n <StyledFloatButtonGroupButton\n className={`float-item-button-${index}`}\n style={{\n ...(animationType === 'zoom' && {\n bottom: (items.length - 1 - index) * (48 + 16),\n transitionDelay: `${\n (TRANSITION_TIMING / items.length) *\n (isOpen ? items.length - 1 - index : index)\n }ms`,\n }),\n ...(animationType === 'slide' && {\n bottom: (items.length - 1 - index) * (48 + 16),\n transitionDelay: `${\n (TRANSITION_TIMING / items.length) *\n (!isOpen ? items.length - 1 - index : index)\n }ms`,\n }),\n }}\n key={index}\n onClick={() => {\n item.onClick()\n if (!item.keepMenuOnClick) {\n setIsOpen(false)\n }\n }}\n >\n <StyledFloatButtonGroupButtonLabel\n style={{\n ...(animationType === 'zoom' && {\n transitionDelay: `${\n (TRANSITION_TIMING / items.length) *\n (isOpen ? items.length - 1 - index : index)\n }ms`,\n }),\n }}\n >\n {item.label}\n </StyledFloatButtonGroupButtonLabel>\n <StyledFloatButtonGroupButtonIcon\n className=\"float-item-button__icon-wrapper\"\n style={{\n ...((animationType === 'zoom' ||\n animationType === 'slide') && {\n transitionDelay: `${\n (TRANSITION_TIMING / items.length) *\n (isOpen ? items.length - 1 - index : index)\n }ms`,\n }),\n }}\n >\n {item.icon}\n </StyledFloatButtonGroupButtonIcon>\n </StyledFloatButtonGroupButton>\n )\n })}\n </StyledFloatButtonGroupItemsWrapper>\n\n <StyledFloatButtonGroupToggleIcon\n onClick={isOpen ? handleClose : handleOpen}\n />\n </StyledFloatButtonGroupContent>\n </StyledFloatButtonGroup>\n )\n}\n"],"names":["FloatButtonGroup","_a","items","className","style","backgroundPanelStyle","isOpenProp","onOpen","onClose","disableBackdropClick","_b","siteType","_c","animationType","_d","zIndex","_e","useState","isOpen","setIsOpen","useEffect","handleClose","React","createElement","StyledFloatButtonGroup","StyledFloatButtonGroupBackgroundPanel","__assign","onClick","undefined","StyledFloatButtonGroupContent","StyledFloatButtonGroupItemsWrapper","map","item","index","StyledFloatButtonGroupButton","concat","bottom","length","transitionDelay","TRANSITION_TIMING","key","keepMenuOnClick","StyledFloatButtonGroupButtonLabel","label","StyledFloatButtonGroupButtonIcon","icon","StyledFloatButtonGroupToggleIcon"],"mappings":"odAsCO,IAAMA,EAAmB,SAACC,GAC/B,IAAAC,UACAC,cACAC,UACAC,yBACQC,WACRC,WACAC,YACAC,EAAoBR,EAAAQ,qBACpBC,aAAAC,aAAW,KAAID,EACfE,EAAsBX,EAAAY,cAAtBA,OAAgB,IAAAD,EAAA,SAChBE,EAAAb,EAAAc,OAAAA,OAAM,IAAAD,EAAG,IAAGA,EAENE,EAAsBC,IAAoBX,GAAzCY,EAAMF,EAAA,GAAEG,OAEfC,GAAU,WACRD,IAAYb,KACX,CAACA,IAEJ,IAOMe,EAAc,WAClBF,GAAU,GACNX,GACFA,KAIJ,OACEc,EAACC,cAAAC,EACC,CAAApB,MAAOA,EACPD,UAAWA,EACU,sBAAAe,EACL,iBAAAP,wBACKE,GAErBS,EAACC,cAAAE,EACC,CAAAtB,UAAU,4BACVC,MAAKsB,EAAA,CAAIX,OAAMA,GAAKV,GACpBsB,QAAUlB,OAAqCmB,EAAdP,IAEnCC,EAACC,cAAAM,EACC,CAAA1B,UAAU,+BACVC,MAAO,CAAEW,OAAMA,IAEfO,EAACC,cAAAO,OACE5B,EAAM6B,KAAI,SAACC,EAAMC,GAChB,OACEX,EAACC,cAAAW,EACC,CAAA/B,UAAW,qBAAqBgC,OAAAF,GAChC7B,MACKsB,EAAAA,EAAA,GAAmB,SAAlBb,GAA4B,CAC9BuB,OAAiC,IAAxBlC,EAAMmC,OAAS,EAAIJ,GAC5BK,gBAAiB,UACdC,EAAoBrC,EAAMmC,QAC1BnB,EAAShB,EAAMmC,OAAS,EAAIJ,EAAQA,GACnC,QAEgB,UAAlBpB,GAA6B,CAC/BuB,OAAiC,IAAxBlC,EAAMmC,OAAS,EAAIJ,GAC5BK,gBAAiB,UACdC,EAAoBrC,EAAMmC,QACzBnB,EAAoCe,EAA3B/B,EAAMmC,OAAS,EAAIJ,GAC5B,QAGRO,IAAKP,EACLN,QAAS,WACPK,EAAKL,UACAK,EAAKS,iBACRtB,GAAU,KAIdG,EAACC,cAAAmB,GACCtC,MAAKsB,EAAA,GACmB,SAAlBb,GAA4B,CAC9ByB,gBAAiB,UACdC,EAAoBrC,EAAMmC,QAC1BnB,EAAShB,EAAMmC,OAAS,EAAIJ,EAAQA,GACnC,SAIPD,EAAKW,OAERrB,EAAAC,cAACqB,EAAgC,CAC/BzC,UAAU,kCACVC,MAAKsB,EAAA,IACoB,SAAlBb,GACe,UAAlBA,IAA8B,CAC9ByB,gBAAiB,UACdC,EAAoBrC,EAAMmC,QAC1BnB,EAAShB,EAAMmC,OAAS,EAAIJ,EAAQA,GACnC,SAIPD,EAAKa,WAOhBvB,EAAAC,cAACuB,EACC,CAAAnB,QAAST,EAASG,EA5FP,WACjBF,GAAU,GACNZ,GACFA"}

package/build/esm/components/molecules/floatButtonGroup/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 a,o,e,i,r,s,l,m,d=200,p=t.div(a\|\|(a=n([""],[""]))),f=t.div(o\|\|(o=n(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n bottom: 0;\n right: 0;\n background-color: ",";\n opacity: 0.83;\n transition: display ","ms linear;\n\n [data-floatmenu-open='true'] & {\n animation: showBackgroundPanel ","ms linear 0s normal\n forwards;\n }\n\n [data-floatmenu-open='false'] & {\n animation: hideBackgroundPanel ","ms linear 0s normal\n forwards;\n }\n\n @keyframes showBackgroundPanel {\n 0% {\n opacity: 0;\n width: 100vw;\n height: 100vh;\n }\n 100% {\n opacity: 0.83;\n }\n }\n\n @keyframes hideBackgroundPanel {\n 0% {\n width: 100vw;\n height: 100vh;\n }\n 99% {\n width: 100vw;\n height: 100vh;\n }\n 100% {\n opacity: 0;\n width: 0;\n height: 0;\n }\n }\n"],["\n width: 100vw;\n height: 100vh;\n position: fixed;\n bottom: 0;\n right: 0;\n background-color: ",";\n opacity: 0.83;\n transition: display ","ms linear;\n\n [data-floatmenu-open='true'] & {\n animation: showBackgroundPanel ","ms linear 0s normal\n forwards;\n }\n\n [data-floatmenu-open='false'] & {\n animation: hideBackgroundPanel ","ms linear 0s normal\n forwards;\n }\n\n @keyframes showBackgroundPanel {\n 0% {\n opacity: 0;\n width: 100vw;\n height: 100vh;\n }\n 100% {\n opacity: 0.83;\n }\n }\n\n @keyframes hideBackgroundPanel {\n 0% {\n width: 100vw;\n height: 100vh;\n }\n 99% {\n width: 100vw;\n height: 100vh;\n }\n 100% {\n opacity: 0;\n width: 0;\n height: 0;\n }\n }\n"])),(function(n){var t,a;return n.theme.colors.white\|\|(null===(a=null===(t=n.theme.colors)\|\|void 0===t?void 0:t.palette)\|\|void 0===a?void 0:a.white)}),200,200,200),h=t.div(e\|\|(e=n(["\n position: fixed;\n right: 16px;\n bottom: 40px;\n"],["\n position: fixed;\n right: 16px;\n bottom: 40px;\n"]))),u=t.div(i\|\|(i=n(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n transition: all ","ms ease-in-out;\n position: fixed;\n bottom: 112px;\n right: 16px;\n\n // scale\n [data-animation-type='scale'] & {\n transform-origin: 100% 100%;\n }\n\n [data-animation-type='scale'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='scale'][data-floatmenu-open='false'] & {\n transform: scale(0);\n bottom: 46px;\n right: 36px;\n }\n"],["\n display: flex;\n flex-direction: column;\n gap: 16px;\n transition: all ","ms ease-in-out;\n position: fixed;\n bottom: 112px;\n right: 16px;\n\n // scale\n [data-animation-type='scale'] & {\n transform-origin: 100% 100%;\n }\n\n [data-animation-type='scale'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='scale'][data-floatmenu-open='false'] & {\n transform: scale(0);\n bottom: 46px;\n right: 36px;\n }\n"])),200),c=t.div(r\|\|(r=n(["\n border-radius: 50%;\n width: 56px;\n height: 56px;\n position: relative;\n cursor: pointer;\n margin-left: auto;\n transition: all 0.1s linear;\n -webkit-tap-highlight-color: transparent;\n [data-site-type='hb'] & {\n background-color: ",";\n &:hover {\n background-color: ",";\n }\n }\n [data-site-type='mb'] & {\n background-color: #2d87f3;\n &:hover {\n background-color: #2c74df;\n }\n }\n\n &:before {\n content: '';\n width: 2px;\n height: 20px;\n background-color: ",";\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:after {\n content: '';\n width: 20px;\n height: 2px;\n background-color: ",";\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n [data-floatmenu-open='true'] &:before,\n [data-floatmenu-open='true'] &:after {\n animation: toX ","ms linear 0s normal forwards;\n }\n\n [data-floatmenu-open='false'] &:before,\n [data-floatmenu-open='false'] &:after {\n animation: toPlus ","ms linear 0s normal forwards;\n }\n\n @keyframes toX {\n 0% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 49% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 50% {\n width: 2px;\n height: 2px;\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n }\n\n @keyframes toPlus {\n 0% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 49% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 50% {\n width: 2px;\n height: 2px;\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n }\n"],["\n border-radius: 50%;\n width: 56px;\n height: 56px;\n position: relative;\n cursor: pointer;\n margin-left: auto;\n transition: all 0.1s linear;\n -webkit-tap-highlight-color: transparent;\n [data-site-type='hb'] & {\n background-color: ",";\n &:hover {\n background-color: ",";\n }\n }\n [data-site-type='mb'] & {\n background-color: #2d87f3;\n &:hover {\n background-color: #2c74df;\n }\n }\n\n &:before {\n content: '';\n width: 2px;\n height: 20px;\n background-color: ",";\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:after {\n content: '';\n width: 20px;\n height: 2px;\n background-color: ",";\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n [data-floatmenu-open='true'] &:before,\n [data-floatmenu-open='true'] &:after {\n animation: toX ","ms linear 0s normal forwards;\n }\n\n [data-floatmenu-open='false'] &:before,\n [data-floatmenu-open='false'] &:after {\n animation: toPlus ","ms linear 0s normal forwards;\n }\n\n @keyframes toX {\n 0% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 49% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 50% {\n width: 2px;\n height: 2px;\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n }\n\n @keyframes toPlus {\n 0% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 49% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 50% {\n width: 2px;\n height: 2px;\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n }\n"])),(function(n){return n.theme.colors.primaryBase\|\|n.theme.colors.primary}),(function(n){var t,a;return n.theme.colors.primaryHover\|\|(null===(a=null===(t=n.theme.colors)\|\|void 0===t?void 0:t.palette)\|\|void 0===a?void 0:a.blue_700)}),(function(n){var t,a;return n.theme.colors.white\|\|(null===(a=null===(t=n.theme.colors)\|\|void 0===t?void 0:t.palette)\|\|void 0===a?void 0:a.white)}),(function(n){var t,a;return n.theme.colors.white\|\|(null===(a=null===(t=n.theme.colors)\|\|void 0===t?void 0:t.palette)\|\|void 0===a?void 0:a.white)}),200,200),g=t.div(s\|\|(s=n(["\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n width: fit-content;\n margin-left: auto;\n\n [data-floatmenu-open='true'] {\n cursor: pointer;\n }\n [data-floatmenu-open='false'] {\n pointer-events: none;\n }\n\n [data-animation-type='zoom'] &,\n [data-animation-type='slide'] & {\n position: absolute;\n right: 0;\n width: max-content;\n }\n // slide\n [data-animation-type='slide'] & {\n transition: all ","ms ease-in;\n }\n\n [data-animation-type='slide'][data-floatmenu-open='true'] & {\n animation: showItem ","ms;\n }\n [data-animation-type='slide'][data-floatmenu-open='false'] & {\n bottom: -64px !important;\n animation: hideItemOnZoom ","ms normal forwards;\n }\n\n // zoom\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n animation: hideItemOnZoom ","ms normal forwards;\n }\n\n @keyframes showItem {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes hideItemOnZoom {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 99% {\n transform: translateX(0);\n opacity: 0.5;\n }\n\n 100% {\n transform: translateX(calc(100% + 16px));\n opacity: 0;\n }\n }\n"],["\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n width: fit-content;\n margin-left: auto;\n\n [data-floatmenu-open='true'] {\n cursor: pointer;\n }\n [data-floatmenu-open='false'] {\n pointer-events: none;\n }\n\n [data-animation-type='zoom'] &,\n [data-animation-type='slide'] & {\n position: absolute;\n right: 0;\n width: max-content;\n }\n // slide\n [data-animation-type='slide'] & {\n transition: all ","ms ease-in;\n }\n\n [data-animation-type='slide'][data-floatmenu-open='true'] & {\n animation: showItem ","ms;\n }\n [data-animation-type='slide'][data-floatmenu-open='false'] & {\n bottom: -64px !important;\n animation: hideItemOnZoom ","ms normal forwards;\n }\n\n // zoom\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n animation: hideItemOnZoom ","ms normal forwards;\n }\n\n @keyframes showItem {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes hideItemOnZoom {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 99% {\n transform: translateX(0);\n opacity: 0.5;\n }\n\n 100% {\n transform: translateX(calc(100% + 16px));\n opacity: 0;\n }\n }\n"])),200,200,250,250),x=t.div(l\|\|(l=n(["\n font-size: 14px;\n\n // zoom\n [data-animation-type='zoom'] & {\n transition: transform ","ms ease-in-out;\n transform-origin: 100% 0;\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n transform: scale(0);\n }\n\n // slide\n [data-animation-type='slide'] & {\n transition: opacity ","ms;\n }\n [data-animation-type='slide'][data-floatmenu-open='true'] & {\n opacity: 1;\n }\n [data-animation-type='slide'][data-floatmenu-open='false'] & {\n opacity: 0;\n }\n"],["\n font-size: 14px;\n\n // zoom\n [data-animation-type='zoom'] & {\n transition: transform ","ms ease-in-out;\n transform-origin: 100% 0;\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n transform: scale(0);\n }\n\n // slide\n [data-animation-type='slide'] & {\n transition: opacity ","ms;\n }\n [data-animation-type='slide'][data-floatmenu-open='true'] & {\n opacity: 1;\n }\n [data-animation-type='slide'][data-floatmenu-open='false'] & {\n opacity: 0;\n }\n"])),200,200),y=t.div(m\|\|(m=n(["\n border-radius: 50%;\n box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04),\n 0px 0px 1px rgba(0, 0, 0, 0.04);\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ",";\n\n // zoom\n [data-animation-type='zoom'] & {\n transition: transform ","ms ease-in-out;\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n transform: scale(0);\n }\n\n > img {\n width: 24px;\n height: 24px;\n object-fit: contain;\n }\n"],["\n border-radius: 50%;\n box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04),\n 0px 0px 1px rgba(0, 0, 0, 0.04);\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ",";\n\n // zoom\n [data-animation-type='zoom'] & {\n transition: transform ","ms ease-in-out;\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n transform: scale(0);\n }\n\n > img {\n width: 24px;\n height: 24px;\n object-fit: contain;\n }\n"])),(function(n){var t,a;return n.theme.colors.white\|\|(null===(a=null===(t=n.theme.colors)\|\|void 0===t?void 0:t.palette)\|\|void 0===a?void 0:a.white)}),200);export{p as StyledFloatButtonGroup,f as StyledFloatButtonGroupBackgroundPanel,g as StyledFloatButtonGroupButton,y as StyledFloatButtonGroupButtonIcon,x as StyledFloatButtonGroupButtonLabel,h as StyledFloatButtonGroupContent,u as StyledFloatButtonGroupItemsWrapper,c as StyledFloatButtonGroupToggleIcon,d as TRANSITION_TIMING};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/floatButtonGroup/index.styled.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const TRANSITION_TIMING = 200\n\nexport const StyledFloatButtonGroup = styled.div``\n\nexport const StyledFloatButtonGroupBackgroundPanel = styled.div`\n width: 100vw;\n height: 100vh;\n position: fixed;\n bottom: 0;\n right: 0;\n background-color: ${(props) =>\n props.theme.colors.white || props.theme.colors?.palette?.white};\n opacity: 0.83;\n transition: display ${TRANSITION_TIMING}ms linear;\n\n [data-floatmenu-open='true'] & {\n animation: showBackgroundPanel ${TRANSITION_TIMING}ms linear 0s normal\n forwards;\n }\n\n [data-floatmenu-open='false'] & {\n animation: hideBackgroundPanel ${TRANSITION_TIMING}ms linear 0s normal\n forwards;\n }\n\n @keyframes showBackgroundPanel {\n 0% {\n opacity: 0;\n width: 100vw;\n height: 100vh;\n }\n 100% {\n opacity: 0.83;\n }\n }\n\n @keyframes hideBackgroundPanel {\n 0% {\n width: 100vw;\n height: 100vh;\n }\n 99% {\n width: 100vw;\n height: 100vh;\n }\n 100% {\n opacity: 0;\n width: 0;\n height: 0;\n }\n }\n`\n\nexport const StyledFloatButtonGroupContent = styled.div`\n position: fixed;\n right: 16px;\n bottom: 40px;\n`\n\nexport const StyledFloatButtonGroupItemsWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n transition: all ${TRANSITION_TIMING}ms ease-in-out;\n position: fixed;\n bottom: 112px;\n right: 16px;\n\n // scale\n [data-animation-type='scale'] & {\n transform-origin: 100% 100%;\n }\n\n [data-animation-type='scale'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='scale'][data-floatmenu-open='false'] & {\n transform: scale(0);\n bottom: 46px;\n right: 36px;\n }\n`\n\nexport const StyledFloatButtonGroupToggleIcon = styled.div`\n border-radius: 50%;\n width: 56px;\n height: 56px;\n position: relative;\n cursor: pointer;\n margin-left: auto;\n transition: all 0.1s linear;\n -webkit-tap-highlight-color: transparent;\n [data-site-type='hb'] & {\n background-color: ${(props) =>\n props.theme.colors.primaryBase || props.theme.colors.primary};\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.primaryHover ||\n props.theme.colors?.palette?.blue_700};\n }\n }\n [data-site-type='mb'] & {\n background-color: #2d87f3;\n &:hover {\n background-color: #2c74df;\n }\n }\n\n &:before {\n content: '';\n width: 2px;\n height: 20px;\n background-color: ${(props) =>\n props.theme.colors.white || props.theme.colors?.palette?.white};\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:after {\n content: '';\n width: 20px;\n height: 2px;\n background-color: ${(props) =>\n props.theme.colors.white || props.theme.colors?.palette?.white};\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n [data-floatmenu-open='true'] &:before,\n [data-floatmenu-open='true'] &:after {\n animation: toX ${TRANSITION_TIMING}ms linear 0s normal forwards;\n }\n\n [data-floatmenu-open='false'] &:before,\n [data-floatmenu-open='false'] &:after {\n animation: toPlus ${TRANSITION_TIMING}ms linear 0s normal forwards;\n }\n\n @keyframes toX {\n 0% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 49% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 50% {\n width: 2px;\n height: 2px;\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n }\n\n @keyframes toPlus {\n 0% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 49% {\n transform: translate(-50%, -50%) rotateZ(45deg);\n }\n 50% {\n width: 2px;\n height: 2px;\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateZ(0deg);\n }\n }\n`\n\nexport const StyledFloatButtonGroupButton = styled.div`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n width: fit-content;\n margin-left: auto;\n\n [data-floatmenu-open='true'] {\n cursor: pointer;\n }\n [data-floatmenu-open='false'] {\n pointer-events: none;\n }\n\n [data-animation-type='zoom'] &,\n [data-animation-type='slide'] & {\n position: absolute;\n right: 0;\n width: max-content;\n }\n // slide\n [data-animation-type='slide'] & {\n transition: all ${TRANSITION_TIMING}ms ease-in;\n }\n\n [data-animation-type='slide'][data-floatmenu-open='true'] & {\n animation: showItem ${TRANSITION_TIMING}ms;\n }\n [data-animation-type='slide'][data-floatmenu-open='false'] & {\n bottom: -64px !important;\n animation: hideItemOnZoom ${TRANSITION_TIMING + 50}ms normal forwards;\n }\n\n // zoom\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n animation: hideItemOnZoom ${TRANSITION_TIMING + 50}ms normal forwards;\n }\n\n @keyframes showItem {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes hideItemOnZoom {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n\n 99% {\n transform: translateX(0);\n opacity: 0.5;\n }\n\n 100% {\n transform: translateX(calc(100% + 16px));\n opacity: 0;\n }\n }\n`\n\nexport const StyledFloatButtonGroupButtonLabel = styled.div`\n font-size: 14px;\n\n // zoom\n [data-animation-type='zoom'] & {\n transition: transform ${TRANSITION_TIMING}ms ease-in-out;\n transform-origin: 100% 0;\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n transform: scale(0);\n }\n\n // slide\n [data-animation-type='slide'] & {\n transition: opacity ${TRANSITION_TIMING}ms;\n }\n [data-animation-type='slide'][data-floatmenu-open='true'] & {\n opacity: 1;\n }\n [data-animation-type='slide'][data-floatmenu-open='false'] & {\n opacity: 0;\n }\n`\n\nexport const StyledFloatButtonGroupButtonIcon = styled.div`\n border-radius: 50%;\n box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04),\n 0px 0px 1px rgba(0, 0, 0, 0.04);\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ${(props) =>\n props.theme.colors.white || props.theme.colors?.palette?.white};\n\n // zoom\n [data-animation-type='zoom'] & {\n transition: transform ${TRANSITION_TIMING}ms ease-in-out;\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='true'] & {\n transform: scale(1);\n }\n\n [data-animation-type='zoom'][data-floatmenu-open='false'] & {\n transform: scale(0);\n }\n\n > img {\n width: 24px;\n height: 24px;\n object-fit: contain;\n }\n`\n"],"names":["TRANSITION_TIMING","StyledFloatButtonGroup","styled","div","templateObject_1","__makeTemplateObject","StyledFloatButtonGroupBackgroundPanel","templateObject_2","props","_a","_b","theme","colors","white","palette","StyledFloatButtonGroupContent","templateObject_3","StyledFloatButtonGroupItemsWrapper","templateObject_4","StyledFloatButtonGroupToggleIcon","templateObject_5","primaryBase","primary","primaryHover","blue_700","StyledFloatButtonGroupButton","templateObject_6","StyledFloatButtonGroupButtonLabel","templateObject_7","StyledFloatButtonGroupButtonIcon","templateObject_8"],"mappings":"iHAEO,oBAAMA,EAAoB,IAEpBC,EAAyBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,IAAA,CAAA,OAEnCC,EAAwCJ,EAAOC,IAAGI,IAAAA,EAAAF,EAAA,CAAA,2GAAA,8CAAA,wFAAA,wHAAA,+bAAA,CAAA,2GAOG,8CAEzB,wFAGa,wHAKA,kcAXhC,SAACG,GAAK,IAAAC,EAAAC,EACxB,OAAAF,EAAMG,MAAMC,OAAOC,gBAASH,EAAoB,QAApBD,EAAAD,EAAMG,MAAMC,cAAQ,IAAAH,OAAA,EAAAA,EAAAK,8BAASD,SAX5B,aAqDpBE,EAAgCb,EAAOC,IAAGa,IAAAA,EAAAX,EAAA,CAAA,2DAAA,CAAA,8DAM1CY,EAAqCf,EAAOC,IAAGe,IAAAA,EAAAb,EAAA,CAAA,kFAAA,+YAAA,CAAA,kFAIvB,iZA/DJ,KAoFpBc,EAAmCjB,EAAOC,IAAGiB,IAAAA,EAAAf,EAAA,CAAA,8PAAA,6CAAA,wOAAA,8NAAA,4OAAA,qJAAA,2vBAAA,CAAA,8PAWQ,6CAIrB,wOAeuB,8NAaA,4OAU9B,qJAKG,8vBAhDjB,SAACG,GACnB,OAAAA,EAAMG,MAAMC,OAAOS,aAAeb,EAAMG,MAAMC,OAAOU,WAEjC,SAACd,WACnB,OAAAA,EAAMG,MAAMC,OAAOW,eACQ,QAA3Bb,EAAkB,QAAlBD,EAAAD,EAAMG,MAAMC,cAAM,IAAAH,OAAA,EAAAA,EAAEK,eAAO,IAAAJ,OAAA,EAAAA,EAAEc,aAcb,SAAChB,GAAK,IAAAC,EAAAC,EACxB,OAAAF,EAAMG,MAAMC,OAAOC,QAAsC,QAA7BH,EAAoB,QAApBD,EAAAD,EAAMG,MAAMC,cAAQ,IAAAH,OAAA,EAAAA,EAAAK,eAAS,IAAAJ,OAAA,EAAAA,EAAAG,UAYvC,SAACL,WACnB,OAAAA,EAAMG,MAAMC,OAAOC,QAAsC,QAA7BH,EAAoB,QAApBD,EAAAD,EAAMG,MAAMC,cAAQ,IAAAH,OAAA,EAAAA,EAAAK,eAAS,IAAAJ,OAAA,EAAAA,EAAAG,SA/H9B,SAoLpBY,EAA+BvB,EAAOC,IAAGuB,IAAAA,EAAArB,EAAA,CAAA,geAAA,gHAAA,4IAAA,yIAAA,wZAAA,CAAA,geAwBf,gHAII,4IAIW,yIAKA,0ZAzNrB,QAoNDL,IAKAA,KA+BnB2B,EAAoCzB,EAAOC,IAAGyB,IAAAA,EAAAvB,EAAA,CAAA,oGAAA,sUAAA,6LAAA,CAAA,oGAKd,sUAcF,+LA3QV,SAqRpBwB,EAAmC3B,EAAOC,IAAG2B,IAAAA,EAAAzB,EAAA,CAAA,gRAAA,iFAAA,8SAAA,CAAA,gRAUQ,iFAIrB,iTALvB,SAACG,GACnB,IAAAC,EAAAC,EAAA,OAAAF,EAAMG,MAAMC,OAAOC,QAAoC,QAA3BH,YAAAF,EAAMG,MAAMC,6BAAQE,eAAO,IAAAJ,OAAA,EAAAA,EAAEG,SA/R5B"}

package/build/esm/components/molecules/iconText/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e from"react";import{StyledIconText as i}from"./index.styled.js";var t=function(t){var o=t.size,r=t.iconPosition,a=t.className,n=t.children,s=t.icon;return e.createElement(i,{className:a,"data-size":o,"data-icon-position":r},"left"===r&&s,n,"right"===r&&s)};export{t as IconText};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/iconText/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\n\nimport { StyledIconText } from './index.styled'\n\nexport type Props = {\n size: 'lg' | 'md' | 'sm'\n iconPosition: 'left' | 'right'\n children: ReactNode\n icon: JSX.Element\n className?: string\n}\n\nconst IconText = ({\n size,\n iconPosition,\n className,\n children,\n icon: Icon,\n}: Props) => {\n return (\n <StyledIconText\n className={className}\n data-size={size}\n data-icon-position={iconPosition}\n >\n {iconPosition === 'left' && Icon}\n {children}\n {iconPosition === 'right' && Icon}\n </StyledIconText>\n )\n}\n\nexport { IconText }\n"],"names":["IconText","_a","size","iconPosition","className","children","Icon","icon","React","createElement","StyledIconText"],"mappings":"wEAYM,IAAAA,EAAW,SAACC,GAChB,IAAAC,EAAID,EAAAC,KACJC,EAAYF,EAAAE,aACZC,EAASH,EAAAG,UACTC,EAAQJ,EAAAI,SACFC,EAAIL,EAAAM,KAEV,OACEC,EAACC,cAAAC,EACC,CAAAN,UAAWA,EAAS,YACTF,EAAI,qBACKC,GAEF,SAAjBA,GAA2BG,EAC3BD,EACiB,UAAjBF,GAA4BG"}

package/build/esm/components/molecules/iconText/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=i.div(e\|\|(e=n(["\n display: flex;\n align-items: center;\n --font-weight-lg: ",";\n --font-weight-md: ",";\n --font-weight-sm: ",";\n\n &[data-icon-position='left'] {\n & > :first-child {\n margin-right: 8px;\n }\n\n & > :last-child {\n width: calc(100% - 24px);\n }\n }\n &[data-icon-position='right'] {\n & > :first-child {\n width: calc(100% - 24px);\n }\n & > :last-child {\n margin-left: 8px;\n }\n }\n\n "," {\n &[data-size='lg'] {\n font-size: 16px;\n line-height: 24px;\n font-weight: var(--font-weight-lg);\n }\n &[data-size='md'] {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-md);\n }\n &[data-size='sm'] {\n font-size: 13px;\n line-height: 20px;\n font-weight: var(----font-weight-sm);\n }\n }\n"],["\n display: flex;\n align-items: center;\n --font-weight-lg: ",";\n --font-weight-md: ",";\n --font-weight-sm: ",";\n\n &[data-icon-position='left'] {\n & > :first-child {\n margin-right: 8px;\n }\n\n & > :last-child {\n width: calc(100% - 24px);\n }\n }\n &[data-icon-position='right'] {\n & > :first-child {\n width: calc(100% - 24px);\n }\n & > :last-child {\n margin-left: 8px;\n }\n }\n\n "," {\n &[data-size='lg'] {\n font-size: 16px;\n line-height: 24px;\n font-weight: var(--font-weight-lg);\n }\n &[data-size='md'] {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-md);\n }\n &[data-size='sm'] {\n font-size: 13px;\n line-height: 20px;\n font-weight: var(----font-weight-sm);\n }\n }\n"])),(function(n){return n.theme.sizes.fwBold}),(function(n){return n.theme.sizes.fwRegular}),(function(n){return n.theme.sizes.fwRegular}),t.mbDown);export{o as StyledIconText};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/iconText/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledIconText = styled.div`\n display: flex;\n align-items: center;\n --font-weight-lg: ${(props: ThemeProps) => props.theme.sizes.fwBold};\n --font-weight-md: ${(props: ThemeProps) => props.theme.sizes.fwRegular};\n --font-weight-sm: ${(props: ThemeProps) => props.theme.sizes.fwRegular};\n\n &[data-icon-position='left'] {\n & > *:first-child {\n margin-right: 8px;\n }\n\n & > *:last-child {\n width: calc(100% - 24px);\n }\n }\n &[data-icon-position='right'] {\n & > *:first-child {\n width: calc(100% - 24px);\n }\n & > *:last-child {\n margin-left: 8px;\n }\n }\n\n ${MediaQueries.mbDown} {\n &[data-size='lg'] {\n font-size: 16px;\n line-height: 24px;\n font-weight: var(--font-weight-lg);\n }\n &[data-size='md'] {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-md);\n }\n &[data-size='sm'] {\n font-size: 13px;\n line-height: 20px;\n font-weight: var(----font-weight-sm);\n }\n }\n`\n"],"names":["StyledIconText","styled","div","templateObject_1","__makeTemplateObject","props","theme","sizes","fwBold","fwRegular","MediaQueries","mbDown"],"mappings":"uKAIO,MAAMA,EAAiBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,mEAAA,0BAAA,0BAAA,gVAAA,sYAAA,CAAA,mEAG6B,0BACG,0BACA,gVAoBjD,yYAtBD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,MAAMC,UACzC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,MAAME,aACzC,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,MAAME,YAoB3DC,EAAaC"}

package/build/esm/components/molecules/languageSwitcher/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import t from"react";import"../../atoms/text/index.styled.js";import"../../atoms/alert/index.styled.js";import"../../atoms/avatar/index.styled.js";import"../../atoms/badge/index.styled.js";import"../../atoms/borderHeading/index.styled.js";import"../../atoms/button/index.styled.js";import"../../atoms/divider/index.styled.js";import"../../atoms/fileDropdown/index.styled.js";import{Flag as o}from"../../atoms/flag/index.js";import"../../atoms/grid/index.styled.js";import"../../atoms/heading/index.styled.js";import"../../atoms/label/index.js";import"../../atoms/input/index.styled.js";import"../../atoms/logo/index.js";import"../../../misc/utils.js";import"../../atoms/pagination/index.styled.js";import"../../atoms/pureInput/index.js";import"../../atoms/radio/index.styled.js";import"../../atoms/shadow/index.styled.js";import"react-range";import"../../atoms/slider/index.styled.js";import"../../atoms/tag/index.styled.js";import"../../atoms/toggle/index.styled.js";import"../../atoms/underlinedLink/index.styled.js";import"../../atoms/uploader/index.styled.js";import"../../atoms/textArea/index.js";import"../../atoms/container/index.styled.js";import"../../atoms/checkbox/index.styled.js";import"../../atoms/textDivider/index.js";import"../../atoms/rateStars/index.styled.js";import"../../atoms/icons/Ask.js";import"../../atoms/icons/BarChart.js";import"../../atoms/icons/Booking.js";import"../../atoms/icons/Bookmark.js";import"../../atoms/icons/Community.js";import"../../atoms/icons/EditSpecial.js";import"../../atoms/icons/Family.js";import"../../atoms/icons/Font.js";import"../../atoms/icons/Heart.js";import"../../atoms/icons/Home.js";import"../../atoms/icons/Like.js";import"../../atoms/icons/MyCommunity.js";import"../../atoms/icons/PlusSpecial.js";import"../../atoms/icons/Recalculate.js";import"../../atoms/icons/Scale.js";import"../../atoms/icons/Share.js";import"../../atoms/icons/Stethoscope.js";import"../../atoms/progress/index.styled.js";import{StyledLanguageChangeLink as i}from"./index.styled.js";import{TooltipSelection as s}from"./tooltipSelection/index.js";var e=function(o){var i,e,n=o.languageOptions,a=o.locale,r=null==n?void 0:n.find((function(t){return t.locale===a}));return(null==n?void 0:n.length)?t.createElement(s,{options:n,selected:r.value,label:t.createElement(m,{locale:a,label:r.label\|\|(null===(e=null===(i=a.split("-"))\|\|void 0===i?void 0:i[0])\|\|void 0===e?void 0:e.toUpperCase())}),onChange:function(t){"undefined"!=typeof window&&(window.location.href=t)},style:{width:100},showSelected:!0,showIndicator:!1}):null},m=function(s){var e,m,n,a=s.locale,r=s.label,l=s.href;return t.createElement(i,{href:l},t.createElement(o,{country:null===(m=null===(e=null==a?void 0:a.split("-"))\|\|void 0===e?void 0:e[1])\|\|void 0===m?void 0:m.toUpperCase(),width:16,height:16,rounded:!0,language:null===(n=null==a?void 0:a.split("-"))\|\|void 0===n?void 0:n[0]}),t.createElement("span",null,r))};export{m as LanguageLabel,e as LanguageSwitcher};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/languageSwitcher/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Flag, FlagCountryType } from 'src/components/atoms'\nimport { FlagLanguageType } from 'src/components/atoms/flag'\nimport { LocaleType } from 'src/interfaces/types'\n\nimport { StyledLanguageChangeLink } from './index.styled'\nimport { Option, TooltipSelection } from './tooltipSelection'\n\nexport type Props = {\n languageOptions?: Option[]\n locale: LocaleType\n}\n\nexport const LanguageSwitcher = ({ languageOptions, locale }: Props) => {\n const selectedLanguage = languageOptions?.find(\n (option) => option.locale === locale,\n )\n if (!languageOptions?.length) {\n return null\n }\n\n return (\n <TooltipSelection\n options={languageOptions}\n selected={selectedLanguage.value}\n label={\n <LanguageLabel\n locale={locale}\n label={\n selectedLanguage.label || locale.split('-')?.[0]?.toUpperCase()\n }\n />\n }\n onChange={(href) => {\n if (typeof window !== 'undefined') {\n window.location.href = href\n }\n }}\n style={{ width: 100 }}\n showSelected={true}\n showIndicator={false}\n />\n )\n}\n\nexport const LanguageLabel = ({\n locale,\n label,\n href,\n}: {\n locale: LocaleType\n label: string\n href?: string\n}) => {\n return (\n <StyledLanguageChangeLink href={href}>\n <Flag\n country={locale?.split('-')?.[1]?.toUpperCase() as FlagCountryType}\n width={16}\n height={16}\n rounded\n language={locale?.split('-')?.[0] as FlagLanguageType}\n />\n <span>{label}</span>\n </StyledLanguageChangeLink>\n )\n}\n"],"names":["LanguageSwitcher","_a","languageOptions","locale","selectedLanguage","find","option","length","React","TooltipSelection","options","selected","value","label","createElement","LanguageLabel","_c","split","toUpperCase","onChange","href","window","location","style","width","showSelected","showIndicator","StyledLanguageChangeLink","Flag","country","_b","height","rounded","language","_d"],"mappings":"kiEAcO,IAAMA,EAAmB,SAACC,WAAEC,EAAeD,EAAAC,gBAAEC,EAAMF,EAAAE,OAClDC,EAAmBF,aAAA,EAAAA,EAAiBG,MACxC,SAACC,GAAW,OAAAA,EAAOH,SAAWA,KAEhC,OAAKD,eAAAA,EAAiBK,QAKpBC,gBAACC,EAAgB,CACfC,QAASR,EACTS,SAAUP,EAAiBQ,MAC3BC,MACEL,EAAAM,cAACC,EACC,CAAAZ,OAAQA,EACRU,MACET,EAAiBS,QAAiC,QAAxBG,YAAAb,EAAOc,MAAM,2BAAO,UAAI,IAAAD,OAAA,EAAAA,EAAAE,iBAIxDC,SAAU,SAACC,GACa,oBAAXC,SACTA,OAAOC,SAASF,KAAOA,IAG3BG,MAAO,CAAEC,MAAO,KAChBC,cAAc,EACdC,eAAe,IAtBV,MA2BEX,EAAgB,SAACd,aAC5BE,WACAU,EAAKZ,EAAAY,MACLO,EAAInB,EAAAmB,KAMJ,OACEZ,EAACM,cAAAa,EAAyB,CAAAP,KAAMA,GAC9BZ,EAACM,cAAAc,GACCC,QAAgC,UAAL,QAAlBC,EAAA3B,aAAA,EAAAA,EAAQc,MAAM,YAAI,IAAAa,OAAA,EAAAA,EAAG,UAAE,IAAAd,OAAA,EAAAA,EAAEE,cAClCM,MAAO,GACPO,OAAQ,GACRC,SAAO,EACPC,SAA4B,QAAlBC,EAAA/B,aAAM,EAANA,EAAQc,MAAM,YAAI,IAAAiB,OAAA,EAAAA,EAAG,KAEjC1B,EAAAM,cAAA,OAAA,KAAOD"}

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

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var o,r=e.a(o\|\|(o=n(["\n display: inline-flex;\n position: relative;\n flex-direction: row;\n align-items: center;\n padding: 7px 11px;\n gap: 2px;\n\n background: ",";\n border: 1px solid ",";\n border-radius: 20px;\n\n color: ",";\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n text-decoration: none;\n\n cursor: pointer;\n"],["\n display: inline-flex;\n position: relative;\n flex-direction: row;\n align-items: center;\n padding: 7px 11px;\n gap: 2px;\n\n background: ",";\n border: 1px solid ",";\n border-radius: 20px;\n\n color: ",";\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n text-decoration: none;\n\n cursor: pointer;\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.neutral100}),(function(n){return n.theme.colors.gray600}));export{r as StyledLanguageChangeLink};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/languageSwitcher/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'src/misc/theme'\nimport styled from 'styled-components'\n\nexport const StyledLanguageChangeLink = styled.a`\n display: inline-flex;\n position: relative;\n flex-direction: row;\n align-items: center;\n padding: 7px 11px;\n gap: 2px;\n\n background: ${(props: ThemeProps) => props.theme.colors.white};\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral100};\n border-radius: 20px;\n\n color: ${(props: ThemeProps) => props.theme.colors.gray600};\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n text-decoration: none;\n\n cursor: pointer;\n`\n"],"names":["StyledLanguageChangeLink","styled","a","templateObject_1","__makeTemplateObject","props","theme","colors","white","neutral100","gray600"],"mappings":"iHAGa,MAAAA,EAA2BC,EAAOC,EAACC,IAAAA,EAAAC,EAAA,CAAA,wJAAA,0BAAA,yCAAA,sHAAA,CAAA,wJAQe,0BACW,yCAGd,yHAJ5C,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SACpC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,cAGrD,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG"}

package/build/esm/components/molecules/languageSwitcher/tooltipSelection/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as t}from"react";import n from"../../../../assets/svg/check.svg.js";import{Text as r}from"../../../atoms/text/index.js";import{StyledSelectionContainer as l,StyledSelectionLabel as o,StyleSelectionPopup as a,StyledOption as c,StyledPopupBackground as i}from"./index.styled.js";var s=function(s){var m=s.options,u=s.label,d=s.labelRenderer,v=s.selected,f=s.onChange,p=s.showSelected,E=void 0===p\|\|p,h=s.style,k=void 0===h?{}:h,g=s.showIndicator,x=void 0===g\|\|g,y=t(!1),C=y[0],b=y[1];return e.createElement(e.Fragment,null,e.createElement(l,null,e.createElement(o,{onClick:function(){return b((function(e){return!e}))}},u\|\|(null==d?void 0:d(C))\|\|null,e.createElement(a,{"data-is-open":C,style:k,"data-show-indicator":x},m.map((function(t,l){return e.createElement(c,{key:l,"data-selected":E&&v===t.value,onClick:function(e){v!==t.value&&(f(t.value),b((function(e){return!e}))),e.stopPropagation()}},e.createElement(r,{size:"p3"},t.label),E&&v===t.value&&e.createElement("img",{src:n,alt:"check",className:"check-icon"}))}))))),C&&e.createElement(i,{onClick:function(){return b(!1)}}))};export{s as TooltipSelection};
2	+ //# sourceMappingURL=index.js.map

package/build/esm/components/molecules/languageSwitcher/tooltipSelection/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../../src/components/molecules/languageSwitcher/tooltipSelection/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\n\nimport { Check } from 'assets/svg'\nimport { Text } from 'components/atoms/text'\nimport { CSSProperties } from 'styled-components'\n\nimport {\n StyledOption,\n StyledPopupBackground,\n StyledSelectionContainer,\n StyledSelectionLabel,\n StyleSelectionPopup,\n} from './index.styled'\nexport type Option = {\n value: string\n label: string\n locale?: string\n}\nexport type Props = {\n options: Option[]\n selected: string | number\n label?: string | JSX.Element\n labelRenderer?: (isOpen?: boolean) => string | JSX.Element\n onChange: (s: string) => void\n showSelected?: boolean\n style?: CSSProperties\n showIndicator?: boolean\n}\n\nconst TooltipSelection = ({\n options,\n label,\n labelRenderer,\n selected,\n onChange,\n showSelected = true,\n style = {},\n showIndicator = true,\n}: Props) => {\n const [isOpen, setIsOpen] = useState<boolean>(false)\n\n return (\n <>\n <StyledSelectionContainer>\n <StyledSelectionLabel\n onClick={() => setIsOpen((value: boolean) => !value)}\n >\n {label || labelRenderer?.(isOpen) || null}\n <StyleSelectionPopup\n data-is-open={isOpen}\n style={style}\n data-show-indicator={showIndicator}\n >\n {options.map((option, index) => (\n <StyledOption\n key={index}\n data-selected={showSelected && selected === option.value}\n onClick={(e) => {\n if (selected !== option.value) {\n onChange(option.value)\n setIsOpen((value: boolean) => !value)\n }\n e.stopPropagation()\n }}\n >\n <Text size=\"p3\">{option.label}</Text>\n {showSelected && selected === option.value && (\n <img src={Check} alt=\"check\" className=\"check-icon\" />\n )}\n </StyledOption>\n ))}\n </StyleSelectionPopup>\n </StyledSelectionLabel>\n </StyledSelectionContainer>\n {isOpen && (\n <StyledPopupBackground\n onClick={() => setIsOpen(false)}\n ></StyledPopupBackground>\n )}\n </>\n )\n}\n\nexport { TooltipSelection }\n"],"names":["TooltipSelection","_a","options","label","labelRenderer","selected","onChange","_b","showSelected","_c","style","_d","showIndicator","_e","useState","isOpen","setIsOpen","React","createElement","Fragment","StyledSelectionContainer","StyledSelectionLabel","onClick","value","StyleSelectionPopup","map","option","index","StyledOption","key","e","stopPropagation","Text","size","src","Check","alt","className","StyledPopupBackground"],"mappings":"wSA6BM,IAAAA,EAAmB,SAACC,GACxB,IAAAC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAaH,EAAAG,cACbC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAmBN,EAAAO,aAAnBA,OAAY,IAAAD,GAAOA,EACnBE,EAAAR,EAAAS,MAAAA,OAAK,IAAAD,EAAG,GAAEA,EACVE,EAAoBV,EAAAW,cAApBA,OAAa,IAAAD,GAAOA,EAEdE,EAAsBC,GAAkB,GAAvCC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAExB,OACEI,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EAAwB,KACvBH,EAAAC,cAACG,EACC,CAAAC,QAAS,WAAM,OAAAN,GAAU,SAACO,GAAmB,OAACA,OAE7CpB,IAASC,aAAa,EAAbA,EAAgBW,KAAW,KACrCE,EAAAC,cAACM,EACe,CAAA,eAAAT,EACdL,MAAOA,EAAK,sBACSE,GAEpBV,EAAQuB,KAAI,SAACC,EAAQC,GAAU,OAC9BV,gBAACW,EAAY,CACXC,IAAKF,kBACUnB,GAAgBH,IAAaqB,EAAOH,MACnDD,QAAS,SAACQ,GACJzB,IAAaqB,EAAOH,QACtBjB,EAASoB,EAAOH,OAChBP,GAAU,SAACO,GAAmB,OAACA,MAEjCO,EAAEC,oBAGJd,EAACC,cAAAc,GAAKC,KAAK,MAAMP,EAAOvB,OACvBK,GAAgBH,IAAaqB,EAAOH,OACnCN,EAAKC,cAAA,MAAA,CAAAgB,IAAKC,EAAOC,IAAI,QAAQC,UAAU,sBAOlDtB,GACCE,EAAAC,cAACoB,EACC,CAAAhB,QAAS,WAAM,OAAAN,GAAU"}

package/build/esm/components/molecules/languageSwitcher/tooltipSelection/index.styled.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var o,t,i,r,d,p=e.div(o\|\|(o=n(["\n position: relative;\n display: inline-block;\n"],["\n position: relative;\n display: inline-block;\n"]))),a=e.div(t\|\|(t=n(["\n position: relative;\n"],["\n position: relative;\n"]))),s=e.div(i\|\|(i=n(["\n position: absolute;\n z-index: 21;\n top: 100%;\n right: 0;\n width: 327px;\n padding: 8px;\n background: white;\n border-radius: 4px;\n filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));\n\n &[data-is-open='false'] {\n display: none;\n }\n &[data-show-indicator='true'] {\n &:before {\n position: absolute;\n right: 11px;\n bottom: 100%;\n width: 0;\n height: 0;\n border: 0.5rem solid transparent;\n border-top: none;\n border-bottom-color: #fff;\n content: '';\n filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));\n }\n }\n"],["\n position: absolute;\n z-index: 21;\n top: 100%;\n right: 0;\n width: 327px;\n padding: 8px;\n background: white;\n border-radius: 4px;\n filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));\n\n &[data-is-open='false'] {\n display: none;\n }\n &[data-show-indicator='true'] {\n &:before {\n position: absolute;\n right: 11px;\n bottom: 100%;\n width: 0;\n height: 0;\n border: 0.5rem solid transparent;\n border-top: none;\n border-bottom-color: #fff;\n content: '';\n filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));\n }\n }\n"]))),l=e.div(r\|\|(r=n(["\n display: flex;\n height: 40px;\n align-items: center;\n justify-content: space-between;\n\n padding: 0 16px;\n border-radius: 6px;\n cursor: pointer;\n\n .check-icon {\n width: 16px;\n height: 16px;\n }\n &[data-selected='false'] {\n background-color: ",";\n }\n"],["\n display: flex;\n height: 40px;\n align-items: center;\n justify-content: space-between;\n\n padding: 0 16px;\n border-radius: 6px;\n cursor: pointer;\n\n .check-icon {\n width: 16px;\n height: 16px;\n }\n &[data-selected='false'] {\n background-color: ",";\n }\n"])),(function(n){return n.theme.colors.gray100})),h=e.div(d\|\|(d=n(["\n position: fixed;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: default;\n"],["\n position: fixed;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: default;\n"])));export{s as StyleSelectionPopup,l as StyledOption,h as StyledPopupBackground,p as StyledSelectionContainer,a as StyledSelectionLabel};
2	+ //# sourceMappingURL=index.styled.js.map

package/build/esm/components/molecules/languageSwitcher/tooltipSelection/index.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../../src/components/molecules/languageSwitcher/tooltipSelection/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport styled from 'styled-components'\n\nexport const StyledSelectionContainer = styled.div`\n position: relative;\n display: inline-block;\n`\n\nexport const StyledSelectionLabel = styled.div`\n position: relative;\n`\n\nexport const StyleSelectionPopup = styled.div`\n position: absolute;\n z-index: 21;\n top: 100%;\n right: 0;\n width: 327px;\n padding: 8px;\n background: white;\n border-radius: 4px;\n filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));\n\n &[data-is-open='false'] {\n display: none;\n }\n &[data-show-indicator='true'] {\n &:before {\n position: absolute;\n right: 11px;\n bottom: 100%;\n width: 0;\n height: 0;\n border: 0.5rem solid transparent;\n border-top: none;\n border-bottom-color: #fff;\n content: '';\n filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));\n }\n }\n`\n\nexport const StyledOption = styled.div`\n display: flex;\n height: 40px;\n align-items: center;\n justify-content: space-between;\n\n padding: 0 16px;\n border-radius: 6px;\n cursor: pointer;\n\n .check-icon {\n width: 16px;\n height: 16px;\n }\n &[data-selected='false'] {\n background-color: ${(props: ThemeProps) => props.theme.colors.gray100};\n }\n`\nexport const StyledPopupBackground = styled.div`\n position: fixed;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: default;\n`\n"],"names":["StyledSelectionContainer","styled","div","templateObject_1","__makeTemplateObject","StyledSelectionLabel","templateObject_2","StyleSelectionPopup","templateObject_3","StyledOption","templateObject_4","props","theme","colors","gray100","StyledPopupBackground","templateObject_5"],"mappings":"oHAGa,cAAAA,EAA2BC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,uDAAA,CAAA,0DAKrCC,EAAuBJ,EAAOC,IAAGI,IAAAA,EAAAF,EAAA,CAAA,6BAAA,CAAA,gCAIjCG,EAAsBN,EAAOC,IAAGM,IAAAA,EAAAJ,EAAA,CAAA,6mBAAA,CAAA,gnBA8BhCK,EAAeR,EAAOC,IAAGQ,IAAAA,EAAAN,EAAA,CAAA,qRAAA,YAAA,CAAA,qRAemC,eAAjD,SAACO,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,WAGrDC,EAAwBd,EAAOC,IAAGc,IAAAA,EAAAZ,EAAA,CAAA,sHAAA,CAAA"}

package/build/esm/components/molecules/mobileBottomNavigation/MobileBottomNavigationIcon.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as t,__assign as s}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{Text as i}from"../../atoms/text/index.js";import"../../atoms/alert/index.styled.js";import"../../atoms/avatar/index.styled.js";import"../../atoms/badge/index.styled.js";import"../../atoms/borderHeading/index.styled.js";import"../../atoms/button/index.styled.js";import"../../atoms/divider/index.styled.js";import"../../atoms/fileDropdown/index.styled.js";import"../../atoms/flag/index.styled.js";import"../../atoms/grid/index.styled.js";import"../../atoms/heading/index.styled.js";import"../../atoms/label/index.js";import"../../atoms/input/index.styled.js";import"../../atoms/logo/index.js";import"../../../misc/utils.js";import"../../atoms/pagination/index.styled.js";import"../../atoms/pureInput/index.js";import"../../atoms/radio/index.styled.js";import"../../atoms/shadow/index.styled.js";import"react-range";import"../../atoms/slider/index.styled.js";import"../../atoms/tag/index.styled.js";import"../../atoms/toggle/index.styled.js";import"../../atoms/underlinedLink/index.styled.js";import"../../atoms/uploader/index.styled.js";import"../../atoms/textArea/index.js";import"../../atoms/container/index.styled.js";import"../../atoms/checkbox/index.styled.js";import"../../atoms/textDivider/index.js";import"../../atoms/rateStars/index.styled.js";import"../../atoms/icons/Ask.js";import"../../atoms/icons/BarChart.js";import"../../atoms/icons/Booking.js";import"../../atoms/icons/Bookmark.js";import"../../atoms/icons/Community.js";import"../../atoms/icons/EditSpecial.js";import"../../atoms/icons/Family.js";import"../../atoms/icons/Font.js";import"../../atoms/icons/Heart.js";import"../../atoms/icons/Home.js";import"../../atoms/icons/Like.js";import"../../atoms/icons/MyCommunity.js";import"../../atoms/icons/PlusSpecial.js";import"../../atoms/icons/Recalculate.js";import"../../atoms/icons/Scale.js";import"../../atoms/icons/Share.js";import"../../atoms/icons/Stethoscope.js";import"../../atoms/progress/index.styled.js";import{theme as e}from"../../../misc/theme.js";import{StyledMobileBottomNavigationIcon as m,StyledBadge as a}from"./index.styled.js";var r=function(r){var d=r.badgeAmount,n=r.disabled,l=void 0!==n&&n,p=r.hasBadge,j=void 0!==p&&p,c=r.icon,x=r.isActive,y=void 0!==x&&x,b=r.isSpecial,g=void 0!==b&&b,u=r.label,v=t(r,["badgeAmount","disabled","hasBadge","icon","isActive","isSpecial","label"]);return o.createElement(m,s({"data-is-special":g,"data-is-active":y,"data-is-disabled":l},v),o.createElement("div",{className:"mobile-navigation-icon","data-no-label":!Boolean(u)},j&&o.createElement(a,{"data-no-label":!Boolean(u)},o.createElement(i,{size:"s5",type:"semiBold",color:e.colors.white},d)),c),u&&o.createElement("span",{className:"mobile-navigation-label"},u))};export{r as MobileBottomNavigationIcon};
2	+ //# sourceMappingURL=MobileBottomNavigationIcon.js.map

package/build/esm/components/molecules/mobileBottomNavigation/MobileBottomNavigationIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MobileBottomNavigationIcon.js","sources":["../../../../../src/components/molecules/mobileBottomNavigation/MobileBottomNavigationIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from 'components/atoms'\nimport { theme } from 'misc/theme'\n\nimport { StyledBadge, StyledMobileBottomNavigationIcon } from './index.styled'\n\nexport type MobileBottomNavigationIconProps = {\n badgeAmount?: string\n disabled?: boolean\n hasBadge?: boolean\n icon: JSX.Element\n isActive?: boolean\n isSpecial?: boolean\n label?: string\n on?: string\n} & React.HTMLAttributes<HTMLDivElement>\n\nconst MobileBottomNavigationIcon = ({\n badgeAmount,\n disabled = false,\n hasBadge = false,\n icon,\n isActive = false,\n isSpecial = false,\n label,\n ...props\n}: MobileBottomNavigationIconProps) => {\n return (\n <StyledMobileBottomNavigationIcon\n data-is-special={isSpecial}\n data-is-active={isActive}\n data-is-disabled={disabled}\n {...props}\n >\n <div className=\"mobile-navigation-icon\" data-no-label={!Boolean(label)}>\n {hasBadge && (\n <StyledBadge data-no-label={!Boolean(label)}>\n <Text size=\"s5\" type=\"semiBold\" color={theme.colors.white}>\n {badgeAmount}\n </Text>\n </StyledBadge>\n )}\n {icon}\n </div>\n {label && <span className=\"mobile-navigation-label\">{label}</span>}\n </StyledMobileBottomNavigationIcon>\n )\n}\n\nexport { MobileBottomNavigationIcon }\n"],"names":["MobileBottomNavigationIcon","_a","badgeAmount","_b","disabled","_c","hasBadge","icon","_d","isActive","_e","isSpecial","label","props","__rest","React","createElement","StyledMobileBottomNavigationIcon","__assign","className","Boolean","StyledBadge","Text","size","type","color","theme","colors","white"],"mappings":"2nEAkBM,IAAAA,EAA6B,SAACC,GAClC,IAAAC,EAAWD,EAAAC,YACXC,aAAAC,cAAgBD,EAChBE,EAAAJ,EAAAK,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAIN,EAAAM,KACJC,EAAgBP,EAAAQ,SAAhBA,OAAW,IAAAD,KACXE,EAAAT,EAAAU,UAAAA,OAAS,IAAAD,GAAQA,EACjBE,EAAKX,EAAAW,MACFC,EAAKC,EAAAb,EAR0B,6EAUlC,OACEc,EAACC,cAAAC,EACkBC,EAAA,CAAA,kBAAAP,mBACDF,EAAQ,mBACNL,GACdS,GAEJE,EAAKC,cAAA,MAAA,CAAAG,UAAU,yBAAwB,iBAAiBC,QAAQR,IAC7DN,GACCS,EAACC,cAAAK,oBAA4BD,QAAQR,IACnCG,EAACC,cAAAM,GAAKC,KAAK,KAAKC,KAAK,WAAWC,MAAOC,EAAMC,OAAOC,OACjD1B,IAINK,GAEFK,GAASG,EAAMC,cAAA,OAAA,CAAAG,UAAU,2BAA2BP"}

package/build/esm/components/molecules/mobileBottomNavigation/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as o,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{StyledMobileBottomNavigation as i}from"./index.styled.js";import{MobileBottomNavigationIcon as n}from"./MobileBottomNavigationIcon.js";var l=function(n){var l=n.children,t=n.numberOfChildren,d=void 0===t?5:t,m=n.on,s=void 0===m?"":m,a=n.isCollapsed,c=void 0!==a&&a,f=o(n,["children","numberOfChildren","on","isCollapsed"]);return r.createElement(i,e({numberOfChildren:d,on:s,"data-is-collapsed":c},f),l)};l.Icon=n;export{l as MobileBottomNavigation};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/mobileBottomNavigation/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { StyledMobileBottomNavigation } from './index.styled'\nimport { MobileBottomNavigationIcon } from './MobileBottomNavigationIcon'\n\nexport type MobileBottomNavigationProps = {\n children: React.ReactNode\n numberOfChildren: number\n on?: string\n isCollapsed?: boolean\n} & React.HTMLAttributes<HTMLDivElement>\n\nconst MobileBottomNavigationWrapper: React.FC<MobileBottomNavigationProps> = ({\n children,\n numberOfChildren = 5,\n on = '',\n isCollapsed = false,\n ...rest\n}) => {\n return (\n <StyledMobileBottomNavigation\n numberOfChildren={numberOfChildren}\n on={on}\n data-is-collapsed={isCollapsed}\n {...rest}\n >\n {children}\n </StyledMobileBottomNavigation>\n )\n}\n\nexport interface CompoundedComponent\n extends React.ForwardRefExoticComponent<MobileBottomNavigationProps> {\n Icon: typeof MobileBottomNavigationIcon\n}\n\nconst MobileBottomNavigation =\n MobileBottomNavigationWrapper as CompoundedComponent\n\nMobileBottomNavigation.Icon = MobileBottomNavigationIcon\nexport { MobileBottomNavigation }\n"],"names":["MobileBottomNavigation","_a","children","_b","numberOfChildren","_c","on","_d","isCollapsed","rest","__rest","React","createElement","StyledMobileBottomNavigation","Icon","MobileBottomNavigationIcon"],"mappings":"mPAYA,IAwBMA,EAxBuE,SAACC,GAC5E,IAAAC,EAAQD,EAAAC,SACRC,EAAoBF,EAAAG,iBAApBA,OAAgB,IAAAD,EAAG,EAACA,EACpBE,EAAAJ,EAAAK,GAAAA,OAAK,IAAAD,EAAA,GAAEA,EACPE,EAAmBN,EAAAO,YAAnBA,OAAW,IAAAD,GAAQA,EAChBE,EALyEC,EAAAT,EAAA,CAAA,WAAA,mBAAA,KAAA,gBAO5E,OACEU,EAACC,cAAAC,KACCT,iBAAkBA,EAClBE,GAAIA,EAAE,oBACaE,GACfC,GAEHP,IAaPF,EAAuBc,KAAOC"}

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

	@@ -0,0 +1,2 @@
1	+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{keyframes as i}from"styled-components";import{theme as e}from"../../../misc/theme.js";var o,a,r,l,s,d,p,c=i(o\|\|(o=n(["\n from {\n transform: translateY(100%);\n visibility: visible;\n }\n\n to {\n transform: translateY(0);\n }\n"],["\n from {\n transform: translateY(100%);\n visibility: visible;\n }\n\n to {\n transform: translateY(0);\n }\n"]))),m=i(a\|\|(a=n(["\n from {\n transform: translate(0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate(0, 100%);\n }\n"],["\n from {\n transform: translate(0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate(0, 100%);\n }\n"]))),x=t.div(r\|\|(r=n(["\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n gap: 4px;\n\n .mobile-navigation-label {\n font-weight: 500;\n font-size: 10px;\n line-height: 16px;\n color: ",";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 70px;\n }\n\n .mobile-navigation-icon {\n position: relative;\n height: 24px;\n &[data-no-label='true'] {\n border-radius: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 16px;\n width: 40px;\n height: 40px;\n transition: background-color 200ms ease-in;\n &:hover {\n background-color: ",";\n }\n }\n }\n\n &[data-is-special='true'] {\n .mobile-navigation-icon {\n height: 32px;\n }\n }\n\n &[data-is-active='true'] {\n .mobile-navigation-label {\n color: ",";\n }\n }\n\n &[data-is-disabled='true'] {\n opacity: 0.2;\n }\n"],["\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n gap: 4px;\n\n .mobile-navigation-label {\n font-weight: 500;\n font-size: 10px;\n line-height: 16px;\n color: ",";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 70px;\n }\n\n .mobile-navigation-icon {\n position: relative;\n height: 24px;\n &[data-no-label='true'] {\n border-radius: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 16px;\n width: 40px;\n height: 40px;\n transition: background-color 200ms ease-in;\n &:hover {\n background-color: ",";\n }\n }\n }\n\n &[data-is-special='true'] {\n .mobile-navigation-icon {\n height: 32px;\n }\n }\n\n &[data-is-active='true'] {\n .mobile-navigation-label {\n color: ",";\n }\n }\n\n &[data-is-disabled='true'] {\n opacity: 0.2;\n }\n"])),e.colors.gray600,e.colors.blue50,e.colors.primaryBase),g=t.div(l\|\|(l=n(["\n z-index: 100;\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-height: 64px;\n min-height: 64px;\n display: grid;\n grid-template-columns: repeat(",", 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n align-items: flex-end;\n padding-bottom: 8px;\n padding-top: 4px;\n\n background-color: ",";\n border: 1px solid ",";\n a {\n text-decoration: none;\n }\n &[data-is-collapsed='true'] {\n animation: "," 500ms ease-in-out forwards;\n }\n\n &[data-is-collapsed='false'] {\n animation: "," 500ms ease-in-out forwards;\n }\n"],["\n z-index: 100;\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-height: 64px;\n min-height: 64px;\n display: grid;\n grid-template-columns: repeat(",", 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n align-items: flex-end;\n padding-bottom: 8px;\n padding-top: 4px;\n\n background-color: ",";\n border: 1px solid ",";\n a {\n text-decoration: none;\n }\n &[data-is-collapsed='true'] {\n animation: "," 500ms ease-in-out forwards;\n }\n\n &[data-is-collapsed='false'] {\n animation: "," 500ms ease-in-out forwards;\n }\n"])),(function(n){return n.numberOfChildren}),e.colors.white,e.colors.neutral100,m,c),f=t.span(s\|\|(s=n(["\n position: absolute;\n left: 100%;\n transform: translate(-10px, calc(-50% + 3px));\n background-color: ",";\n border-radius: 32px;\n border: 2px solid ",";\n padding: 1px 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 20px;\n aspect-ratio: 1;\n &[data-no-label='true'] {\n left: 0;\n transform: translate(22px, -50%);\n }\n"],["\n position: absolute;\n left: 100%;\n transform: translate(-10px, calc(-50% + 3px));\n background-color: ",";\n border-radius: 32px;\n border: 2px solid ",";\n padding: 1px 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 20px;\n aspect-ratio: 1;\n &[data-no-label='true'] {\n left: 0;\n transform: translate(22px, -50%);\n }\n"])),e.colors.green800,e.colors.white);t.div(d\|\|(d=n(["\n position: absolute;\n top: 0;\n left: 0;\n height: 3px;\n background-color: ",";\n transition: width 150ms linear;\n"],["\n position: absolute;\n top: 0;\n left: 0;\n height: 3px;\n background-color: ",";\n transition: width 150ms linear;\n"])),e.colors.primaryBase),t.div(p\|\|(p=n(["\n a {\n text-decoration: none;\n }\n"],["\n a {\n text-decoration: none;\n }\n"])));export{f as StyledBadge,g as StyledMobileBottomNavigation,x as StyledMobileBottomNavigationIcon,m as slideOutDown};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/mobileBottomNavigation/index.styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\nimport { theme } from '../../../misc/theme'\n\nconst slideInUp = keyframes`\n from {\n transform: translateY(100%);\n visibility: visible;\n }\n\n to {\n transform: translateY(0);\n }\n`\n\nexport const slideOutDown = keyframes`\n from {\n transform: translate(0, 0);\n }\n\n to {\n visibility: hidden;\n transform: translate(0, 100%);\n }\n`\nexport const StyledMobileBottomNavigationIcon = styled.div`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-items: center;\n gap: 4px;\n\n .mobile-navigation-label {\n font-weight: 500;\n font-size: 10px;\n line-height: 16px;\n color: ${theme.colors.gray600};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 70px;\n }\n\n .mobile-navigation-icon {\n position: relative;\n height: 24px;\n &[data-no-label='true'] {\n border-radius: 50%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 16px;\n width: 40px;\n height: 40px;\n transition: background-color 200ms ease-in;\n &:hover {\n background-color: ${theme.colors.blue50};\n }\n }\n }\n\n &[data-is-special='true'] {\n .mobile-navigation-icon {\n height: 32px;\n }\n }\n\n &[data-is-active='true'] {\n .mobile-navigation-label {\n color: ${theme.colors.primaryBase};\n }\n }\n\n &[data-is-disabled='true'] {\n opacity: 0.2;\n }\n`\n\nexport const StyledMobileBottomNavigation = styled.div<{\n numberOfChildren: number\n on?: string\n}>`\n z-index: 100;\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-height: 64px;\n min-height: 64px;\n display: grid;\n grid-template-columns: repeat(${(props) => props.numberOfChildren}, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n align-items: flex-end;\n padding-bottom: 8px;\n padding-top: 4px;\n\n background-color: ${theme.colors.white};\n border: 1px solid ${theme.colors.neutral100};\n a {\n text-decoration: none;\n }\n &[data-is-collapsed='true'] {\n animation: ${slideOutDown} 500ms ease-in-out forwards;\n }\n\n &[data-is-collapsed='false'] {\n animation: ${slideInUp} 500ms ease-in-out forwards;\n }\n`\n\nexport const StyledBadge = styled.span`\n position: absolute;\n left: 100%;\n transform: translate(-10px, calc(-50% + 3px));\n background-color: ${theme.colors.green800};\n border-radius: 32px;\n border: 2px solid ${theme.colors.white};\n padding: 1px 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 20px;\n aspect-ratio: 1;\n &[data-no-label='true'] {\n left: 0;\n transform: translate(22px, -50%);\n }\n`\n\nexport const StyledMobileBottomArticleNavigationProgress = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n height: 3px;\n background-color: ${theme.colors.primaryBase};\n transition: width 150ms linear;\n`\n\nexport const StyledMobileHorizonNavigation = styled.div`\n a {\n text-decoration: none;\n }\n`\n"],"names":["slideInUp","keyframes","templateObject_1","__makeTemplateObject","slideOutDown","templateObject_2","StyledMobileBottomNavigationIcon","styled","div","templateObject_3","theme","colors","gray600","blue50","primaryBase","StyledMobileBottomNavigation","props","numberOfChildren","white","neutral100","StyledBadge","span","templateObject_5","green800","templateObject_6","templateObject_7"],"mappings":"gLAIA,kBAAMA,EAAYC,EAASC,IAAAA,EAAAC,EAAA,CAAA,+HAAA,CAAA,kIAWdC,EAAeH,EAASI,IAAAA,EAAAF,EAAA,CAAA,kIAAA,CAAA,qIAUxBG,EAAmCC,EAAOC,IAAGC,IAAAA,EAAAN,EAAA,CAAA,qPAAA,ohBAAA,yMAAA,6EAAA,CAAA,qPAYzB,ohBAsBc,yMAaR,+EAnC1BO,EAAMC,OAAOC,QAsBEF,EAAMC,OAAOE,OAa1BH,EAAMC,OAAOG,aASfC,EAA+BR,EAAOC,2nBAGjD,iMAUiE,oLAQ3B,0BACK,8FAKhB,yFAIH,0CAlBQ,SAACQ,GAAU,OAAAA,EAAMC,mBAQ7BP,EAAMC,OAAOO,MACbR,EAAMC,OAAOQ,WAKlBf,EAIAJ,GAIJoB,EAAcb,EAAOc,KAAIC,IAAAA,EAAAnB,EAAA,CAAA,iHAAA,kDAAA,yPAAA,CAAA,iHAIK,kDAEH,2PAFlBO,EAAMC,OAAOY,SAEbb,EAAMC,OAAOO,OAcwBX,EAAOC,IAAGgB,IAAAA,EAAArB,EAAA,CAAA,uFAAA,0CAAA,CAAA,uFAKvB,4CAAxBO,EAAMC,OAAOG,aAIUP,EAAOC,IAAGiB,IAAAA,EAAAtB,EAAA,CAAA,8CAAA,CAAA"}

package/build/esm/components/molecules/modal/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as o,useRef as t,useEffect as d}from"react";import{useScrollbarSize as n}from"../../../hooks/useScrollbarSize.js";import{createPortal as a}from"react-dom";import{StyledModalWrapper as l,StyledModalMask as c,StyledModal as r}from"./index.styled.js";var i=function(){document.querySelectorAll('.hhg-modal[data-open="true"]').length<1&&document.body.classList.remove("hhc-modal-show")},m=function(){document.querySelectorAll('.hhg-modal[data-open="true"]').length<1&&(document.body.style.overflow="",document.body.style.paddingRight="",document.body.classList.remove("hhc-disabled-scroll"))},s=function(s){var u=s.type,h=void 0===u?"lead":u,p=s.closeIcon,v=s.isOpen,y=void 0===v\|\|v,f=s.onClose,g=s.children,b=s.className,_=void 0===b?"":b,E=s.animationType,w=void 0===E?"slideTop":E,C=s.isStaticBackdrop,N=void 0!==C&&C,k=o(!1),S=k[0],L=k[1],j=t(null),x=n().width;if(!j.current&&S&&(j.current=document.createElement("div")),d((function(){return L(!0),function(){L(!1),i(),m()}}),[]),d((function(){if(S){var e=((o=document.getElementById("hhg-modals"))\|\|((o=document.createElement("div")).setAttribute("id","hhg-modals"),document.body.append(o)),o);return e.appendChild(j.current),function(){e.removeChild(j.current)}}var o}),[S]),d((function(){y?document.body.classList.add("hhc-modal-show"):i()}),[y]),d((function(){y?(document.body.style.overflow="hidden",document.body.style.paddingRight=x+"px",document.body.classList.add("hhc-disabled-scroll")):m()}),[y,x]),!S)return null;var A=["hhg-modal__wrapper",_,w].filter((function(e){return e})).join(" ");return a(e.createElement(l,{className:A,"data-open":y,"data-type":h},!N&&e.createElement(c,{"data-open":y,onClick:f,"data-type":h}),!N&&"video"===h&&!!p&&e.createElement("div",{className:"hhg-modal__close",onClick:f},p),e.createElement(r,{className:"hhg-modal","data-open":y},e.createElement("div",{className:"video"===h?"hhg-modal__video":"hhg-modal__content"},!!p&&"video"!==h&&e.createElement("div",{className:"hhg-modal__close",onClick:f},p),g))),j.current)};export{s as Modal};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/modal/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\n\nimport { useScrollbarSize } from 'hooks/useScrollbarSize'\nimport { createPortal } from 'react-dom'\n\nimport {\n StyledModal,\n StyledModalWrapper,\n StyledModalMask,\n} from './index.styled'\n\nexport type Props = {\n type: 'tail' | 'lead' | 'form' | 'confirm' | 'profile' | 'video'\n animationType?: 'slideTop' | 'scaleUp'\n closeIcon?: JSX.Element\n isOpen: boolean\n onClose: () => void\n children?: any\n className?: string\n isStaticBackdrop?: boolean\n}\nconst MODAL_ROOT_ID = 'hhg-modals'\nconst getModalsRoot = () => {\n let el = document.getElementById(MODAL_ROOT_ID)\n\n if (!el) {\n el = document.createElement('div')\n el.setAttribute('id', MODAL_ROOT_ID)\n document.body.append(el)\n }\n\n return el\n}\nconst cleanUpModalShow = () => {\n const selector = '.hhg-modal[data-open=\"true\"]'\n const remainingPopupOpened = document.querySelectorAll(selector)\n // Remove the opening class if there are only 1 popup is shown\n if (remainingPopupOpened.length < 1) {\n document.body.classList.remove('hhc-modal-show')\n }\n}\nconst cleanUpDisabledScroll = () => {\n // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero\n const selector = '.hhg-modal[data-open=\"true\"]'\n const remainingPopupOpened = document.querySelectorAll(selector)\n if (remainingPopupOpened.length < 1) {\n document.body.style.overflow = ''\n document.body.style.paddingRight = ''\n document.body.classList.remove('hhc-disabled-scroll')\n }\n}\n\nconst Modal = ({\n type = 'lead',\n closeIcon,\n isOpen = true,\n onClose,\n children,\n className = '',\n animationType = 'slideTop',\n isStaticBackdrop = false,\n}: Props) => {\n const [mounted, setMounted] = useState(false)\n const elRef = useRef(null)\n const { width: scrollBarWidth } = useScrollbarSize()\n\n if (!elRef.current && mounted) {\n elRef.current = document.createElement('div')\n }\n\n useEffect(() => {\n setMounted(true)\n return () => {\n setMounted(false)\n cleanUpModalShow()\n cleanUpDisabledScroll()\n }\n }, [])\n\n useEffect(() => {\n if (mounted) {\n const modalsRoot = getModalsRoot()\n modalsRoot.appendChild(elRef.current)\n return () => {\n modalsRoot.removeChild(elRef.current)\n }\n }\n }, [mounted])\n\n useEffect(() => {\n if (isOpen) {\n document.body.classList.add('hhc-modal-show')\n } else {\n cleanUpModalShow()\n }\n }, [isOpen])\n\n useEffect(() => {\n if (isOpen) {\n document.body.style.overflow = 'hidden'\n document.body.style.paddingRight = scrollBarWidth + 'px'\n document.body.classList.add('hhc-disabled-scroll')\n } else {\n cleanUpDisabledScroll()\n }\n }, [isOpen, scrollBarWidth])\n\n if (!mounted) return null\n\n const classes = ['hhg-modal__wrapper', className, animationType]\n .filter((s) => s)\n .join(' ')\n\n return createPortal(\n <StyledModalWrapper className={classes} data-open={isOpen} data-type={type}>\n {!isStaticBackdrop && (\n <StyledModalMask\n data-open={isOpen}\n onClick={onClose}\n data-type={type}\n />\n )}\n {!isStaticBackdrop && type === 'video' && !!closeIcon && (\n <div className=\"hhg-modal__close\" onClick={onClose}>\n {closeIcon}\n </div>\n )}\n <StyledModal className=\"hhg-modal\" data-open={isOpen}>\n <div\n className={\n type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content'\n }\n >\n {!!closeIcon && type !== 'video' && (\n <div className=\"hhg-modal__close\" onClick={onClose}>\n {closeIcon}\n </div>\n )}\n {children}\n </div>\n </StyledModal>\n </StyledModalWrapper>,\n elRef.current,\n )\n}\n\nexport { Modal }\n"],"names":["cleanUpModalShow","document","querySelectorAll","length","body","classList","remove","cleanUpDisabledScroll","style","overflow","paddingRight","Modal","_a","_b","type","closeIcon","_c","isOpen","onClose","children","_d","className","_e","animationType","_f","isStaticBackdrop","_g","useState","mounted","setMounted","elRef","useRef","scrollBarWidth","useScrollbarSize","current","createElement","useEffect","modalsRoot_1","el","getElementById","setAttribute","append","appendChild","removeChild","add","classes","filter","s","join","createPortal","React","StyledModalWrapper","StyledModalMask","onClick","StyledModal"],"mappings":"2QAqBA,IAYMA,EAAmB,WAEMC,SAASC,iBADrB,gCAGQC,OAAS,GAChCF,SAASG,KAAKC,UAAUC,OAAO,mBAG7BC,EAAwB,WAGCN,SAASC,iBADrB,gCAEQC,OAAS,IAChCF,SAASG,KAAKI,MAAMC,SAAW,GAC/BR,SAASG,KAAKI,MAAME,aAAe,GACnCT,SAASG,KAAKC,UAAUC,OAAO,yBAI7BK,EAAQ,SAACC,GACb,IAAAC,EAAAD,EAAAE,KAAAA,OAAI,IAAAD,EAAG,OAAMA,EACbE,EAASH,EAAAG,UACTC,EAAaJ,EAAAK,OAAbA,OAAS,IAAAD,KACTE,YACAC,EAAQP,EAAAO,SACRC,cAAAC,aAAY,GAAED,EACdE,EAA0BV,EAAAW,cAA1BA,OAAgB,IAAAD,EAAA,aAChBE,EAAAZ,EAAAa,iBAAAA,OAAgB,IAAAD,GAAQA,EAElBE,EAAwBC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAAQC,EAAO,MACNC,EAAmBC,UA2ClC,IAzCKH,EAAMI,SAAWN,IACpBE,EAAMI,QAAUjC,SAASkC,cAAc,QAGzCC,GAAU,WAER,OADAP,GAAW,GACJ,WACLA,GAAW,GACX7B,IACAO,OAED,IAEH6B,GAAU,WACR,GAAIR,EAAS,CACX,IAAMS,IA1DNC,EAAKrC,SAASsC,eAFE,kBAKlBD,EAAKrC,SAASkC,cAAc,QACzBK,aAAa,KANE,cAOlBvC,SAASG,KAAKqC,OAAOH,IAGhBA,GAoDH,OADAD,EAAWK,YAAYZ,EAAMI,SACtB,WACLG,EAAWM,YAAYb,EAAMI,UA9Df,IAChBI,IAgED,CAACV,IAEJQ,GAAU,WACJnB,EACFhB,SAASG,KAAKC,UAAUuC,IAAI,kBAE5B5C,MAED,CAACiB,IAEJmB,GAAU,WACJnB,GACFhB,SAASG,KAAKI,MAAMC,SAAW,SAC/BR,SAASG,KAAKI,MAAME,aAAesB,EAAiB,KACpD/B,SAASG,KAAKC,UAAUuC,IAAI,wBAE5BrC,MAED,CAACU,EAAQe,KAEPJ,EAAS,OAAO,KAErB,IAAMiB,EAAU,CAAC,qBAAsBxB,EAAWE,GAC/CuB,QAAO,SAACC,GAAM,OAAAA,KACdC,KAAK,KAER,OAAOC,EACLC,EAAAf,cAACgB,EAAkB,CAAC9B,UAAWwB,EAAO,YAAa5B,EAAM,YAAaH,IAClEW,GACAyB,EAAAf,cAACiB,EACY,CAAA,YAAAnC,EACXoC,QAASnC,EACE,YAAAJ,KAGbW,GAA6B,UAATX,KAAsBC,GAC1CmC,uBAAK7B,UAAU,mBAAmBgC,QAASnC,GACxCH,GAGLmC,EAAAf,cAACmB,EAAY,CAAAjC,UAAU,wBAAuBJ,GAC5CiC,EAAAf,cAAA,MAAA,CACEd,UACW,UAATP,EAAmB,mBAAqB,wBAGvCC,GAAsB,UAATD,GACdoC,EAAAf,cAAA,MAAA,CAAKd,UAAU,mBAAmBgC,QAASnC,GACxCH,GAGJI,KAIPW,EAAMI"}

package/build/esm/components/molecules/modal/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,a,d=e.div(i\|\|(i=n(["\n position: relative;\n z-index: 200;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 4px 8px ",";\n\n .hhg-modal__content {\n position: relative;\n z-index: 111;\n height: 100%;\n padding: 16px;\n }\n .hhg-modal__video {\n position: relative;\n z-index: 111;\n height: 100%;\n background-color: none;\n box-shadow: none;\n }\n"],["\n position: relative;\n z-index: 200;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 4px 8px ",";\n\n .hhg-modal__content {\n position: relative;\n z-index: 111;\n height: 100%;\n padding: 16px;\n }\n .hhg-modal__video {\n position: relative;\n z-index: 111;\n height: 100%;\n background-color: none;\n box-shadow: none;\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray200})),r=e.div(o\|\|(o=n(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 201;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n visibility: hidden;\n background-color: rgba(38, 38, 38, 0.3);\n\n .hhg-modal__close {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n &[data-type='video'] {\n z-index: 1001;\n }\n &[data-open='true'] {\n visibility: visible;\n }\n\n &.slideTop {\n "," {\n transform: translate(0, -100vh);\n transition: all 0.5s ease;\n }\n\n &[data-open='true'] {\n "," {\n transform: translate(0);\n }\n }\n }\n\n &.scaleUp {\n "," {\n transform: scale(0.9);\n }\n\n &[data-open='true'] {\n "," {\n transition: all 0.3s ease-out;\n transform: scale(1);\n }\n }\n }\n\n &[data-type='tail'] {\n justify-content: flex-end;\n "," {\n width: 420px;\n height: 100%;\n border-radius: 0;\n overflow: hidden auto;\n }\n }\n &[data-type='form'] {\n "," {\n width: 496px;\n height: 548px;\n max-height: 100%;\n overflow-y: auto;\n "," {\n width: 340px;\n }\n }\n }\n &[data-type='video'] {\n "," {\n height: 100%;\n max-height: 539px;\n "," {\n height: 192px;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n max-height: 192px;\n }\n }\n }\n &[data-type='confirm'] {\n "," {\n width: 100%;\n max-width: 407px;\n "," {\n width: calc(100% - 32px);\n max-width: calc(100% - 32px);\n }\n }\n }\n"],["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 201;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n visibility: hidden;\n background-color: rgba(38, 38, 38, 0.3);\n\n .hhg-modal__close {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n &[data-type='video'] {\n z-index: 1001;\n }\n &[data-open='true'] {\n visibility: visible;\n }\n\n &.slideTop {\n "," {\n transform: translate(0, -100vh);\n transition: all 0.5s ease;\n }\n\n &[data-open='true'] {\n "," {\n transform: translate(0);\n }\n }\n }\n\n &.scaleUp {\n "," {\n transform: scale(0.9);\n }\n\n &[data-open='true'] {\n "," {\n transition: all 0.3s ease-out;\n transform: scale(1);\n }\n }\n }\n\n &[data-type='tail'] {\n justify-content: flex-end;\n "," {\n width: 420px;\n height: 100%;\n border-radius: 0;\n overflow: hidden auto;\n }\n }\n &[data-type='form'] {\n "," {\n width: 496px;\n height: 548px;\n max-height: 100%;\n overflow-y: auto;\n "," {\n width: 340px;\n }\n }\n }\n &[data-type='video'] {\n "," {\n height: 100%;\n max-height: 539px;\n "," {\n height: 192px;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n max-height: 192px;\n }\n }\n }\n &[data-type='confirm'] {\n "," {\n width: 100%;\n max-width: 407px;\n "," {\n width: calc(100% - 32px);\n max-width: calc(100% - 32px);\n }\n }\n }\n"])),d,d,d,d,d,d,t.mbDown,d,t.mbDown,d,t.mbDown),h=e.div(a\|\|(a=n(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n align-items: center;\n\n &[data-open='false'] {\n display: none;\n }\n &[data-type='video'] {\n background-color: ",";\n }\n"],["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n align-items: center;\n\n &[data-open='false'] {\n display: none;\n }\n &[data-type='video'] {\n background-color: ",";\n }\n"])),(function(n){return n.theme.colors.secondaryDark}));export{d as StyledModal,h as StyledModalMask,r as StyledModalWrapper};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/modal/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport { MediaQueries } from 'misc/utils'\nimport styled from 'styled-components'\n\nexport const StyledModal = styled.div`\n position: relative;\n z-index: 200;\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 6px;\n box-shadow: 0px 4px 8px ${(props: ThemeProps) => props.theme.colors.gray200};\n\n .hhg-modal__content {\n position: relative;\n z-index: 111;\n height: 100%;\n padding: 16px;\n }\n .hhg-modal__video {\n position: relative;\n z-index: 111;\n height: 100%;\n background-color: none;\n box-shadow: none;\n }\n`\nexport const StyledModalWrapper = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n z-index: 201;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n visibility: hidden;\n background-color: rgba(38, 38, 38, 0.3);\n\n .hhg-modal__close {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n &[data-type='video'] {\n z-index: 1001;\n }\n &[data-open='true'] {\n visibility: visible;\n }\n\n &.slideTop {\n ${StyledModal} {\n transform: translate(0, -100vh);\n transition: all 0.5s ease;\n }\n\n &[data-open='true'] {\n ${StyledModal} {\n transform: translate(0);\n }\n }\n }\n\n &.scaleUp {\n ${StyledModal} {\n transform: scale(0.9);\n }\n\n &[data-open='true'] {\n ${StyledModal} {\n transition: all 0.3s ease-out;\n transform: scale(1);\n }\n }\n }\n\n &[data-type='tail'] {\n justify-content: flex-end;\n ${StyledModal} {\n width: 420px;\n height: 100%;\n border-radius: 0;\n overflow: hidden auto;\n }\n }\n &[data-type='form'] {\n ${StyledModal} {\n width: 496px;\n height: 548px;\n max-height: 100%;\n overflow-y: auto;\n ${MediaQueries.mbDown} {\n width: 340px;\n }\n }\n }\n &[data-type='video'] {\n ${StyledModal} {\n height: 100%;\n max-height: 539px;\n ${MediaQueries.mbDown} {\n height: 192px;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n max-height: 192px;\n }\n }\n }\n &[data-type='confirm'] {\n ${StyledModal} {\n width: 100%;\n max-width: 407px;\n ${MediaQueries.mbDown} {\n width: calc(100% - 32px);\n max-width: calc(100% - 32px);\n }\n }\n }\n`\n\nexport const StyledModalMask = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n align-items: center;\n\n &[data-open='false'] {\n display: none;\n }\n &[data-type='video'] {\n background-color: ${(props: ThemeProps) =>\n props.theme.colors.secondaryDark};\n }\n`\n"],"names":["StyledModal","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","white","gray200","StyledModalWrapper","templateObject_2","MediaQueries","mbDown","StyledModalMask","templateObject_3","secondaryDark"],"mappings":"uKAIa,UAAAA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,iEAAA,uDAAA,yQAAA,CAAA,iEAGgC,uDAEQ,4QAFvD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAEpC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAgBzDC,EAAqBT,EAAOC,IAAGS,IAAAA,EAAAP,EAAA,CAAA,4mBAAA,2HAAA,mFAAA,+EAAA,iKAAA,iJAAA,0GAAA,iFAAA,4DAAA,0LAAA,0DAAA,uGAAA,CAAA,4mBAmC3B,2HAME,mFAOF,+EAKE,iKASF,iJAQA,0GAKU,iFAMV,4DAGU,0LAUV,0DAGU,yGA9DrBJ,EAMEA,EAOFA,EAKEA,EASFA,EAQAA,EAKEY,EAAaC,OAMfb,EAGEY,EAAaC,OAUfb,EAGEY,EAAaC,QAQRC,EAAkBb,EAAOC,IAAGa,IAAAA,EAAAX,EAAA,CAAA,gNAAA,YAAA,CAAA,gNAaH,eADd,SAACC,GACnB,OAAAA,EAAMC,MAAMC,OAAOS"}

package/build/esm/components/molecules/popup/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e from"react";import{StyledPopup as t,StyledPopupWrapper as a}from"./index.styled.js";var n=function(n){var o=n.type,c=void 0===o?"lead":o,l=n.closeIcon,i=n.isOpen,r=void 0===i\|\|i,m=n.onClose,d=n.children,s=n.className,p=void 0===s?"":s,v=n.enableAnimation,u=void 0===v\|\|v;return e.createElement(e.Fragment,null,e.createElement(t,{"data-open":r,"data-type":c,"data-animation":u},e.createElement("div",{className:"".concat(p\|\|""," popup-content")},!!l&&e.createElement("div",{className:"close-button",onClick:m},l),d)),e.createElement(a,{"data-open":r,onClick:m}))};export{n as Popup};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/popup/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { StyledPopup, StyledPopupWrapper } from './index.styled'\n\nexport type Props = {\n type: 'lead' | 'form' | 'confirm' | 'profile'\n closeIcon?: JSX.Element\n isOpen: boolean\n onClose: () => void\n children?: any\n className?: string\n enableAnimation?: boolean\n}\n\nconst Popup = ({\n type = 'lead',\n closeIcon,\n isOpen = true,\n onClose,\n children,\n className = '',\n enableAnimation = true,\n}: Props) => {\n return (\n <>\n <StyledPopup\n data-open={isOpen}\n data-type={type}\n data-animation={enableAnimation}\n >\n <div className={`${className || ''} popup-content`}>\n {!!closeIcon && (\n <div className=\"close-button\" onClick={onClose}>\n {closeIcon}\n </div>\n )}\n {children}\n </div>\n </StyledPopup>\n <StyledPopupWrapper data-open={isOpen} onClick={onClose} />\n </>\n )\n}\n\nexport { Popup }\n"],"names":["Popup","_a","_b","type","closeIcon","_c","isOpen","onClose","children","_d","className","_e","enableAnimation","React","createElement","Fragment","StyledPopup","concat","onClick","StyledPopupWrapper"],"mappings":"6FAcM,IAAAA,EAAQ,SAACC,GACb,IAAAC,EAAAD,EAAAE,KAAAA,OAAO,IAAAD,EAAA,SACPE,EAASH,EAAAG,UACTC,WAAAC,OAAS,IAAAD,KACTE,EAAON,EAAAM,QACPC,EAAQP,EAAAO,SACRC,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAAsBV,EAAAW,gBAAtBA,OAAe,IAAAD,GAAOA,EAEtB,OACEE,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EACY,CAAA,YAAAV,EACA,YAAAH,mBACKS,GAEhBC,EAAAC,cAAA,MAAA,CAAKJ,UAAW,GAAAO,OAAGP,GAAa,GAAkB,qBAC7CN,GACDS,uBAAKH,UAAU,eAAeQ,QAASX,GACpCH,GAGJI,IAGLK,EAACC,cAAAK,EAA8B,CAAA,YAAAb,EAAQY,QAASX"}

package/build/esm/components/molecules/popup/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 o,e,p=i.div(o\|\|(o=n(["\n position: fixed;\n left: 50%;\n\n padding: 0 16px 32px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 4px 8px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n visibility: hidden;\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 &[data-type='lead'] {\n width: 332px;\n height: 460px;\n\n div {\n top: -15px;\n right: -15px;\n }\n }\n\n &[data-type='form'] {\n width: 496px;\n height: 548px;\n "," {\n width: 340px;\n }\n }\n\n &[data-type='confirm'] {\n "," {\n width: calc(100% - 32px);\n }\n "," {\n width: 100%;\n max-width: 407px;\n }\n }\n\n .popup-content {\n position: relative;\n z-index: 111;\n height: 100%;\n padding: 16px;\n }\n\n .close-button {\n position: absolute;\n top: 16px;\n right: 0;\n cursor: pointer;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n"],["\n position: fixed;\n left: 50%;\n\n padding: 0 16px 32px;\n background-color: ",";\n border-radius: 6px;\n box-shadow: 0px 4px 8px ",";\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n visibility: hidden;\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 &[data-type='lead'] {\n width: 332px;\n height: 460px;\n\n div {\n top: -15px;\n right: -15px;\n }\n }\n\n &[data-type='form'] {\n width: 496px;\n height: 548px;\n "," {\n width: 340px;\n }\n }\n\n &[data-type='confirm'] {\n "," {\n width: calc(100% - 32px);\n }\n "," {\n width: 100%;\n max-width: 407px;\n }\n }\n\n .popup-content {\n position: relative;\n z-index: 111;\n height: 100%;\n padding: 16px;\n }\n\n .close-button {\n position: absolute;\n top: 16px;\n right: 0;\n cursor: pointer;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray200}),t.mbDown,t.mbDown,t.mbUp),d=i.div(e\|\|(e=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"])));export{p as StyledPopup,d as StyledPopupWrapper};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/popup/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\n padding: 0 16px 32px;\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 6px;\n box-shadow: 0px 4px 8px ${(props: ThemeProps) => props.theme.colors.gray200};\n transform: translate(-50%, -50%);\n transition: all 0.5s ease-in-out;\n visibility: hidden;\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 &[data-type='lead'] {\n width: 332px;\n height: 460px;\n\n div {\n top: -15px;\n right: -15px;\n }\n }\n\n &[data-type='form'] {\n width: 496px;\n height: 548px;\n ${MediaQueries.mbDown} {\n width: 340px;\n }\n }\n\n &[data-type='confirm'] {\n ${MediaQueries.mbDown} {\n width: calc(100% - 32px);\n }\n ${MediaQueries.mbUp} {\n width: 100%;\n max-width: 407px;\n }\n }\n\n .popup-content {\n position: relative;\n z-index: 111;\n height: 100%;\n padding: 16px;\n }\n\n .close-button {\n position: absolute;\n top: 16px;\n right: 0;\n cursor: pointer;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\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"],"names":["StyledPopup","styled","div","templateObject_1","__makeTemplateObject","props","theme","colors","white","gray200","MediaQueries","mbDown","mbUp","StyledPopupWrapper","templateObject_2"],"mappings":"uKAIO,QAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,sFAAA,uDAAA,8cAAA,0EAAA,mDAAA,+WAAA,CAAA,sFAKgC,uDAEQ,8cA6BpD,0EAMA,mDAGF,kXAxCD,SAACC,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAEpC,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,UA6BhEC,EAAaC,OAMbD,EAAaC,OAGbD,EAAaE,MA2BNC,EAAqBZ,EAAOC,IAAGY,IAAAA,EAAAV,EAAA,CAAA,sNAAA,CAAA"}

package/build/esm/components/molecules/progressBar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as e,__assign as t}from"../../../node_modules/tslib/tslib.es6.js";import n,{useState as r,useCallback as a,useEffect as l}from"react";import{throttle as c}from"lodash";import{useId as o}from"react-id-generator";import{StyledSlider as i,StyledBreadcrumbContainer as s,StyledBreadcrumbWrapper as m,StyledTrackContainer as u,StyledTrack as d,StyledStep as f,StyledStepLabel as p,StyledDetailStep as g,StyledDetailStepIndicatorExternal as h,StyledDetailStepIndicator as v,StyledDetailStepLabel as E,StyledDetailStepDescription as k}from"./index.styled.js";var y=function(y){var b=y.type,C=y.numberOfStep,S=y.activeStep,w=y.labelPrefix,x=y.detailSteps,L=y.className,N=y.onChange,j=r(0),A=j[0],P=j[1],W=function(r){var a=r.trackClassName,l=e(r,["trackClassName"]);return n.createElement(u,t({},l,{className:a}),n.createElement(d,null))},q=n.createElement(i,{className:L+" progress-bar"},n.createElement(W,null),n.createElement((function(e){var t=e.trackLength,r=e.activeStep,a=e.labelPrefix,l=void 0===a?"Step":a,c=e.onChange;return n.createElement(n.Fragment,null,Array.from({length:C},(function(e,t){return t})).map((function(e,a){return n.createElement(f,{"data-is-active":a===r,"data-label":a,style:{left:at/(C-1)},onClick:function(){c&&c(a)},key:a},a+1,n.createElement(p,{"data-step-passed":a<=r},l+" "+(a+1)))})))}),{trackLength:A,activeStep:S,labelPrefix:w,onChange:N})),z=n.createElement("svg",{"data-name":"Layer 1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 5.5 9.5"},n.createElement("title",null,"chevron-right"),n.createElement("path",{d:"M.75 8.75l4-4-4-4",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5})),F=n.createElement(s,null,x&&Array.from({length:x.length},(function(e,t){return t})).map((function(e,t){var r;return n.createElement(m,{key:t,"data-selected":t===S,onClick:function(){N&&N(t)}},null===(r=x[t])\|\|void 0===r?void 0:r.text," ",t<x.length-1&&z)}))),B=n.createElement(i,{className:L+" progress-bar"},n.createElement((function(e){var t=e.detailSteps,r=e.activeStep,a=e.onChange,l=o(t.length);return n.createElement(n.Fragment,null,Array.from({length:t.length},(function(e,t){return t})).map((function(e,c){return n.createElement(g,{key:l[c],style:{left:100/t.lengthc+"%",width:100/t.length+"%"},onClick:function(){a&&a(c)}},t[c].icon?n.createElement(h,{onClick:function(){a&&a(c)}},t[c].icon):n.createElement(v,{"data-is-active":c===r,"data-label":e,onClick:function(){a&&a(c)},key:c},c+1),n.createElement(E,{"data-step-passed":c<r+1},t[c].text,n.createElement(k,null,t[c].description)),c<t.length-1&&n.createElement(W,{"data-step-passed":c<r,trackClassName:"progress-track","data-track-type":"detail"}))})))}),{activeStep:S,detailSteps:x,onChange:N})),M=a(c((function(){var e=document.querySelector(".progress-bar");e&&P(e.offsetWidth)}),1e3),[]);return l((function(){var e=document.querySelector(".progress-bar");return P(null==e?void 0:e.offsetWidth),window.addEventListener("resize",M),function(){window.removeEventListener("resize",M)}}),[]),"step-track"===b&&q\|\|"breadcrumb"===b&&F\|\|"detail-track"===b&&B};export{y as ProgressBar};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/progressBar/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react'\n\nimport { throttle } from 'lodash'\nimport { useId } from 'react-id-generator'\n\nimport {\n StyledTrackContainer,\n StyledStep,\n StyledSlider,\n StyledTrack,\n StyledStepLabel,\n StyledBreadcrumbContainer,\n StyledBreadcrumbWrapper,\n StyledDetailStep,\n StyledDetailStepLabel,\n StyledDetailStepIndicator,\n StyledDetailStepIndicatorExternal,\n StyledDetailStepDescription,\n} from './index.styled'\n\nexport type Props = {\n type: 'breadcrumb' | 'step-track' | 'detail-track'\n numberOfStep: number\n activeStep: number\n labelPrefix: string\n detailSteps?: { text: string; icon: JSX.Element; description: string }[]\n onChange?: (s: number) => void\n className?: string\n isMobile?: boolean\n}\n\nconst ProgressBar = ({\n type,\n numberOfStep,\n activeStep,\n labelPrefix,\n detailSteps,\n className,\n onChange,\n}: Props) => {\n const [trackLength, setTrackLength] = useState(0)\n\n const Track = ({ trackClassName, ...props }: { trackClassName?: string }) => {\n return (\n <StyledTrackContainer {...props} className={trackClassName}>\n <StyledTrack></StyledTrack>\n </StyledTrackContainer>\n )\n }\n\n // step track\n\n const Steps = ({\n trackLength,\n activeStep,\n labelPrefix = 'Step',\n onChange,\n }: {\n trackLength: number\n activeStep: number\n labelPrefix?: string\n onChange: (s: number) => void\n }) => {\n return (\n <>\n {Array.from({ length: numberOfStep }, (v, i) => i).map((_, step) => (\n <StyledStep\n data-is-active={step === activeStep}\n data-label={step}\n style={{ left: (step * trackLength) / (numberOfStep - 1) }}\n onClick={() => {\n onChange && onChange(step)\n }}\n key={step}\n >\n {step + 1}\n <StyledStepLabel data-step-passed={step <= activeStep}>\n {labelPrefix + ' ' + (step + 1)}\n </StyledStepLabel>\n </StyledStep>\n ))}\n </>\n )\n }\n\n const stepTrack = (\n <StyledSlider className={className + ' progress-bar'}>\n <Track />\n <Steps\n trackLength={trackLength}\n activeStep={activeStep}\n labelPrefix={labelPrefix}\n onChange={onChange}\n />\n </StyledSlider>\n )\n\n // breadcrumb\n\n const breadcrumbIcon = (\n <svg\n data-name=\"Layer 1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 5.5 9.5\"\n >\n <title>{'chevron-right'}</title>\n <path\n d=\"M.75 8.75l4-4-4-4\"\n fill=\"none\"\n // stroke=\"#000\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n />\n </svg>\n )\n\n const breadcrumb = (\n <StyledBreadcrumbContainer>\n {detailSteps &&\n Array.from({ length: detailSteps.length }, (v, i) => i).map(\n (_, step_index) => (\n <StyledBreadcrumbWrapper\n key={step_index}\n data-selected={step_index === activeStep}\n onClick={() => {\n onChange && onChange(step_index)\n }}\n >\n {detailSteps[step_index]?.text}{' '}\n {step_index < detailSteps.length - 1 && breadcrumbIcon}\n </StyledBreadcrumbWrapper>\n ),\n )}\n </StyledBreadcrumbContainer>\n )\n\n // detail track\n\n const DetailStepsGroup = ({\n detailSteps,\n activeStep,\n onChange,\n }: {\n detailSteps: { text: string; icon: JSX.Element; description: string }[]\n activeStep: number\n onChange: (s: number) => void\n }) => {\n const idList = useId(detailSteps.length)\n return (\n <>\n {Array.from({ length: detailSteps.length }, (v, i) => i).map(\n (step, step_index) => (\n <StyledDetailStep\n key={idList[step_index]}\n style={{\n left: (100 / detailSteps.length) * step_index + '%',\n width: 100 / detailSteps.length + '%',\n }}\n onClick={() => {\n onChange && onChange(step_index)\n }}\n >\n {detailSteps[step_index].icon ? (\n <StyledDetailStepIndicatorExternal\n onClick={() => {\n onChange && onChange(step_index)\n }}\n >\n {detailSteps[step_index].icon}\n </StyledDetailStepIndicatorExternal>\n ) : (\n <StyledDetailStepIndicator\n data-is-active={step_index === activeStep}\n data-label={step}\n onClick={() => {\n onChange && onChange(step_index)\n }}\n key={step_index}\n >\n {step_index + 1}\n </StyledDetailStepIndicator>\n )}\n <StyledDetailStepLabel\n data-step-passed={step_index < activeStep + 1}\n >\n {detailSteps[step_index].text}\n <StyledDetailStepDescription>\n {detailSteps[step_index].description}\n </StyledDetailStepDescription>\n </StyledDetailStepLabel>\n {step_index < detailSteps.length - 1 && (\n <Track\n data-step-passed={step_index < activeStep}\n trackClassName={'progress-track'}\n data-track-type=\"detail\"\n />\n )}\n </StyledDetailStep>\n ),\n )}\n </>\n )\n }\n\n const detailTrack = (\n <StyledSlider className={className + ' progress-bar'}>\n <DetailStepsGroup\n activeStep={activeStep}\n detailSteps={detailSteps}\n onChange={onChange}\n />\n </StyledSlider>\n )\n\n const resizeTrack = useCallback(\n throttle(() => {\n const progressTrack = document.querySelector(\n '.progress-bar',\n ) as HTMLElement\n\n progressTrack && setTrackLength(progressTrack.offsetWidth)\n }, 1000),\n [],\n )\n\n useEffect(() => {\n const track = document.querySelector('.progress-bar') as HTMLElement\n setTrackLength(track?.offsetWidth)\n\n window.addEventListener('resize', resizeTrack)\n\n return () => {\n window.removeEventListener('resize', resizeTrack)\n }\n }, [])\n\n return (\n (type === 'step-track' && stepTrack) ||\n (type === 'breadcrumb' && breadcrumb) ||\n (type === 'detail-track' && detailTrack)\n )\n}\n\nexport { ProgressBar }\n"],"names":["ProgressBar","_a","type","numberOfStep","activeStep","labelPrefix","detailSteps","className","onChange","_b","useState","trackLength","setTrackLength","Track","trackClassName","props","__rest","React","StyledTrackContainer","__assign","createElement","StyledTrack","stepTrack","StyledSlider","Fragment","Array","from","length","v","i","map","_","step","StyledStep","style","left","onClick","key","StyledStepLabel","breadcrumbIcon","xmlns","viewBox","d","fill","strokeLinecap","strokeLinejoin","strokeWidth","breadcrumb","StyledBreadcrumbContainer","step_index","StyledBreadcrumbWrapper","text","detailTrack","idList","useId","StyledDetailStep","width","icon","StyledDetailStepIndicatorExternal","StyledDetailStepIndicator","StyledDetailStepLabel","StyledDetailStepDescription","description","resizeTrack","useCallback","throttle","progressTrack","document","querySelector","offsetWidth","useEffect","track","window","addEventListener","removeEventListener"],"mappings":"sjBA+BM,IAAAA,EAAc,SAACC,GACnB,IAAAC,SACAC,iBACAC,eACAC,EAAWJ,EAAAI,YACXC,EAAWL,EAAAK,YACXC,EAASN,EAAAM,UACTC,EAAQP,EAAAO,SAEFC,EAAgCC,EAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,EAAQ,SAACZ,GAAE,IAAAa,EAAcb,EAAAa,eAAKC,EAAKC,EAAAf,EAA1B,oBACb,OACEgB,gBAACC,EAAoBC,EAAA,GAAKJ,EAAO,CAAAR,UAAWO,IAC1CG,EAAAG,cAACC,EAAW,QAwCZC,EACJL,EAACG,cAAAG,GAAahB,UAAWA,EAAY,iBACnCU,EAAAG,cAACP,EAAQ,MACTI,EAACG,eApCS,SAACnB,GACb,IAAAU,EAAWV,EAAAU,YACXP,EAAUH,EAAAG,WACVK,EAAAR,EAAAI,YAAAA,OAAc,IAAAI,EAAA,OAAMA,EACpBD,EAAQP,EAAAO,SAOR,OACES,EAAAG,cAAAH,EAAAO,SAAA,KACGC,MAAMC,KAAK,CAAEC,OAAQxB,IAAgB,SAACyB,EAAGC,GAAM,OAAAA,KAAGC,KAAI,SAACC,EAAGC,GAAS,OAClEf,EAACG,cAAAa,EACiB,CAAA,iBAAAD,IAAS5B,EACb,aAAA4B,EACZE,MAAO,CAAEC,KAAOH,EAAOrB,GAAgBR,EAAe,IACtDiC,QAAS,WACP5B,GAAYA,EAASwB,IAEvBK,IAAKL,GAEJA,EAAO,EACRf,EAACG,cAAAkB,sBAAkCN,GAAQ5B,GACxCC,EAAc,KAAO2B,EAAO,YAYnCrB,YAAaA,EACbP,WAAYA,EACZC,YAAaA,EACbG,SAAUA,KAOV+B,EACJtB,EAAAG,cAAA,MAAA,CAAA,YACY,UACVoB,MAAM,6BACNC,QAAQ,eAERxB,EAAAG,cAAA,QAAA,KAAQ,iBACRH,EAAAG,cAAA,OAAA,CACEsB,EAAE,oBACFC,KAAK,OAELC,cAAc,QACdC,eAAe,QACfC,YAAa,OAKbC,EACJ9B,EAACG,cAAA4B,OACE1C,GACCmB,MAAMC,KAAK,CAAEC,OAAQrB,EAAYqB,SAAU,SAACC,EAAGC,GAAM,OAAAA,KAAGC,KACtD,SAACC,EAAGkB,SAAe,OACjBhC,EAAAG,cAAC8B,EAAuB,CACtBb,IAAKY,EAAU,gBACAA,IAAe7C,EAC9BgC,QAAS,WACP5B,GAAYA,EAASyC,KAGC,QAAvBhD,EAAAK,EAAY2C,UAAW,IAAAhD,OAAA,IAAEkD,KAAM,IAC/BF,EAAa3C,EAAYqB,OAAS,GAAKY,OA2E9Ca,EACJnC,EAACG,cAAAG,GAAahB,UAAWA,EAAY,iBACnCU,EAAAG,eApEqB,SAACnB,GACxB,IAAAK,gBACAF,EAAUH,EAAAG,WACVI,EAAQP,EAAAO,SAMF6C,EAASC,EAAMhD,EAAYqB,QACjC,OACEV,gCACGQ,MAAMC,KAAK,CAAEC,OAAQrB,EAAYqB,SAAU,SAACC,EAAGC,GAAM,OAAAA,KAAGC,KACvD,SAACE,EAAMiB,GAAe,OACpBhC,gBAACsC,EAAgB,CACflB,IAAKgB,EAAOJ,GACZf,MAAO,CACLC,KAAO,IAAM7B,EAAYqB,OAAUsB,EAAa,IAChDO,MAAO,IAAMlD,EAAYqB,OAAS,KAEpCS,QAAS,WACP5B,GAAYA,EAASyC,KAGtB3C,EAAY2C,GAAYQ,KACvBxC,EAAAG,cAACsC,EAAiC,CAChCtB,QAAS,WACP5B,GAAYA,EAASyC,KAGtB3C,EAAY2C,GAAYQ,MAG3BxC,EAAAG,cAACuC,EAAyB,CAAA,iBACRV,IAAe7C,EACnB,aAAA4B,EACZI,QAAS,WACP5B,GAAYA,EAASyC,IAEvBZ,IAAKY,GAEJA,EAAa,GAGlBhC,EAAAG,cAACwC,EACmB,CAAA,mBAAAX,EAAa7C,EAAa,GAE3CE,EAAY2C,GAAYE,KACzBlC,EAACG,cAAAyC,OACEvD,EAAY2C,GAAYa,cAG5Bb,EAAa3C,EAAYqB,OAAS,GACjCV,EAACG,cAAAP,EACmB,CAAA,mBAAAoC,EAAa7C,EAC/BU,eAAgB,iBACA,kBAAA,kBAa1B,CAAAV,WAAYA,EACZE,YAAaA,EACbE,SAAUA,KAKVuD,EAAcC,EAClBC,GAAS,WACP,IAAMC,EAAgBC,SAASC,cAC7B,iBAGFF,GAAiBtD,EAAesD,EAAcG,eAC7C,KACH,IAcF,OAXAC,GAAU,WACR,IAAMC,EAAQJ,SAASC,cAAc,iBAKrC,OAJAxD,EAAe2D,eAAAA,EAAOF,aAEtBG,OAAOC,iBAAiB,SAAUV,GAE3B,WACLS,OAAOE,oBAAoB,SAAUX,MAEtC,IAGS,eAAT7D,GAAyBoB,GAChB,eAATpB,GAAyB6C,GAChB,iBAAT7C,GAA2BkD"}

package/build/esm/components/molecules/progressBar/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 e,r,o,i,s,a,l,c,d,p,u,h,g=t.div(e\|\|(e=n(["\n position: relative;\n width: 100%;\n\n & div[role='slider'] {\n -webkit-text-size-adjust: none;\n -webkit-user-select: none;\n &:focus {\n outline: none;\n }\n }\n"],["\n position: relative;\n width: 100%;\n\n & div[role='slider'] {\n -webkit-text-size-adjust: none;\n -webkit-user-select: none;\n &:focus {\n outline: none;\n }\n }\n"]))),f=t.div(r\|\|(r=n(["\n position: absolute;\n top: 19px;\n width: 24px;\n height: 24px;\n color: ",";\n border: 2px solid ",";\n border-radius: 50%;\n transform: translateY(-50%) translateX(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n\n &[data-is-active='true'] {\n background-color: ",";\n color: ",";\n border: none;\n }\n"],["\n position: absolute;\n top: 19px;\n width: 24px;\n height: 24px;\n color: ",";\n border: 2px solid ",";\n border-radius: 50%;\n transform: translateY(-50%) translateX(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n\n &[data-is-active='true'] {\n background-color: ",";\n color: ",";\n border: none;\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray300}),(function(n){return n.theme.colors.gray300}),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.white})),x=t.div(o\|\|(o=n(["\n display: flex;\n width: 100%;\n height: 36px;\n\n &[data-track-type='detail'] {\n margin-top: 0;\n }\n\n &[data-track-type='detail'][data-step-passed='true'] > div {\n border: 1px solid ",";\n height: 0px;\n }\n\n &[data-track-type='detail'] > div {\n border: 1px solid ",";\n height: 0px;\n }\n"],["\n display: flex;\n width: 100%;\n height: 36px;\n\n &[data-track-type='detail'] {\n margin-top: 0;\n }\n\n &[data-track-type='detail'][data-step-passed='true'] > div {\n border: 1px solid ",";\n height: 0px;\n }\n\n &[data-track-type='detail'] > div {\n border: 1px solid ",";\n height: 0px;\n }\n"])),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.gray200})),m=t.div(i\|\|(i=n(["\n width: 100%;\n height: 5px;\n align-self: center;\n border-radius: 4px;\n background-color: ",";\n"],["\n width: 100%;\n height: 5px;\n align-self: center;\n border-radius: 4px;\n background-color: ",";\n"])),(function(n){return n.theme.colors.gray200})),b=t.div(s\|\|(s=n(["\n position: absolute;\n top: 32px;\n min-width: 100px;\n text-align: center;\n color: ",";\n font-size: ",";\n font-weight: ",";\n\n &[data-step-passed='true'] {\n color: ",";\n }\n"],["\n position: absolute;\n top: 32px;\n min-width: 100px;\n text-align: center;\n color: ",";\n font-size: ",";\n font-weight: ",";\n\n &[data-step-passed='true'] {\n color: ",";\n }\n"])),(function(n){return n.theme.colors.gray500}),(function(n){return n.theme.sizes.fsCaption2}),(function(n){return n.theme.sizes.fwBold}),(function(n){return n.theme.colors.gray800})),y=t.div(a\|\|(a=n(["\n display: flex;\n align-items: center;\n"],["\n display: flex;\n align-items: center;\n"]))),w=t.div(l\|\|(l=n(["\n display: flex;\n align-items: center;\n font-size: ",";\n font-weight: ",";\n color: ",";\n cursor: pointer;\n\n & > svg {\n height: 10px;\n width: 10px;\n margin: 0 14px;\n }\n\n & > svg > path {\n stroke: ",";\n }\n\n &[data-selected='true'] {\n color: ",";\n }\n"],["\n display: flex;\n align-items: center;\n font-size: ",";\n font-weight: ",";\n color: ",";\n cursor: pointer;\n\n & > svg {\n height: 10px;\n width: 10px;\n margin: 0 14px;\n }\n\n & > svg > path {\n stroke: ",";\n }\n\n &[data-selected='true'] {\n color: ",";\n }\n"])),(function(n){return n.theme.sizes.fsCaption2}),(function(n){return n.theme.sizes.fwBold}),(function(n){return n.theme.colors.gray500}),(function(n){return n.theme.colors.gray500}),(function(n){return n.theme.colors.primaryBase})),v=t.div(c\|\|(c=n(["\n position: absolute;\n left: 0;\n top: 19px;\n height: 24px;\n cursor: pointer;\n\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n\n padding: 8px;\n background-color: ",";\n"],["\n position: absolute;\n left: 0;\n top: 19px;\n height: 24px;\n cursor: pointer;\n\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n\n padding: 8px;\n background-color: ",";\n"])),(function(n){return n.theme.colors.white})),k=t.div(d\|\|(d=n(["\n min-width: 24px;\n height: 24px;\n border: 2px solid ",";\n border-radius: 50%;\n margin-right: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n\n &[data-is-active='true'] {\n border: none;\n background-color: ",";\n color: ",";\n }\n"],["\n min-width: 24px;\n height: 24px;\n border: 2px solid ",";\n border-radius: 50%;\n margin-right: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n\n &[data-is-active='true'] {\n border: none;\n background-color: ",";\n color: ",";\n }\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.white}),(function(n){return n.theme.colors.gray300}),(function(n){return n.theme.colors.gray300}),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.white})),z=t.div(p\|\|(p=n(["\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > svg {\n height: 20px;\n width: 20px;\n margin-right: 8px;\n\n & > path {\n stroke: ",";\n }\n }\n"],["\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > svg {\n height: 20px;\n width: 20px;\n margin-right: 8px;\n\n & > path {\n stroke: ",";\n }\n }\n"])),(function(n){return n.theme.colors.gray500})),j=t.div(u\|\|(u=n(["\n color: ",";\n font-size: ",";\n font-weight: ",";\n margin-right: 8px;\n flex: 0 0 auto;\n\n &[data-step-passed='true'] {\n color: ",";\n }\n"],["\n color: ",";\n font-size: ",";\n font-weight: ",";\n margin-right: 8px;\n flex: 0 0 auto;\n\n &[data-step-passed='true'] {\n color: ",";\n }\n"])),(function(n){return n.theme.colors.gray400}),(function(n){return n.theme.sizes.fsCaption2}),(function(n){return n.theme.sizes.fwBold}),(function(n){return n.theme.colors.gray800})),B=t.div(h\|\|(h=n(["\n position: absolute;\n top: 32px;\n font-weight: ",";\n color: ",";\n padding-right: 16px;\n"],["\n position: absolute;\n top: 32px;\n font-weight: ",";\n color: ",";\n padding-right: 16px;\n"])),(function(n){return n.theme.sizes.fwRegular}),(function(n){return n.theme.colors.gray400}));export{y as StyledBreadcrumbContainer,w as StyledBreadcrumbWrapper,v as StyledDetailStep,B as StyledDetailStepDescription,k as StyledDetailStepIndicator,z as StyledDetailStepIndicatorExternal,j as StyledDetailStepLabel,g as StyledSlider,f as StyledStep,b as StyledStepLabel,m as StyledTrack,x as StyledTrackContainer};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/progressBar/index.styled.tsx"],"sourcesContent":["import { ThemeProps } from 'misc/theme'\nimport styled from 'styled-components'\n\nexport const StyledSlider = styled.div`\n position: relative;\n width: 100%;\n\n & div[role='slider'] {\n -webkit-text-size-adjust: none;\n -webkit-user-select: none;\n &:focus {\n outline: none;\n }\n }\n`\n\nexport const StyledStep = styled.div`\n position: absolute;\n top: 19px;\n width: 24px;\n height: 24px;\n color: ${(props: ThemeProps) => props.theme.colors.white};\n border: 2px solid ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 50%;\n transform: translateY(-50%) translateX(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n color: ${(props: ThemeProps) => props.theme.colors.gray300};\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray300};\n\n &[data-is-active='true'] {\n background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};\n color: ${(props: ThemeProps) => props.theme.colors.white};\n border: none;\n }\n`\n\nexport const StyledTrackContainer = styled.div`\n display: flex;\n width: 100%;\n height: 36px;\n\n &[data-track-type='detail'] {\n margin-top: 0;\n }\n\n &[data-track-type='detail'][data-step-passed='true'] > div {\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};\n height: 0px;\n }\n\n &[data-track-type='detail'] > div {\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};\n height: 0px;\n }\n`\n\nexport const StyledTrack = styled.div`\n width: 100%;\n height: 5px;\n align-self: center;\n border-radius: 4px;\n background-color: ${(props: ThemeProps) => props.theme.colors.gray200};\n`\n\nexport const StyledStepLabel = styled.div`\n position: absolute;\n top: 32px;\n min-width: 100px;\n text-align: center;\n color: ${(props: ThemeProps) => props.theme.colors.gray500};\n font-size: ${(props: ThemeProps) => props.theme.sizes.fsCaption2};\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};\n\n &[data-step-passed='true'] {\n color: ${(props: ThemeProps) => props.theme.colors.gray800};\n }\n`\n\nexport const StyledBreadcrumbContainer = styled.div`\n display: flex;\n align-items: center;\n`\n\nexport const StyledBreadcrumbWrapper = styled.div`\n display: flex;\n align-items: center;\n font-size: ${(props: ThemeProps) => props.theme.sizes.fsCaption2};\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};\n color: ${(props: ThemeProps) => props.theme.colors.gray500};\n cursor: pointer;\n\n & > svg {\n height: 10px;\n width: 10px;\n margin: 0 14px;\n }\n\n & > svg > path {\n stroke: ${(props: ThemeProps) => props.theme.colors.gray500};\n }\n\n &[data-selected='true'] {\n color: ${(props: ThemeProps) => props.theme.colors.primaryBase};\n }\n`\n\nexport const StyledDetailStep = styled.div`\n position: absolute;\n left: 0;\n top: 19px;\n height: 24px;\n cursor: pointer;\n\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n\n padding: 8px;\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n`\n\nexport const StyledDetailStepIndicator = styled.div`\n min-width: 24px;\n height: 24px;\n border: 2px solid ${(props: ThemeProps) => props.theme.colors.white};\n border-radius: 50%;\n margin-right: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n background-color: ${(props: ThemeProps) => props.theme.colors.white};\n color: ${(props: ThemeProps) => props.theme.colors.gray300};\n border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray300};\n\n &[data-is-active='true'] {\n border: none;\n background-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};\n color: ${(props: ThemeProps) => props.theme.colors.white};\n }\n`\n\nexport const StyledDetailStepIndicatorExternal = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > svg {\n height: 20px;\n width: 20px;\n margin-right: 8px;\n\n & > path {\n stroke: ${(props: ThemeProps) => props.theme.colors.gray500};\n }\n }\n`\n\nexport const StyledDetailStepLabel = styled.div`\n color: ${(props: ThemeProps) => props.theme.colors.gray400};\n font-size: ${(props: ThemeProps) => props.theme.sizes.fsCaption2};\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwBold};\n margin-right: 8px;\n flex: 0 0 auto;\n\n &[data-step-passed='true'] {\n color: ${(props: ThemeProps) => props.theme.colors.gray800};\n }\n`\nexport const StyledDetailStepDescription = styled.div`\n position: absolute;\n top: 32px;\n font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};\n color: ${(props: ThemeProps) => props.theme.colors.gray400};\n padding-right: 16px;\n`\n"],"names":["StyledSlider","styled","div","templateObject_1","__makeTemplateObject","StyledStep","templateObject_2","props","theme","colors","white","gray300","primaryBase","StyledTrackContainer","templateObject_3","gray200","StyledTrack","templateObject_4","StyledStepLabel","templateObject_5","gray500","sizes","fsCaption2","fwBold","gray800","StyledBreadcrumbContainer","templateObject_6","StyledBreadcrumbWrapper","templateObject_7","StyledDetailStep","templateObject_8","StyledDetailStepIndicator","templateObject_9","StyledDetailStepIndicatorExternal","templateObject_10","StyledDetailStepLabel","templateObject_11","gray400","StyledDetailStepDescription","templateObject_12","fwRegular"],"mappings":"iHAGa,4BAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,+LAAA,CAAA,kMAazBC,EAAaJ,EAAOC,IAAGI,IAAAA,EAAAF,EAAA,CAAA,oFAAA,0BAAA,8LAAA,eAAA,0BAAA,4DAAA,iBAAA,+BAAA,CAAA,oFAKsB,0BACW,8LAQA,eACT,0BACW,4DAGM,iBACjB,kCAfjD,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAC/B,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAQ1C,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SACrD,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAC/B,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAGxC,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,eACrD,SAACL,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAK1CG,EAAuBZ,EAAOC,IAAGY,IAAAA,EAAAV,EAAA,CAAA,4MAAA,4FAAA,8BAAA,CAAA,4MAU+B,4FAKJ,iCALjD,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,eAK1C,SAACL,GAAsB,OAAAA,EAAMC,MAAMC,OAAOM,WAKrDC,EAAcf,EAAOC,IAAGe,IAAAA,EAAAb,EAAA,CAAA,uGAAA,OAAA,CAAA,uGAKkC,UAAjD,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOM,WAGnDG,EAAkBjB,EAAOC,IAAGiB,IAAAA,EAAAf,EAAA,CAAA,+FAAA,mBAAA,qBAAA,mDAAA,YAAA,CAAA,+FAKmB,mBACM,qBACF,mDAGF,eALnD,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOW,WACtC,SAACb,GAAsB,OAAAA,EAAMC,MAAMa,MAAMC,cACvC,SAACf,GAAsB,OAAAA,EAAMC,MAAMa,MAAME,UAG7C,SAAChB,GAAsB,OAAAA,EAAMC,MAAMC,OAAOe,WAI1CC,EAA4BxB,EAAOC,IAAGwB,IAAAA,EAAAtB,EAAA,CAAA,gDAAA,CAAA,mDAKtCuB,EAA0B1B,EAAOC,IAAG0B,IAAAA,EAAAxB,EAAA,CAAA,4DAAA,qBAAA,eAAA,0IAAA,qDAAA,YAAA,CAAA,4DAGiB,qBACF,eACJ,0IAUG,qDAIG,eAhBnD,SAACG,GAAsB,OAAAA,EAAMC,MAAMa,MAAMC,cACvC,SAACf,GAAsB,OAAAA,EAAMC,MAAMa,MAAME,UAC/C,SAAChB,GAAsB,OAAAA,EAAMC,MAAMC,OAAOW,WAUvC,SAACb,GAAsB,OAAAA,EAAMC,MAAMC,OAAOW,WAI3C,SAACb,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,eAI1CiB,EAAmB5B,EAAOC,IAAG4B,IAAAA,EAAA1B,EAAA,CAAA,8MAAA,OAAA,CAAA,8MAY2B,UAA/C,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAGnDqB,EAA4B9B,EAAOC,IAAG8B,IAAAA,EAAA5B,EAAA,CAAA,8DAAA,mKAAA,eAAA,0BAAA,+EAAA,iBAAA,YAAA,CAAA,8DAGkB,mKAQA,eACT,0BACW,+EAIM,iBACjB,eAftC,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAQ1C,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SACrD,SAACH,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAC/B,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOE,WAIxC,SAACJ,GAAsB,OAAAA,EAAMC,MAAMC,OAAOG,eACrD,SAACL,GAAsB,OAAAA,EAAMC,MAAMC,OAAOC,SAI1CuB,EAAoChC,EAAOC,IAAGgC,IAAAA,EAAA9B,EAAA,CAAA,uLAAA,mBAAA,CAAA,uLAWM,sBAAjD,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAOW,WAK7Ce,EAAwBlC,EAAOC,IAAGkC,IAAAA,EAAAhC,EAAA,CAAA,cAAA,mBAAA,qBAAA,4FAAA,YAAA,CAAA,cACa,mBACM,qBACF,4FAKF,eAPnD,SAACG,GAAsB,OAAAA,EAAMC,MAAMC,OAAO4B,WACtC,SAAC9B,GAAsB,OAAAA,EAAMC,MAAMa,MAAMC,cACvC,SAACf,GAAsB,OAAAA,EAAMC,MAAMa,MAAME,UAK7C,SAAChB,GAAsB,OAAAA,EAAMC,MAAMC,OAAOe,WAG1Cc,EAA8BrC,EAAOC,IAAGqC,IAAAA,EAAAnC,EAAA,CAAA,yDAAA,eAAA,+BAAA,CAAA,yDAGc,eACP,kCAD3C,SAACG,GAAsB,OAAAA,EAAMC,MAAMa,MAAMmB,aAC/C,SAACjC,GAAsB,OAAAA,EAAMC,MAAMC,OAAO4B"}

package/build/esm/components/molecules/radioGroup/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import e,{useState as a,Fragment as t}from"react";import{Radio as n}from"../../atoms/radio/index.js";import{StyledRadioGroup as r}from"./index.styled.js";var i=function(i){var o=i.id,d=i.value,c=i.options,l=i.className,v=i.type,s=void 0===v?"circle":v,m=i.isDisabled,u=i.size,p=void 0===u?"small":u,E=i.direction,g=void 0===E?"vertical":E,b=i.group,f=void 0===b?"group1":b,y=i.onChange,A=i.dataEventCategory,C=i.dataEventAction,h=i.dataEventLabel,x=a(d),j=x[0],k=x[1],z=function(e){k(e),y&&y(e)};return e.createElement(r,{className:l,"data-direction":g,"data-group":f},c.map((function(a){var r=j===a.value;return e.createElement(t,{key:"".concat(o,"-").concat(a.value)},e.createElement(n,{type:s,size:p,label:a.label,name:o,checked:r,value:a.value,isDisabled:m,onChange:!m&&z,dataEventCategory:A,dataEventAction:C,dataEventLabel:h}),r&&a.renderActivated&&a.renderActivated())})))};export{i as RadioGroup};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../../src/components/molecules/radioGroup/index.tsx"],"sourcesContent":["import React, { Fragment, useState } from 'react'\n\nimport { Radio } from '../../atoms/radio'\nimport { StyledRadioGroup } from './index.styled'\n\nexport type RadioGroupOption = Array<{\n label: string\n value: string\n renderActivated?: () => JSX.Element\n}>\nexport type Props = {\n type: 'circle' | 'rectangle'\n options: RadioGroupOption\n value?: string\n id: string\n className?: string\n isDisabled?: boolean\n size?: 'small' | 'large'\n direction?: 'vertical' | 'horizontal'\n group?: 'group1' | 'group2'\n onChange?: (v: string) => void\n dataEventCategory?: string\n dataEventAction?: string\n dataEventLabel?: string\n}\n\nconst RadioGroup = ({\n id,\n value,\n options,\n className,\n type = 'circle',\n isDisabled,\n size = 'small',\n direction = 'vertical',\n group = 'group1',\n onChange,\n dataEventCategory,\n dataEventAction,\n dataEventLabel,\n}: Props) => {\n const [check, setCheck] = useState(value)\n\n const handleOnChange = (v: string) => {\n setCheck(v)\n onChange && onChange(v)\n }\n\n return (\n <StyledRadioGroup\n className={className}\n data-direction={direction}\n data-group={group}\n >\n {options.map((option) => {\n const checked = check === option.value\n return (\n <Fragment key={`${id}-${option.value}`}>\n <Radio\n type={type}\n size={size}\n label={option.label}\n name={id}\n checked={checked}\n value={option.value}\n isDisabled={isDisabled}\n onChange={!isDisabled && handleOnChange}\n dataEventCategory={dataEventCategory}\n dataEventAction={dataEventAction}\n dataEventLabel={dataEventLabel}\n />\n {checked && option.renderActivated && option.renderActivated()}\n </Fragment>\n )\n })}\n </StyledRadioGroup>\n )\n}\n\nexport { RadioGroup }\n"],"names":["RadioGroup","_a","id","value","options","className","_b","type","isDisabled","_c","size","_d","direction","_e","group","onChange","dataEventCategory","dataEventAction","dataEventLabel","_f","useState","check","setCheck","handleOnChange","v","React","createElement","StyledRadioGroup","map","option","checked","Fragment","key","concat","Radio","label","name","renderActivated"],"mappings":"0JA0BM,IAAAA,EAAa,SAACC,OAClBC,EAAED,EAAAC,GACFC,EAAKF,EAAAE,MACLC,EAAOH,EAAAG,QACPC,EAASJ,EAAAI,UACTC,EAAAL,EAAAM,KAAAA,OAAI,IAAAD,EAAG,SAAQA,EACfE,eACAC,EAAAR,EAAAS,KAAAA,OAAO,IAAAD,EAAA,UACPE,EAAAV,EAAAW,UAAAA,OAAY,IAAAD,EAAA,aACZE,EAAAZ,EAAAa,MAAAA,OAAQ,IAAAD,EAAA,WACRE,EAAQd,EAAAc,SACRC,EAAiBf,EAAAe,kBACjBC,EAAehB,EAAAgB,gBACfC,EAAcjB,EAAAiB,eAERC,EAAoBC,EAASjB,GAA5BkB,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAEhBI,EAAiB,SAACC,GACtBF,EAASE,GACTT,GAAYA,EAASS,IAGvB,OACEC,EAACC,cAAAC,EACC,CAAAtB,UAAWA,EAAS,iBACJO,EAAS,aACbE,GAEXV,EAAQwB,KAAI,SAACC,GACZ,IAAMC,EAAUT,IAAUQ,EAAO1B,MACjC,OACEsB,EAAAC,cAACK,EAAQ,CAACC,IAAK,GAAGC,OAAA/B,EAAM,KAAA+B,OAAAJ,EAAO1B,QAC7BsB,EAACC,cAAAQ,EACC,CAAA3B,KAAMA,EACNG,KAAMA,EACNyB,MAAON,EAAOM,MACdC,KAAMlC,EACN4B,QAASA,EACT3B,MAAO0B,EAAO1B,MACdK,WAAYA,EACZO,UAAWP,GAAce,EACzBP,kBAAmBA,EACnBC,gBAAiBA,EACjBC,eAAgBA,IAEjBY,GAAWD,EAAOQ,iBAAmBR,EAAOQ"}

package/build/esm/components/molecules/radioGroup/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 r,a=t.div(r\|\|(r=n(["\n display: flex;\n\n &[data-direction='vertical'] {\n flex-direction: column;\n\n div {\n &[data-type='circle'] {\n margin-bottom: 20px;\n }\n\n &[data-type='rectangle'] {\n margin-bottom: 20px;\n }\n }\n }\n\n &[data-direction='horizontal'] {\n flex-wrap: wrap;\n\n &[data-group='group1'] {\n div {\n &[data-type='rectangle'] {\n flex-wrap: wrap;\n\n &:first-child {\n label {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &:last-child {\n label {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n\n &:not(:last-child) {\n label {\n border-right: unset;\n }\n }\n\n label {\n border-radius: unset;\n }\n }\n }\n }\n\n &[data-group='group2'] {\n div {\n &[data-type='rectangle'] {\n flex-wrap: wrap;\n margin-right: 8px;\n margin-bottom: 8px;\n }\n }\n }\n\n div {\n &[data-type='circle'] {\n margin-right: 25px;\n }\n\n &[data-type='rectangle'] {\n margin-bottom: 20px;\n }\n }\n }\n"],["\n display: flex;\n\n &[data-direction='vertical'] {\n flex-direction: column;\n\n div {\n &[data-type='circle'] {\n margin-bottom: 20px;\n }\n\n &[data-type='rectangle'] {\n margin-bottom: 20px;\n }\n }\n }\n\n &[data-direction='horizontal'] {\n flex-wrap: wrap;\n\n &[data-group='group1'] {\n div {\n &[data-type='rectangle'] {\n flex-wrap: wrap;\n\n &:first-child {\n label {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &:last-child {\n label {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n\n &:not(:last-child) {\n label {\n border-right: unset;\n }\n }\n\n label {\n border-radius: unset;\n }\n }\n }\n }\n\n &[data-group='group2'] {\n div {\n &[data-type='rectangle'] {\n flex-wrap: wrap;\n margin-right: 8px;\n margin-bottom: 8px;\n }\n }\n }\n\n div {\n &[data-type='circle'] {\n margin-right: 25px;\n }\n\n &[data-type='rectangle'] {\n margin-bottom: 20px;\n }\n }\n }\n"])));export{a as StyledRadioGroup};
2	+ //# sourceMappingURL=index.styled.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.styled.js","sources":["../../../../../src/components/molecules/radioGroup/index.styled.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const StyledRadioGroup = styled.div`\n display: flex;\n\n &[data-direction='vertical'] {\n flex-direction: column;\n\n div {\n &[data-type='circle'] {\n margin-bottom: 20px;\n }\n\n &[data-type='rectangle'] {\n margin-bottom: 20px;\n }\n }\n }\n\n &[data-direction='horizontal'] {\n flex-wrap: wrap;\n\n &[data-group='group1'] {\n div {\n &[data-type='rectangle'] {\n flex-wrap: wrap;\n\n &:first-child {\n label {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &:last-child {\n label {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n\n &:not(:last-child) {\n label {\n border-right: unset;\n }\n }\n\n label {\n border-radius: unset;\n }\n }\n }\n }\n\n &[data-group='group2'] {\n div {\n &[data-type='rectangle'] {\n flex-wrap: wrap;\n margin-right: 8px;\n margin-bottom: 8px;\n }\n }\n }\n\n div {\n &[data-type='circle'] {\n margin-right: 25px;\n }\n\n &[data-type='rectangle'] {\n margin-bottom: 20px;\n }\n }\n }\n`\n"],"names":["StyledRadioGroup","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"iHAEa,MAAAA,EAAmBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,o0CAAA,CAAA"}