{
"version": 3,
"sources": ["../../../../../../owl-nest/external/owl-kit/src/legacy/FlashMessage.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Icon.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Links.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/index.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/Text.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/Buttons.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/LabelWithIcon.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/SocialButton.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/CallToAction.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/ProgressEgg.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/ProjectCard/DiscreetText.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/ProjectCard/GoalLabel.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/ProjectCard/ProjectCardTitle.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/RoundButton.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/ProjectCard/HorizontalProjectCard.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Titles.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/Avatar.jsx", "../../../../../../owl-nest/external/owl-kit/src/core/ClickOutside.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/ShadowBox.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/DropdownFilter.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/dropdown/Panel.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/LoadMoreButton.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Pastille.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Badge.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/VideoLoader.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/sponsorship/styles.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/sponsorship/Sponsor.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/UserCard.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Modal/index.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/UluleTransitions.jsx", "../../../../../../node_modules/react-transition-group/esm/Transition.js", "../../../../../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js", "../../../../../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js", "../../../../../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js", "../../../../../../node_modules/react-transition-group/esm/config.js", "../../../../../../node_modules/react-transition-group/esm/TransitionGroupContext.js", "../../../../../../node_modules/react-transition-group/esm/utils/reflow.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/Modal/ModalBehaviour.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Modal/styles.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/Overlay.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Carousel/index.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Carousel/CarouselButton.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Tag.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Spinner.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/Tabs.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/form/Input.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/form/styles.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/form/Label.js", "../../../../../../owl-nest/external/owl-kit/src/legacy/form/Radio.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/form/Checkbox.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/dropdown/MultiselectDropdown.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/dropdown/DropdownLabel.jsx", "../../../../../../owl-nest/external/owl-kit/src/legacy/dropdown/ListFilter.jsx"],
"sourcesContent": ["import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as colors from '../constants/colors'\nimport * as fonts from '../constants/fonts'\n\nimport Icon from './Icon'\nimport { PrimaryLink } from './Links'\n\nconst getBackgroundColor = (level) => {\n switch (level) {\n case 'success':\n return colors.PRIMARY_GREEN\n case 'alert':\n case 'error':\n return colors.SECONDARY_RED\n case 'info':\n return colors.PRIMARY_BLACK\n case 'warning':\n return colors.SECONDARY_YELLOW_500\n case 'notification':\n default:\n return colors.PRIMARY_BLUE\n }\n}\n\nconst getLinkColor = (level) => {\n switch (level) {\n case 'success':\n case 'info':\n return colors.PRIMARY_BLUE\n case 'alert':\n case 'notification':\n default:\n return colors.PRIMARY_BLACK\n }\n}\n\nconst FlashMessageWrapper = styled.div`\n position: relative;\n width: 100%;\n padding: 10px 20px;\n background-color: ${(props) => getBackgroundColor(props.level)};\n color: ${colors.PRIMARY_WHITE};\n\n ${PrimaryLink /* sc-sel */} {\n color: ${(props) => getLinkColor(props.level)};\n border-bottom: 2px solid transparent;\n transition: border-bottom 150ms ease-in-out;\n\n &:hover {\n border-bottom: 2px solid;\n }\n }\n`\n\nconst MessageContainer = styled.div`\n max-width: 980px;\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 400;\n font-size: 13px;\n padding: 0;\n margin: 0 auto;\n text-align: center;\n`\n\nconst CloseButton = styled.span`\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translate(0, -50%);\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n`\n\n/** This component has to be used to notify user just after an unexpected result for his action. When user click on close icon, the message should be disapear. If no level or no message is passed by props, the component doesn't render. */\nconst FlashMessage = ({ level, closable, onClickClose, translations, children }) => {\n return (\n \n {children}\n {closable && (\n \n \n \n )}\n \n )\n}\n\nFlashMessage.defaultProps = {\n closable: false,\n level: 'notification',\n}\n\nFlashMessage.propTypes = {\n /** controls the main color of notification */\n level: PropTypes.oneOf(['success', 'alert', 'info', 'notification']),\n /** if true, add a cross icon */\n closable: PropTypes.bool,\n /** useful only if closable is true */\n onClickClose: PropTypes.func,\n translations: PropTypes.shape({\n close: PropTypes.string.isRequired,\n }),\n /** children can have html elements */\n children: PropTypes.node.isRequired,\n}\n\nexport default FlashMessage\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport { PRIMARY_BLUE, PRIMARY_GREEN, PRIMARY_WHITE } from '../constants/colors'\n\nconst InlineSvg = styled.svg`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n`\n\nconst SvgWrapper = styled.div`\n display: inline-block;\n flex: 0 0 ${(props) => (props.size ? `${props.size}px` : '32px')};\n width: ${(props) => (props.size ? `${props.size}px` : '32px')};\n height: ${(props) => (props.size ? `${props.size}px` : '32px')};\n min-width: ${(props) => (props.size ? `${props.size}px` : '32px')};\n min-height: ${(props) => (props.size ? `${props.size}px` : '32px')};\n position: relative;\n color: inherit;\n`\n\nconst Glyph = ({ glyph }) => {\n switch (glyph) {\n case 'owl-egg-100':\n return (\n \n \n \n )\n case 'owl-egg-60':\n return (\n \n \n \n \n )\n case 'owl-egg-42':\n return (\n \n \n \n \n )\n case 'owl-egg-15':\n return (\n \n \n \n \n )\n case 'owl-egg-0':\n return (\n \n \n \n \n )\n case 'at':\n return (\n \n \n \n )\n case 'burger-menu':\n return (\n \n {' '}\n \n )\n case 'close-circle':\n return (\n \n \n \n \n )\n case 'heart':\n return (\n \n \n \n )\n case 'heart-stroke':\n return (\n \n \n \n )\n case 'check-circle':\n return (\n \n \n \n )\n case 'check-smaller-circle':\n return (\n \n \n \n )\n case 'close':\n return (\n \n \n \n )\n case 'plus':\n return (\n \n \n \n )\n case 'star':\n return (\n \n \n \n )\n case 'star-circle':\n return (\n \n \n \n )\n case 'search':\n return (\n \n \n \n )\n case 'caret-down':\n return (\n \n {' '}\n \n )\n case 'caret-down-light':\n return (\n \n {' '}\n \n )\n case 'caret-up-light':\n return (\n \n {' '}\n \n )\n case 'caret-right-light':\n return (\n \n {' '}\n \n )\n case 'caret-left-light':\n return (\n \n {' '}\n \n )\n case 'social-facebook':\n return (\n \n \n \n )\n case 'social-messenger':\n return (\n \n \n \n )\n case 'social-instagram':\n return (\n \n \n \n )\n case 'social-linkedin':\n return (\n \n \n \n )\n case 'social-twitter':\n return (\n \n \n \n )\n case 'kebab-menu':\n return (\n \n \n \n \n \n )\n case 'url':\n return (\n \n {' '}\n \n )\n case 'refresh':\n return (\n \n \n \n )\n case 'edit':\n return (\n \n \n \n )\n case 'success':\n return (\n \n \n \n )\n case 'failed':\n return (\n \n \n \n )\n\n case 'letter':\n return (\n \n \n \n )\n\n case 'bulb':\n return (\n \n {' '}\n \n )\n\n case 'stop':\n return (\n \n \n \n )\n\n case 'info':\n return (\n \n \n \n )\n\n case 'video-play':\n return (\n \n \n \n \n )\n\n case 'rounded-plus':\n return (\n \n \n \n \n )\n\n case 'paperclip':\n return (\n \n \n \n )\n\n case 'cogwheel':\n return (\n \n \n \n )\n\n case 'lock':\n return (\n \n \n \n )\n\n case 'shipping':\n return (\n \n \n \n )\n\n case 'check-circle-line':\n return (\n \n \n \n )\n\n case 'check':\n return (\n \n \n \n )\n\n case 'social':\n return (\n \n \n \n )\n\n case 'unread':\n return (\n \n {' '}\n \n )\n case 'read':\n return (\n \n \n \n )\n case 'arrow-up-right':\n return (\n \n {' '}\n \n )\n\n case 'select-all':\n return (\n \n \n \n )\n\n case 'arrow-right':\n return (\n \n \n \n )\n\n case 'trash':\n return (\n \n \n \n )\n\n case 'calendar':\n return (\n \n \n \n )\n\n case 'minus':\n return (\n \n \n \n )\n\n case 'cursor-map':\n return (\n \n \n \n )\n\n case 'anchor':\n return (\n \n \n \n )\n\n case 'social-youtube':\n return (\n \n \n \n )\n\n case 'currency-euro':\n return (\n \n \n \n \n )\n\n case 'currency-dolls':\n return (\n \n \n \n \n )\n\n case 'currency-pound':\n return (\n \n \n \n \n )\n\n case 'currency-kr':\n return (\n \n \n \n \n )\n\n case 'currency-chf':\n return (\n \n \n \n \n )\n\n case 'tip':\n return (\n \n \n \n \n )\n\n default:\n return null\n }\n}\n\nGlyph.propTypes = {\n glyph: PropTypes.string.isRequired,\n}\n\nclass Icon extends React.Component {\n render() {\n const { size, glyph, title, ...props } = this.props\n\n return (\n \n \n {title && {glyph}}\n \n \n \n )\n }\n}\n\nIcon.defaultProps = {\n size: 32,\n}\n\nIcon.propTypes = {\n /** controls size of component */\n size: PropTypes.number,\n /** name of glyph to use (see Identity > Icons section) */\n glyph: PropTypes.string.isRequired,\n /** title of svg (a11y) */\n title: PropTypes.string,\n className: PropTypes.string,\n}\n\nexport default Icon\n", "import * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as fonts from '../constants/fonts'\nimport * as colors from '../constants/colors'\nimport { hexToRgb } from '../utils/colors'\n\nexport const BasicLink = styled.a`\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n`\n\nexport const PrimaryLink = styled(BasicLink)`\n color: ${(props) => colors.primary(props)};\n text-decoration: none;\n transition: color 200ms ease-in-out;\n\n &:hover {\n color: ${(props) => hexToRgb(colors.primary(props), 0.85)};\n }\n`\n\nPrimaryLink.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const SecondaryLink = styled(BasicLink)`\n color: ${colors.PRIMARY_BLACK};\n text-decoration: none;\n transition: color 200ms ease-in-out;\n\n &:hover {\n color: ${hexToRgb(colors.PRIMARY_BLACK, 0.85)};\n }\n`\n\nSecondaryLink.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const TertiaryLink = styled(BasicLink)`\n color: ${colors.GREY_SHADE_3};\n text-decoration: none;\n transition: text-decoration 200ms ease-in-out;\n\n &:hover {\n text-decoration: underline;\n color: ${hexToRgb(colors.GREY_SHADE_3, 0.85)};\n }\n`\n\nTertiaryLink.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n", "import * as BREAKPOINTS from '../constants/breakpoints'\nimport * as COLORS from '../constants/colors'\nimport * as FONTS from '../constants/fonts'\n\nimport { RegularText, ImportantText, DiscreteText, BoringText } from './Text'\nimport { PrimaryButton, SecondaryButton, TertiaryButton, ButtonWithIcon } from './Buttons'\nimport SocialButton from './SocialButton'\nimport { CallToAction, SecondaryCallToAction } from './CallToAction'\nimport ProgressEgg from './ProgressEgg'\nimport ProjectCard from './ProjectCard'\nimport HorizontalProjectCard from './ProjectCard/HorizontalProjectCard'\nimport PartnerCard from './PartnerCard'\nimport CategoryCard from './CategoryCard'\nimport IllustratedTitle from './IllustratedTitle'\nimport { Title1, Title2, Title3, Title4, Title5, Title6 } from './Titles'\nimport { PrimaryLink, SecondaryLink, TertiaryLink } from './Links'\nimport Icon from './Icon'\nimport Avatar from './Avatar'\nimport { LocaleMoneyDisplayer } from '../core/accounting/Accounting'\nimport Footer from './Footer'\nimport Dropdown from './Dropdown'\nimport FilterButton from './FilterButton'\nimport DropdownFilter from './DropdownFilter'\nimport LoadMoreButton from './LoadMoreButton'\nimport FlashMessage from './FlashMessage'\nimport Pastille from './Pastille'\nimport Badge from './Badge'\nimport VideoLoader from './VideoLoader'\nimport SponsorshipBanner from './sponsorship/Banner'\nimport TinySponsorshipBanner from './sponsorship/TinyBanner'\nimport Sponsor from './sponsorship/Sponsor'\nimport UserCard from './UserCard'\nimport { ClassicModal, NotificationModal, Dialog } from './Modal'\nimport Carousel from './Carousel'\nimport { RewardCard } from './RewardCard/RewardCard'\nimport { Variant } from './RewardCard/Variant'\nimport { Select as SimpleSelect } from './components/form/select/Select'\nimport { Option as SimpleOption } from './components/form/select/Option'\nimport ErrorPage from './ErrorPage'\nimport Spinner from './Spinner'\nimport Tabs from './Tabs'\nimport Input from './form/Input'\nimport PhoneInput from './form/PhoneInput/PhoneInput'\nimport { RadioOption, RadioGroup } from './form/Radio'\nimport Checkbox from './form/Checkbox'\nimport Textarea from './form/Textarea'\nimport Select from './form/Select'\nimport MultiselectDropdown from './dropdown/MultiselectDropdown'\nimport ListFilter from './dropdown/ListFilter'\nimport TextEllipsis from '../core/TextEllipsis'\nimport Tag from './Tag'\nimport ClickOutside from '../core/ClickOutside'\nimport Jewel from './Jewel'\nimport RoundButton from './RoundButton'\nimport { Tooltip } from './Tooltip'\n\nif (typeof window !== 'undefined') {\n window.OWL_KIT_COMPONENTS_VERSION = 'OWL_KIT_VERSION / OWL_KIT_ENV'\n}\n\n// eslint-disable-next-line no-undef\nif (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {\n console.warn('[owl-kit-components] You currently use the non-production bundle of the library.') // eslint-disable-line no-console\n console.info(`owl-kit-components version: ${window.OWL_KIT_COMPONENTS_VERSION}`) // eslint-disable-line no-console\n}\n\nexport {\n // Constants\n BREAKPOINTS,\n COLORS,\n FONTS,\n // Components\n RegularText,\n ImportantText,\n DiscreteText,\n BoringText,\n Avatar,\n PrimaryButton,\n SecondaryButton,\n TertiaryButton,\n LoadMoreButton,\n ButtonWithIcon,\n SocialButton,\n CallToAction,\n SecondaryCallToAction,\n ProgressEgg,\n ProjectCard,\n HorizontalProjectCard,\n PartnerCard,\n CategoryCard,\n Title1,\n Title2,\n Title3,\n Title4,\n Title5,\n Title6,\n IllustratedTitle,\n PrimaryLink,\n SecondaryLink,\n TertiaryLink,\n Icon,\n Pastille,\n LocaleMoneyDisplayer,\n Footer,\n FilterButton,\n Dropdown,\n DropdownFilter,\n FlashMessage,\n Badge,\n SponsorshipBanner,\n TinySponsorshipBanner,\n Sponsor,\n UserCard,\n VideoLoader,\n ClassicModal,\n NotificationModal,\n Dialog,\n Carousel,\n RewardCard,\n Variant,\n ErrorPage,\n Spinner,\n Tabs,\n Input,\n PhoneInput,\n RadioOption,\n RadioGroup,\n Checkbox,\n Textarea,\n Select,\n MultiselectDropdown,\n ListFilter,\n TextEllipsis,\n Tag,\n ClickOutside,\n Jewel,\n RoundButton,\n SimpleSelect,\n SimpleOption,\n Tooltip,\n}\n", "import * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport { BasicLink } from './Links'\n\nimport * as fonts from '../constants/fonts'\nimport * as colors from '../constants/colors'\n\n\nexport const RegularText = styled.span`\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 15px;\n font-weight: 400;\n color: ${colors.PRIMARY_BLACK};\n line-height: 22px;\n\n ${BasicLink /* sc-sel */} {\n font-size: 15px;\n font-weight: 500;\n }\n`\n\nRegularText.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const ImportantText = styled(RegularText)`\n font-weight: 500;\n`\n\nImportantText.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const DiscreteText = styled(RegularText)`\n font-size: 12px;\n font-weight: 500;\n line-height: 18px;\n\n ${BasicLink /* sc-sel */} {\n font-size: 12px;\n }\n`\n\nDiscreteText.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const BoringText = styled(RegularText)`\n color: ${colors.GREY_SHADE_2};\n font-size: 12px;\n font-weight: 300;\n line-height: 18px;\n\n ${BasicLink /* sc-sel */} {\n font-size: 12px;\n }\n`\n\nBoringText.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as fonts from '../constants/fonts'\nimport * as colors from '../constants/colors'\n\nimport Icon from './Icon'\nimport LabelWithIcon from './LabelWithIcon'\n\nconst BasicButton = styled.div`\n box-sizing: border-box;\n width: ${(props) => (props.fullWidth ? '100%' : 'auto')};\n height: 50px;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 13px;\n font-weight: 500;\n padding: 0 16px;\n border-radius: 2px;\n cursor: pointer;\n transition: all 200ms ease-in-out;\n`\n\nexport const StyledPrimaryButton = styled(BasicButton)`\n color: ${colors.PRIMARY_WHITE};\n background-color: ${(props) => colors.primary(props)};\n\n &:hover {\n background-color: ${(props) => colors.primaryHover(props)};\n }\n`\n\n/** This component should be use for calling to an important action into the section. */\nexport const PrimaryButton = (props) => \n\nPrimaryButton.propTypes = {\n /** action to perform on click event */\n onClick: PropTypes.func,\n children: PropTypes.node,\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),\n}\n\nexport const StyledSecondaryButton = styled(BasicButton)`\n color: ${(props) => colors.primary(props)};\n background-color: ${colors.PRIMARY_WHITE};\n border: 2px solid;\n border-color: ${(props) => colors.primary(props)};\n\n &:hover {\n color: ${(props) => colors.primaryHover(props)};\n border-color: ${(props) => colors.primaryHover(props)};\n }\n`\n\n/** This component should be used for calling to a less important action into the section in side of a PrimaryButton for example. */\nexport const SecondaryButton = (props) => \n\nSecondaryButton.propTypes = {\n /** action to perform on click event */\n onClick: PropTypes.func,\n children: PropTypes.node.isRequired,\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),\n}\n\nexport const StyledTertiaryButton = styled(BasicButton)`\n color: ${colors.PRIMARY_WHITE};\n background-color: ${colors.PRIMARY_BLACK};\n\n &:hover {\n background-color: ${colors.PRIMARY_BLACK_HOVER};\n }\n`\n\n/** This component should be used for specific template of page. */\nexport const TertiaryButton = (props) => \n\nTertiaryButton.propTypes = {\n /** action to perform on click event */\n onClick: PropTypes.func,\n children: PropTypes.node.isRequired,\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),\n}\n\nconst BodyButton = styled.div`\n display: inline-block;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 15px;\n font-weight: 300;\n line-height: 1.7;\n color: ${colors.PRIMARY_WHITE};\n padding: 14px 120px;\n border-radius: 2px;\n cursor: pointer;\n text-align: center;\n`\n\nexport const BodyButtonGreen = styled(BodyButton)`\n color: ${colors.PRIMARY_WHITE};\n background-color: ${colors.PRIMARY_GREEN};\n\n &:hover {\n background-color: ${colors.PRIMARY_GREEN_HOVER};\n }\n`\n\nexport const BodyButtonBlue = styled(BodyButton)`\n color: ${colors.PRIMARY_WHITE};\n background-color: ${(props) => colors.primary(props)};\n\n &:hover {\n background-color: ${(props) => colors.primaryHover(props)};\n }\n`\n\nconst BigButtonWrapper = styled.div`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 300;\n line-height: 1.4;\n color: ${colors.PRIMARY_WHITE};\n background-color: ${(props) => colors.primary(props)};\n border-radius: 2px;\n width: 260px;\n height: 90px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &:hover {\n background-color: ${(props) => colors.primaryHover(props)};\n }\n\n & span:first-child {\n font-size: 22px;\n font-weight: 500;\n }\n\n & span:last-child {\n font-size: 13px;\n font-weight: 400;\n }\n`\n\nexport const BigButton = ({ more, children }) => (\n \n {children}\n {more && {more}}\n \n)\n\nBigButton.propTypes = {\n more: PropTypes.any,\n children: PropTypes.any.isRequired,\n}\n\nconst LightIcon = styled(Icon)`\n color: ${colors.GREY_SHADE_4};\n transition: color 100ms ease-in;\n`\n\nconst ButtonWithIconWrapper = styled.span`\n box-sizing: border-box;\n min-width: 160px;\n height: 50px;\n flex: 1 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 17px;\n font-weight: 500;\n cursor: pointer;\n color: ${(props) => colors.primary(props)};\n background-color: ${colors.PRIMARY_WHITE};\n border-radius: 2px;\n border: 2px solid;\n border-color: ${(props) => colors.primary(props)};\n padding: 0 16px;\n transition: all 150ms ease-in-out;\n\n &:hover {\n color: ${colors.PRIMARY_WHITE};\n background-color: ${(props) => colors.primaryHover(props)};\n border-color: transparent;\n\n ${LightIcon /* sc-sel */} {\n color: ${colors.PRIMARY_WHITE};\n }\n }\n`\n\nexport const ButtonWithIcon = ({ glyph, label, onClick, ...props }) => (\n \n } label={label} />\n \n)\n\nButtonWithIcon.propTypes = {\n /** name of the glyph (related to Icon component) */\n glyph: PropTypes.node.isRequired,\n /** text added on side of icon */\n label: PropTypes.node.isRequired,\n /** action to perform on click event */\n onClick: PropTypes.func,\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),\n}\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nconst LabelWithIconContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n white-space: ${props => (props.inline ? 'nowrap' : 'normal')};\n overflow: ${props => (props.inline ? 'hidden' : 'visible')};\n\n > div:first-child {\n margin-right: 10px;\n }\n`\n\nconst LabelWithIcon = ({ icon, label, inline }) => (\n \n {icon}\n {label}\n \n)\n\nLabelWithIcon.propTypes = {\n icon: PropTypes.any.isRequired,\n label: PropTypes.any.isRequired,\n inline: PropTypes.bool,\n}\n\nexport default LabelWithIcon\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as fonts from '../constants/fonts'\nimport * as colors from '../constants/colors'\nimport { hexToRgb } from '../utils/colors'\n\nimport Icon from './Icon'\nimport LabelWithIcon from './LabelWithIcon'\n\nconst LightIcon = styled(Icon)`\n color: ${colors.PRIMARY_WHITE};\n`\n\nconst SocialButtonWrapper = styled.span`\n box-sizing: border-box;\n min-width: 50px;\n height: 50px;\n flex: 1 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 17px;\n font-weight: 500;\n cursor: pointer;\n color: ${colors.PRIMARY_WHITE};\n background-color: ${(props) => props.bgColor};\n border-radius: 2px;\n padding: 0 16px;\n transition: background-color 150ms ease-in-out;\n\n &:hover {\n background-color: ${(props) => hexToRgb(props.bgColor, 0.85)};\n }\n`\n\nconst getProps = (platform) => {\n switch (platform) {\n case 'facebook':\n return {\n color: colors.TERTIARY_FACEBOOK,\n icon: ,\n }\n case 'twitter':\n return {\n color: colors.TERTIARY_X,\n icon: ,\n }\n case 'instagram':\n return {\n color: colors.TERTIARY_INSTAGRAM,\n icon: ,\n }\n case 'messenger':\n return {\n color: colors.TERTIARY_MESSENGER,\n icon: ,\n }\n case 'linkedin':\n return {\n color: colors.TERTIARY_LINKEDIN,\n icon: ,\n }\n default:\n throw new Error('You have to use a supported platform for SocialButton')\n }\n}\n\nconst SocialButton = ({ platform, onClick, label, ...props }) => {\n const { color, icon, label: defaultLabel } = getProps(platform)\n\n return (\n \n {label ? : icon}\n \n )\n}\n\nSocialButton.propTypes = {\n platform: PropTypes.oneOf(['facebook', 'twitter', 'messenger', 'instagram', 'linkedin']).isRequired,\n /**\tif props is passed, it replace default platform label */\n label: PropTypes.string,\n onClick: PropTypes.func,\n}\n\nexport default SocialButton\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as bp from '../constants/breakpoints'\nimport * as colors from '../constants/colors'\nimport * as fonts from '../constants/fonts'\n\nconst BasicCTA = styled.span`\n align-items: center;\n border-radius: 2px;\n box-sizing: border-box;\n cursor: pointer;\n display: ${(props) => (props.fixed ? 'inline-flex' : 'flex')};\n flex: ${(props) => (props.fixed ? 0 : 1)} 0 auto;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 15px;\n font-weight: 700;\n height: 50px;\n justify-content: center;\n min-width: 240px;\n padding: 0 16px;\n text-align: center;\n text-transform: uppercase;\n transition: background-color 150ms ease-in-out, color 100ms ease-in;\n width: 100%;\n\n @media screen and ${bp.TABLET} {\n width: auto;\n }\n`\n\n/**\n * Primary CallToAction\n */\n\nconst PrimaryCTA = styled(BasicCTA)`\n background-color: ${(props) => colors.primary(props)};\n color: ${colors.PRIMARY_WHITE};\n\n &:hover {\n background-color: ${(props) => colors.primaryHover(props)};\n }\n`\n\nexport const CallToAction = (props) => \n\nCallToAction.defaultProps = {\n fixed: false,\n}\n\nCallToAction.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n /** describes whether or not the button should take all available horizontal space */\n fixed: PropTypes.bool,\n children: PropTypes.node.isRequired,\n /** action to perform on click event */\n onClick: PropTypes.func,\n}\n\n/**\n * Secondary CallToAction\n */\n\nconst SecondaryCTA = styled(BasicCTA)`\n color: ${(props) => colors.primary(props)};\n border: 2px solid;\n\n &:hover {\n color: ${(props) => colors.primaryHover(props)};\n }\n`\n\nexport const SecondaryCallToAction = (props) => \n\nSecondaryCallToAction.defaultProps = {\n fixed: false,\n}\n\nSecondaryCallToAction.propTypes = {\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n /** describes whether or not the button should take all available horizontal space */\n fixed: PropTypes.bool,\n children: PropTypes.node.isRequired,\n /** action to perform on click event */\n onClick: PropTypes.func,\n}\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport Icon from './Icon'\n\n/** This is a logical icon component which evolve in function of \\`progress\\` property. */\nconst ProgressEgg = ({ className: cls, progress, size }) => (\n \n {progress >= 100 && }\n {progress >= 60 && progress < 100 && }\n {progress >= 42 && progress < 60 && }\n {progress >= 15 && progress < 42 && }\n {progress < 15 && }\n \n)\n\nProgressEgg.defaultProps = {\n progress: 0,\n size: 16,\n}\n\nProgressEgg.propTypes = {\n className: PropTypes.string,\n /** percentage of progress */\n progress: PropTypes.number,\n /** size in pixel */\n size: PropTypes.number,\n}\n\nexport default ProgressEgg\n", "import styled from 'styled-components'\n\nimport * as colors from '../../constants/colors'\n\nconst DiscreetText = styled.span`\n font-size: 12px;\n font-weight: ${(props) => (props.light ? 300 : 400)};\n color: ${colors.GREY_SHADE_2};\n`\n\nexport default DiscreetText\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as COLORS from '../../constants/colors'\nimport ProgressEgg from '../ProgressEgg'\nimport { LocaleMoneyDisplayer } from '../../core/accounting/Accounting'\n\nconst ProgressEggIcon = styled(ProgressEgg)`\n margin-right: 2px;\n`\n\nconst LabelWrapper = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n white-space: normal;\n overflow: visible;\n`\n\nconst GoalLabel = ({\n type,\n progress,\n raisedAmount,\n productsSoldCount,\n goal,\n currency,\n targetCurrency,\n language,\n rates,\n}) => {\n const isDonationBased = type === 'donation'\n\n const label =\n type === 'presale' ? (\n `${productsSoldCount} / ${goal}`\n ) : (\n \n )\n\n return (\n \n {isDonationBased ? : }\n {label}\n \n )\n}\n\nGoalLabel.defaultProps = {\n goal: 0,\n raisedAmount: 0,\n progress: 0,\n productsSoldCount: 0,\n}\n\nGoalLabel.propTypes = {\n type: PropTypes.oneOf(['presale', 'project', 'donation']).isRequired,\n progress: PropTypes.number,\n goal: PropTypes.string,\n raisedAmount: PropTypes.number,\n productsSoldCount: PropTypes.string,\n targetCurrency: PropTypes.string,\n currency: PropTypes.string.isRequired,\n language: PropTypes.string.isRequired,\n rates: PropTypes.object,\n}\n\n// HACK: This icon does not meet our two-toned family requirements (no black bezels), hence it is shamefully placed here.\nfunction DonationIcon(props) {\n return (\n \n )\n}\n\nexport default GoalLabel\n", "import styled from 'styled-components'\n\nimport * as colors from '../../constants/colors'\n\nconst ProjectCardTitle = styled.h2`\n color: ${(props) => colors.primary(props)};\n font-size: 16px;\n font-weight: 600;\n line-height: 23px;\n margin: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nexport default ProjectCardTitle\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled, { keyframes, css } from 'styled-components'\n\nimport * as bp from '../constants/breakpoints'\nimport * as fonts from '../constants/fonts'\nimport * as colors from '../constants/colors'\n\nimport Icon from './Icon'\n\nconst bounce = keyframes`\n 30% {\n transform: scale(1.4);\n }\n 50% {\n transform: scale(0.8);\n }\n 100% {\n transform: scale(1);\n }\n`\n\nconst debounce = keyframes`\n 30% {\n transform: scale(0.8);\n }\n 50% {\n transform: scale(0.7);\n }\n 100% {\n transform: scale(1);\n }\n`\n\nconst IconWrapper = styled.span`\n display: inline-flex;\n`\n\nconst Label = styled.span`\n display: inline-flex;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 12px;\n color: ${(props) => (props.textColor !== undefined ? props.textColor : colors.GREY_SHADE_3)};\n font-weight: 500;\n`\n\nconst LabelNormal = styled.span``\nconst LabelHover = styled.span``\n\nconst InactiveHeart = styled(Icon).attrs({\n glyph: 'heart-stroke',\n size: 18,\n})`\n animation: ${debounce} cubic-bezier(0.04, 0.4, 0.5, 0.95) 0.8s forwards 1;\n`\n\nconst ActiveHeart = styled(Icon).attrs({\n glyph: 'heart',\n size: 18,\n})`\n animation: ${bounce} cubic-bezier(0.04, 0.4, 0.5, 0.95) 1.2s forwards 1;\n svg {\n fill: ${(props) => colors.primary(props)};\n }\n`\n\nconst BackedIcon = styled(Icon).attrs({\n glyph: 'check-circle',\n size: 18,\n})`\n svg {\n fill: ${colors.PRIMARY_GREEN};\n }\n`\n\nconst CreatedIcon = styled(Icon).attrs({\n glyph: 'star-circle',\n size: 18,\n})`\n svg {\n fill: ${colors.SECONDARY_YELLOW};\n }\n`\n\nconst Wrapper = styled.div`\n position: absolute;\n top: 0;\n`\n\nconst Button = styled.div`\n /* stylelint-disable-next-line */\n background-color: ${(props) => (props.backgroundColor !== undefined ? props.backgroundColor : colors.PRIMARY_WHITE)};\n display: flex;\n flex-direction: row;\n position: relative;\n align-items: center;\n justify-content: ${(props) => (!props.isCompact ? 'center' : 'flex-end')};\n width: ${(props) => (!props.isCompact ? '100%' : '32px')};\n max-width: ${(props) => (!props.isCompact ? 'none' : '32px')};\n padding: 7px;\n padding-left: ${(props) => (!props.isCompact ? '10px' : 0)};\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n border-radius: 16px;\n box-shadow: 0 1px 1px 1px rgba(224, 224, 224, 0.5);\n overflow: hidden;\n transition: max-width 200ms ease-in-out;\n cursor: pointer;\n user-select: none;\n color: ${colors.GREY_SHADE_4};\n box-sizing: border-box;\n ${LabelHover} {\n display: none;\n }\n &:hover {\n /* stylelint-disable-next-line */\n background-color: ${(props) =>\n props.backgroundColorHover !== undefined ? props.backgroundColorHover : colors.PRIMARY_WHITE};\n ${Label} {\n /* stylelint-disable-next-line */\n color: ${(props) => (props.textColorHover !== undefined ? props.textColorHover : colors.GREY_SHADE_3)};\n }\n ${(props) =>\n props.iconColorHover &&\n css`\n ${IconWrapper} {\n color: ${props.iconColorHover};\n }\n `}\n ${(props) =>\n props.hideIconHover &&\n css`\n ${IconWrapper} {\n display: none;\n }\n `}\n ${(props) =>\n props.textHover &&\n `\n ${LabelHover} {\n display: inline-block;\n }\n ${LabelNormal} {\n display: none;\n }\n `}\n }\n /* stylelint-disable-next-line */\n ${Label /* sc-sel */} {\n opacity: ${(props) => (!props.isCompact ? 1 : 0)};\n margin-right: 5px;\n }\n @media screen and (max-width: 425px) {\n &:hover {\n outline: 2px solid Highlight;\n }\n }\n @media screen and ${bp.TABLET} {\n /* stylelint-disable-next-line */\n &:hover {\n width: 100%;\n max-width: ${(props) => (!props.isCompact ? 'none' : '200px')};\n padding-left: 10px;\n }\n /* stylelint-disable-next-line */\n &:hover ${Label /* sc-sel */} {\n opacity: 1;\n transition: opacity 100ms ease-in;\n transition-delay: 200ms;\n }\n }\n`\n\nconst getIcon = (icon) => {\n switch (icon) {\n case 'backed':\n return \n\n case 'created':\n return \n\n case 'inactive-heart':\n return \n\n case 'active-heart':\n return \n\n default:\n return \n }\n}\n\nconst RoundButton = ({\n icon,\n iconColorHover,\n hideIconHover,\n text,\n textHover,\n textColor,\n textColorHover,\n backgroundColor,\n backgroundColorHover,\n onClick,\n isCompact,\n className,\n}) => {\n const icn = getIcon(icon)\n return (\n \n \n \n {icn}\n \n \n )\n}\n\nRoundButton.propTypes = {\n className: PropTypes.string,\n /** Select the icon of the button */\n icon: PropTypes.oneOf(['inactive-heart', 'active-heart', 'created', 'backed']).isRequired,\n /** color of the icon on hover state */\n iconColorHover: PropTypes.string,\n /** hide the icon during the hover if set to true */\n hideIconHover: PropTypes.bool,\n /** string value representing the button text */\n text: PropTypes.string.isRequired,\n /** string value representing the button text on hover state */\n textHover: PropTypes.string,\n /** color of the text */\n textColor: PropTypes.string,\n /** color of the text on hover state */\n textColorHover: PropTypes.string,\n /** color of the background */\n backgroundColor: PropTypes.string,\n /** color of the background on hover state */\n backgroundColorHover: PropTypes.string,\n /** Show the text only during the hover if set to true */\n isCompact: PropTypes.bool,\n /** trigger when action button is clicked */\n onClick: PropTypes.func,\n}\n\nexport default RoundButton\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as colors from '../../constants/colors'\nimport * as fonts from '../../constants/fonts'\n\nimport DiscreetText from './DiscreetText'\nimport GoalLabel from './GoalLabel'\nimport ProjectCardTitle from './ProjectCardTitle'\n\nconst CardWrapper = styled.a`\n color: ${colors.PRIMARY_BLACK};\n display: flex;\n font-family: ${fonts.PRIMARY_FONT};\n line-height: 1.23;\n text-decoration: none;\n min-width: 280px;\n width: 100%;\n\n ${ProjectCardTitle} {\n margin-bottom: 5px;\n }\n\n &:hover ${ProjectCardTitle} {\n text-decoration: underline;\n }\n`\n\nconst Picture = styled.div`\n background-color: ${colors.GREY_SHADE_6};\n background-image: ${(props) => (props.url ? `url(${props.url})` : undefined)};\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n max-height: 35px;\n margin: 2px 10px 0 0;\n max-width: 60px;\n width: 100%;\n`\n\nconst ContentWrapper = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n\nconst Description = styled.span`\n display: block;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`\n\n/* TODO: This component isn't really a card per-say.\n Design-wise, it was thought as part of a list of projects, not much as a standalone presentational component.\n That being said, it should probably not be named a \"Card\" nor used as one, it does not even have a background.\n*/\n/** HorizontalProjectCard is a presentational component for projects. With the shape of a card. It's layed horizontally, too. */\nconst HorizontalProjectCard = ({\n absoluteUrl,\n currency,\n goal,\n isOnline,\n language,\n picture,\n productsSoldCount,\n progress,\n rates,\n raisedAmount,\n subtitle,\n targetCurrency,\n title,\n translation,\n type,\n}) => {\n return (\n \n \n \n {title}\n {subtitle && {subtitle}}\n \n {isOnline ? (\n \n ) : (\n translation['comingSoon']\n )}\n \n \n \n )\n}\n\nHorizontalProjectCard.defaultProps = {\n isOnline: true,\n type: 'project',\n}\n\nHorizontalProjectCard.propTypes = {\n /** url of the project page on Ulule */\n absoluteUrl: PropTypes.string,\n /** currency of the project */\n currency: PropTypes.string.isRequired,\n /** minimum amount that the project needs to sell (if presale) or raise (if project) */\n goal: PropTypes.string,\n /** indicates if project has already launched. Determines goal display within the component. */\n isOnline: PropTypes.bool,\n /** language of project to choose right title and description */\n language: PropTypes.string.isRequired,\n /** url of the main project picture */\n picture: PropTypes.string,\n /** total of pre-orders sold (only when the project is a pre-sale */\n productsSoldCount: PropTypes.string,\n /** percentage of the project's progress */\n progress: PropTypes.number,\n /** list of currency rates */\n rates: PropTypes.object,\n /** amount currently raised by the project */\n raisedAmount: PropTypes.number,\n /** current currency. If different to project currency, raised amount will be converted to this */\n targetCurrency: PropTypes.string,\n /** name of the project */\n title: PropTypes.string,\n translation: PropTypes.shape({\n comingSoon: PropTypes.string.isRequired,\n }),\n /** project type, determines goal display */\n type: PropTypes.oneOf(['presale', 'project', 'donation']),\n /** short description of the project */\n subtitle: PropTypes.string,\n}\n\nexport default HorizontalProjectCard\nHorizontalProjectCard.displayName = 'legacy.HorizontalProjectCard'\n", "import * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport { BasicLink } from './Links'\n\nimport * as colors from '../constants/colors'\nimport * as fonts from '../constants/fonts'\n\nexport const Title1 = styled.h1`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 26px;\n color: ${colors.PRIMARY_BLACK};\n margin: 0;\n text-align: ${(props) => props.align || 'left'};\n\n ${BasicLink /* sc-sel */} {\n font-size: 26px;\n }\n`\n\nTitle1.propTypes = {\n align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const Title2 = styled.h2`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 18px;\n color: ${colors.PRIMARY_BLACK};\n margin: 0;\n text-align: ${(props) => props.align || 'left'};\n\n ${BasicLink /* sc-sel */} {\n font-size: 18px;\n }\n`\n\nTitle2.propTypes = {\n align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const Title3 = styled.h3`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 400;\n font-size: 17px;\n color: ${colors.PRIMARY_BLACK};\n margin: 0;\n text-align: ${(props) => props.align || 'left'};\n\n ${BasicLink /* sc-sel */} {\n font-size: 17px;\n }\n`\n\nTitle3.propTypes = {\n align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const Title4 = styled.h4`\n font-family: ${fonts.SECONDARY_FONT};\n font-weight: 500;\n font-size: 38px;\n color: ${colors.PRIMARY_GREEN};\n margin: 0;\n text-align: ${(props) => props.align || 'left'};\n\n ${BasicLink /* sc-sel */} {\n font-size: 18px;\n }\n`\n\nTitle4.propTypes = {\n align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const Title5 = styled.h5`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 24px;\n color: ${colors.PRIMARY_BLACK};\n margin: 0;\n text-align: ${(props) => props.align || 'left'};\n\n ${BasicLink /* sc-sel */} {\n font-size: 24px;\n }\n`\n\nTitle5.propTypes = {\n align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n\nexport const Title6 = styled.h6`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 10px;\n text-transform: uppercase;\n color: ${colors.GREY_SHADE_3};\n margin: 0 0 5px;\n text-align: ${(props) => props.align || 'left'};\n\n ${BasicLink /* sc-sel */} {\n font-size: 10px;\n }\n`\n\nTitle6.propTypes = {\n align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\n", "import * as React from 'react'\nimport styled from 'styled-components'\nimport * as PropTypes from 'prop-types'\n\nimport * as colors from '../constants/colors'\n\nexport const StyledAvatar = styled.img.attrs((props) => ({\n size: props.size ? `${props.size}px` : '1em',\n}))`\n object-fit: cover;\n border-radius: 50%;\n background-image: ${(props) => (props.src ? `url(${props.src})` : undefined)};\n background-position: center;\n background-size: cover;\n width: ${(props) => props.size};\n height: ${(props) => props.size};\n border: ${(props) => (props.border ? `2px solid ${colors.PRIMARY_WHITE}` : undefined)};\n box-shadow: ${(props) => props.shadow && `#0006 0 2px 4px`};\n`\n\n/** Beautiful picture chosen by user */\nconst Avatar = (props) => \n\nAvatar.propTypes = {\n /** if not defined, size will be equal to 1em */\n size: PropTypes.number,\n /** if true, add a border */\n border: PropTypes.bool,\n /** if true, add a shadow */\n shadow: PropTypes.bool,\n /** url of the avatar */\n src: PropTypes.string,\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n}\nAvatar.displayName = 'legacy.Avatar'\n\nexport default Avatar\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nclass ClickOutside extends React.Component {\n constructor(props) {\n super(props)\n this.isTouch = false\n }\n\n componentDidMount() {\n document.addEventListener('touchend', this.handleClick, true)\n document.addEventListener('click', this.handleClick, true)\n }\n\n componentWillUnmount() {\n document.removeEventListener('touchend', this.handleClick, true)\n document.removeEventListener('click', this.handleClick, true)\n }\n\n handleClick = event => {\n const el = this.container\n\n if (event.type === 'touchend') {\n this.isTouch = true\n }\n\n if (event.type === 'click' && this.isTouch) {\n return\n }\n\n if (!el.contains(event.target)) {\n this.props.preventDefault && event.preventDefault()\n this.props.stopPropagation && event.stopPropagation()\n this.props.onClickOutside(event)\n }\n }\n\n render() {\n const {\n children,\n onClickOutside: _a, // eslint-disable-line no-unused-vars\n preventDefault: _b, // eslint-disable-line no-unused-vars\n stopPropagation: _c, // eslint-disable-line no-unused-vars\n ...props\n } = this.props\n return (\n
(this.container = ref)}>\n {children}\n
\n )\n }\n}\n\nClickOutside.defaultProps = {\n preventDefault: true,\n stopPropagation: true,\n}\n\nClickOutside.propTypes = {\n preventDefault: PropTypes.bool,\n stopPropagation: PropTypes.bool,\n onClickOutside: PropTypes.func.isRequired,\n children: PropTypes.any.isRequired,\n}\n\nexport default ClickOutside\n", "import styled from 'styled-components'\n\nimport * as colors from '../constants/colors'\n\nconst ShadowBox = styled.div`\n background-color: ${colors.PRIMARY_WHITE};\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n`\n\nexport default ShadowBox\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as colors from '../constants/colors'\nimport * as fonts from '../constants/fonts'\n\nimport ClickOutside from '../core/ClickOutside'\nimport Panel from './dropdown/Panel'\nimport { Title6 } from './Titles'\n\n// NOTE: for Firefox & Edge compatibility\nconst encodeColor = (color) => color.replace(/#/, '%23')\n\nconst Container = styled.span`\n display: inline-flex;\n position: relative;\n flex-direction: ${(props) => (props.error ? 'column' : 'initial')};\n ${(props) => props.disabled && `cursor: not-allowed;`}\n`\n\nconst getBackgroundColor = ({ disabled, inline }) => {\n if (disabled) {\n return colors.GREY_SHADE_6\n }\n\n if (inline) {\n return 'transparent'\n }\n\n return colors.PRIMARY_WHITE\n}\n\nconst getBorderColor = (props) => {\n if (props.disabled) {\n return colors.GREY_SHADE_5\n }\n\n if (props.error) {\n return colors.SECONDARY_RED\n }\n\n if (props.focused) {\n return colors.primary(props)\n }\n\n return colors.PRIMARY_BLACK\n}\n\nconst getBorder = ({ disabled, error, inline }) => {\n if (disabled) {\n return '1px solid'\n }\n\n if (error) {\n return '2px dashed'\n }\n\n if (inline) {\n return '0'\n }\n\n return '10px 15px'\n}\n\nconst getColor = (props) => {\n if (props.disabled) {\n return colors.GREY_SHADE_3\n }\n\n if (props.focused && !props.useDefault) {\n return colors.primary(props)\n }\n\n return colors.PRIMARY_BLACK\n}\n\n/* prettier-ignore */\nconst Select = styled.select`\n appearance: none;\n outline: 0;\n background-color: ${props => getBackgroundColor(props)};\n background-image: url('data:image/svg+xml;utf8,');\n background-repeat: no-repeat;\n background-position: ${props => (props.inline ? 'center right 0px' : 'center right 15px')};\n background-size: 8px 8px;\n border: ${props => getBorder(props)};\n border-color: ${props => getBorderColor(props)};\n border-radius: ${props => (props.inline ? 0 : '2px')};\n color: ${props => getColor(props)};\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 15px;\n font-weight: 400;\n padding: ${props => (props.inline ? 0 : '10px 15px')};\n padding-right: ${props => (props.inline ? 'calc(8px + 10px)' : 'calc(15px + 8px + 10px)')};\n cursor: pointer;\n width: ${props => props.width ? `${props.width}px` : 'auto'};\n box-sizing: ${props => (props.autosize || props.inline) ? 'content-box' : 'border-box'};\n ${props => props.disabled && `pointer-events: none;`}\n\n &:focus,\n &:hover {\n border-color: ${props => colors.primary(props)};\n color: ${props => !props.useDefault && colors.primary(props)};\n background-image: url('data:image/svg+xml;utf8,');\n }\n`\n\nconst List = styled.span`\n display: flex;\n flex-flow: column nowrap;\n margin: 0;\n padding: 0;\n`\n\nconst Option = styled.span`\n padding: 10px 0;\n cursor: pointer;\n color: ${(props) => (props.active ? colors.primary(props) : colors.PRIMARY_BLACK)};\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 13px;\n font-weight: 500;\n\n &:hover {\n color: ${(props) => colors.primary(props)};\n }\n`\n\nconst SizerContainer = styled.span`\n position: absolute;\n top: 0;\n left: 0;\n visibility: hidden;\n height: 0;\n white-space: pre;\n font-family: ${fonts.PRIMARY_FONT};\n font-size: 15px;\n font-weight: 400;\n`\n\nconst SelectLabel = styled(Title6)`\n background-color: ${colors.PRIMARY_WHITE};\n color: ${(props) => (props.focused ? colors.primary(props) : colors.GREY_SHADE_3)};\n padding: 5px 10px;\n position: absolute;\n top: 0;\n left: 5px;\n transform: translate(0, -50%);\n box-sizing: content-box;\n cursor: pointer;\n pointer-events: none;\n\n ${Container /* sc-sel */}:hover & {\n color: ${(props) => colors.primary(props)};\n }\n\n ${Select /* sc-sel */}:focus & {\n color: ${(props) => colors.primary(props)};\n }\n`\n\nconst ErrorText = styled.div`\n font-family: ${fonts.PRIMARY_FONT}, sans-serif;\n font-weight: 500;\n font-size: 13px;\n color: ${(props) => (props.error ? `${colors.SECONDARY_RED}` : `${colors.PRIMARY_GREEN}`)};\n margin-top: 7px;\n`\n\nclass DropdownFilter extends React.Component {\n static defaultProps = {\n useDefault: false,\n inline: false,\n autosize: false,\n focused: false,\n disabled: false,\n required: false,\n }\n\n /**\n * @param {object} props\n * @param {boolean} [props.alignLeft] - align dropdown box to the left. If falsy, will align to right (default)\n * @param {string} props.name - name attribute of HTML5 select\n * @param {string} [props.label] - label displayed in top of component\n * @param {string} props.value - current value of the dropdown, by default the first option\n * @param {any[]} props.options - list of options availables in dropdown\n * @param {boolean} [props.useDefault] - if true, on click it will open native select dropdown\n * @param {boolean} [props.focused] - controls the focus\n * @param {boolean} [props.disabled]\n * @param {boolean|string} [props.error] - error indicator or message\n * @param {boolean} [props.required]\n * @param {boolean} [props.inline] - changes the style of component (useful with text)\n * @param {boolean} [props.autosize] - controls if the component is fitted to the current value (true) or the longest value in options (false)\n * @param {() => void} props.onChange - trigger when a different option is clicked\n * @param {() => void} [props.onFocus]\n * @param {() => void} [props.onBlur]\n * @param {() => void} [props.onClick]\n */\n constructor(props) {\n super(props)\n this.state = {\n opened: false,\n focused: this.props.focused,\n sizerWidth: 0,\n }\n }\n\n componentDidMount() {\n this.mounted = true\n this.updateSizerWidth()\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.focused !== this.props.focused) {\n this.setState({ focused: this.props.focused })\n }\n\n if (prevProps.value !== this.props.value) {\n this.updateSizerWidth()\n }\n }\n\n componentWillUnmount() {\n this.mounted = false\n }\n\n preventNative = (event) => {\n if (!event.defaultPrevented && !this.props.useDefault) {\n event.preventDefault()\n }\n }\n\n handleClick = (event) => {\n if (this.props.onClick) {\n this.props.onClick(event)\n }\n\n if (event.defaultPrevented || this.props.useDefault) {\n return\n }\n\n event.preventDefault()\n event.stopPropagation()\n this.openMenu()\n }\n\n handleClickOption = (event) => {\n const value = event.target.dataset.value\n\n if (this.state.value !== value) {\n this.setState({ opened: false, focused: false })\n\n if (this.props.onChange) {\n const newOption = this.getOptionByValue(value)\n this.props.onChange(newOption)\n }\n }\n }\n\n getOptionByValue = (value) => {\n const found = this.props.options.find((option) => option.value === value)\n\n if (!found) {\n return this.props.options[0]\n }\n\n return found\n }\n\n openMenu = () => {\n this.setState({ opened: true, focused: true })\n }\n\n closeMenu = () => {\n this.setState({ opened: false, focused: false })\n }\n\n getSizerRef = (ref) => {\n this.sizer = ref\n }\n\n getLabelRef = (ref) => {\n this.label = ref\n }\n\n updateSizerWidth = () => {\n if ((!this.props.autosize && !this.props.inline) || !this.mounted || !this.sizer) {\n return\n }\n\n let newSizerWidth = this.sizer.scrollWidth * (1 + 15 / 100)\n\n if (this.label && this.label.scrollWidth > newSizerWidth) {\n newSizerWidth = this.label.scrollWidth * (1 + 15 / 100)\n }\n\n this.setState({ sizerWidth: Math.floor(newSizerWidth) })\n }\n\n renderMenu() {\n const { alignLeft, value, options } = this.props\n\n return (\n \n \n \n {options.map((option) => (\n \n {option.label}\n \n ))}\n \n \n \n )\n }\n\n render() {\n const {\n autosize,\n name,\n label,\n value,\n options,\n disabled,\n required,\n onChange,\n inline,\n onBlur,\n onFocus,\n useDefault,\n error,\n } = this.props\n const { focused, sizerWidth, opened } = this.state\n const displayLabel = label && !inline\n\n return (\n \n {displayLabel && (\n \n {label}\n \n )}\n \n {options.map((option) => (\n \n ))}\n \n {this.getOptionByValue(value).label}\n {opened && this.renderMenu()}\n {error && typeof error === 'string' && {error}}\n \n )\n }\n}\n\nDropdownFilter.defaultProps = {\n alignLeft: false,\n useDefault: false,\n inline: false,\n autosize: false,\n focused: false,\n disabled: false,\n required: false,\n onChange: () => {},\n}\n\nDropdownFilter.propTypes = {\n /** align dropdown box to the left. If falsy, will align to right (default) */\n alignLeft: PropTypes.bool,\n /** name attribute of HTML5 select */\n name: PropTypes.string.isRequired,\n /** label displayed in top of component */\n label: PropTypes.string,\n /** current value of the dropdown, by default the first option */\n value: PropTypes.string.isRequired,\n /** list of options availables in dropdown */\n options: PropTypes.array.isRequired,\n /** if true, on click it will open native select dropdown */\n useDefault: PropTypes.bool,\n /** controls the focus */\n focused: PropTypes.bool,\n disabled: PropTypes.bool,\n /** error indicator or message */\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n required: PropTypes.bool,\n /** changes the style of component (useful with text) */\n inline: PropTypes.bool,\n /** controls if the component is fitted to the current value (true) or the longest value in options (false) */\n autosize: PropTypes.bool,\n /** trigger when a different option is clicked */\n onChange: PropTypes.func.isRequired,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onClick: PropTypes.func,\n}\n\nexport default DropdownFilter\nDropdownFilter.displayName = 'legacy.DropdownFilter'\n", "import * as React from 'react'\nimport styled from 'styled-components'\nimport * as PropTypes from 'prop-types'\n\nimport ShadowBox from '../ShadowBox'\n\nconst DropdownBox = styled(ShadowBox)`\n position: absolute;\n top: calc(100% + 10px);\n display: inline-flex;\n min-width: 140px;\n padding: 10px;\n z-index: 2;\n ${props => (props.alignLeft ? `left: 0;` : `right: 0;`)}\n`\n\nconst Panel = ({ children, ...props }) => {children}\n\nPanel.defaultProps = {\n alignLeft: false,\n}\n\nPanel.propTypes = {\n /** align dropdown box to the left. If falsy, will align to right (default) */\n alignLeft: PropTypes.bool,\n /** children of the components */\n children: PropTypes.any,\n}\n\nexport default Panel\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as colors from '../constants/colors'\nimport * as spinner from '../styles/spinner'\nimport * as button from '../styles/button'\n\nimport { Button } from '../components/index'\nimport Icon from './Icon'\nimport LabelWithIcon from './LabelWithIcon'\n\nconst LightIcon = styled(Icon)`\n color: ${colors.GREY_SHADE_4};\n`\n\n/** This component should be used to trigger fetching more items in a list */\nconst LoadMoreButton = ({ loading, error, onClick, translations }) => {\n return (\n \n {error ? (\n } label={translations['errorLabel']} />\n ) : (\n translations['initialLabel']\n )}\n \n )\n}\n\nconst OutlinedLoadMoreButton = styled(Button)`\n text-transform: none;\n color: ${(props) => colors.primary(props)};\n background-color: ${colors.PRIMARY_WHITE};\n border-radius: 2px;\n border: 2px solid;\n border-color: ${(props) => colors.primary(props)};\n\n &:hover {\n background-color: ${colors.PRIMARY_WHITE};\n border-color: ${(props) => colors.primaryHover(props)};\n color: ${(props) => colors.primaryHover(props)};\n }\n\n ${button.Label} {\n font-weight: 500;\n }\n\n ${spinner.Dot} {\n background-color: ${(props) => colors.primary(props)};\n }\n`\n\nLoadMoreButton.defaultProps = {\n loading: false,\n error: false,\n}\n\nLoadMoreButton.propTypes = {\n /** controls loading mode of component */\n loading: PropTypes.bool,\n /** controls error mode of component */\n error: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n translations: PropTypes.shape({\n initialLabel: PropTypes.string.isRequired,\n loadingLabel: PropTypes.string,\n errorLabel: PropTypes.string.isRequired,\n }).isRequired,\n}\n\nexport default LoadMoreButton\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as colors from '../constants/colors'\n\nexport const StyledPastille = styled.span`\n background-color: ${(props) => (props.color ? props.color : colors.primary(props))};\n display: flex;\n justify-content: center;\n align-items: center;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n border: 5px solid ${colors.PRIMARY_WHITE};\n\n img {\n max-width: 80px;\n width: 100%;\n }\n`\n\nconst Pastille = (props) => \n\nPastille.propTypes = {\n children: PropTypes.node.isRequired,\n as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n}\n\nexport default Pastille\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport { Title2 } from './Titles'\nimport TextEllipsis from '../core/TextEllipsis'\n\nimport * as colors from '../constants/colors'\nimport * as effects from '../constants/neue/effects'\nimport * as fonts from '../constants/fonts'\n\nconst BadgeWrapper = styled.a`\n max-width: 300px;\n min-width: 230px;\n flex: 1 1 auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: black;\n border: 1px solid ${colors.GREY_SHADE_5};\n min-height: 308px;\n position: relative;\n\n &:hover {\n transition: all 200ms ease-in-out;\n box-shadow: ${effects.SHADOW_4};\n }\n`\n\nconst BadgeContent = styled.div`\n border-top: none;\n padding: 15px;\n position: relative;\n padding-bottom: 35px;\n`\n\nconst BadgeTitle = styled(Title2)`\n color: ${(props) => props.color};\n font-size: 18px;\n font-weight: 500;\n line-height: 21px;\n text-align: center;\n margin: 0;\n`\n\nconst BadgeInfos = styled.div`\n position: absolute;\n background-color: ${(props) => props.color};\n color: ${colors.PRIMARY_WHITE};\n padding: 4px 14px;\n border-radius: 1px;\n left: 50%;\n bottom: -5px;\n font-family: ${fonts.PRIMARY_FONT};\n transform: translateX(-50%);\n\n span {\n font-size: 12px;\n font-weight: bold;\n line-height: 18px;\n }\n\n svg {\n height: 12px;\n margin-top: -1px;\n margin-right: 5px;\n }\n`\n\nconst BadgeDescription = styled.p`\n font-size: 15px;\n font-weight: 300;\n line-height: 20px;\n text-align: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: ${fonts.PRIMARY_FONT};\n`\n\nconst BadgeIcon = styled.div`\n background-color: ${(props) => props.color};\n display: flex;\n justify-content: center;\n align-items: center;\n height: 165px;\n\n img {\n width: 130px;\n height: 130px;\n }\n`\n\n/** Badge component is used for badges on user page */\nconst Badge = ({ name, icon, description, color, total, url, className }) => (\n \n \n \n \n \n {name}\n \n {description}\n \n \n {total !== null && (\n \n \n {total}\n \n )}\n \n)\n\nBadge.propTypes = {\n name: PropTypes.string,\n icon: PropTypes.string,\n description: PropTypes.string,\n color: PropTypes.string,\n total: PropTypes.number,\n /** url target on click */\n url: PropTypes.string,\n className: PropTypes.string,\n}\nBadge.displayName = 'legacy.Badge'\n\nexport default Badge\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport 'intersection-observer'\n\nimport * as colors from '../constants/colors'\n\nimport Icon from './Icon'\n\n// NOTE: This is merely a proxy enabling us to target the component and style it\nconst VideoLoaderPlayIcon = styled(Icon)``\n\nconst VideoLoaderWrapper = styled.div`\n margin: 0 auto;\n text-align: center;\n position: relative;\n\n &:hover {\n cursor: pointer;\n\n ${VideoLoaderPlayIcon} {\n polygon {\n fill: ${colors.PRIMARY_BLUE_HOVER};\n }\n }\n }\n`\n\nconst VideoLoaderButton = styled.div`\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n`\n\nconst VideoLoaderThumbnail = styled.img`\n max-width: 100%;\n`\n\n// TODO: Improve support for non-16/9 videos\nconst VideoWrapper = styled.div`\n background-color: black;\n height: 0;\n padding-bottom: 56.25%;\n position: relative;\n`\n\nconst Video = styled.div`\n iframe,\n video {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n`\n\nconst setParam = (videoHtml = '', param, value) => {\n const paramAlreadySet = new RegExp(`[?&]${param}=`)\n const hasQueryParams = /\\?[^=]+=/\n const srcAttribute = /src=\"(\\S+)\"/\n\n if (paramAlreadySet.test(videoHtml)) {\n return videoHtml\n }\n\n const [, url] = videoHtml.match(srcAttribute)\n\n const lastCharacter = url.charAt(url.length - 1)\n if (lastCharacter === '?' || lastCharacter === '&') {\n return videoHtml.replace(srcAttribute, `src=\"${url}${param}=${value}\"`)\n }\n\n if (hasQueryParams.test(url)) {\n return videoHtml.replace(srcAttribute, `src=\"${url}&${param}=${value}\"`)\n }\n\n return videoHtml.replace(srcAttribute, `src=\"${url}?${param}=${value}\"`)\n}\n\nconst setParams = (videoHtml = '', params) => {\n for (const param in params) {\n const value = params[param]\n videoHtml = setParam(videoHtml, param, value)\n }\n return videoHtml\n}\n\nconst useEnterView = (onEnterView, threshold) => {\n const ref = React.useRef(null)\n\n React.useEffect(() => {\n // References to window object must be done in useEffect or componentDidMount to be\n // ignored by gatsby when building the DS website. Otherwise we get\n // `XXX is not defined` errors\n const observer = new window.IntersectionObserver(\n (entries) => {\n const hasEnteredView = entries.some((entry) => entry.intersectionRatio >= threshold)\n if (hasEnteredView) {\n onEnterView()\n }\n },\n { threshold },\n )\n\n if (ref.current !== null) {\n observer.observe(ref.current)\n }\n })\n\n return ref\n}\n\n/** Acts as a placeholder for video content, and only loads the video when clicked. */\nconst VideoLoader = ({ className, placeholder, autoplay, srcSet, videoHtml }) => {\n const [videoLoaded, setVideoLoaded] = React.useState(false)\n const video = autoplay ? setParams(videoHtml, { mute: 1, autoplay: 1 }) : setParams(videoHtml, { autoplay: 1 })\n\n const ref = useEnterView(() => {\n if (autoplay) {\n setVideoLoaded(true)\n }\n }, 1)\n\n return (\n \n {!videoLoaded && (\n {\n event.preventDefault()\n setVideoLoaded(true)\n }}\n >\n \n \n \n \n \n )}\n {videoLoaded && (\n \n \n \n )}\n \n )\n}\n\nVideoLoader.defaultProps = {}\n\nVideoLoader.propTypes = {\n className: PropTypes.string,\n /** URL of the placeholder image (shown before video is actually loaded) */\n placeholder: PropTypes.string.isRequired,\n /** Whether to autoplay the video when it enters view or not */\n autoplay: PropTypes.bool,\n /** String of images for retina screen */\n srcSet: PropTypes.string,\n /** HTML code (iframe or video element) that will be loaded after a click */\n videoHtml: PropTypes.string.isRequired,\n}\n\nVideoLoader.displayName = 'legacy.VideoLoader'\n\nexport default VideoLoader\n", "import styled from 'styled-components'\n\nimport * as colors from '../../constants/colors'\nimport * as fonts from '../../constants/fonts'\nimport { hexToRgb } from '../../utils/colors'\n\nimport { StyledAvatar } from '../Avatar'\n\nexport const Sponsor = styled.span`\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 13px;\n display: flex;\n color: ${(props) => props.mainColor || 'inherit'};\n flex-flow: row nowrap;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n\n ${StyledAvatar /* sc-sel */} {\n margin-right: 5px;\n }\n`\n\nexport const SponsorLink = styled(Sponsor).attrs((props) => ({\n color: props.mainColor || colors.primary(props),\n}))`\n color: ${(props) => props.color};\n display: inline-flex;\n text-decoration: none;\n\n &:hover {\n color: ${(props) => hexToRgb(props.color, 0.85)};\n }\n`\n\nexport const Description = styled.span`\n position: relative;\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n color: ${colors.PRIMARY_WHITE};\n padding: 10px;\n z-index: 10;\n\n &::before {\n content: '';\n transform: skewX(-5deg);\n width: 101%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n }\n`\n\nexport const Container = styled.a.attrs((props) => ({\n color: props.mainColor || colors.primary(props),\n}))`\n background-color: ${colors.PRIMARY_WHITE};\n position: relative;\n display: flex;\n align-items: stretch;\n flex-flow: row nowrap;\n width: 100%;\n height: 54px;\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 13px;\n line-height: 16px;\n text-decoration: none;\n overflow: hidden;\n border: 1px solid ${colors.GREY_SHADE_5};\n padding: 0;\n margin: 0;\n\n ${Description /* sc-sel */} {\n margin-left: 10px;\n }\n\n ${Description /* sc-sel */}::before {\n background-color: ${(props) => props.color};\n }\n\n &:hover {\n text-decoration: none;\n\n ${Sponsor /* sc-sel */} {\n transition: all 250ms ease-in-out;\n color: ${(props) => (props.href ? hexToRgb(props.color, 0.85) : undefined)};\n }\n\n ${Description /* sc-sel */}::before {\n transition: all 250ms ease-in-out;\n background-color: ${(props) => (props.href ? hexToRgb(props.color, 0.85) : undefined)};\n }\n }\n\n /* stylelint-disable-next-line */\n ${Sponsor /* sc-sel */} {\n padding: 10px;\n padding-right: 0;\n color: ${(props) => props.color};\n }\n`\n\nexport const TinyContainer = styled.a.attrs((props) => ({\n color: props.mainColor || colors.primary(props),\n}))`\n background-color: ${(props) => props.color};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 50px;\n font-family: ${fonts.PRIMARY_FONT};\n font-weight: 500;\n font-size: 13px;\n line-height: 16px;\n text-decoration: none;\n padding: 0;\n margin: 0;\n\n &:hover {\n text-decoration: none;\n transition: all 250ms ease-in-out;\n background-color: ${(props) => (props.href ? hexToRgb(props.color, 0.85) : undefined)};\n }\n\n /* stylelint-disable-next-line */\n ${Sponsor /* sc-sel */} {\n padding: 10px;\n color: ${colors.PRIMARY_WHITE};\n }\n`\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport * as S from './styles'\n\nimport Avatar from '../Avatar'\n\nconst Sponsor = ({ name, avatarUrl, link, mainColor }) => {\n const content = (\n \n \n {name}\n \n )\n\n if (link) {\n return (\n \n {content}\n \n )\n }\n\n return {content}\n}\n\nSponsor.propTypes = {\n avatarUrl: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n /** url will open in new tab */\n link: PropTypes.string,\n /** color of component */\n mainColor: PropTypes.string,\n}\n\nexport default Sponsor\nSponsor.displayName = 'legacy.Sponsor'\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport styled from 'styled-components'\n\nimport * as colors from '../constants/colors'\nimport * as effects from '../constants/neue/effects'\nimport * as fonts from '../constants/fonts'\n\nconst UserCardWrapper = styled.a`\n border: 1px solid ${colors.GREY_SHADE_5};\n padding: 10px;\n position: relative;\n max-width: 180px;\n color: ${colors.PRIMARY_BLACK};\n text-decoration: none;\n font-family: ${fonts.PRIMARY_FONT};\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n\n &:hover {\n transition: all 200ms ease-in-out;\n box-shadow: ${effects.SHADOW_4};\n }\n`\n\nconst UserCardImg = styled.img`\n border-radius: 50%;\n border-style: none;\n display: block;\n margin: 0 auto 10px auto;\n max-width: 160px;\n min-width: 100px;\n width: 160px;\n`\n\nconst UserCardName = styled.span`\n text-align: center;\n display: block;\n font-weight: 500;\n color: ${colors.PRIMARY_BLACK};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`\n\n/** This component aims to serve Ulule business. It shows the support of a user to a project. */\nconst UserCard = ({ name, url, avatar }) => (\n \n \n {name}\n \n)\n\nUserCard.propTypes = {\n /** avatar of the contributor */\n avatar: PropTypes.string,\n /** name of the contributor */\n name: PropTypes.string,\n /** absolute url to the user page */\n url: PropTypes.string,\n}\n\nexport default UserCard\nUserCard.displayName = 'legacy.UserCard'\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport { BottomToMiddle, ZoomIn } from '../UluleTransitions'\nimport { ImportantText } from '../Text'\nimport ModalBehaviour from './ModalBehaviour'\nimport * as S from './styles'\n\nexport const ClassicModal = ({ isClosable, children, overlay, isOpen, onClosing }) => (\n \n {({ isOpen, onClickClose, onExited }) => (\n \n \n {isClosable && (\n \n \n \n )}\n {children}\n \n \n )}\n \n)\n\nClassicModal.propTypes = {\n /** elements passed as children for modal */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,\n /** display overlay */\n overlay: PropTypes.bool,\n /** show / hide modal */\n isOpen: PropTypes.bool,\n /** enable the fact that the modal is closable */\n isClosable: PropTypes.bool,\n /** this function is trigerred when modal is close from inside */\n onClosing: PropTypes.func,\n}\n\nexport const NotificationModal = ({ isClosable, children, overlay, isOpen, onClosing }) => (\n \n {({ isOpen, onClickClose, onExited }) => (\n \n \n {children}\n {isClosable && }\n \n \n )}\n \n)\n\nNotificationModal.propTypes = {\n /** elements passed as children for modal */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,\n /** display overlay */\n overlay: PropTypes.bool,\n /** show / hide modal */\n isOpen: PropTypes.bool,\n /** enable the fact that the modal is closable */\n isClosable: PropTypes.bool,\n /** this function is trigerred when modal is close from inside */\n onClosing: PropTypes.func,\n}\n\nexport const Dialog = ({ children, isOpen, onClosing, title, color, top, right, bottom, left }) => (\n \n {({ isOpen, onClickClose, onExited }) => (\n \n \n \n {title && {title}}\n \n \n {children}\n \n \n )}\n \n)\n\nDialog.propTypes = {\n /** elements passed as children for modal */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),\n /** show / hide modal */\n isOpen: PropTypes.bool,\n /** this function is trigerred when modal is close from inside */\n onClosing: PropTypes.func,\n /** title to display */\n title: PropTypes.string,\n /** color of the title bar */\n color: PropTypes.string,\n /** position: top */\n top: PropTypes.string,\n /** position: right */\n right: PropTypes.string,\n /** position: bottom */\n bottom: PropTypes.string,\n /** position: left */\n left: PropTypes.string,\n}\n", "import * as React from 'react'\nimport * as PropTypes from 'prop-types'\n\nimport Transition from 'react-transition-group/Transition'\n\nexport const BottomToMiddle = ({ children, duration = 300, delay = 0, inProp = false, ...props }) => {\n const defaultStyle = {\n transition: `transform ${duration}ms cubic-bezier(0.645, 0.045, 0.355, 1)`,\n transitionDelay: `${delay}ms`,\n }\n\n const transitionStyles = {\n entering: {\n transform: 'translate(0, 100vh)',\n },\n entered: {\n transform: 'translate(0, 0)',\n },\n exiting: {\n transform: 'translate(0, 100vh)',\n },\n }\n\n return (\n \n {status => {\n if (status === 'exited') {\n return null\n }\n\n const currentStyles = transitionStyles[status]\n return React.cloneElement(children, {\n style: Object.assign({}, defaultStyle, currentStyles),\n })\n }}\n \n )\n}\n\nBottomToMiddle.propTypes = {\n children: PropTypes.element.isRequired,\n inProp: PropTypes.bool,\n duration: PropTypes.number,\n delay: PropTypes.number,\n}\n\nexport const ZoomIn = ({ children, duration = 300, delay = 0, inProp = false, ...props }) => {\n const defaultStyle = {\n transition: `all ${duration}ms cubic-bezier(0.645, 0.045, 0.355, 1)`,\n transitionDelay: `${delay}ms`,\n }\n\n const transitionStyles = {\n entering: {\n opacity: 0,\n transform: 'scale(0.3)',\n },\n entered: {\n opacity: 1,\n transform: 'scale(1)',\n },\n exiting: {\n opacity: 0,\n transform: 'scale(0.3)',\n },\n }\n\n return (\n \n {status => {\n if (status === 'exited') {\n return null\n }\n\n const currentStyles = transitionStyles[status]\n return React.cloneElement(children, {\n style: Object.assign({}, defaultStyle, currentStyles),\n })\n }}\n \n )\n}\n\nZoomIn.propTypes = {\n children: PropTypes.element.isRequired,\n inProp: PropTypes.bool,\n duration: PropTypes.number,\n delay: PropTypes.number,\n}\n\nexport const FadeInAndOut = ({ children, duration = 300, delay = 0, inProp = false }) => {\n const defaultStyle = {\n transition: `opacity ${duration}ms cubic-bezier(0.645, 0.045, 0.355, 1)`,\n transitionDelay: `${delay}ms`,\n opacity: 0,\n }\n const transitionStyles = {\n entering: {\n opacity: 0,\n },\n entered: {\n opacity: 1,\n },\n exiting: {\n opacity: 0,\n },\n }\n\n return (\n \n {status => {\n if (status === 'exited') {\n return null\n }\n\n const currentStyles = transitionStyles[status]\n return React.cloneElement(children, {\n style: Object.assign({}, defaultStyle, currentStyles),\n })\n }}\n \n )\n}\nFadeInAndOut.propTypes = {\n children: PropTypes.element.isRequired,\n inProp: PropTypes.bool,\n duration: PropTypes.number,\n delay: PropTypes.number,\n}\n", "import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n *
\n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *