\n
\n \n
\n \n
\n \n
\n \n ) : (\n <>\n \n
\n \n
\n \n
\n \n );\n};\n\nCommentActivityTooltip.propTypes = {\n tooltipData: PropTypes.object,\n};\n\nexport default CommentActivityTooltip;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { ChangesText, KeyValueText } from \"components/ActivityTooltip\";\nimport { colors } from \"style\";\n\n/**\n * CommitActivityTooltip\n *\n * @params {Object} tooltipData\n */\nconst CommitActivityTooltip = ({ tooltipData }) => {\n const {\n id,\n diffAdditions,\n diffDeletions,\n diffTotalChanges,\n count,\n repository,\n isMembersView,\n totalDiffAdditions,\n totalDiffDeletions,\n totalDiffTotalChanges,\n repositories,\n users,\n user,\n } = tooltipData;\n\n return isMembersView ? (\n <>\n \n {id.slice(0, 9)}} />\n
\n \n
\n \n
\n \n
\n \n ) : (\n <>\n \n
\n \n
\n \n
\n \n
\n \n );\n};\n\nconst styles = {\n hash: css`\n color: ${colors.grayAnatomyBase};\n background: ${colors.grayAnatomyLight3};\n padding: 0.2rem 0.5rem;\n border-radius: 0.3rem;\n font-weight: 500;\n `,\n};\n\nCommitActivityTooltip.propTypes = {\n tooltipData: PropTypes.shape({\n id: PropTypes.string.isRequired,\n diffAdditions: PropTypes.number,\n diffDeletions: PropTypes.number,\n diffTotalChanges: PropTypes.number,\n count: PropTypes.number,\n repository: PropTypes.string,\n isMembersView: PropTypes.bool,\n totalDiffAdditions: PropTypes.number,\n totalDiffDeletions: PropTypes.number,\n totalDiffTotalChanges: PropTypes.number,\n repositories: PropTypes.arrayOf(PropTypes.string),\n users: PropTypes.arrayOf(PropTypes.string),\n user: PropTypes.string,\n }),\n};\n\nexport default CommitActivityTooltip;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { ChangesText, KeyValueText } from \"components/ActivityTooltip\";\n\n/**\n * PullRequestActivityTooltip\n *\n * @params {Object} tooltipData\n */\nconst PullRequestActivityTooltip = ({ tooltipData }) => {\n const {\n isMembersView,\n title,\n repository,\n diffAdditions,\n diffDeletions,\n diffTotalChanges,\n totalDiffAdditions,\n totalDiffDeletions,\n totalDiffTotalChanges,\n count,\n titles,\n repositories,\n users,\n } = tooltipData;\n\n return isMembersView ? (\n <>\n {title}
\n \n
\n \n
\n \n ) : (\n <>\n \n
\n \n
\n \n
\n - \n {titles.map((title) => (\n
- {title} \n ))}\n
\n
\n \n
\n \n );\n};\n\nPullRequestActivityTooltip.propTypes = {\n tooltipData: PropTypes.object,\n};\n\nexport default PullRequestActivityTooltip;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { capitalizeFirst } from \"utils\";\nimport { KeyValueText } from \"components/ActivityTooltip\";\n\n/**\n * ReviewActivityTooltip\n *\n * @params {Object} tooltipData\n */\nconst ReviewActivityTooltip = ({ tooltipData }) => {\n const {\n pullRequestTitle,\n repository,\n isMembersView,\n repositories,\n status,\n messageLength,\n count,\n pullRequestTitles,\n users,\n } = tooltipData;\n\n return isMembersView ? (\n <>\n {capitalizeFirst(status)}
\n \n
\n \n
\n \n
\n \n ) : (\n <>\n \n
\n \n
\n - \n {pullRequestTitles.map((title) => (\n
- {title} \n ))}\n
\n
\n \n
\n \n );\n};\n\nReviewActivityTooltip.propTypes = {\n tooltipData: PropTypes.object,\n};\n\nexport default ReviewActivityTooltip;\n","import React, { useRef, useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport * as d3 from \"d3\";\nimport { pointer } from \"d3-selection\";\nimport { css } from \"@emotion/react\";\nimport { COLOR_TYPES } from \"components/ActivityLog\";\nimport { LINKS, TEAM_ACTIVITY_TYPES } from \"constants/index\";\nimport { ActivityTooltip } from \"components/ActivityTooltip\";\n\n/**\n * ActivityLogCell\n *\n * @param {Object} activities\n * @param {Number} width\n * @param {Number} height\n */\nconst ActivityLogCell = ({ activities, width: widthProp, height: heightProp, ...props }) => {\n const [data, setData] = useState([]);\n const [tooltipData, settooltipData] = useState({});\n const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });\n const [width, setWidth] = useState(widthProp);\n const [height, setHeight] = useState(heightProp);\n const ref = useRef();\n const containerRef = useRef(null);\n\n useEffect(() => {\n const handleResize = () => {\n if (!containerRef.current) return;\n\n setWidth(containerRef?.current?.offsetWidth);\n setHeight(containerRef?.current?.offsetHeight);\n };\n\n window.addEventListener(\"resize\", handleResize);\n handleResize();\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [containerRef.current]);\n\n useEffect(() => {\n // maps color and value from props based on TEAM_ACTIVITY_TYPES mapping\n // to make the data like [{ colorType: 0, value: 2 },....]\n // ignores 0 values as 0 values are showing up\n const buildData = () =>\n activities\n .map((activity) => ({\n id: activity.id?.split(\"-\")?.[1] ?? \"\",\n colorType: colorTypeLookup[activity.type],\n value: activity.count,\n metaData: activity.metaData,\n type: activity.type,\n }))\n .filter(({ value }) => value > 0);\n\n setData(buildData());\n }, [activities]);\n\n useEffect(() => {\n // Clear the canvas by removing the existing SVG element\n d3.select(ref.current).select(\"svg\").remove();\n\n const svg = d3.select(ref.current).append(\"svg\").attr(\"width\", width).attr(\"height\", height);\n const range = width < 110 ? [3, 15] : [3, 25];\n const size = d3.scaleLinear().domain([0, 50]).range(range);\n\n // Initialize the circle: all located at the center of the svg area\n var node = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"class\", \"node\")\n .attr(\"r\", (d) => size(d.value))\n .attr(\"cx\", width / 2)\n .attr(\"cy\", height / 2)\n .style(\"fill\", (d) => COLOR_TYPES[d.colorType])\n .on(\"mouseover\", function (event, data) {\n const [x, y] = pointer(event);\n\n settooltipData({\n ...data.metaData,\n id: data?.id,\n activityTypeIndex: data?.colorType,\n count: data?.value,\n ...props,\n });\n setTooltipPosition({ x, y, width, height, clientX: event.clientX });\n })\n .on(\"mouseout\", function () {\n settooltipData(null);\n })\n .on(\"click\", (event, d) => {\n const link = getActivityLink(d);\n\n if (link) {\n window.open(link, \"_blank\");\n }\n });\n\n // Features of the forces applied to the nodes:\n const simulation = d3\n .forceSimulation()\n .force(\n \"center\",\n d3\n .forceCenter()\n .x(width / 2)\n .y(height / 2)\n ) // Attraction to the center of the svg area\n .force(\"charge\", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0\n .force(\n \"collide\",\n d3\n .forceCollide()\n .strength(0.2)\n .radius((d) => size(d.value) + 2)\n .iterations(1)\n ); // Force that avoids circle overlapping\n\n simulation.nodes(data).on(\"tick\", () => node.attr(\"cx\", (d) => d.x).attr(\"cy\", (d) => d.y));\n }, [data, width, height]);\n\n return (\n \n \n
\n );\n};\n\nconst colorTypeLookup = Object.fromEntries(Object.values(TEAM_ACTIVITY_TYPES).map((value, index) => [value, index]));\n\nconst getActivityLink = ({ id, metaData, type }) => {\n switch (type) {\n case TEAM_ACTIVITY_TYPES.commits:\n return id ? LINKS.github_commit_url(metaData?.repository, id) : null;\n default:\n return null;\n }\n};\n\nconst styles = {\n container: css`\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n `,\n};\n\nActivityLogCell.propTypes = {\n activities: PropTypes.array,\n width: PropTypes.number,\n height: PropTypes.number,\n};\n\nActivityLogCell.defaultProps = {\n width: 120,\n height: 120,\n activities: [],\n};\n\nexport default ActivityLogCell;\n","import React from \"react\";\nimport { DatePicker } from \"components/Form\";\n\n/**\n * ActivityPeriodSelector\n */\nconst ActivityPeriodSelector = (props) => \n
\n \n
\n {children}
\n {typeof cta === \"function\" && \n \n \n
\n )}\n \n \n \n \n \n \n
\n );\n};\n\nconst StyledRow = styled(Row)`\n background: ${gradients.missionLinearGradient};\n color: ${colors.white};\n font-size: ${fontSize.normal};\n padding: 0.75rem ${margins.normal};\n border-radius: 0.6rem;\n margin: 0rem 0rem 1rem 0rem;\n justify-content: space-between;\n\n @media (max-width: ${breakpoints.portrait}) {\n padding: 2rem 2.5rem;\n text-align: center;\n font-size: ${fontSize.small};\n font-weight: 500;\n flex-direction: column;\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 1.5rem 2rem;\n }\n`;\n\nconst StyledButton = styled(SecondaryButton)`\n @media (max-width: ${breakpoints.portrait}) {\n width: 100%;\n margin-top: 0rem;\n }\n`;\n\nconst StyledLogo = styled(WhiteLogo)`\n @media (max-width: ${breakpoints.portrait}) {\n display: none;\n }\n`;\n\nexport default BannerShowcaseSignup;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { Banner } from \"components/Banner\";\nimport { useAuth } from \"hooks\";\nimport { margins } from \"style\";\n\n/**\n * BannerShowcasePage\n *\n * @param {String} textId\n * @param {Object} values\n * @param {String} marginSize\n */\nconst BannerShowcasePage = ({ textId, values, marginSize, ...props }) => {\n const { isClient, isShowcase } = useAuth();\n const isClientOrShowcase = isClient || isShowcase;\n\n if (!isClientOrShowcase) return null;\n\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n);\n\nconst styles = {\n container: css`\n display: flex;\n gap: 0;\n flex-wrap: nowrap;\n cursor: pointer;\n &:hover {\n > button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n > span {\n transform: translateX(-2.5rem);\n }\n }\n `,\n arrow: (disabled) => css`\n width: 5rem;\n height: 5rem;\n border-radius: 100%;\n background: ${disabled ? colors.grayAnatomyLight1 : colors.purpleRainBase};\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-duration: 0.3s;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n > * {\n transform: rotate(180deg);\n }\n `,\n button: (disabled) => css`\n height:5rem;\n padding: 0 2.5rem;\n rem;\n color:white;\n border:0;\n border-radius:2.5rem;\n background: ${disabled ? colors.grayAnatomyLight1 : colors.purpleRainBase};\n font-weight: 500;\n font-size: ${fontSize.small};\n transition-duration: .3s;\n transition-property: all;\n transition-timing-function: cubic-bezier(.4,0,.2,1);\n `,\n};\n\nMarketingButton.propTypes = {\n children: PropTypes.object,\n loading: PropTypes.bool,\n};\n\nexport default MarketingButton;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors } from \"style\";\n\n/**\n * MarketingButton\n *\n * @param {Object} children\n */\nconst MarketingButton = ({ children, ...props }) => (\n \n);\n\nconst styles = {\n button: css`\n height: 5rem;\n padding: 0 2.5rem;\n color: white;\n border: 0;\n border-radius: 2.5rem;\n color: ${colors.grayAnatomyDark};\n font-size: 1.5rem; // for consistency with website\n font-weight: 500;\n background: rgb(242, 243, 249);\n transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);\n position: relative;\n overflow: hidden;\n\n &:after {\n content: \"\";\n background-color: rgba(0, 0, 0, 0.02);\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transition-duration: 0.3s;\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n transform: translateY(100%);\n }\n\n &:hover:after {\n transform: translateY(0);\n }\n `,\n};\n\nMarketingButton.propTypes = {\n children: PropTypes.object,\n};\n\nexport default MarketingButton;\n","import React, { useState, useEffect } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useProfile, useAuth } from \"hooks\";\nimport { colors, fontSize } from \"style\";\nimport { MEMBER_STATUS, VETTING_STEPS } from \"constants/index\";\nimport { formatDate } from \"utils\";\nimport {\n CandidateSubmitButton,\n CandidateApproveButton,\n CandidateRejectButton,\n CandidateAssignmentSelector,\n} from \"components/Candidate\";\nimport { Col, Row } from \"components/Containers\";\nimport { ProfileStatusUpdateButton } from \"components/Profile\";\nimport { Toggle } from \"components/Form\";\nimport { TOGGLE_SIZE } from \"components/Form/Toggle\";\nimport Tooltip from \"components/Tooltip\";\nimport Progress from \"components/Progress\";\n\n/**\n * CandidateProgress\n *\n * @param {String} profileId\n * @param {Boolean} isAdmin\n * @param {Boolean} isActiveMember\n * @param {Boolean} isArchived\n */\nconst CandidateProgress = ({ profileId, isAdmin, isActiveMember, isArchived, ...props }) => {\n const { profileId: authProfileId, isRecruiter } = useAuth();\n const showApproveRejectButtons = isAdmin && !isActiveMember && !isArchived;\n const showStatusUpdateButton = isAdmin && !isActiveMember && !isArchived;\n\n const {\n isProfileComplete,\n isCodeChallengeComplete,\n isInterviewComplete,\n vettingConfiguration,\n updateProfile,\n data: profileData,\n loading: profileDataLoading,\n } = useProfile({ profileId });\n\n const updateVettingConfiguration = (step, value) => {\n const newVettingConfiguration = vettingConfiguration.map((config) => ({\n name: config.name,\n required: config.name === step ? value : config.required,\n }));\n\n updateProfile(profileId, { vettingConfiguration: newVettingConfiguration });\n };\n\n return (\n \n
\n )}\n {showStatusUpdateButton && \n
\n ),\n }}\n hasLink={isAdmin || !challengeCompleted}\n onClick={(event) => {\n event.stopPropagation();\n handleCodeChallengeClick(id, challengeResponse);\n }}\n status={{\n showIcon: challengeCompleted,\n success: challengePassed,\n fail: challengeFailed,\n }}\n />\n );\n }}\n {...props}\n />\n \n onEdit(initialValues, id)}>\n \n
\n);\n\n/**\n * AddSkillsLink\n *\n * @params {String} id\n * @params {Function} onEdit\n * @params {Object} initialValues\n */\nconst AddSkillsLink = ({ id, onEdit, initialValues }) => (\n \n
\n \n {missionRole?.name},\n mission: {missionRole?.mission?.name},\n }}\n />\n {showSkills && (\n <>\n {!data || data.length === 0 ? (\n
\n);\n\nconst AddSkillsLinkWithModal = withModalForm(AddSkillsLink, FORM_SETTINGS);\nconst AddSkillsWithModal = withModalForm(AddSkillsButton, FORM_SETTINGS);\n\nconst styles = {\n icon_container: (isComplete, isEmpty) => css`\n width: ${RENDER_SIZE.large};\n height: ${RENDER_SIZE.large};\n background: ${colors.grayAnatomyLight5};\n color: ${isComplete ? colors.blueVelvetBase : !isEmpty ? colors.orangeCountyBase : colors.grayAnatomyLight2};\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n position: relative;\n `,\n item_name: (isComplete) => css`\n color: ${isComplete ? colors.purpleRainDark2 : colors.grayAnatomyLight1};\n font-weight: ${isComplete ? `500` : `400`};\n `,\n success: css`\n width: 3rem;\n height: 3rem;\n border: 3px #fff solid;\n background: ${colors.blueVelvetBase};\n position: absolute;\n bottom: -3px;\n right: -3px;\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n add_skills: css`\n color: ${colors.purpleRainDark2};\n font-size: ${fontSize.small};\n line-height: 1.5;\n line-height: 1.5;\n background: ${colors.purpleRainLight5};\n padding: 1.5rem 3rem;\n margin-bottom: 1rem;\n border-radius: 0.5rem;\n text-align: center;\n `,\n add_skills_container: css`\n margin-bottom: 2rem;\n margin-top: 2rem;\n `,\n skills_container: css`\n margin-top: 1rem;\n display: flex;\n align-items: center;\n gap: 2rem;\n `,\n};\n\nAddSkillsLink.propTypes = {\n id: PropTypes.string,\n onEdit: PropTypes.func,\n initialValues: PropTypes.object,\n};\n\nAddSkillsButton.propTypes = {\n id: PropTypes.string,\n onEdit: PropTypes.func,\n initialValues: PropTypes.object,\n};\n\nDescription.propTypes = {\n data: PropTypes.array,\n profileId: PropTypes.string,\n showSkills: PropTypes.bool,\n missionRole: PropTypes.object,\n};\n\nDescription.defaultProps = {\n missionRole: null,\n};\n\nCandidateCodeChallenge.defaultProps = {\n showSkills: true,\n resultsPerPage: 2,\n};\n\nCandidateCodeChallenge.propTypes = {\n profileId: PropTypes.string,\n role: PropTypes.object,\n isAdmin: PropTypes.bool,\n subtitle: PropTypes.element,\n showSkills: PropTypes.bool,\n challengeIds: PropTypes.array,\n resultsPerPage: PropTypes.number,\n};\n\nexport default CandidateCodeChallenge;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { H1 } from \"components/Text\";\nimport { useProfile } from \"hooks\";\nimport { breakpoints, fontSize, margins } from \"style\";\nimport { TextLoader } from \"components/Loader\";\nimport { Col } from \"components/Containers\";\n\n/**\n * CandidateTitle\n *\n * @param {String} title\n * @param {String} description\n * @param {Object} values\n * @param {String} profileId\n */\nconst CandidateTitle = ({ title, description, values, profileId }) => {\n const { data, loading } = useProfile({ profileId });\n\n return (\n \n
\n )}\n \n )}\n \n
\n {loading ? \n
\n );\n\n /**\n * Manually rejected by admin\n */\n } else if (!status || status === MEMBER_STATUS.rejected) {\n return (\n \n \n
\n ),\n }}\n />\n \n );\n } else {\n return (\n \n
\n \n
\n {rejectedDescription && (\n <>\n \n
\n {rejectedDescription}
\n \n )}\n \n
\n \n
\n \n
\n \n
\n \n \n
\n )}\n \n \n \n
\n \n );\n};\n\nconst ROWS = ({ archivedAt, archivedBy }, archivedReason) => [\n {\n label: \n
\n ),\n }}\n />\n ),\n }}\n hasLink={true}\n />\n )}\n />\n \n
\n);\n\nconst styles = {\n title: css`\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 1rem;\n `,\n time: css`\n font-weight: 300;\n color: ${colors.grayAnatomyLight6};\n font-size: ${fontSize.xsmall};\n `,\n};\n\nCardPostTitle.propTypes = {\n user: PropTypes.object.isRequired,\n date: PropTypes.string,\n};\n\nexport default CardPostTitle;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Grid } from \"components/Containers\";\nimport { Paginate } from \"components/Pagination\";\nimport Card from \"components/Card\";\nimport { MessagesNoResults } from \"components/Messages\";\n\n/**\n * CardList\n *\n * @description Displays a list of cards with pagination, loading and empty message\n *\n * @param {Array} data\n * @param {Boolean} loading\n * @param {Number} cols\n * @param {Function} renderer\n * @param {Number} resultsPerPage\n * @param {Boolean} paginate\n * @param {Object} rendererProps\n * @param {Object} messageProps\n * @param {Object} paginationProps\n * @param {Node} children\n */\nconst CardList = ({\n data,\n loading,\n cols,\n renderer,\n resultsPerPage,\n paginate,\n rendererProps,\n messageProps,\n paginationProps,\n children,\n ...props\n}) => {\n const [isEmpty, setIsEmpty] = useState(false);\n const [hasItems, setHasItems] = useState(false);\n const RendererComponent = renderer;\n\n useEffect(() => {\n setIsEmpty(!loading && (!data || data.length === 0));\n setHasItems(data && data.length > 0);\n }, [data, loading]);\n\n return (\n \n \n {type === SPARKLINE_TYPES.curve ? (\n \n
\n );\n};\n\nconst SPARKLINE_TYPES = {\n line: \"line\",\n curve: \"curve\",\n bars: \"bars\",\n};\n\nconst LoadingSparkline = ({ data, ...props }) => (\n \n \n \n
\n);\n\nconst ErrorMessage = () => (\n \n
\n);\n\nconst styles = {\n container: css`\n position: relative;\n `,\n overlay: css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: ${fontSize.medium};\n color: ${colors.purpleRainDark2};\n `,\n};\n\nSparkLine.propTypes = {\n data: PropTypes.array,\n type: PropTypes.oneOf(Object.values(SPARKLINE_TYPES)),\n loading: PropTypes.bool,\n strokeWidth: PropTypes.number,\n fill: PropTypes.string,\n};\n\nLoadingSparkline.propTypes = {\n data: PropTypes.array,\n};\n\nSparkLine.defaultProps = {\n type: SPARKLINE_TYPES.curve,\n strokeWidth: 1,\n fill: colors.purpleRainLight6,\n};\n\nexport { SPARKLINE_TYPES };\n\nexport default SparkLine;\n","import React, { useLayoutEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport * as am5 from \"@amcharts/amcharts5\";\nimport * as am5xy from \"@amcharts/amcharts5/xy\";\nimport am5themes_Animated from \"@amcharts/amcharts5/themes/Animated\";\nimport { chart_colors, colors } from \"style\";\nimport { initializeAmCharts } from \"utils\";\nimport { Spinner } from \"components/Loader\";\nimport { MessagesError, MessagesNoResults } from \"components/Messages\";\n\n/**\n * HorizontalBar\n *\n * @param {Array} data\n * @param {Boolean} loading\n * @param {String} error\n * @param {String} height\n */\nconst HorizontalBar = ({ data, error, loading, height, ...props }) => {\n const [rootId] = useState(`horizontal-bar-${Math.random()}`);\n\n useLayoutEffect(() => {\n if (!data?.data || loading) return;\n\n initializeAmCharts();\n\n let root = am5.Root.new(rootId);\n let customTheme = am5.Theme.new(root);\n\n customTheme.rule(\"AxisLabel\", [\"minor\"]).setAll({\n fill: am5.color(0xff0000),\n fontSize: 11,\n });\n\n customTheme.rule(\"Label\").setAll({\n fontFamily: \"Matter\",\n fill: am5.color(colors.grayAnatomyBase),\n fontSize: 11,\n paddingTop: 10,\n });\n\n root.setThemes([am5themes_Animated.new(root), customTheme]);\n\n // create chart\n let chart = root.container.children.push(\n am5xy.XYChart.new(root, {\n wheelX: \"none\",\n wheelY: \"none\",\n panX: false,\n panY: false,\n layout: root.verticalLayout,\n paddingRight: 10,\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: 5,\n })\n );\n\n chart.zoomOutButton.set(\"forceHidden\", true);\n\n chart.children.unshift(\n am5.Label.new(root, {\n visible: false,\n })\n );\n\n var yRenderer = am5xy.AxisRendererY.new(root, {\n inversed: true,\n cellStartLocation: 0.1,\n cellEndLocation: 0.9,\n minorGridEnabled: true,\n });\n\n yRenderer.grid.template.set(\"visible\", false);\n\n // create axes\n let yAxis = chart.yAxes.push(\n am5xy.CategoryAxis.new(root, {\n categoryField: \"name\",\n visible: false,\n renderer: yRenderer,\n })\n );\n\n yAxis.data.setAll(data?.data);\n\n var xRenderer = am5xy.AxisRendererX.new(root, {\n strokeOpacity: 0,\n minGridDistance: 50,\n });\n\n xRenderer.grid.template.set(\"strokeDasharray\", [3]);\n\n let xAxis = chart.xAxes.push(\n am5xy.ValueAxis.new(root, {\n renderer: xRenderer,\n min: 0,\n })\n );\n\n function createSeries(field, name) {\n let series = chart.series.push(\n am5xy.ColumnSeries.new(root, {\n name: name,\n xAxis: xAxis,\n yAxis: yAxis,\n valueXField: field,\n valueYField: \"label\",\n categoryYField: \"name\",\n sequencedInterpolation: true,\n tooltip: am5.Tooltip.new(root, {\n autoTextColor: true,\n labelHTML: `{tooltip} {valueY}
`,\n }),\n })\n );\n\n series.columns.template.setAll({\n fillOpacity: 1.0,\n strokeWidth: 0,\n strokeOpacity: 0,\n cornerRadiusTR: 5,\n cornerRadiusBR: 5,\n height: 30,\n });\n\n series.bullets.push(function () {\n return am5.Bullet.new(root, {\n locationX: 0,\n locationY: 0.5,\n sprite: am5.Label.new(root, {\n centerX: am5.p0,\n centerY: am5.p50,\n autoTextColor: true,\n fill: am5.color(0x000000),\n text: `{name}`,\n textAlign: \"left\",\n populateText: true,\n }),\n });\n });\n\n series.columns.template.adapters.add(\n \"fill\",\n (fill, target) => chart_colors.sequential_light[series.columns.indexOf(target)]\n );\n series.data.setAll(data?.data);\n series.appear();\n\n return series;\n }\n\n createSeries(data?.seriesField, data?.seriesName);\n\n // add cursor\n let cursor = chart.set(\n \"cursor\",\n am5xy.XYCursor.new(root, {\n behavior: \"none\",\n })\n );\n\n cursor.lineY.set(\"forceHidden\", true);\n cursor.lineX.set(\"forceHidden\", true);\n chart.appear(1000, 100);\n\n return () => {\n root.dispose();\n };\n }, [data, loading, rootId]);\n\n return (\n \n
\n \n
\n {!isLoading && \n {isMe ? (\n
\n \n
\n )}\n \n {content}\n {isLoading &&
\n {formatDateFromNow(createdAt)}
}\n \n );\n};\n\nconst Logo = styled(Image)`\n width: 2rem;\n`;\n\nconst styles = {\n container: (isMe) => css`\n display: flex;\n padding: 0 2rem;\n gap: 1rem;\n font-size: ${fontSize.small};\n line-height: 1.5rem;\n align-items: flex-end;\n max-width: 80%;\n\n ${isMe &&\n css`\n flex-direction: row-reverse;\n align-items: flex-end;\n margin-left: auto;\n margin-right: 0;\n `}\n `,\n system_pic: css`\n width: 3rem;\n height: 3rem;\n border-radius: 100%;\n background: ${colors.black};\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n pic: css`\n position: relative;\n top: 1.5rem;\n `,\n text: (isMe) => css`\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-top: 0.5rem;\n line-height: normal;\n color: ${isMe ? colors.white : colors.grayAnatomyBase};\n background: ${isMe ? colors.blueVelvetBase : colors.grayAnatomyLight4};\n font-weight: ${isMe ? 600 : 400};\n padding: 2rem;\n border-radius: ${isMe ? `2rem 2rem 0rem 2rem` : `2rem 2rem 2rem 0`};\n white-space: pre-line;\n `,\n time: css`\n display: flex;\n align-items: center;\n gap: 0.25rem;\n font-size: ${fontSize.xxsmall};\n color: ${colors.grayAnatomyLight1};\n justify-content: center;\n text-align: center;\n margin: 0.5rem 0;\n `,\n};\n\nChatMessage.propTypes = {\n content: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n profile: PropTypes.object.isRequired,\n role: PropTypes.string.isRequired,\n isLoading: PropTypes.bool,\n};\n\nexport default ChatMessage;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\n\n/**\n * ChatHeader\n *\n * @param {function} onClose\n */\nconst ChatHeader = ({ onClose, ...props }) => (\n \n Conversation\n
\n);\n\nconst styles = {\n container: css`\n font-weight: 600;\n height: 6rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 2rem;\n font-size: ${fontSize.medium};\n border-bottom: 1px ${colors.grayAnatomyLight4} solid;\n `,\n};\n\nChatHeader.propTypes = {\n onClose: PropTypes.func.isRequired,\n};\n\nexport default ChatHeader;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { colors } from \"style\";\nimport { PostButton } from \"components/Buttons\";\nimport TextInput from \"components/Form/TextInput\";\n\n/**\n * ChatInput\n *\n * @param {Function} onSubmit\n */\nconst ChatInput = ({ onSubmit, ...props }) => {\n const [value, setValue] = useState(\"\");\n const [isFocused, setIsFocused] = useState(false);\n\n const handleSubmit = (event) => {\n event.preventDefault();\n onSubmit(value);\n setValue(\"\");\n return false;\n };\n\n return (\n \n );\n};\n\nconst styles = {\n form: css`\n margin-top: auto;\n `,\n container: (isFocused) => css`\n background: ${isFocused ? colors.grayAnatomyLight7 : colors.white};\n border-top: 1px ${colors.grayAnatomyLight4} solid;\n padding: 2rem 2rem 2rem 2rem;\n display: flex;\n gap: 1rem;\n align-items: center;\n justify-content: flex-end;\n margin-top: auto;\n `,\n input: css`\n margin-right: auto;\n color: ${colors.grayAnatomyLight1};\n flex: 1;\n `,\n};\n\nconst StyledTextArea = styled(TextInput)`\n background: none;\n padding: 0;\n border: 0;\n margin: 0;\n height: auto;\n min-height: 4rem;\n height: 4rem;\n appearance: none !important;\n outline: none !important;\n width: 100%;\n line-height: auto;\n\n &:focus {\n box-shadow: none;\n border: 0;\n }\n`;\n\nChatInput.propTypes = {\n onSubmit: PropTypes.func.isRequired,\n};\n\nexport default ChatInput;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport { colors } from \"style\";\nimport MissionLogo from \"assets/images/white-mission-logo.png\";\nimport Image from \"components/Image\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\n\n/**\n * ChatIcon\n *\n * @param {Function} onClick\n * @param {Boolean} isOpen\n */\nconst ChatIcon = ({ onClick, isOpen, ...props }) => (\n \n
\n \n
\n);\n\nconst styles = {\n container: css`\n margin-left: ${margins.normal};\n `,\n title: css`\n font-size: ${fontSize.xxlarge};\n font-weight: 700;\n `,\n body: css`\n margin-top: 1rem;\n font-size: ${fontSize.medium};\n color: ${colors.grayAnatomyLight1};\n line-height: 1.5;\n `,\n};\n\nSignupComplete.propTypes = {\n formData: PropTypes.object.isRequired,\n};\n\nexport default SignupComplete;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport Form, { SIZE, TYPE } from \"components/Form\";\nimport { GET_INDUSTRIES } from \"graphql/queries\";\nimport { margins } from \"style\";\n\n/**\n * CompanyDetailForm\n *\n * @params {Object} values\n */\nconst CompanyDetailForm = ({ values, ...props }) => {\n const [initialValues] = useState(values);\n\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n ),\n width: \"15%\",\n },\n {\n label: \n \n
\n\n \n \n
\n \n }\n onCompleted={handleComplete}\n onError={handleError}\n footer={\n \n
\n \n
\n {props.children}
;\n\nDiv.propTypes = {\n children: PropTypes.arrayOf(PropTypes.node),\n};\n\nexport default Div;\n","import React, { useLayoutEffect, useState, useEffect, useRef } from 'react';\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage, defineMessages, injectIntl } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport * as am5 from \"@amcharts/amcharts5\";\nimport * as am5xy from \"@amcharts/amcharts5/xy\";\nimport am5themes_Animated from \"@amcharts/amcharts5/themes/Animated\";\nimport am5themes_Dark from \"@amcharts/amcharts5/themes/Dark\";\nimport { colors, fontSize } from \"style\";\nimport { H3 } from \"components/Text\";\nimport { Row } from \"components/Containers\";\nimport Tabs from \"components/Tabs\";\nimport { TagTicker } from \"components/Tags\";\nimport { useTeamHistoricalScores, useTeamScores } from \"hooks\";\nimport { TEAM_CATEGORY_SCORES } from \"constants/index\";\nimport { DashboardTitle } from \"components/Dashboard\";\nimport { Spinner } from \"components/Loader\";\nimport { formatNumber } from \"utils\";\n\n/**\n * DashboardChart\n *\n * @params {Object} intl\n * @params {String} teamId\n * @params {String} profileId\n */\nconst DashboardChart = ({ intl, teamId, profileId, ...props }) => {\n const chartRef = useRef(null);\n const { formatMessage } = intl;\n const seriesRef = Object.keys(TEAM_CATEGORY_SCORES).map(() => useRef(null));\n const { data: dataStore, loading, error } = useTeamHistoricalScores({ teamId })\n const { data: teamScores, loading: loadingTeamScores } = useTeamScores(teamId);\n const [formattedData, setFormattedData] = useState([]);\n const [selectedTab, setSelectedTab] = useState(0);\n const tabs = Object.values(TEAM_CATEGORY_SCORES).map((item) => (\n \n
\n \n {loading ? (\n
\n \n {isScorePositive && scoreBreakdown ? (\n \n
\n \n
\n \n );\n};\n\nconst TABLE_DATA = (data) => [\n {\n label: \n \n {loading ?
\n
\n );\n};\n\nconst styles = {\n container: (cursorType) => css`\n padding: 1rem 0rem 0rem 0rem;\n text-align: left;\n font-size: ${fontSize.xxsmall};\n flex: 1;\n border-right: 1px ${colors.grayAnatomyLight5} solid;\n cursor: ${cursorType};\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n border-right: none;\n padding-right: 0;\n }\n\n &:hover {\n .title {\n text-decoration: underline;\n }\n }\n `,\n title: css`\n font-weight: 500;\n font-size: ${fontSize.small};\n color: ${colors.grayAnatomyLight1};\n margin-bottom: 1rem;\n `,\n footer: css`\n margin-top: 0.5rem;\n `,\n score: css`\n font-size: ${fontSize.small};\n font-weight: 400;\n gap: 0.25rem;\n `,\n};\n\nMetricsCard.propTypes = {\n score: PropTypes.number,\n scoreDeltaPercent: PropTypes.number,\n sparkline: PropTypes.array,\n onClick: PropTypes.func,\n decimalsUpto: PropTypes.number,\n loading: PropTypes.bool,\n category: PropTypes.string,\n isSignalClient: PropTypes.bool,\n};\n\nMetricsCard.defaultProps = {\n decimalsUpto: 2,\n comingSoon: false,\n};\n\n/**\n * MetricCardTitle\n *\n * @param {Object} titleValues\n * @param {String} category\n * @param {Boolean} isSignalClient\n */\nconst MetricCardTitle = ({ titleValues, category, isSignalClient, ...props }) => {\n const userType = isSignalClient ? \"SignalClient\" : \"default\";\n\n if (!textSettings[userType]?.[category]) return null;\n\n const tooltipId = textSettings[userType]?.[category]?.tooltip;\n\n const textWithTooltip = tooltipId ? (\n \n
\n 0)} {...props}>\n = 0 ? `Improved` : `Declined`}`} />}\n
\n );\n};\n\nconst styles = {\n container: (isPositive) => css`\n font-weight: 500;\n color: ${isPositive ? colors.green : colors.red};\n font-size: ${fontSize.xxxsmall};\n gap: 0.35rem;\n display: flex;\n align-items: center;\n border-radius: 1rem;\n padding: 0.1rem 0.75rem 0.2rem 0.35rem;\n position: relative;\n `,\n icon_trend: (isPositive) => css`\n position: relative;\n transform: rotate(${isPositive ? `-45deg` : `45deg`});\n background: ${isPositive ? colors.green : colors.red};\n border-radius: 100%;\n width: 1.6rem;\n height: 1.6rem;\n\n > * {\n top: 0px !important;\n }\n `,\n};\n\nTrendTicker.propTypes = {\n trend: PropTypes.number,\n hideText: PropTypes.bool,\n};\n\nexport default TrendTicker;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { SQUAD_METRIC_TYPES } from \"constants/index\";\nimport { MetricsCell } from \"components/Dashboard\";\nimport { useTeamMetricsScores } from \"hooks\";\n\n/**\n * SquadMetrics\n *\n * @param {String} teamId\n */\nconst SquadMetricsActivity = ({ teamId, ...props }) => {\n const { data } = useTeamMetricsScores({ teamId });\n\n return (\n 0)}>\n
\n {!hideText && {organization?.name}
\n\n {!profileLoading ? (\n
\n {footerData?.label}
\n \n
\n);\n\nconst styles = {\n disclaimer: css`\n color: ${colors.grayAnatomyLight1};\n font-size: ${fontSize.small};\n max-width: 50rem;\n margin: 0 auto;\n line-height: 2rem;\n text-align: center;\n `,\n};\n\nexport default Disclaimer;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport { StatusIcon, ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { PrimaryLink } from \"components/Links\";\nimport { TextLoader } from \"components/Loader\";\n\n/**\n * RenderIconWithText\n *\n * @param {Element} icon\n * @param {Object} text\n * @param {String} size\n * @param {Boolean} isComplete\n * @param {Object} status\n * @param {Boolean} hasLink\n * @param {Function} onClick\n * @param {Function} loading\n *\n * Example Usage\n *\n hasLink && onClick?.(...args)} {...props}>\n
\n );\n};\n\n/**\n * Placeholder\n *\n * @param {String} size\n */\nconst Placeholder = ({ size, ...props }) => (\n \n
\n \n hasLink && onClick?.(...args)} />\n ) : null}\n
\n {details && (\n \n {details}\n
\n )}\n \n
\n);\n\nPlaceholder.propTypes = {\n size: PropTypes.string,\n};\n\n/**\n * MoreLink\n *\n * @param {Any} link\n * @param {Function} onClick\n */\nconst MoreLink = ({ link, onClick }) => (\n \n
\n \n
\n \n
\n \n
\n);\n\nMoreLink.propTypes = {\n link: PropTypes.any,\n onClick: PropTypes.func,\n};\n\n/**\n * Text\n *\n * @param {Any} title\n * @param {Any} description\n * @param {String} size\n */\nconst Text = ({ title, description, size }) => (\n \n {link && (\n \n {link}\n \n )}\n
\n \n
\n);\n\nText.propTypes = {\n title: PropTypes.any,\n description: PropTypes.any,\n size: PropTypes.string,\n};\n\n/**\n * Message\n *\n * @param {Any} message\n * @param {Object} status\n * @param {Boolexan} hasLink\n */\nconst Message = ({ message, status, hasLink }) => (\n {title}
\n {description && {description}
}\n \n
\n);\n\nMessage.propTypes = {\n message: PropTypes.any,\n status: PropTypes.object,\n hasLink: PropTypes.bool,\n};\n\n/**\n * IconContainer\n *\n * @param {Element} icon\n * @param {String} size\n * @param {Object} status\n */\nconst IconContainer = ({ icon, size, status }) => (\n \n \n {hasLink ?
\n \n {icon}\n {status?.showIcon && (\n
\n);\n\nIconContainer.propTypes = {\n icon: PropTypes.element,\n size: PropTypes.string,\n status: PropTypes.object,\n};\n\nconst styles = {\n container: (hasLink) => css`\n display: flex;\n align-items: center;\n width: 100%;\n color: ${colors.purpleRainDark2};\n transition: all 0.3s ease;\n cursor: ${hasLink ? `pointer` : `inherit`};\n\n &:hover {\n color: ${hasLink && colors.purpleRainBase};\n }\n\n &:last-of-type .text-container {\n border-bottom-width: 0;\n }\n `,\n icon_container: (size) => css`\n width: ${size};\n height: ${size};\n background: ${colors.grayAnatomyLight4};\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n `,\n text_container: css`\n border-bottom: 1px ${colors.grayAnatomyLight4} solid;\n width: 100%;\n height: 100%;\n margin-left: 1.5rem;\n display: flex;\n `,\n details: css`\n margin-left: auto;\n text-align: right;\n margin-left: auto;\n line-height: 1.4;\n border-bottom: 1px ${colors.grayAnatomyLight4} solid;\n height: 100%;\n padding: 1.25rem 0 1.25rem 1rem;\n font-size: ${fontSize.small};\n display: flex;\n flex-direction: column;\n justify-content: center;\n white-space: nowrap;\n `,\n text: (size) => css`\n width: 100%;\n min-height: ${size};\n padding: 1rem 0;\n box-sizing: content-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n `,\n title: css`\n font-size: ${fontSize.small};\n font-family: Matter;\n font-weight: 600;\n line-height: 1.25;\n `,\n description: css`\n color: ${colors.purpleRainLight4};\n font-weight: 400;\n font-size: ${fontSize.xsmall};\n line-height: normal;\n `,\n text_success: css`\n color: ${colors.green};\n `,\n text_fail: css`\n color: ${colors.red};\n `,\n end_text_container: css`\n white-space: nowrap;\n padding-right: 0.5rem;\n font-size: ${fontSize.small};\n font-weight: 600;\n padding-left: 1rem;\n `,\n end_container: (hasLink) => css`\n margin-left: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${hasLink ? colors.purpleRainBase : colors.grayAnatomyLight2};\n cursor: ${hasLink ? `pointer` : `auto`};\n font-size: ${fontSize.small};\n `,\n status_icon_container: css`\n width: 3rem;\n height: 3rem;\n border: 3px #fff solid;\n position: absolute;\n bottom: -3px;\n right: -3px;\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n};\n\nconst RENDER_SIZE = {\n xsmall: `2.4rem`,\n small: `3.2rem`,\n large: `6rem`,\n xlarge: `9.5rem`,\n};\n\nRenderIconWithText.propTypes = {\n icon: PropTypes.element.isRequired,\n text: PropTypes.object.isRequired,\n size: PropTypes.string,\n status: PropTypes.object,\n hasLink: PropTypes.bool,\n onClick: PropTypes.func,\n loading: PropTypes.bool,\n};\n\nRenderIconWithText.defaultProps = {\n height: RENDER_SIZE.small,\n hasLink: true,\n text: {},\n};\n\nexport { RENDER_SIZE };\n\nexport default RenderIconWithText;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { colors, fontSize } from \"style\";\nimport { UserPhotoList } from \"components/User\";\nimport { TextLoader } from \"components/Loader\";\nimport { PrimaryLink } from \"components/Links\";\nimport { useAuth } from \"hooks\";\nimport { LINKS } from \"constants\";\n\n/**\n * Shows a list with X thumbs on each row\n *\n * @params {String} title\n * @params {String} subtitle\n * @params {Array} users\n * @params {Boolean} loading\n * @params {String} linkTo\n */\nconst RenderMemberList = ({ title, subtitle, users, loading, linkTo, ...props }) => {\n const { isPartner } = useAuth();\n\n if (loading) {\n return \n
\n )}\n \n
\n );\n};\n\n/**\n * Placeholder\n *\n */\nconst Placeholder = () => (\n \n
\n \n \n {title}\n \n
\n {subtitle}
\n \n
\n);\n\nconst styles = {\n container: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem 0 1.25rem 0;\n min-height: 4rem;\n box-sizing: content-box;\n border-bottom: 1px solid ${colors.grayAnatomyLight4};\n\n &:first-of-type {\n margin-top: -1rem;\n }\n\n &:last-of-type {\n border-bottom-width: 0 !important;\n }\n `,\n title: css`\n font-size: ${fontSize.small};\n font-weight: 600;\n margin-bottom: 0.4rem;\n padding-right: 1.5rem;\n `,\n subtitle: css`\n color: ${colors.purpleRainLight4};\n font-weight: 400;\n font-size: ${fontSize.xsmall};\n margin-top: 0.5rem;\n padding-right: 1.5rem;\n `,\n};\n\nRenderMemberList.propTypes = {\n title: PropTypes.any,\n subtitle: PropTypes.any,\n users: PropTypes.array,\n loading: PropTypes.bool,\n linkTo: PropTypes.string,\n thumbSize: PropTypes.string,\n};\n\nexport default RenderMemberList;\n","import React, { Suspense, lazy } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { useAuth } from \"hooks\";\nimport { RENDER_SIZE, RenderIconWithText } from \"components/DisplayBox\";\nimport { LINKS } from \"constants/index\";\nimport { UserPhoto, UserArchetype, UserLocation } from \"components/User\";\nimport { Col, Row } from \"components/Containers\";\nimport { colors } from \"style\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\nimport { formatCurrency, formatNumber } from \"utils\";\nimport { PrimaryLink } from \"components/Links\";\nimport { Link } from \"components/Links\";\n\n// TODO - Using conventional import like above causes an error and the app to crash.\n// Lazy loading the ProfileLink component fixes the issue. Investigate why this is happening. - Asad\nconst ProfileLink = lazy(() => import(\"components/Profile/ProfileLink\"));\n\n/**\n * RenderMemberList\n *\n * @param {Array} data\n * @param {Object} team\n * @param {Boolean} loading\n * @param {Boolean} hideArchetype\n * @param {Boolean} hideAvailability\n * @param {Boolean} hideTime\n * @param {Boolean} hideRate\n * @param {Boolean} hidePerformance\n * @param {Boolean} disableLink\n * @param {Function} onClick\n * @param {String} userHandle\n */\nconst RenderMemberList = ({\n data,\n team,\n loading,\n hideArchetype,\n hideAvailability,\n hideTime,\n hideRate,\n hidePerformance,\n disableLink,\n onClick,\n userHandle,\n ...props\n}) => {\n const { isAdmin } = useAuth();\n const isProfileOverlayEnabled = isAdmin || disableLink;\n const {\n isOnline,\n nextAvailability,\n currentTime,\n archetype,\n countryFlag,\n location,\n oldLocation,\n averageCapacity,\n sellingCurrency,\n sellingAmount,\n termSheetType,\n uuid,\n } = data;\n\n const handleClick = () => {\n if (disableLink) return;\n else if (onClick) {\n return onClick(data);\n } else {\n window.open(LINKS.public_profile(uuid, \"_blank\"));\n }\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n ),\n details: (\n <>\n \n
\n )}\n {userHandle && (\n \n @{userHandle}\n \n )}\n {(location || oldLocation) && \n {(nextAvailability || nextAvailability === 0) && (\n
\n )}\n \n \n \n 23 ? `Days` : `Hours`}`}\n values={{\n currentTime,\n hours: nextAvailability,\n days: Math.floor(nextAvailability / 24),\n type: isOnline ? `Offline` : `Online`,\n }}\n />\n {currentTime && !hideTime && (\n
\n
\n )}\n \n
\n )}\n {title}
}\n {subtitle}\n {showHeaderAddLink && (\n\n
\n));\n\nconst styles = {\n menu: css`\n background: #fff;\n box-shadow: 0 1px 6px 0 rgba(85, 76, 197, 0.16);\n border-radius: 0.6rem;\n margin-top: 1rem;\n border: 0;\n `,\n list: css`\n margin-bottom: 0;\n `,\n};\n\nCustomMenu.displayName = \"CustomMenu\";\n\nCustomMenu.propTypes = {\n children: PropTypes.node.isRequired,\n onClick: PropTypes.func,\n className: PropTypes.string,\n style: PropTypes.object,\n \"aria-labelledby\": PropTypes.string,\n};\n\nDropDownMenu.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default DropDownMenu;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport PropTypes from \"prop-types\";\nimport Dropdown from \"react-bootstrap/Dropdown\";\n\n/**\n * DropDownItem\n *\n * @params {Element} children\n */\nconst DropDownItem = ({ children, ...props }) => (\n - \n {children}\n
\n {children}\n
\n);\n\nconst styles = {\n dropdown_item: (isDisabled) => css`\n height: 4rem;\n padding: 1rem 1.5rem;\n box-sizing: border-box;\n font-size: ${fontSize.xsmall};\n color: ${colors.purpleRainDark2};\n font-weight: 500;\n display: flex;\n align-items: center;\n cursor: pointer;\n min-width: 19rem;\n display: flex;\n gap: 0.5rem;\n ${isDisabled && `opacity: 0.5;`}\n ${isDisabled && `cursor: not-allowed;`}\n\n > * + * {\n margin-left: 0.8rem;\n }\n\n &:hover {\n background: ${colors.grayAnatomyLight5};\n }\n `,\n};\n\nCustomItem.propTypes = {\n children: PropTypes.node.isRequired,\n onClick: PropTypes.func,\n isDisabled: PropTypes.bool,\n};\n\nDropDownItem.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nCustomItem.displayName = \"CustomItem\";\n\nexport default DropDownItem;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Dropdown from \"react-bootstrap/Dropdown\";\n\n/**\n * DropDownToggle\n *\n * @params {Array} options\n */\nconst DropDownToggle = ({ children, ...props }) => \n
\n )}\n \n);\n\nEventDetailsModal.propTypes = {\n show: PropTypes.bool,\n onClose: PropTypes.func,\n data: PropTypes.object,\n};\n\nconst styles = {\n container: css`\n display: flex;\n gap: 4rem;\n `,\n event_image: css`\n width: 12.8rem;\n height: 12.8rem;\n border-radius: 100%;\n object-fit: cover;\n object-position: center;\n `,\n time_stamp: css`\n font-size: ${fontSize.medium};\n font-weight: 500;\n line-height: 1.33;\n margin: 0.8rem 0;\n `,\n event_link: css`\n font-size: ${fontSize.small};\n font-weight: 500;\n line-height: 1.71;\n color: ${colors.grayAnatomyBase};\n `,\n description: css`\n margin-top: 2.4rem;\n font-size: ${fontSize.small};\n line-height: 1.71;\n `,\n};\n\nexport default EventDetailsModal;\n","import React, { useEffect, useState } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useToast, MUTATION_TYPE } from \"hooks\";\nimport { convertUrlToFileObject } from \"utils\";\nimport { DECORATORS, SIZE, TYPE } from \"components/Form\";\nimport { ModalForm, MODAL_SIZE } from \"components/Modal\";\nimport { GET_EVENTS, GET_TIME_ZONES } from \"graphql/queries\";\nimport { ICON_TYPE, ICON_SIZE, ICON_POSITION } from \"components/Icon\";\nimport { ADD_MISSION_EVENT, UPDATE_MISSION_EVENT } from \"graphql/mutations\";\n\n/**\n * Event Form\n *\n * @param {Boolean} show\n * @param {Function} onClose\n * @param {Object} data\n * @param {Boolean} loading\n * @param {Boolean} isEditing\n */\nconst EventForm = ({ show, onClose, data, loading, isEditing }) => {\n const { toast } = useToast();\n const [image, setImage] = useState();\n\n if (isEditing && loading) return null;\n\n useEffect(() => {\n if (data?.displayImageUrl && data?.fileName) {\n convertUrlToFileObject(data?.displayImageUrl, data?.fileName).then((res) => {\n setImage(res);\n });\n }\n }, [data?.displayImageUrl, data?.fileName]);\n\n const handleComplete = () => {\n onClose();\n toast.success(\n
\n \n {\n
\n \n {data.recordingLink ? (\n <>\n
\n {data.description}
\n \n \n \n \n
\n ),\n },\n];\n\nMissionEventList.propTypes = {\n resultsPerPage: PropTypes.number,\n};\n\nMissionEventList.defaultProps = {\n resultsPerPage: 10,\n};\n\nexport default MissionEventList;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\nimport PropTypes from \"prop-types\";\n\n/**\n * Formats the checkbox to accept a boolean for value\n *\n * @param {Function} onChange\n * @param {Boolean} value\n * @param {String} label\n * @param {String} name\n * @param {String} description\n * @param {Boolean} disabled\n * @param {Boolean} noWrap\n */\nconst CheckBoxInputWithOnChange = ({ onChange, value, label, name, description, disabled, noWrap, ...props }) => {\n const handleChange = (e) => {\n if (onChange) {\n onChange(name, e.target.checked);\n }\n };\n const ranInt = Math.floor(Math.random() * 100);\n const formItemId = `label-${name}-${ranInt}`;\n\n if (label) {\n return (\n \n \n
\n \n \n {description && (\n \n )}\n
\n \n );\n } else {\n return (\n \n \n enableDateRange || enableWeekRangePicker || enableMonthRangePicker\n ? handleRangeChange(update)\n : handleChange(update)\n }\n dateFormat={format}\n name={name}\n required={required}\n scrollableYearDropdown={true}\n showYearDropdown={true}\n isClearable={isClearable}\n dayClassName={(date) => {\n isSameISOWeek(date, startDate) ? \"react-datepicker__day--selected\" : \"\";\n }}\n onFocus={() => setFocus(true)}\n onBlur={() => setFocus(false)}\n onCalendarOpen={onFocus}\n onCalendarClose={onBlur}\n popperContainer={(popperProps) => {\n const { ref, ...otherProps } = popperProps;\n datepickerRef.current = ref; // Store a reference to the date-picker element\n handleDatepickerRendered(); // Call the function to add the class to the days incase of week picker\n return ;\n }}\n {...(enableDateRange && {\n selectsRange: true,\n startDate: startDate,\n endDate: endDate,\n })}\n {...(enableWeekPicker &&\n startDate && {\n value: `Week of ${formatDate(startDate, \"DD MMM YYYY\")}`,\n })}\n {...(enableWeekRangePicker && {\n selectsRange: true,\n startDate: startDate,\n endDate: endDate,\n locale: \"en-gb\",\n value: `${startDate ? formatDate(startDate, \"DD MMM YY\") : \"\"} - ${\n endDate ? formatDate(endDate, \"DD MMM YY\") : \"\"\n }`,\n })}\n {...(enableMonthRangePicker && {\n selectsRange: true,\n startDate: startDate,\n endDate: endDate,\n showMonthYearPicker: true,\n value: `${startDate ? formatDate(startDate, \"MMM YYYY\") : \"\"} - ${\n endDate ? formatDate(endDate, \"MMM YYYY\") : \"\"\n }`,\n ...(startDate &&\n !endDate && {\n // To keep the endDate in case of Month Year Picker in the range of the given interval\n maxDate: new Date(moment(startDate).add(monthRangeInterval, \"months\").format(\"YYYY-MM-DD\")),\n }),\n })}\n {...(enableMonthPicker &&\n value && {\n value: formatDate(value, \"MMM YYYY\"),\n })}\n disabled={disabled}\n calendarStartDay={1}\n {...props}\n />\n
\n {enableDateCycle && (\n \n
\n {children};\n }\n\n if (leaf.italic) {\n children = {children};\n }\n\n if (leaf.underline) {\n children = {children};\n }\n\n return {children};\n};\n\n/**\n * Element\n */\nconst Element = (props) => {\n const { attributes, children, element } = props;\n\n switch (element.type) {\n case \"mention\":\n return - {children}
- {children}
{children}
;\n }\n};\n\nconst defaultValue = [\n {\n type: \"paragraph\",\n children: [{ text: \"\" }],\n },\n];\n\nTextEditor.defaultProps = {\n value: defaultValue,\n showFormattingOptions: false,\n};\n\nTextEditor.propTypes = {\n value: PropTypes.string,\n name: PropTypes.string,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n readOnly: PropTypes.bool,\n placeholder: PropTypes.string,\n showFormattingOptions: PropTypes.bool,\n};\n\nLeaf.propTypes = {\n attributes: PropTypes.object,\n children: PropTypes.object,\n leaf: PropTypes.object,\n};\n\nElement.propTypes = {\n attributes: PropTypes.object,\n children: PropTypes.object,\n element: PropTypes.object,\n};\n\nexport { defaultValue, getPlainText, convertFromPlainText };\n\nexport default TextEditor;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport Tooltip from \"components/Tooltip\";\n\n/**\n * Shows a radio button group\n *\n * @param {String} name\n * @param {Any} value\n * @param {Array} options\n * @param {String} position\n * @param {String} direction\n * @param {Function} onChange\n */\n\nconst Radio = ({ name, value, options, direction, size, onChange }) => {\n const handleChange = (e) => {\n if (onChange) {\n onChange(name, e.target.value);\n }\n };\n\n const option = (item, index) => (\n\n
\n );\n\n return (\n \n {options.map((item, index) =>\n item.description ? (\n \n {option(item, index)}\n \n ) : (\n option(item, index)\n )\n )}\n
\n );\n};\n\n/**\n * CheckBox\n */\nconst StyledRadio = styled.input`\n width: ${({ size }) => (size === RADIO_SIZE.small ? `1.5rem` : `2rem`)};\n height: ${({ size }) => (size === RADIO_SIZE.small ? `1.5rem` : `2rem`)};\n border-radius: 100%;\n border: solid 1px ${colors.grayAnatomyLight3};\n background: #fff;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: top;\n appearance: none;\n color-adjust: exact;\n\n &:hover:not(:disabled) {\n border-color: ${colors.purpleRainBase};\n }\n\n &:checked {\n ${(props) =>\n props.inTable &&\n `\n background: ${colors.purpleRainDark1};\n border-color: ${colors.purpleRainDark1};\n `}\n\n &:after {\n content: \" \";\n width: 0.8rem;\n height: 0.8rem;\n border-radius: 100%;\n background: ${(props) => (props.inTable ? `#fff` : colors.purpleRainBase)};\n }\n }\n`;\n\nconst styles = {\n container: (direction, size) => css`\n order: 1;\n\n ${direction === RADIO_DIRECTION.horizontal &&\n `\n display: flex;\n gap: ${size === RADIO_SIZE.small ? `1rem` : `2rem`};\n `}\n `,\n item_container: css`\n display: flex;\n align-items: center;\n `,\n label: (size) => css`\n margin-left: ${size === RADIO_SIZE.small ? `0.5rem` : `1rem`};\n font-size: ${fontSize.small};\n font-size: ${size === RADIO_SIZE.small && fontSize.xxsmall};\n font-size: ${size === RADIO_SIZE.xlarge && fontSize.xlarge};\n font-weight: 400;\n `,\n};\n\nconst RADIO_DIRECTION = {\n horizontal: \"horizontal\",\n vertical: \"vertical\",\n};\n\nconst RADIO_SIZE = {\n small: \"small\",\n large: \"large\",\n xlarge: \"xlarge\",\n};\n\nRadio.propTypes = {\n name: PropTypes.string,\n value: PropTypes.any,\n options: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n direction: PropTypes.string,\n size: PropTypes.string,\n};\n\nexport { RADIO_DIRECTION, RADIO_SIZE };\n\nexport default Radio;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport ReactSelect, { components } from \"react-select\";\nimport { useQueryData } from \"hooks\";\nimport { colors, fontSize } from \"style\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\nimport { FormattedMessage } from \"react-intl\";\n\n/**\n * Select\n *\n * @param {String} value\n * @param {String} defaultValue\n * @param {String} name\n * @param {Array} options\n * @param {Function} onChange\n * @param {Boolean} hasIcon\n * @param {Boolean} disabled\n * @param {Boolean} required\n * @param {String} labelKey\n * @param {String} valuekey\n * @param {String} queryName\n * @param {String} queryKeyName\n * @param {String} queryVariables\n * @param {String} querySearchFieldName \n * @param {Boolean} isSearchable\n * @param {Boolean} isClearable\n * @param {Boolean} loading\n * @param {String} singleValuePrefix\n * @param {Function} reloadData \n * @param {String} noOptionsMessage \n * @param {String} defaultSearch\n * @param {Boolean} allowedSkip\n * @param {Object} selection\n * @param {String} placeholder\n *\n * Example Usage\n {\n options: [\n {\n value: \"ca\",\n label: \"Canada\",\n },\n {\n value: \"us\",\n label: \"United States\",\n },\n ],\n }\n */\nconst Select = ({\n value,\n defaultValue,\n name,\n options,\n onChange,\n hasIcon,\n disabled,\n required,\n labelKey,\n valueKey,\n queryName,\n queryKeyName,\n queryVariables,\n querySearchFieldName,\n isSearchable,\n isClearable,\n loading,\n singleValuePrefix,\n reloadData,\n noOptionsMessage,\n fetchPolicy,\n nextFetchPolicy,\n defaultSearch,\n allowedSkip,\n selection,\n placeholder,\n size,\n ...props\n}) => {\n const selectInputRef = useRef();\n const [dataOptions, setDataOptions] = useState(options || []);\n const [focus, setFocus] = useState(false);\n const [selectedValue, setSelectedValue] = useState([]);\n const [selectedDefaultValue, setSelectedDefaultValue] = useState([]);\n const [search, setSearch] = useState(defaultSearch);\n\n let filters = querySearchFieldName\n ? {\n ...queryVariables?.filters,\n [querySearchFieldName]: search,\n }\n : {\n ...queryVariables?.filters,\n };\n\n const isFiltersEmpty = Object.keys(filters).length === 0;\n\n const { data, loading: loadingData } = useQueryData({\n queryName,\n keyName: queryKeyName,\n skip: handleSkip(querySearchFieldName, search, queryKeyName, allowedSkip),\n fetchPolicy,\n nextFetchPolicy,\n variables: {\n ...queryVariables,\n // Only add filters to variables if it's not empty\n ...(isFiltersEmpty ? {} : { filters }),\n },\n });\n\n const handleChange = (val) => onChange(name, val && val[valueKey], val);\n\n const NoOptionsMessage = (props) => (\n \n
\n);\n\nClearIndicator.propTypes = {\n clearValue: PropTypes.func,\n};\n\nconst clearIndicatorStyle = css`\n color: ${colors.grayAnatomyLight2};\n margin-right: 1rem;\n cursor: pointer;\n\n &:hover {\n color: ${colors.grayAnatomyLight1};\n }\n`;\n\n/**\n * ClearIndicator\n */\nconst DropdownIndicator = () => (\n \n
\n);\n\nconst dropdownIndicatorStyle = css`\n color: ${colors.grayAnatomyLight2};\n margin-right: 1rem;\n cursor: pointer;\n border-left: 1px ${colors.grayAnatomyLight3} solid;\n height: 2rem;\n justify-content: center;\n align-items: center;\n display: flex;\n padding-left: 1rem;\n\n &:hover {\n color: ${colors.grayAnatomyLight1};\n }\n`;\n\n/**\n * SingleValue\n *\n * @params {Elements} element\n * @params {Elements} object\n */\nconst SingleValue = ({ children, singleValuePrefix, ...props }) => {\n return (\n \n
\n );\n};\n\nconst styles = {\n title: css`\n font-size: ${fontSize.xsmall};\n font-weight: 600;\n margin-bottom: 1rem;\n `,\n line_item: css`\n display: flex;\n align-items: center;\n margin-top: 0.5rem;\n `,\n icon_container: (isValid) => css`\n width: 1.5rem;\n height: 1.5rem;\n background: ${isValid ? colors.green : colors.grayAnatomyLight2};\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n label: (isValid) => css`\n margin-left: 0.5rem;\n font-size: ${fontSize.xsmall};\n color: ${isValid ? \"inherit\" : colors.grayAnatomyLight1};\n font-weight: 500;\n `,\n};\n\nPasswordRules.propTypes = {\n password: PropTypes.string,\n};\n\nexport default PasswordRules;\n","import React, { forwardRef, useImperativeHandle, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\nimport PasswordRules from \"./PasswordRules\";\nimport { breakpoints } from \"style\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\n\n// const e = React.createElement;\n\n/**\n * TextInput\n * FIXME: There's an issue with dom warnings saying \"unknown props\" because `hasIcon` (for example)\n * will get attached in the dom. This is a known issue.\n * Reference: https://github.com/emotion-js/emotion/issues/183\n * The fix is to destructure like this:\n * const TextInput = styled(({ hasIcon, hasText, isInvisible, hasError, formData, children, ...props }) =>\n e(\"input\", props, children)\n )`\n * This blockes the ability to use `ref` in the styled component so the fix had to be removed.\n */\n// eslint-disable-next-line no-unused-vars\nconst TextInput = styled.input`\n display: block;\n font-size: ${fontSize.xsmall};\n background: #fff;\n font-weight: normal;\n height: 4rem;\n padding-left: ${(props) => (props.hasIcon ? `3.4rem` : `1rem`)};\n padding-right: 1.4rem;\n line-height: 2.4rem;\n border-radius: ${(props) => (props.hasText ? `0 0.6rem 0.6rem 0` : `0.6rem`)};\n border: 1px solid ${colors.grayAnatomyLight3};\n width: 100%;\n color: ${colors.secondary};\n order: 1;\n resize: none;\n appearance: none;\n background-clip: padding-box;\n outline: none;\n transition: all 0.3s ease;\n\n ${(props) =>\n props.isInvisible &&\n `\n border-color: transparent;\n `}\n\n ${(props) => props.hasButton && `padding-right:6rem;`}\n\n ${(props) =>\n props.hasText &&\n `\n border-width:0 !important;\n height:auto;\n `};\n\n &::placeholder {\n color: ${colors.grayAnatomyLight2};\n }\n\n &:focus {\n border-color: ${colors.purpleRainBase};\n box-shadow: 0px 0px 0px 3px ${colors.purpleRainLight3};\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n\n &:hover:not(:disabled) {\n border-color: ${colors.purpleRainBase};\n }\n\n &:disabled {\n border: 1px solid ${colors.grayAnatomyLight3};\n color: ${colors.grayAnatomyLight2};\n background-color: ${colors.grayAnatomyLight4};\n\n &:placeholder {\n color: ${colors.grayAnatomyLigitght1};\n }\n }\n`;\n\n/**\n * Regular TextInput\n *\n * @param {Function} onChange\n * @param {String} name\n * @param {Boolean} withButton\n * @param {String} value\n */\nconst TextInputWithOnChange = forwardRef(({ onChange, name, withButton, value: valueProp, ...props }, ref) => {\n const [value, setValue] = useState(valueProp);\n const [hasChanges, setHasChanges] = useState(false);\n const inputRef = useRef(null);\n\n useImperativeHandle(ref, () => ({ handleBlur }),[inputRef]);\n\n const handleBlur = () => {\n if (inputRef.current) {\n inputRef.current.blur();\n } \n }\n\n const handleChange = (e) => {\n if (onChange) {\n onChange(name, e.target.value.length === 1 ? e.target.value.trim() : e.target.value);\n }\n };\n\n const handleStateChange = (e) => {\n if (onChange) {\n setValue(e.target.value);\n setHasChanges(true);\n }\n };\n\n const handleButton = () => {\n onChange(name, value.length === 1 ? value.trim() : value);\n setHasChanges(false);\n };\n\n const handleKeyPress = (e) => {\n if (e.key === \"Enter\") {\n if (withButton) {\n onChange(name, value?.length === 1 ? value?.trim() : value);\n setHasChanges(false);\n }\n }\n };\n\n if (withButton) {\n return (\n Password Requirements
\n \n
\n \n
\n \n
\n A lowercase letter
\n \n
\n \n
\n \n
\n An UPPERCASE letter
\n \n
\n \n
\n \n
\n A number or symbol
\n \n
\n \n
\n \n
\n Minimum 8 characters
\n \n
\n );\n } else {\n return (\n \n
\n \n setFocus(true)}\n onBlur={() => setFocus(false)}\n />\n
\n );\n};\n\nconst styles = {\n input_container: css`\n width: 100%;\n position: relative;\n order: 1;\n `,\n button: (disabled) => css`\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n min-height: 0;\n padding-left: 0;\n padding-right: 0;\n width: 3.8rem;\n height: calc(4rem - 2px);\n display: flex;\n align-items: center;\n justify-content: center;\n border-top-right-radius: 0.5rem;\n border-bottom-right-radius: 0.5rem;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n background: ${colors.purpleRainBase};\n color: #fff;\n border: solid 2px ${colors.purpleRainBase};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s;\n text-decoration: none;\n\n ${disabled &&\n ` \n color: ${colors.grayAnatomyLight2};\n background: ${colors.grayAnatomyLight4};\n border-color: ${colors.grayAnatomyLight4};\n box-shadown: none;\n font-weight: 500;\n `}\n `,\n input: css`\n padding-right: 5rem;\n `,\n password_container: css`\n position: relative;\n order: 1;\n `,\n rules_container: (isFocused) => css`\n ${!isFocused && `display:none;`}\n position: absolute;\n left: 100%;\n margin-left: 2rem;\n top: -50%;\n padding: 1.5rem;\n border: 1px solid ${colors.grayAnatomyLight3};\n border-radius: 1rem;\n box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n z-index: 10;\n background: ${colors.white};\n\n @media (max-width: ${breakpoints.portrait}) {\n bottom: 100%;\n top: auto;\n right: 0;\n left: auto;\n margin-bottom: 3rem;\n margin-left: 0;\n }\n `,\n};\n\nTextInputWithOnChange.propTypes = {\n onChange: PropTypes.func,\n inputRef: PropTypes.object,\n name: PropTypes.string,\n withButton: PropTypes.bool,\n value: PropTypes.string,\n};\n\nPassword.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nexport { TextInput, Password };\n\nexport default TextInputWithOnChange;\n","import React, { useEffect, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\nimport PropTypes from \"prop-types\";\nimport { Row } from \"components/Containers\";\n\n/**\n * Toggle Component\n *\n * @param {Function} onChange\n * @param {Boolean} value\n * @param {String} label\n * @param {String} name\n * @param {Number} timeOut\n */\nconst ToggleWithOnChange = ({ onChange, value: valueProp, label, name, timeOut, ...props }) => {\n const ranInt = Math.floor(Math.random() * 100);\n const formItemId = `label-${name}-${ranInt}`;\n const [value, setValue] = useState(valueProp);\n\n useEffect(() => {\n setValue(valueProp);\n }, [valueProp]);\n\n const handleChange = (e) => {\n setValue(e.target.checked);\n setTimeout(() => onChange(name, e.target.checked), timeOut);\n };\n\n if (label) {\n return (\n \n
\n {item.note}
}\n {errors?.fields?.map(\n (error, i) =>\n error.field === item.properties?.name && (\n /* In that case the CharactersCount componnet is also there on the right side\n so making sure it doesnot overlap with errors */\n \n {item.id &&\n items\n ?.filter((i) => i.parentKey === item.id)\n ?.map((x, idx) => (\n
\n )}\n \n {item}\n
\n ));\n } else {\n if (errorList?.length > 0) {\n return (\n \n
\n );\n } else {\n return (\n {errors?.message ? errors.message :
\n );\n }\n }\n};\n\nGlobalError.propTypes = {\n errors: PropTypes.object,\n};\n\nconst styles = {\n form: (disabled) => css`\n display: flex;\n opacity: ${disabled ? \"0.3\" : \"1\"};\n `,\n note: css`\n font-size: ${fontSize.xsmall};\n color: ${colors.grayAnatomyLight1};\n margin-top: 0.5rem;\n order: 2;\n `,\n global_error: css`\n margin-bottom: 2rem;\n padding: 1rem;\n background: ${colors.lightRed};\n color: ${colors.red};\n border-radius: 0.5rem;\n font-size: ${fontSize.small};\n font-weight: 500;\n line-height: normal;\n `,\n hidden_submit: css`\n display: none;\n `,\n container: (noPadding, numColumns, marginSize) => css`\n padding: 1rem ${marginSize};\n display: grid;\n grid-auto-rows: min-content;\n grid-template-columns: repeat(${numColumns}, 1fr);\n gap: 1rem 1.6rem;\n border-right: 1px solid ${colors.grayAnatomyLight4};\n box-sizing: border-box;\n width: 100%;\n\n ${noPadding && `padding:0;`}\n\n &:last-of-type {\n border-right-width: 0;\n }\n `,\n item_children: css`\n order: 2;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-top: 0.5rem;\n\n > * {\n border-bottom: 1px ${colors.grayAnatomyLight5} solid;\n padding-bottom: 0.5rem;\n }\n\n > *:last-of-type {\n border-bottom-width: 0;\n padding-bottom: 0;\n }\n `,\n item_container: (itemSize, isVisible, isExpandable, orientation) => css`\n display: flex;\n flex-direction: ${orientation === LABEL_DIRECTION.horizontal ? `row` : `column`};\n position: relative;\n ${itemSize === SIZE.small && `grid-column-start: span 1;`}\n ${itemSize === SIZE.medium && `grid-column-start: span 2;`}\n ${itemSize === SIZE.large && `grid-column-start: span 3;`}\n ${(!itemSize || itemSize === SIZE.xlarge) && `grid-column-start: span 4;`}\n\n ${orientation === LABEL_DIRECTION.horizontal &&\n `\n > * {\n flex: 1;\n }\n `}\n\n ${isExpandable &&\n `\n padding-bottom: 1rem;\n padding-left:2rem;\n padding-right:2rem;\n margin-left:-2rem;\n margin-right:-2rem;\n border-bottom: 1px ${colors.grayAnatomyLight5} solid;\n `}\n\n ${!isVisible &&\n isExpandable &&\n `\n @media (max-width: ${breakpoints.portrait}) {\n padding-left:2.5rem;\n padding-right:2.5rem;\n margin-left:-2.5rem;\n margin-right:-2.5rem;\n }\n\n > *:not(label) {\n margin-top: auto;\n display:none;\n }\n `}\n\n @media (max-width: ${breakpoints.portrait}) {\n grid-column-start: span 4;\n }\n `,\n footer: (marginSize) => css`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 0 ${marginSize};\n\n * {\n margin-top: 1rem;\n }\n\n * + * {\n margin-left: 1rem;\n }\n `,\n destructable_container: css`\n margin-right: auto;\n `,\n};\n\nFormItem.propTypes = {\n item: PropTypes.object,\n items: PropTypes.array,\n container: PropTypes.object,\n isExpandable: PropTypes.bool,\n expandedItems: PropTypes.array,\n onChange: PropTypes.func,\n formData: PropTypes.object,\n errors: PropTypes.object,\n params: PropTypes.object,\n disabled: PropTypes.bool,\n onError: PropTypes.func,\n onExpand: PropTypes.func,\n hideOptionalLabel: PropTypes.bool,\n isChild: PropTypes.bool,\n};\n\nForm.defaultProps = {\n initialValues: {},\n numColumns: 4,\n updateIdKey: \"id\",\n marginSize: margins.normal,\n disabled: false,\n values: {},\n hideOptionalLabel: false,\n isExpandable: false,\n onError: () => {},\n initialExpandedItems: [],\n};\n\nForm.propTypes = {\n data: PropTypes.array,\n initialValues: PropTypes.object,\n updateId: PropTypes.string,\n updateIdKey: PropTypes.string,\n onChange: PropTypes.func,\n onLoadingState: PropTypes.func,\n noPadding: PropTypes.bool,\n mutationType: PropTypes.string,\n mutationData: PropTypes.object,\n handleComplete: PropTypes.func,\n onCompleted: PropTypes.func,\n onError: PropTypes.func,\n numColumns: PropTypes.number,\n params: PropTypes.object,\n parentKeyName: PropTypes.string,\n parentKeyValue: PropTypes.string,\n saveButton: PropTypes.object,\n cancelButton: PropTypes.object,\n deleteButton: PropTypes.object,\n onSubmit: PropTypes.func,\n onRequiredValuesChange: PropTypes.func,\n marginSize: PropTypes.string,\n disabled: PropTypes.bool,\n hideOptionalLabel: PropTypes.bool,\n values: PropTypes.object,\n isExpandable: PropTypes.bool,\n initialExpandedItems: PropTypes.array,\n onExpand: PropTypes.func,\n};\n\nexport default Form;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n/**\n * InputHidden\n *\n * @params {String} name\n *\n */\nconst InputHidden = ({ name }) => {\n return ;\n};\n\nInputHidden.propTypes = {\n name: PropTypes.string.isRequired,\n};\n\nexport default InputHidden;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport { EditableTag } from \"components/Tags\";\nimport { AsyncTypeahead, Menu, MenuItem } from \"react-bootstrap-typeahead\";\nimport { useQueryData } from \"hooks\";\nimport \"react-bootstrap-typeahead/css/Typeahead.css\";\n\n/**\n * TagsInput\n *\n * @params {Array} value\n * @params {String} name\n * @params {Boolean} required\n * @params {Function} onChange\n * @params {Array} options\n * @params {String} valueKey\n * @params {String} labelKey\n * @params {String} secondaryLabelKey\n * @params {Object} queryName\n * @params {String} queryKeyName\n * @params {Function} searchQuery -Callback function to format the search object (look at defaultProps for example)\n * @params {Boolean} disabled\n */\nconst TagsInput = ({\n value,\n name,\n options,\n labelKey,\n valueKey,\n onChange,\n secondaryLabelKey,\n queryName,\n queryKeyName,\n searchQuery,\n queryVariables,\n parentId,\n disabled,\n ...props\n}) => {\n const [variables, setVariables] = useState({});\n const [focus, setFocus] = useState(false);\n const { loading, data } = useQueryData({\n queryName,\n keyName: queryKeyName,\n variables: { ...variables, ...queryVariables },\n });\n\n useEffect(() => {\n onChange(name, []);\n }, [parentId]);\n\n useEffect(() => {\n if (value) {\n onChangeLocal(value);\n }\n }, [data, options]);\n\n const handleSearch = (keyword) => setVariables(searchQuery(keyword));\n\n const onChangeLocal = (val) => {\n const uniques = Array.from(new Set(val.map((a) => a[valueKey]))).map((id) => val.find((a) => a[valueKey] === id));\n\n onChange(\n name,\n uniques.map((item) => ({\n [labelKey]: item[labelKey],\n [valueKey]: item[valueKey],\n }))\n );\n };\n\n return (\n \n setFocus(true)}\n onBlur={() => setFocus(false)}\n renderToken={(option, { onRemove, ...otherProps }, index) => (\n \n {`${option[labelKey]}`}\n \n )}\n isLoading={loading}\n onChange={onChangeLocal}\n selected={value}\n onSearch={handleSearch}\n renderMenu={(results, menuProps) => (\n \n )}\n disabled={disabled}\n {...props}\n />\n
\n );\n};\n\nconst styles = {\n tags_wrapper: (focus) => css`\n order: 1;\n flex: 1;\n\n ${focus === true &&\n `\n & + label {\n color: ${colors.purpleRainBase};\n }\n `}\n\n .rbt-input-wrapper {\n gap: 0.6rem;\n }\n\n .rbt-input-wrapper {\n input {\n &::placeholder {\n color: ${colors.grayAnatomyLight2};\n }\n }\n }\n\n .rbt-input-hint {\n font-size: ${fontSize.small};\n font-weight: normal;\n color: ${colors.grayAnatomyLight3} !important;\n }\n\n .rbt-input-multi.disabled {\n background: ${colors.grayAnatomyLight7};\n }\n\n .rbt-input {\n border: 1px solid ${colors.grayAnatomyLight3};\n width: 100%;\n min-height: 4rem;\n padding: 0.8rem 0.8rem 0.8rem 0.8rem;\n border-radius: 0.6rem;\n transition: all 0.3s ease;\n\n &.focus {\n border-color: ${colors.purpleRainBase};\n box-shadow: 0px 0px 0px 3px ${colors.purpleRainLight3};\n }\n }\n\n .rbt-input-main {\n font-size: ${fontSize.small};\n font-weight: normal;\n color: ${colors.secondary};\n }\n\n .rbt-menu.dropdown-menu {\n background-color: #fff;\n border-radius: 0.4rem;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);\n border: 1px solid ${colors.grayAnatomyLight3};\n margin-top: 1rem;\n\n .dropdown-item {\n font-weight: normal;\n color: ${colors.secondary};\n font-size: ${fontSize.xsmall};\n padding: 0.8rem 1.6rem;\n width: 100%;\n user-select: none;\n\n &:hover {\n background: ${colors.grayAnatomyLight5};\n }\n }\n }\n `,\n input: css`\n border: 0;\n background: none;\n font-size: ${fontSize.small};\n font-weight: normal;\n height: 2.2rem;\n line-height: 2.2rem;\n color: ${colors.secondary};\n padding: 0;\n box-sizing: border-box;\n outline: none;\n `,\n description: css`\n display: block;\n color: ${colors.grayAnatomyLight1};\n `,\n label: (hasDescription) => css`\n display: block;\n ${hasDescription &&\n `\n font-weight: 600;\n margin-bottom:0.5rem;\n `}\n `,\n};\n\nTagsInput.propTypes = {\n value: PropTypes.array,\n options: PropTypes.array,\n name: PropTypes.string,\n required: PropTypes.bool,\n onChange: PropTypes.func,\n labelKey: PropTypes.string,\n valueKey: PropTypes.string,\n secondaryLabelKey: PropTypes.string,\n queryName: PropTypes.object,\n queryKeyName: PropTypes.string,\n queryVariables: PropTypes.object,\n searchQuery: PropTypes.func,\n parentId: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nTagsInput.defaultProps = {\n labelKey: \"name\",\n valueKey: \"id\",\n secondaryLabelKey: null,\n searchQuery: (name) => ({ filters: { name } }),\n parentId: null,\n};\n\nexport default TagsInput;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\nimport { SIZE } from \"components/Form\";\n\n/**\n * TextArea\n */\nconst TextArea = styled.textarea`\n display: block;\n font-size: ${fontSize.small};\n background: #fff;\n font-weight: normal;\n ${({ height }) => height === null && `height: 18rem;`}\n ${({ height }) => height === SIZE.small && `height: 6rem;`}\n ${({ height }) => height === SIZE.medium && `height: 12rem;`}\n ${({ height }) => height === SIZE.large && `height: 18rem;`}\n ${({ height }) => height === SIZE.xlarge && `height: 24rem;`}\n padding: 1rem 1rem;\n line-height: 2.4rem;\n border-radius: 0.6rem;\n border: 1px solid ${colors.grayAnatomyLight3};\n width: 100%;\n color: ${colors.secondary};\n order: 1;\n resize: none;\n appearance: none;\n background-clip: padding-box;\n outline: none;\n transition: all 0.3s ease;\n ${({ maxLimit }) => maxLimit && `margin-bottom: 1rem;`}\n\n &::placeholder {\n color: ${colors.grayAnatomyLight2};\n }\n\n &:focus {\n border-color: ${colors.purpleRainBase};\n box-shadow: 0px 0px 0px 3px ${colors.purpleRainLight3};\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n\n &:hover {\n border-color: ${colors.purpleRainBase};\n }\n\n &:disabled {\n border: 1px solid ${colors.grayAnatomyLight3} !important;\n color: ${colors.grayAnatomyLight2} !important;\n background-color: ${colors.grayAnatomyLight5};\n\n &:placeholder {\n color: ${colors.grayAnatomyLight1};\n }\n }\n`;\n\n/**\n * TextAreaWithOnChange\n *\n * @param {Function} onChange\n * @param {Number} maxLength\n * @param {String} value\n */\nconst TextAreaWithOnChange = ({ onChange, maxLength, value, ...props }) => {\n const [charactersCount, setCharactersCount] = useState(value?.length || 0);\n\n const handleChange = (e) => {\n const inputValue = e.target.value;\n\n if (inputValue.length <= maxLength || !maxLength) {\n setCharactersCount(inputValue.length);\n\n if (onChange) {\n onChange(e.target.name, inputValue.length === 1 ? inputValue.trim() : inputValue);\n }\n }\n };\n\n return (\n <>\n \n \n
\n );\n};\n\nTextAreaWithOnChange.propTypes = {\n onChange: PropTypes.func,\n maxLength: PropTypes.number,\n value: PropTypes.string,\n};\n\nCharactersCount.propTypes = {\n charactersCount: PropTypes.number,\n maxLength: PropTypes.number,\n};\n\nconst styles = {\n characters_count: css`\n position: absolute;\n bottom: -0.6rem;\n right: 0rem;\n font-size: ${fontSize.xxsmall};\n color: ${colors.grayAnatomyLight1};\n `,\n};\n\nexport { TextArea, TextAreaWithOnChange };\n\nexport default TextAreaWithOnChange;\n","/** @jsx jsx */\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\n\n/**\n * Label\n */\nconst Button = styled.button`\n height: 3.8rem;\n min-height: 3.8rem;\n font-size: ${fontSize.small};\n font-weight: 600;\n background: ${colors.purpleRainBase};\n color: #fff;\n border-radius: 0.6rem;\n line-height: 2.4rem;\n border: solid 2px ${colors.purpleRainBase};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1rem 2.2rem;\n cursor: pointer;\n transition: all 0.2s;\n text-decoration: none;\n width:100%;\n\n &:hover:not(:disabled) {\n color: #fff;\n background: ${colors.purpleRainDark1};\n box-shadow: 0 1px 6px 0 rgba(56, 51, 148, 0.3);\n }\n`;\n\nexport default Button;\n","/** @jsx jsx */\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\n\n/**\n * Label\n */\nconst Link = styled.a`\n color: ${colors.grayAnatomyLight1};\n display: flex;\n align-items: center;\n font-size: ${fontSize.small};\n font-weight: 600;\n line-height: 2.4rem;\n`;\n\nexport default Link;\n","import React, { useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { useState } from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport { colors, gradients, fontSize } from \"style\";\nimport Icon, { ICON_TYPE } from \"components/Icon\";\nimport { usePrevious } from \"utils\";\nimport { DATE_FORMAT_TYPE } from \"constants/index\";\nimport \"react-datepicker/dist/react-datepicker.css\";\n\n/**\n * MonthPicker\n *\n * @params {String} format\n * @params {String} name\n * @params {Function} onChange\n * @params {Object} initialValue\n * @params {Boolean} showMonthYearPicker\n * @params {Boolean} showFullMonthYearPicker\n * @params {String} minDate\n *\n */\nconst MonthPicker = ({\n format,\n name,\n onChange,\n initialValue,\n showMonthYearPicker,\n showFullMonthYearPicker,\n minDate,\n}) => {\n const [startDate, setStartDate] = useState(initialValue);\n const prevValue = usePrevious(startDate);\n\n useEffect(() => {\n if (prevValue !== startDate) {\n onChange(startDate);\n }\n }, [startDate, onChange, prevValue]);\n\n return (\n \n setStartDate(date)}\n dateFormat={format}\n name={name}\n scrollableYearDropdown={true}\n showYearDropdown={true}\n showMonthYearPicker={showMonthYearPicker}\n showFullMonthYearPicker={showFullMonthYearPicker}\n popperPlacement=\"bottom-start\"\n maxDate={new Date()}\n minDate={minDate}\n />\n
\n );\n};\n\nconst styles = {\n container: css`\n position: relative;\n order: 1;\n\n .react-datepicker {\n border-radius: 0.6rem;\n background-color: #fff;\n box-shadow: 0 0 14px 0 rgb(0 0 0 / 50%);\n border: 0;\n padding-bottom: 1rem;\n }\n\n .react-datepicker-popper {\n position: absolute;\n z-index: 5;\n }\n\n .react-datepicker__triangle {\n visibility: hidden;\n }\n\n .react-datepicker__input-container {\n input {\n display: block;\n font-size: ${fontSize.small};\n background: #fff;\n font-weight: normal;\n height: 4rem;\n padding-left: 2.8rem;\n line-height: 4rem;\n border-radius: 0.6rem !important;\n border: 1px solid ${colors.grayAnatomyLight3};\n width: 100%;\n color: ${colors.secondary};\n order: 1;\n resize: none;\n appearance: none;\n background-clip: padding-box;\n outline: none;\n\n &:focus {\n box-shadow: none;\n border-image-source: ${gradients.missionCircularGradient};\n border-width: 2px;\n border-image-slice: 1;\n background-image: linear-gradient(to bottom, #fff, #fff), ${gradients.missionCircularGradient};\n background-origin: border-box;\n background-clip: padding-box, border-box;\n border-color: transparent !important;\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n\n &:hover {\n border-color: ${colors.purpleRainBase};\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n\n &:disabled {\n border: 1px solid ${colors.grayAnatomyLight3} !important;\n color: ${colors.grayAnatomyLight2} !important;\n background-color: ${colors.grayAnatomyLight5};\n }\n }\n }\n\n .react-datepicker__navigation {\n height: 4.5rem;\n background-color: ${colors.grayAnatomyLight5};\n color: ${colors.grayAnatomyLight1};\n }\n\n .react-datepicker__month-container {\n .react-datepicker__header {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: ${fontSize.small};\n background-color: ${colors.white};\n height: 5rem;\n border-bottom: 1px solid rgba(192, 207, 223, 0.5);\n line-height: 5rem;\n }\n .react-datepicker__monthPicker {\n .react-datepicker__month-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n .react-datepicker__month-text {\n text-align: center;\n line-height: 4rem;\n min-width: 10rem;\n min-height: 4rem;\n font-size: ${fontSize.small};\n outline: none;\n &:focus {\n box-shadow: none;\n border-image-source: ${gradients.missionCircularGradient};\n border-width: 2px;\n border-image-slice: 1;\n background-image: linear-gradient(to bottom, #fff, #fff), ${gradients.missionCircularGradient};\n background-origin: border-box;\n background-clip: padding-box, border-box;\n border-color: transparent !important;\n outline: none;\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n\n &:hover {\n border-color: ${colors.purpleRainBase};\n outline: none;\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n }\n }\n }\n .react-datepicker__month--selected {\n background-color: ${colors.purpleRainBase};\n }\n }\n `,\n iconContainer: css`\n position: absolute;\n left: 0.8rem;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n z-index: 9;\n `,\n};\n\nMonthPicker.defaultProps = {\n format: DATE_FORMAT_TYPE.MMyyyy,\n showMonthYearPicker: false,\n showFullMonthYearPicker: false,\n};\n\nMonthPicker.propTypes = {\n format: PropTypes.string,\n name: PropTypes.string,\n onChange: PropTypes.func,\n initialValue: PropTypes.object,\n showMonthYearPicker: PropTypes.bool,\n showFullMonthYearPicker: PropTypes.bool,\n minDate: PropTypes.string,\n};\n\nexport default MonthPicker;\n","import React, { useEffect, useState, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport Tooltip from \"components/Tooltip\";\nimport { TextInput, Select, Label } from \"components/Form\";\nimport { EXTERNAL_LINK_TYPES } from \"../../constants\";\nimport { EditButton } from \"components/Buttons\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { colors } from \"style\";\nimport { Row, Grid } from \"components/Containers\";\n\n/**\n * Links\n *\n * @params {String} value\n * @params {String} name\n * @params {Function} onChange\n */\nconst Links = ({ value, name, onChange }) => {\n const defaultValues = (uuid) => [\n {\n uuid,\n url: \"\",\n type: \"\",\n name: \"\",\n },\n ];\n\n const [localValue, setLocalValue] = useState(value || defaultValues(generateUuid()));\n\n // When updating (immutable)\n const handleUpdate = (itemName, itemValue, index) => {\n const clonedValues = [...localValue];\n\n clonedValues[index] = {\n ...clonedValues[index],\n ...{\n [itemName]: itemValue,\n },\n };\n\n setLocalValue(clonedValues);\n };\n\n // When adding an item (immutable)\n const handleAdd = (e) => {\n e.preventDefault();\n setLocalValue([...localValue, ...defaultValues(generateUuid())]);\n };\n\n // When removing an item (immutable)\n const handleRemove = (e, idx) => {\n e.preventDefault();\n setLocalValue([...localValue.slice(0, idx), ...localValue.slice(idx + 1, localValue.length)]);\n };\n\n // When localValue changes, send onChange event\n useEffect(() => {\n handleChange(localValue);\n }, [localValue]);\n\n const handleChange = useCallback(\n (val) => {\n onChange(name, val);\n },\n [onChange, name]\n );\n\n return (\n <>\n {!localValue ||\n (localValue.length === 0 && (\n \n
\n \n \n \n
\n ))}\n {localValue && localValue.length > 0 && (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n )}\n {localValue?.map((item, index) => (\n handleRemove(e, index)}>\n
\n \n
\n \n \n \n handleUpdate(n, v, index)}\n options={EXTERNAL_LINK_TYPES}\n required={true}\n defaultValue={EXTERNAL_LINK_TYPES[0].value}\n />\n \n \n handleUpdate(n, v, index)}\n required={true}\n placeholder=\"https://\"\n type=\"url\"\n />\n \n \n handleUpdate(n, v, index)}\n required={true}\n />\n \n \n
\n \n
\n \n
\n ));\n }\n\n return (\n \n
\n );\n};\n\nconst styles = {\n container: css`\n order: 1;\n `,\n checkbox_container: css`\n order: 1;\n align-items: center;\n color: ${colors.grayAnatomyLight1};\n max-height: 15rem;\n overflow-y: auto;\n `,\n secondary: css`\n order: 2;\n text-align: center;\n `,\n};\n\nconst MoreLink = styled(PrimaryLink)`\n margin-top: 0.5rem;\n font-size: ${fontSize.xsmall};\n border-top: 1px dashed ${colors.grayAnatomyLight3};\n display: block;\n padding-top: 0.5rem;\n\n .link-text {\n display: flex;\n flex-direction: column;\n }\n`;\n\nCheckBoxGroup.defaultProps = {\n value: [],\n valueKey: \"id\",\n labelkey: \"label\",\n mutationData: {},\n limit: 30,\n showAllOptions: false,\n};\n\nCheckBoxGroup.propTypes = {\n onChange: PropTypes.func,\n value: PropTypes.array,\n name: PropTypes.string.isRequired,\n options: PropTypes.array.isRequired,\n loading: PropTypes.bool,\n valueKey: PropTypes.string,\n labelKey: PropTypes.string,\n labelFunc: PropTypes.func,\n descriptionKey: PropTypes.string,\n mutationData: PropTypes.object,\n limit: PropTypes.number,\n direction: PropTypes.string,\n showAllOptions: PropTypes.bool,\n};\n\nexport default CheckBoxGroup;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { Form } from \"react-bootstrap\";\nimport { colors, gradients } from \"style\";\n\n/**\n * Switch\n */\nconst Switch = ({ ...props }) => {\n return \n onChangeLocal(isChecked, item)}\n name={name}\n {...props}\n />\n {item.isRemovable && (\n \n (\n handleRemove(e, item.id)} disabled={loading} withDeleteIcon>\n \n )\n \n )}\n
\n );\n })}\n {!showAllOptions && options?.length > localLimit && (\n \n {deleting && setLocalLimit(localLimit + incrementLimitSize)}>\n \n
\n )}\n \n \n {image && }\n
\n \n
\n \n \n {image ? (\n \n
\n {image && (\n \n \n \n
\n )}\n \n \n
\n \n );\n};\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n font-size: ${fontSize.small};\n font-weight: 600;\n `,\n image_container: (image) => css`\n width: 18rem;\n height: 18rem;\n background: ${colors.grayAnatomyLight3};\n border-radius: 0.6rem;\n margin-right: 2rem;\n\n ${image &&\n `\n background: url(${image}) 50% 50% no-repeat;\n background-size:cover;\n `}\n `,\n input: css`\n display: none;\n `,\n link_container: css`\n display: flex;\n gap: 2rem;\n `,\n};\n\nPhoto.propTypes = {\n value: PropTypes.any,\n onChange: PropTypes.func,\n name: PropTypes.string,\n params: PropTypes.object,\n};\n\nexport default Photo;\n","/* eslint-disable no-undef */\nimport React, { useState } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport AsyncSelect from \"react-select/async\";\nimport { styles } from \"./Select\";\nimport { COUNTRIES } from \"constants/index.js\";\nimport { withIcon, ICON_TYPE, ICON_SIZE, ICON_POSITION } from \"components/Icon\";\nimport { Select, Label } from \"components/Form\";\n\n/**\n * GeoLocator\n *\n * @params {String} label\n * @params {String} value\n * @params {String} name\n * @params {Function} onChange\n * @params {Boolean} hasIcon\n * @params {Boolean} disabled\n * @params {Boolean} localityOnly\n * @params {Boolean} isClearable\n */\nconst GeoLocator = ({ label, value, name, onChange, hasIcon, disabled, localityOnly, isClearable }) => {\n const [focus, setFocus] = useState(false);\n const LOCALITY_DEFAULTS = {\n state: null,\n city: null,\n latitude: null,\n longitude: null,\n utc_offset: null,\n label: null,\n place_id: null,\n };\n\n /**\n * When a user selects a locality\n *\n * @param {Number} val\n */\n const handleAutocompleteChange = async (val) => {\n if (!val) {\n onChange(name, null);\n return;\n }\n\n const { place_id, description } = val.value;\n const service = new google.maps.places.PlacesService(document.getElementById(\"geo-map\"));\n\n service.getDetails({ placeId: place_id }, (place, status) => {\n // If the Google API request fails then save only place_id + label\n if (status !== \"OK\") {\n onChange(name, {\n ...value,\n ...LOCALITY_DEFAULTS,\n label: description,\n place_id,\n });\n\n return;\n }\n\n const { address_components, geometry, utc_offset } = place;\n const state = address_components?.filter((item) => item.types.includes(\"administrative_area_level_1\"));\n const city = address_components?.filter((item) => item.types.includes(\"locality\"));\n const latitude = geometry?.location?.lat();\n const longitude = geometry?.location?.lng();\n\n onChange(name, {\n ...value,\n state: state && state.length > 0 ? state[0].long_name : null,\n city: city && city.length > 0 ? city[0].long_name : null,\n latitude,\n longitude,\n utc_offset,\n label: description,\n place_id,\n });\n });\n };\n\n /**\n * Search for results from string using Google Places AutocompleteService\n *\n * @param {String} input\n */\n const findResults = (input) =>\n new Promise((resolve) => {\n new window.google.maps.places.AutocompleteService().getPlacePredictions(\n {\n input,\n types: [\"(cities)\"],\n ...(value?.country_code &&\n !localityOnly && {\n componentRestrictions: {\n country: String(value?.country_code).toLowerCase(),\n },\n }),\n },\n (results) => {\n const resultsArr = [];\n\n results?.forEach((item) => {\n resultsArr.push({\n label: item.description,\n value: item,\n });\n });\n\n return resolve(resultsArr);\n }\n );\n });\n\n const SelectWithIcon = withIcon(Select, {\n type: ICON_TYPE.pin,\n size: ICON_SIZE.medium,\n position: ICON_POSITION.overlay,\n });\n\n return (\n \n {\n const country = COUNTRIES.filter(\n (c) => String(c.value).toLowerCase() === String(country_code).toLowerCase()\n );\n\n onChange(name, {\n ...LOCALITY_DEFAULTS,\n country: country && country.length > 0 && country[0].label,\n country_flag: country && country.length > 0 && country[0].flag,\n country_code,\n });\n }}\n />\n \n
\n )}\n \n {resumeStatus === true && (\n
\n \n {!value?.name ? (\n \n \n ) : (\n \n
\n )}\n \n
\n {value?.name && {shortenText(value?.name, 20, false, true)}}\n \n \n \n
\n {value && (\n \n \n \n
\n )}\n \n \n
\n \n );\n};\n\nconst LinkUploadResumeWithIcon = withIcon(PrimaryLink, {\n type: ICON_TYPE.upload,\n size: ICON_SIZE.xlarge,\n color: \"inherit\",\n position: \"relative\",\n});\n\nconst LinkDeleteResumeWithIcon = withIcon(PrimaryLink, {\n type: ICON_TYPE.close,\n size: ICON_SIZE.xlarge,\n color: \"inherit\",\n position: \"relative\",\n});\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n font-size: ${fontSize.small};\n font-weight: 600;\n `,\n success_container: css`\n position: absolute;\n bottom: 53%;\n left: 50%;\n display: flex;\n align-items: center;\n `,\n success_indicator: css`\n color: ${colors.grayAnatomyLight1};\n position: absolute;\n bottom: 1rem;\n left: 0;\n width: 100%;\n text-align: center;\n font-size: ${fontSize.xxsmall};\n font-weight: 400;\n `,\n resume_container: css`\n width: 18rem;\n height: 18rem;\n position: relative;\n margin-right: 2rem;\n `,\n resume_link: (fileUploaded) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ${colors.grayAnatomyLight5};\n width: 18rem;\n height: 18rem;\n border-radius: 0.6rem;\n color: ${fileUploaded ? colors.green : colors.grayAnatomyLight3};\n\n .link-text {\n justify-content: center;\n }\n\n ${!fileUploaded &&\n `\n border:2px dashed ${colors.grayAnatomyLight2};\n `}\n\n &:hover {\n background: ${colors.grayAnatomyLight4};\n color: ${colors.purpleRainBase};\n }\n `,\n input: css`\n display: none;\n `,\n link_container: css`\n margin-right: 2rem;\n `,\n};\n\nResume.propTypes = {\n value: PropTypes.any,\n onChange: PropTypes.func,\n name: PropTypes.string,\n};\n\nexport default Resume;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport Icon, { ICON_SIZE } from \"components/Icon\";\n\n/**\n * Shows selectable boxes with title, body and icon\n *\n * @params {String} name\n * @params {String} value\n * @params {Array} options\n * @params {Function} onChange\n */\nconst BoxSelector = ({ name, value, options, onChange }) => (\n \n {options.map((item, index) => (\n onChange(name, val)} />\n ))}\n
\n);\n\n/**\n * The Box item\n *\n * @params {String} title\n * @params {String} body\n * @params {String} icon\n * @params {String} value\n * @params {Function} onChange\n * @params {Boolean} isSelected\n */\nconst BoxItem = ({ title, body, icon, value, isSelected, onChange }) => (\n onChange(value)}>\n
\n);\n\nconst styles = {\n container: css`\n font-size: ${fontSize.small};\n color: ${colors.grayAnatomyBase};\n line-height: normal;\n font-weight: normal;\n `,\n label: css`\n font-weight: 600;\n font-size: ${fontSize.normal};\n `,\n icon_container: css`\n flex: 0 0 8rem;\n text-align: center;\n `,\n box: (isSelected) => css`\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem 1rem 0;\n background: ${colors.grayAnatomyLight5};\n margin-bottom: 1rem;\n border-radius: 6px;\n transition: transform 0.3s ease;\n border: 1px transparent solid;\n cursor: pointer;\n color: ${colors.grayAnatomyBase};\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &:hover {\n color: ${colors.purpleRainBase};\n border: 1px ${colors.grayAnatomyLight4} solid;\n background: #fff;\n box-shadow: 0 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.06);\n transform: scale(1.05);\n }\n\n ${isSelected &&\n `\n padding: 2rem 2.4rem 2rem 0;\n transform: scale(1) !important;\n background:#fff !important;\n border: 1px ${colors.purpleRainBase} solid !important;\n `}\n `,\n body: css`\n margin-top: 0.5rem;\n color: ${colors.grayAnatomyBase};\n font-size: ${fontSize.small};\n `,\n};\n\nBoxItem.propTypes = {\n title: PropTypes.string,\n body: PropTypes.string,\n icon: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n isSelected: PropTypes.bool,\n};\n\nBoxSelector.propTypes = {\n name: PropTypes.string,\n value: PropTypes.string,\n options: PropTypes.array.isRequired,\n onChange: PropTypes.array.isRequired,\n};\n\nexport default BoxSelector;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport TextInputWithOnChange from \"./TextInput\";\n\n/**\n * Slider\n *\n * @param {String} name\n * @param {Number} value\n * @param {Number} min\n * @param {Number} max\n * @param {Number} step\n * @param {Function} onChange\n */\nconst Slider = ({ name, value, min, max, step, onChange, ...props }) => {\n const { hasError, formData, ...rest } = props;\n const [localValue, setLocalValue] = useState(value);\n const handleChange = (e) => setLocalValue(e.target.value);\n\n useEffect(() => {\n setLocalValue(value);\n }, [value]);\n\n return (\n \n
\n \n
\n {title}
\n {isSelected && {body}
}\n \n onChange(name, localValue)}\n onTouchEnd={() => onChange(name, localValue)}\n css={styles.html_range}\n {...rest}\n />\n
\n );\n};\n\nconst styles = {\n slider: css`\n position: relative;\n order: 1;\n display: flex;\n align-items: center;\n gap: 1rem;\n `,\n range_value: css``,\n html_range: css`\n -webkit-appearance: none !important;\n width: 100%;\n height: 2px;\n background: ${colors.grayAnatomyLight3};\n border: none;\n outline: none;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none !important;\n width: 1rem;\n height: 1rem;\n background: ${colors.purpleRainBase};\n border: 2px solid ${colors.purpleRainBase};\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n background: ${colors.purpleRainDark1};\n }\n }\n `,\n input: css`\n height: 3rem;\n padding: 0 0.5rem;\n width: 6rem;\n font-size: ${fontSize.xsmall};\n `,\n};\n\nSlider.defaultProps = {\n step: 1,\n};\n\nSlider.propTypes = {\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n min: PropTypes.number.isRequired,\n max: PropTypes.number.isRequired,\n step: PropTypes.number,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default Slider;\n","import React, { useState, useRef } from \"react\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize, gradients } from \"style\";\n\n/**\n * WithText - currently only works with input\n *\n * Will position text at beginning of input\n */\nconst WithText = (WrappedComponent, { text }) => (props) => {\n const [isFocused, setFocus] = useState(false);\n const inputRef = useRef();\n const inputFocus = () => inputRef.current.focus();\n\n return (\n \n {\n onChange(name, val);\n setLocalValue(val);\n }}\n css={styles.input}\n />\n
\n \n setFocus(true)}\n onBlur={() => setFocus(false)}\n inputRef={inputRef}\n {...props}\n />\n
\n );\n}\n\nconst styles = {\n container: isFocused => css`\n position:relative;\n order:1;\n display:flex;\n border: 1px solid ${colors.grayAnatomyLight3};\n border-radius: 0.6rem;\n overflow:hidden;\n height:4rem;\n box-sizing:border-box;\n\n ${isFocused && `\n box-shadow: none;\n border-image-source: ${gradients.missionCircularGradient};\n border-width: 2px;\n border-image-slice: 1;\n background-image: linear-gradient(to bottom, #fff, #fff), ${gradients.missionCircularGradient};\n background-origin: border-box;\n background-clip: padding-box, border-box;\n border-color: transparent !important;\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n `}\n\n &:hover:not(:disabled) {\n border-color: ${colors.purpleRainBase};\n\n & + label {\n color: ${colors.purpleRainBase};\n }\n }\n `,\n text: isFocused => css`\n display:flex;\n align-items:center;\n padding: 1rem;\n font-size: ${fontSize.small};\n color: ${isFocused ? colors.purpleRainBase : colors.grayAnatomyLight1};\n background: ${colors.grayAnatomyLight5};\n border-radius: 0.5rem 0 0 0.5rem;\n `,\n};\n\nexport default WithText;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useMutation } from \"@apollo/client\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { colors } from \"style\";\nimport { EditButton, SecondaryButton } from \"components/Buttons\";\n\n/**\n * Create New Instance\n *\n * @params {Array} fields\n * @params {Function} refetch\n * @params {String} placeholder\n * @params {Object} queryName\n * @params {String} labelKey\n * @params {Function} onComplete\n * @params {Object} variables\n *\n */\nconst CreateNewInstance = ({ fields, queryName, refetch, labelKey, onComplete, variables }) => {\n const [showInput, setShowInput] = useState(false);\n const [handleCreateInstance, { loading }] = useMutation(queryName);\n const [fieldValues, setFieldValues] = useState({});\n\n const handleFieldChange = (name, value) => setFieldValues({ ...fieldValues, [name]: value });\n\n const handleSubmit = (event) => {\n handleCreateInstance({\n variables: {\n input: {\n params: {\n ...fieldValues,\n },\n ...variables,\n },\n },\n onCompleted: (data) => {\n onComplete?.(data);\n setShowInput(false);\n setFieldValues({});\n refetch();\n },\n });\n event.preventDefault();\n };\n\n if (!showInput) {\n return (\n \n {text}\n
\n \n setShowInput(true)}>\n \n
\n );\n }\n\n return (\n \n
\n );\n};\n\nconst styles = {\n container: css`\n margin-left: -5rem;\n margin-right: -5rem;\n padding: 2rem 5rem;\n `,\n form_container: css`\n background: ${colors.grayAnatomyLight5};\n display: flex;\n flex-direction: row-reverse;\n gap: 1rem;\n `,\n icon: css`\n border-radius: 50%;\n width: 4rem;\n height: 3.5rem;\n background: ${colors.red};\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.7rem;\n `,\n};\n\nCreateNewInstance.defaultProps = {\n variables: {},\n fields: [],\n};\n\nCreateNewInstance.propTypes = {\n fields: PropTypes.array.isRequired,\n refetch: PropTypes.func,\n queryName: PropTypes.object,\n placeholder: PropTypes.string,\n labelKey: PropTypes.string,\n onComplete: PropTypes.func,\n keyName: PropTypes.string,\n variables: PropTypes.object,\n};\n\nexport default CreateNewInstance;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { fontSize, colors } from \"style\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { Row } from \"components/Containers\";\nimport TextInput from \"components/Form/TextInput\";\n\n/**\n * MinMaxInput\n *\n * @param {String} name\n * @param {Number} min\n * @param {Object} value\n * @param {Number} max\n * @param {Function} onChange\n * @param {Boolean} isClearable\n * @param {Element} component\n */\nconst MinMaxInput = ({ name, min, max, value, onChange, isClearable, component: Component, ...props }) => {\n const [localMin, setLocalMin] = useState(value?.min || min);\n const [localMax, setLocalMax] = useState(value?.max || max);\n const [focus, setFocus] = useState(false);\n\n useEffect(() => {\n if (value) {\n setLocalMin(value?.min || \"\");\n setLocalMax(value?.max || \"\");\n }\n }, [value]);\n\n useEffect(() => {\n if (focus) return;\n\n onChange(name, { min: localMin, max: localMax });\n }, [localMin, localMax, name, focus]);\n\n const clear = (name) => {\n if (name === \"min\") {\n setLocalMin(\"\");\n } else {\n setLocalMax(\"\");\n }\n };\n\n return (\n \n {fields.map((field) => (\n \n \n
\n \n \n
\n
\n );\n};\n\nconst styles = {\n container: css`\n position: relative;\n order: 1;\n `,\n input_container: css`\n display: flex;\n position: relative;\n align-items: center;\n flex: 1;\n `,\n divider: css`\n width: 1px;\n height: 4rem;\n background: ${colors.grayAnatomyLight3};\n `,\n input: css`\n width: 100%;\n font-size: ${fontSize.xsmall};\n padding-right: 3.5rem;\n `,\n left: css`\n border-right-color: transparent !important;\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `,\n right: css`\n border-left-color: transparent !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n `,\n hiddenSubmit: css`\n display: none;\n `,\n clearIcon: css`\n position: absolute;\n right: 1rem;\n top: 50%;\n margin-top: -1rem;\n color: ${colors.grayAnatomyLight2};\n cursor: pointer;\n\n &:hover {\n color: ${colors.grayAnatomyLight1};\n }\n `,\n};\n\nMinMaxInput.defaultProps = {\n component: TextInput,\n};\n\nMinMaxInput.propTypes = {\n name: PropTypes.string,\n min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n value: PropTypes.object,\n onChange: PropTypes.func.isRequired,\n isClearable: PropTypes.bool,\n component: PropTypes.element,\n};\n\nexport default MinMaxInput;\n","import React, { useState } from \"react\";\nimport { forwardRef } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport DropDown, { DropDownMenu, DropDownToggle } from \"components/DropDown\";\nimport { colors, fontSize } from \"style\";\nimport { CheckBoxGroup } from \"components/Form\";\nimport { Spinner } from \"components/Loader\";\n\n/**\n * CheckBoxDropDown\n *\n * @param {String} name\n * @param {Element} label\n * @param {Array} value\n * @param {Array} options\n * @param {String} valueKey\n * @param {String} labelKey\n * @param {String} descriptionKey\n * @param {Function} onChange\n * @param {Boolean} hasIcon\n * @param {Boolean} loading\n */\nconst CheckBoxDropDown = ({\n name,\n label,\n value,\n options,\n valueKey,\n labelKey,\n descriptionKey,\n onChange,\n hasIcon,\n loading,\n disabled,\n ...props\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const handleToggle = (nextShow) => setIsOpen(nextShow);\n\n return (\n \n setFocus(true)}\n onBlur={() => setFocus(false)}\n onChange={(name, val) => setLocalMin(val)}\n placeholder=\"Min\"\n css={[styles.input, styles.left]}\n {...props}\n />\n {isClearable && localMin && (\n clear(\"min\")} />\n )}\n
\n \n \n setFocus(true)}\n onBlur={() => setFocus(false)}\n onChange={(name, val) => setLocalMax(val)}\n placeholder=\"Max\"\n css={[styles.input, styles.right]}\n {...props}\n />\n {isClearable && localMax && (\n clear(\"max\")} />\n )}\n
\n \n
\n \n )}\n \n \n {children}\n
\n);\n\nconst style = css`\n font-size: ${fontSize.small};\n color: ${colors.error};\n font-weight: 500;\n margin-bottom: 2rem;\n`;\n\nFormError.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default FormError;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\n\n/**\n * Show a generic error message\n *\n * @params {Element} children\n * @params {String} width\n */\nconst FormFieldError = ({ children, width }) => (\n \n {children}\n
\n);\n\nconst style = (width) => css`\n font-size: ${fontSize.xxsmall};\n color: ${colors.red};\n font-weight: 400;\n order: 2;\n position: absolute;\n bottom: -1.75rem;\n width: ${width};\n\n &:nth-of-type(1) {\n margin-top: 0.8rem;\n }\n`;\n\nFormFieldError.propTypes = {\n children: PropTypes.node.isRequired,\n width: PropTypes.string.isRequired,\n};\n\nexport default FormFieldError;\n","/** @jsx jsx */\nimport styled from \"@emotion/styled\";\nimport { colors, fontSize } from \"style\";\n\n/**\n * Label\n */\nconst Label = styled.label`\n font-size: ${fontSize.small};\n font-weight: 500;\n line-height: 1.33;\n margin-bottom: 0.5rem;\n order: 0;\n display: flex;\n justify-content: space-between;\n transition: color 0.3s ease;\n align-items: center;\n\n &:first-letter {\n text-transform: uppercase;\n }\n\n ${(props) =>\n props.hasError &&\n `\n color: ${colors.red};\n `}\n`;\n\nexport default Label;\n","import React, { useState, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport Overlay from \"react-bootstrap/Overlay\";\nimport Tooltip from \"react-bootstrap/Tooltip\";\nimport styled from \"@emotion/styled\";\nimport { colors } from \"style\";\nimport { TextInput } from \"components/Form\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\n\n/**\n * CopyToClipboardInput\n *\n * @params {string} text\n * @params {node} title\n * @params {number} delay\n */\nconst CopyToClipboardInput = ({ text, title, delay }) => {\n const [showTooltip, setShowTooltip] = useState(false);\n const copyLinkTarget = useRef(null);\n\n const copyToClipBoard = () => {\n // eslint-disable-next-line no-undef\n navigator.clipboard.writeText(text);\n setShowTooltip(!showTooltip);\n\n setTimeout(() => {\n setShowTooltip(false);\n }, delay);\n };\n\n return (\n \n {label}\n
\n ) : isP ? (\n{description}
\n ) : (\n{description}
}\n \n );\n};\n\nconst styles = {\n description: css`\n margin-right: 4rem;\n color: ${colors.grayAnatomyBase};\n line-height: 1.3;\n margin-bottom: 1rem;\n margin-top: -0.25rem;\n `,\n heading: css``,\n optional: (isExpanded) => css`\n font-size: ${fontSize.xxsmall};\n color: ${colors.grayAnatomyLight2};\n opacity: ${isExpanded ? 1 : 0};\n transition: opacity 0.3s ease;\n `,\n hint: (isExpanded) => css`\n font-size: ${fontSize.xxsmall};\n color: ${colors.grayAnatomyLight1};\n opacity: ${isExpanded ? 1 : 0};\n transition: opacity 0.3s ease;\n `,\n};\n\nconst StyledLabel = styled(Label)`\n margin-top: 0.75rem;\n user-select: none;\n\n ${({ isChild }) =>\n isChild &&\n `\n font-weight:400;\n margin: 0 !important;\n font-size: ${fontSize.xxsmall};\n `\n }\n\n ${({ isExpandable }) =>\n isExpandable &&\n `\n cursor: pointer;\n\n &:hover {\n color: ${colors.purpleRainBase};\n }\n\n ~ * {\n display:none;\n }\n `}\n`;\n\nFormLabel.propTypes = {\n type: PropTypes.any.isRequired,\n label: PropTypes.string,\n description: PropTypes.string,\n name: PropTypes.string,\n hasError: PropTypes.bool,\n required: PropTypes.bool,\n requiredAll: PropTypes.bool,\n hint: PropTypes.any,\n hideOptionalLabel: PropTypes.bool,\n isExpanded: PropTypes.bool,\n isExpandable: PropTypes.bool,\n};\n\nexport default FormLabel;\n","import Form from \"./Form\";\nimport TextInput, { Password } from \"./TextInput\";\nimport InputHidden from \"./InputHidden\";\nimport TagsInput from \"./TagsInput\";\nimport TextArea from \"./TextArea\";\nimport Editor from \"./Editor\";\nimport Button from \"./Button\";\nimport Link from \"./Link\";\nimport DatePicker from \"./DatePicker\";\nimport MonthPicker from \"./MonthPicker\";\nimport Links from \"./Links\";\nimport CheckBox from \"./CheckBox\";\nimport Toggle from \"./Toggle\";\nimport CheckBoxGroup from \"./CheckBoxGroup\";\nimport Select from \"./Select\";\nimport Switch from \"./Switch\";\nimport Schedule from \"./Schedule\";\nimport Photo from \"./Photo\";\nimport GeoLocator from \"./GeoLocator\";\nimport Resume from \"./Resume\";\nimport BoxSelector from \"./BoxSelector\";\nimport Radio, { RADIO_DIRECTION } from \"./Radio\";\nimport Slider from \"./Slider\";\nimport { withIcon } from \"components/Icon\";\nimport withText from \"./WithText\";\nimport CreateNewInstance from \"./CreateNewInstance\";\nimport MinMaxInput from \"./MinMaxInput\";\nimport { PrimaryLink } from \"components/Links\";\n\nexport { default as TextInput } from \"./TextInput\";\nexport { default as TagsInput } from \"./TagsInput\";\nexport { default as TextArea } from \"./TextArea\";\nexport { default as Button } from \"./Button\";\nexport { default as Link } from \"./Link\";\nexport { default as DatePicker } from \"./DatePicker\";\nexport { default as Links } from \"./Links\";\nexport { default as CheckBox } from \"./CheckBox\";\nexport { default as CheckBoxDropDown } from \"./CheckBoxDropDown\";\nexport { default as Toggle } from \"./Toggle\";\nexport { default as CheckBoxGroup } from \"./CheckBoxGroup\";\nexport { default as Select } from \"./Select\";\nexport { default as Switch } from \"./Switch\";\nexport { default as Photo } from \"./Photo\";\nexport { default as Resume } from \"./Resume\";\nexport { default as FormElement } from \"./FormElement\";\nexport { default as FormError } from \"./FormError\";\nexport { default as FormFieldError } from \"./FormFieldError\";\nexport { default as Schedule } from \"./Schedule\";\nexport { default as Label } from \"./Label\";\nexport { default as BoxSelector } from \"./BoxSelector\";\nexport { default as Radio } from \"./Radio\";\nexport { default as CopyToClipboardInput } from \"./CopyToClipboardInput\";\nexport { default as MonthPicker } from \"./MonthPicker\";\nexport { Password } from \"./TextInput\";\nexport { default as CreateNewInstance } from \"./CreateNewInstance\";\nexport { default as FormLabel } from \"./FormLabel\";\nexport { default as Slider } from \"./Slider\";\nexport { default as MinMaxInput } from \"./MinMaxInput\";\nexport { default as Editor } from \"./Editor\";\nexport { default as InputHidden } from \"./InputHidden\";\nexport { defaultValue as editorDefaultValue } from \"./Editor\";\n\nconst SIZE = {\n small: \"small\",\n medium: \"medium\",\n large: \"large\",\n xlarge: \"xlarge\",\n};\n\nconst TYPE_KEYNAMES = {\n radio: \"radio\",\n textarea: \"textarea\",\n select: \"select\",\n slider: \"slider\",\n createNewInstance: \"createNewInstance\",\n checkBoxGroup: \"checkBoxGroup\",\n tags: \"tags\",\n};\n\nconst TYPE = {\n input: TextInput,\n schedule: Schedule,\n tags: TagsInput,\n textarea: TextArea,\n editor: Editor,\n password: Password,\n button: Button,\n datePicker: DatePicker,\n monthPicker: MonthPicker,\n checkbox: CheckBox,\n toggle: Toggle,\n checkBoxGroup: CheckBoxGroup,\n link: Link,\n p: \"p\",\n h4: \"h4\",\n links: Links,\n select: Select,\n geoLocator: GeoLocator,\n switch: Switch,\n photo: Photo,\n resume: Resume,\n boxSelector: BoxSelector,\n radio: Radio,\n slider: Slider,\n minMaxInput: MinMaxInput,\n createNewInstance: CreateNewInstance,\n hidden: InputHidden,\n label: \"label\",\n primaryLink: PrimaryLink,\n};\n\nconst METHOD = {\n post: \"post\",\n get: \"get\",\n patch: \"patch\",\n delete: \"delete\",\n put: \"put\",\n};\n\nconst DECORATORS = {\n icon: withIcon,\n text: withText,\n};\n\nconst LABEL_DIRECTION = {\n horizontal: \"horizontal\",\n vertical: \"vertical\",\n};\n\nexport { SIZE, TYPE, METHOD, DECORATORS, TYPE_KEYNAMES, LABEL_DIRECTION, RADIO_DIRECTION as LAYOUT_DIRECTION };\n\n/**\n * The TextArea component is not accessing SIZE constant in\n * defaultProps of TextArea component\n */\nTextArea.defaultProps = {\n height: SIZE.xlarge,\n};\n\n/**\n * The Radio component is not accessing SIZE constant in\n * defaultProps of TextArea component\n */\nRadio.defaultProps = {\n position: RADIO_DIRECTION.vertical,\n};\n\nexport default Form;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { NavList } from \"components/Nav\";\nimport { PublicHeader } from \"components/Public\";\n\n/**\n * Header\n *\n * @param {Array} pages\n */\nconst Header = ({ pages }) => {\n return (\n <>\n\n
\n \n \n
\n \n
\n {children}\n {children}
;\n\nconst styles = {\n container: css`\n width: 100%;\n left: 0;\n right: 0;\n top: 0;\n background-image: url(${ImageHeroBackground});\n background-size: 100% 41.2rem;\n background-repeat: no-repeat;\n padding: 1.6rem;\n `,\n};\n\nGradientHeader.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default GradientHeader;\n","import Header from \"./Header\";\n\nexport { default as HeaderPublicGradient } from \"./HeaderPublicGradient\";\nexport { default as HeaderGradient } from \"./HeaderGradient\";\n\nexport default Header;\n","/** @jsx jsx */\nimport { colors, fontSize } from \"style\";\nimport styled from \"@emotion/styled\";\n\n/**\n * Icon\n */\nconst Icon = styled.i`\n font-size: ${fontSize.normal};\n color: ${(props) => (props.color ? props.color : colors.grayAnatomyLight1)};\n font-family: \"mission-icon\";\n speak: never;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n position: relative;\n top: 0px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n ${(props) => props.size && `font-size: ${props.size}`};\n\n ${(props) =>\n props.type === \"more\" &&\n `\n font-family: inherit;\n font-size: 1rem;\n white-space: nowrap;\n color: ${colors.purpleRainDark2};\n\n &:before {\n content: \"• • •\"\n }\n `}\n\n &:before {\n ${(props) => props.type === \"training\" && `content: \"\\\\e959\";`}\n ${(props) => props.type === \"home\" && `content: \"\\\\e92d\";`}\n ${(props) => props.type === \"logout\" && `content: \"\\\\e998\";`} \n ${(props) => props.type === \"settings\" && `content: \"\\\\e935\";`}\n ${(props) => props.type === \"squads\" && `content: \"\\\\e93b\";`}\n ${(props) => props.type === \"dollarBill\" && `content: \"\\\\e95a\";`}\n ${(props) => props.type === \"notes\" && `content: \"\\\\e930\";`}\n ${(props) => props.type === \"flag\" && `content: \"\\\\e92f\";`}\n ${(props) => props.type === \"network\" && `content: \"\\\\e92e\";`}\n ${(props) => props.type === \"organization\" && `content: \"\\\\e92d\";`}\n ${(props) => props.type === \"status\" && `content: \"\\\\e92c\";`}\n ${(props) => props.type === \"bookmarkEmpty\" && `content: \"\\\\e92b\";`}\n ${(props) => props.type === \"bookmarkFilled\" && `content: \"\\\\e91d\";`}\n ${(props) => props.type === \"dottedCircle\" && `content: \"\\\\e929\";`}\n ${(props) => props.type === \"checkDotted\" && `content: \"\\\\e92a\";`}\n ${(props) => props.type === \"clock\" && `content: \"\\\\e917\";`}\n ${(props) => props.type === \"chevronLeft\" && `content: \"\\\\e918\";`}\n ${(props) => props.type === \"coin\" && `content: \"\\\\e919\";`}\n ${(props) => props.type === \"engagementRing\" && `content: \"\\\\e91a\";`}\n ${(props) => props.type === \"hourglass\" && `content: \"\\\\e91b\";`}\n ${(props) => props.type === \"pin\" && `content: \"\\\\e91c\";`}\n ${(props) => props.type === \"dot\" && `content: \"\\\\e91e\";`}\n ${(props) => props.type === \"bolt\" && `content: \"\\\\e91f\";`}\n ${(props) => props.type === \"unavailable\" && `content: \"\\\\e920\";`}\n ${(props) => props.type === \"email\" && `content: \"\\\\e922\";`}\n ${(props) => props.type === \"emailUpdate\" && `content: \"\\\\e921\";`}\n ${(props) => props.type === \"arrowRight\" && `content: \"\\\\e923\";`}\n ${(props) => props.type === \"arrowLeft\" && `content: \"\\\\e924\";`}\n ${(props) => props.type === \"arrowDown\" && `content: \"\\\\e925\";`}\n ${(props) => props.type === \"arrowUp\" && `content: \"\\\\e926\";`}\n ${(props) => props.type === \"eye\" && `content: \"\\\\e927\";`}\n ${(props) => props.type === \"user\" && `content: \"\\\\e928\";`}\n ${(props) => props.type === \"checkFilled\" && `content: \"\\\\e916\";`}\n ${(props) => props.type === \"magnify\" && `content: \"\\\\e915\";`}\n ${(props) => props.type === \"file\" && `content: \"\\\\e914\";`}\n ${(props) => props.type === \"line\" && `content: \"\\\\e913\";`}\n ${(props) => props.type === \"checkmark\" && `content: \"\\\\e912\";`}\n ${(props) => props.type === \"chevronUp\" && `content: \"\\\\e991\";`}\n ${(props) => props.type === \"chevronDown\" && `content: \"\\\\e911\";`}\n ${(props) => props.type === \"video\" && `content: \"\\\\e900\";`}\n ${(props) => props.type === \"upload\" && `content: \"\\\\e901\";`}\n ${(props) => props.type === \"plus\" && `content: \"\\\\e902\";`}\n ${(props) => props.type === \"photo\" && `content: \"\\\\e903\";`}\n ${(props) => props.type === \"message\" && `content: \"\\\\e904\";`}\n ${(props) => props.type === \"listNumeric\" && `content: \"\\\\e905\";`}\n ${(props) => props.type === \"listBullet\" && `content: \"\\\\e906\";`}\n ${(props) => props.type === \"link\" && `content: \"\\\\e907\";`}\n ${(props) => props.type === \"listLines\" && `content: \"\\\\e96e\";`}\n ${(props) => props.type === \"export\" && `content: \"\\\\e908\";`}\n ${(props) => props.type === \"emoji\" && `content: \"\\\\e909\";`}\n ${(props) => props.type === \"edit\" && `content: \"\\\\e90a\";`}\n ${(props) => props.type === \"code\" && `content: \"\\\\e90b\";`}\n ${(props) => props.type === \"close\" && `content: \"\\\\e90c\";`}\n ${(props) => props.type === \"calendar\" && `content: \"\\\\e90d\";`}\n ${(props) => props.type === \"bold\" && `content: \"\\\\e90e\";`}\n ${(props) => props.type === \"toolSlack\" && `content: \"\\\\e90f\";`}\n ${(props) => props.type === \"analytics\" && `content: \"\\\\e910\";`}\n ${(props) => props.type === \"trash\" && `content: \"\\\\e939\";`}\n ${(props) => props.type === \"info\" && `content: \"\\\\e97a\";`}\n ${(props) => props.type === \"filters\" && `content: \"\\\\e97c\";`}\n ${(props) => props.type === \"analytic\" && `content: \"\\\\e97e\";`}\n ${(props) => props.type === \"eyes\" && `content: \"\\\\e97f\";`}\n ${(props) => props.type === \"warning\" && `content: \"!\";`}\n ${(props) => props.type === \"archive\" && `content: \"\\\\e980\";`}\n ${(props) => props.type === \"duplicate\" && `content: \"\\\\e981\";`}\n ${(props) => props.type === \"arrowExpand\" && `content: \"\\\\e982\";`}\n ${(props) => props.type === \"arrowCollapse\" && `content: \"\\\\e983\";`}\n ${(props) => props.type === \"lightBulb\" && `content: \"\\\\e984\";`}\n ${(props) => props.type === \"performance\" && `content: \"\\\\e985\";`}\n ${(props) => props.type === \"mentorship\" && `content: \"\\\\e986\";`}\n ${(props) => props.type === \"plan\" && `content: \"\\\\e987\";`}\n ${(props) => props.type === \"mic\" && `content: \"\\\\e988\";`}\n ${(props) => props.type === \"townHall\" && `content: \"\\\\e989\";`}\n ${(props) => props.type === \"gridCard\" && `content: \"\\\\e97b\";`}\n ${(props) => props.type === \"businessCard\" && `content: \"\\\\e99d\";`}\n ${(props) => props.type === \"copy\" && `content: \"\\\\e98b\";`}\n ${(props) => props.type === \"rotate\" && `content: \"\\\\e98c\";`}\n ${(props) => props.type === \"share\" && `content: \"\\\\e97d\";`}\n ${(props) => props.type === \"dots\" && `content: \"\\\\e98a\";`}\n ${(props) => props.type === \"vue\" && `content: \"\\\\e95b\";`}\n ${(props) => props.type === \"typeScript\" && `content: \"\\\\e95c\";`}\n ${(props) => props.type === \"swift\" && `content: \"\\\\e95d\";`}\n ${(props) => props.type === \"selenium\" && `content: \"\\\\e95e\";`}\n ${(props) => props.type === \"rubyOnRails\" && `content: \"\\\\e95f\";`}\n ${(props) => props.type === \"react\" && `content: \"\\\\e960\";`}\n ${(props) => props.type === \"python\" && `content: \"\\\\e961\";`}\n ${(props) => props.type === \"postman\" && `content: \"\\\\e962\";`}\n ${(props) => props.type === \"pearl\" && `content: \"\\\\e963\";`}\n ${(props) => props.type === \"php\" && `content: \"\\\\e964\";`}\n ${(props) => props.type === \"node\" && `content: \"\\\\e965\";`}\n ${(props) => props.type === \"nest\" && `content: \"\\\\e966\";`}\n ${(props) => props.type === \"mySql\" && `content: \"\\\\e967\";`}\n ${(props) => props.type === \"linux\" && `content: \"\\\\e968\";`}\n ${(props) => props.type === \"kubernetes\" && `content: \"\\\\e969\";`}\n ${(props) => props.type === \"jenkins\" && `content: \"\\\\e96a\";`}\n ${(props) => props.type === \"javaScript\" && `content: \"\\\\e96b\";`}\n ${(props) => props.type === \"heroku\" && `content: \"\\\\e96c\";`}\n ${(props) => props.type === \"graphQl\" && `content: \"\\\\e96d\";`}\n ${(props) => props.type === \"flux\" && `content: \"\\\\e96f\";`}\n ${(props) => props.type === \"cypress\" && `content: \"\\\\e970\";`}\n ${(props) => props.type === \"css\" && `content: \"\\\\e971\";`}\n ${(props) => props.type === \"cSharp\" && `content: \"\\\\e972\";`}\n ${(props) => props.type === \"bootstrap\" && `content: \"\\\\e973\";`}\n ${(props) => props.type === \"azure\" && `content: \"\\\\e974\";`}\n ${(props) => props.type === \"apple\" && `content: \"\\\\e975\";`}\n ${(props) => props.type === \"angular\" && `content: \"\\\\e976\";`}\n ${(props) => props.type === \"android\" && `content: \"\\\\e977\";`}\n ${(props) => props.type === \"ajax\" && `content: \"\\\\e978\";`}\n ${(props) => props.type === \"aws\" && `content: \"\\\\e979\";`}\n ${(props) => props.type === \"question\" && `content: \"\\\\e969\";`}\n ${(props) => props.type === \"send\" && `content: \"\\\\e98c\";`}\n ${(props) => props.type === \"java\" && `content: \"\\\\e98d\";`}\n ${(props) => props.type === \"go\" && `content: \"\\\\e98e\";`}\n ${(props) => props.type === \"flutter\" && `content: \"\\\\e98f\";`}\n ${(props) => props.type === \"dotnet\" && `content: \"\\\\e990\";`}\n ${(props) => props.type === \"expanded\" && `content: \"\\\\e911\";`}\n ${(props) => props.type === \"timerStop\" && `content: \"\\\\e992\";`}\n ${(props) => props.type === \"timerStart\" && `content: \"\\\\e993\";`}\n ${(props) => props.type === \"end\" && `content: \"\\\\e994\";`}\n ${(props) => props.type === \"stop\" && `content: \"\\\\e995\";`}\n ${(props) => props.type === \"handShake\" && `content: \"\\\\e996\";`}\n ${(props) => props.type === \"eyeBlocked\" && `content: \"\\\\e9d1\";`}\n ${(props) => props.type === \"dollar\" && `content: \"$\";`} \n ${(props) => props.type === \"percent\" && `content: \"%\";`}\n ${(props) => props.type === \"USD\" && `content: \"USD\";`}\n ${(props) => props.type === \"CAD\" && `content: \"CAD\";`}\n ${(props) => props.type === \"EUR\" && `content: \"EUR\";`}\n ${(props) => props.type === \"users\" && `content: \"\\\\e997\";`}\n ${(props) => props.type === \"flame\" && `content: \"\\\\1F525\";`}\n ${(props) => props.type === \"thumbsUp\" && `content: \"\\\\1F44D\";`}\n ${(props) => props.type === \"stairs\" && `content: \"\\\\e99c\";`}\n ${(props) => props.type === \"thumbsDown\" && `content: \"\\\\1F44E\";`}\n ${(props) => props.type === \"exclamation\" && `content: \"\\\\2757\";`}\n ${(props) => props.type === \"prohibited\" && `content: \"\\\\1F6AB\";`}\n ${(props) => props.type === \"attention\" && `content: \"\\\\26A0\";`}\n ${(props) => props.type === \"trendDown\" && `content: \"\\\\21A7\";`}\n ${(props) => props.type === \"star\" && `content: \"\\\\e99b\";`}\n ${(props) => props.type === \"heart\" && `content: \"\\\\e99a\";`}\n ${(props) => props.type === \"gear\" && `content: \"\\\\e9a1\";`}\n ${(props) => props.type === \"equalizer\" && `content: \"\\\\e99f\";`}\n ${(props) => props.type === \"board\" && `content: \"\\\\e9a0\";`}\n ${(props) => props.type === \"video_list\" && `content: \"\\\\e9a3\";`}\n ${(props) => props.type === \"video_list_outlined\" && `content: \"\\\\e9a2\";`}\n ${(props) => props.type === \"artificialIntelligence\" && `content: \"\\\\e9a4\";`}\n ${(props) => props.type === \"dataScience\" && `content: \"\\\\e9a5\";`}\n ${(props) => props.type === \"refresh\" && `content: \"\\\\ea2e\";`}\n ${(props) => props.type === \"list-numbered\" && `content: \"\\\\e9b9\";`}\n ${(props) => props.type === \"list2\" && `content: \"\\\\e9b9\";`}\n ${(props) => props.type === \"underline\" && `content: \"\\\\ea63\";`}\n ${(props) => props.type === \"italic\" && `content: \"\\\\ea64\";`}\n ${(props) => props.type === \"strikethrough\" && `content: \"\\\\ea65\";`}\n ${(props) => props.type === \"paragraph-left\" && `content: \"\\\\ea77\";`}\n ${(props) => props.type === \"paragraph-center\" && `content: \"\\\\ea78\";`}\n ${(props) => props.type === \"paragraph-right\" && `content: \"\\\\ea79\";`}\n }\n`;\n\nconst ICON_SIZE = {\n xsmall: \"1rem\",\n small: \"1.2rem\",\n normal: \"1.4rem\",\n medium: \"1.6rem\",\n large: \"2rem\",\n xlarge: \"2.4rem\",\n xxlarge: \"3rem\",\n xxxlarge: \"4rem\",\n xxxxlarge: \"8rem\",\n};\n\nconst ICON_POSITION = {\n overlay: \"overlay\",\n iconRight: \"icon-right\",\n};\n\nconst ICON_TYPE = {\n home: \"home\",\n logout: \"logout\",\n settings: \"settings\",\n squads: \"squads\",\n more: \"more\",\n trash: \"trash\",\n training: \"training\",\n dollarBill: \"dollarBill\",\n notes: \"notes\",\n flag: \"flag\",\n network: \"network\",\n organization: \"organization\",\n status: \"status\",\n bookmarkEmpty: \"bookmarkEmpty\",\n bookmarkFilled: \"bookmarkFilled\",\n dottedCircle: \"dottedCircle\",\n checkDotted: \"checkDotted\",\n clock: \"clock\",\n chevronLeft: \"chevronLeft\",\n coin: \"coin\",\n engagementRing: \"engagementRing\",\n hourglass: \"hourglass\",\n pin: \"pin\",\n dot: \"dot\",\n bolt: \"bolt\",\n unavailable: \"unavailable\",\n email: \"email\",\n emailUpdate: \"emailUpdate\",\n arrowRight: \"arrowRight\",\n arrowLeft: \"arrowLeft\",\n arrowDown: \"arrowDown\",\n arrowUp: \"arrowUp\",\n eye: \"eye\",\n user: \"user\",\n checkFilled: \"checkFilled\",\n search: \"magnify\", // Can't be \"search\" because HTML reserved type\n file: \"file\",\n line: \"line\",\n checkmark: \"checkmark\",\n chevronDown: \"chevronDown\",\n chevronUp: \"chevronUp\",\n video: \"video\",\n upload: \"upload\",\n plus: \"plus\",\n photo: \"photo\",\n message: \"message\",\n listNumeric: \"listNumeric\",\n listBullet: \"listBullet\",\n listLines: \"listLines\",\n link: \"link\",\n export: \"export\",\n emoji: \"emoji\",\n edit: \"edit\",\n code: \"code\",\n close: \"close\",\n calendar: \"calendar\",\n bold: \"bold\",\n toolSlack: \"toolSlack\",\n analytics: \"analytics\",\n mentorship: \"mentorship\",\n performance: \"performance\",\n lightBulb: \"lightBulb\",\n warning: \"warning\",\n info: \"info\",\n filters: \"filters\",\n analytic: \"analytic\",\n gridCard: \"gridCard\",\n copy: \"copy\",\n rotate: \"rotate\",\n share: \"share\",\n eyes: \"eyes\",\n archive: \"archive\",\n duplicate: \"duplicate\",\n arrowExpand: \"arrowExpand\",\n arrowCollapse: \"arrowCollapse\",\n plan: \"plan\",\n mic: \"mic\",\n townHall: \"townHall\",\n dots: \"dots\",\n vue: \"vue\",\n typescript: \"typeScript\",\n swift: \"swift\",\n selenium: \"selenium\",\n rubyonrails: \"rubyOnRails\",\n react: \"react\",\n python: \"python\",\n postman: \"postman\",\n pearl: \"pearl\",\n php: \"php\",\n node: \"node\",\n nest: \"nest\",\n mysql: \"mySql\",\n linux: \"linux\",\n kubernetes: \"kubernetes\",\n jenkins: \"jenkins\",\n javascript: \"javaScript\",\n heroku: \"heroku\",\n graphql: \"graphQl\",\n flux: \"flux\",\n cypress: \"cypress\",\n css: \"css\",\n csharp: \"cSharp\",\n bootstrap: \"bootstrap\",\n azure: \"azure\",\n apple: \"apple\",\n angular: \"angular\",\n android: \"android\",\n ajax: \"ajax\",\n aws: \"aws\",\n question: \"question\",\n send: \"send\",\n qa: \"code\",\n data: \"code\",\n ios: \"apple\",\n java: \"java\",\n flutter: \"flutter\",\n go: \"go\",\n dotnet: \"dotnet\",\n sql: \"code\",\n stairs: \"stairs\",\n expanded: \"expanded\",\n timerStop: \"timerStop\",\n timerStart: \"timerStart\",\n end: \"end\",\n stop: \"stop\",\n handShake: \"handShake\",\n eyeBlocked: \"eyeBlocked\",\n dollar: \"dollar\",\n percent: \"percent\",\n users: \"users\",\n attention: \"attention\",\n trendDown: \"trendDown\",\n flame: \"flame\",\n thumbsUp: \"thumbsUp\",\n thumbsDown: \"thumbsDown\",\n exclamation: \"exclamation\",\n prohibited: \"prohibited\",\n star: \"star\",\n heart: \"heart\",\n businessCard: \"businessCard\",\n gear: \"gear\",\n equalizer: \"equalizer\",\n board: \"board\",\n videoList: \"video_list\",\n videoListOutlined: \"video_list_outlined\",\n artificialintelligence: \"artificialIntelligence\",\n datascience: \"dataScience\",\n refresh: \"refresh\",\n listNumbered: \"list-numbered\",\n list2: \"list2\",\n underline: \"underline\",\n italic: \"italic\",\n strikethrough: \"strikethrough\",\n paragraphLeft: \"paragraph-left\",\n paragraphCenter: \"paragraph-center\",\n paragraphRight: \"paragraph-right\",\n};\n\nexport { ICON_TYPE, ICON_SIZE, ICON_POSITION };\n\nexport default Icon;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\n/**\n * ColorIcon\n *\n * @params {String} iconType\n */\nconst SocialIcon = ({ type, ...props }) => (\n \n {Array.from(Array(ICON_MAP[type]).keys()).map((key) => (\n \n ))}\n \n);\n\nconst Span = styled.span`\n font-family: \"mission-icon\";\n font-size: 2.8rem;\n speak: never;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 2.8rem;\n height: 2.8rem;\n border-radius: 100%;\n position: relative;\n\n span {\n position: absolute;\n }\n`;\n\nconst ICON_MAP = {\n behance: 2,\n bitbucket: 2,\n codepen: 2,\n custom: 2,\n dev: 2,\n dribbble: 2,\n gitlab: 8,\n jsfiddle: 2,\n kaggle: 2,\n medium: 2,\n stack_overflow: 3,\n youtube: 2,\n facebook: 2,\n github: 2,\n linkedin: 2,\n twitter: 2,\n calendly: 2,\n};\n\nconst styles = {\n behance: css`\n .path1:before {\n content: \"\\\\e93a\";\n color: rgb(23, 105, 255);\n }\n .path2:before {\n content: \"\\\\e93b\";\n color: rgb(255, 255, 255);\n }\n `,\n\n bitbucket: css`\n .path1:before {\n content: \"\\\\e93c\";\n color: rgb(32, 80, 129);\n }\n .path2:before {\n content: \"\\\\e93d\";\n color: rgb(255, 255, 255);\n }\n `,\n\n codepen: css`\n .path1:before {\n content: \"\\\\e93e\";\n color: rgb(0, 0, 0);\n }\n .path2:before {\n content: \"\\\\e93f\";\n color: rgb(204, 204, 204);\n }\n `,\n\n custom: css`\n .path1:before {\n content: \"\\\\e940\";\n color: rgb(85, 76, 197);\n }\n .path2:before {\n content: \"\\\\e941\";\n color: rgb(255, 255, 255);\n }\n `,\n\n dev: css`\n .path1:before {\n content: \"\\\\e942\";\n color: rgb(0, 0, 0);\n }\n .path2:before {\n content: \"\\\\e943\";\n color: rgb(255, 255, 255);\n }\n `,\n\n dribbble: css`\n .path1:before {\n content: \"\\\\e944\";\n color: rgb(220, 63, 122);\n }\n .path2:before {\n content: \"\\\\e945\";\n color: rgb(255, 255, 255);\n }\n `,\n\n gitlab: css`\n .path1:before {\n content: \"\\\\e946\";\n color: rgb(247, 247, 249);\n }\n .path2:before {\n content: \"\\\\e947\";\n color: rgb(226, 67, 41);\n }\n .path3:before {\n content: \"\\\\e948\";\n color: rgb(252, 109, 38);\n }\n .path4:before {\n content: \"\\\\e949\";\n color: rgb(252, 163, 38);\n }\n .path5:before {\n content: \"\\\\e94a\";\n color: rgb(226, 67, 41);\n }\n .path6:before {\n content: \"\\\\e94b\";\n color: rgb(252, 109, 38);\n }\n .path7:before {\n content: \"\\\\e94c\";\n color: rgb(252, 163, 38);\n }\n .path8:before {\n content: \"\\\\e94d\";\n color: rgb(226, 67, 41);\n }\n `,\n\n jsfiddle: css`\n .path1:before {\n content: \"\\\\e94e\";\n color: rgb(70, 121, 164);\n }\n .path2:before {\n content: \"\\\\e94f\";\n color: rgb(255, 255, 255);\n }\n `,\n\n kaggle: css`\n .path1:before {\n content: \"\\\\e950\";\n color: rgb(32, 190, 255);\n }\n .path2:before {\n content: \"\\\\e951\";\n color: rgb(255, 255, 255);\n }\n `,\n\n medium: css`\n .path1:before {\n content: \"\\\\e952\";\n color: rgb(0, 0, 0);\n }\n .path2:before {\n content: \"\\\\e953\";\n color: rgb(255, 255, 255);\n }\n `,\n\n stack_overflow: css`\n .path1:before {\n content: \"\\\\e954\";\n color: rgb(247, 247, 249);\n }\n .path2:before {\n content: \"\\\\e955\";\n color: rgb(188, 187, 187);\n }\n .path3:before {\n content: \"\\\\e956\";\n color: rgb(244, 128, 36);\n }\n `,\n\n youtube: css`\n .path1:before {\n content: \"\\\\e957\";\n color: rgb(247, 247, 249);\n }\n .path2:before {\n content: \"\\\\e958\";\n color: rgb(255, 0, 0);\n }\n `,\n\n facebook: css`\n .path1:before {\n content: \"\\\\e931\";\n color: rgb(59, 89, 152);\n }\n\n .path2:before {\n content: \"\\\\e932\";\n color: rgb(255, 255, 255);\n }\n `,\n\n github: css`\n .path1:before {\n content: \"\\\\e933\";\n color: rgb(64, 120, 192);\n }\n\n .path2:before {\n content: \"\\\\e934\";\n color: rgb(255, 255, 255);\n }\n `,\n\n linkedin: css`\n .path1:before {\n content: \"\\\\e935\";\n color: rgb(0, 119, 181);\n }\n\n .path2:before {\n content: \"\\\\e936\";\n color: rgb(255, 255, 255);\n }\n `,\n\n twitter: css`\n .path1:before {\n content: \"\\\\e937\";\n color: rgb(29, 161, 242);\n }\n\n .path2:before {\n content: \"\\\\e938\";\n color: rgb(255, 255, 255);\n }\n `,\n\n calendly: css`\n .path1:before {\n content: \"\\\\e90d\";\n color: rgb(0, 107, 255);\n }\n\n .path2:before {\n content: \"\\\\e90d\";\n color: rgb(0, 107, 255);\n }\n`,\n};\n\nconst SOCIAL_ICON_TYPE = {\n behance: \"behance\",\n bitbucket: \"bitbucket\",\n codepen: \"codepen\",\n custom: \"custom\",\n dev: \"dev\",\n dribbble: \"dribbble\",\n gitlab: \"gitlab\",\n jsfiddle: \"jsfiddle\",\n kaggle: \"kaggle\",\n medium: \"medium\",\n stack_overflow: \"stack_overflow\",\n youtube: \"youtube\",\n facebook: \"facebook\",\n github: \"github\",\n linkedin: \"linkedin\",\n twitter: \"twitter\",\n calendly: \"calendly\"\n};\n\nSocialIcon.defaultProps = {\n type: SOCIAL_ICON_TYPE.facebook,\n};\n\nSocialIcon.propTypes = {\n type: PropTypes.string,\n};\n\nexport { SOCIAL_ICON_TYPE };\n\nexport default SocialIcon;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { colors } from \"style\";\nimport ActionButton from \"components/Buttons/Action\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\nimport { Spinner } from \"components/Loader\";\n\n/**\n * EditIcon\n *\n * @param {Boolean} isRightSide\n * @param {Boolean} loading\n */\nconst EditIcon = ({ isRightSide, loading, ...props }) => (\n \n
\n );\n case \"icon-right\":\n return (\n \n
\n \n
\n);\n\nconst styles = {\n icon_container: (isComplete, isError) => css`\n background: ${isComplete ? colors.green : isError ? colors.red : colors.grayAnatomyLight5};\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n position: relative;\n width:100%;\n height:100%;\n `,\n};\n\nStatusIcon.defaultProps = {\n type: ICON_TYPE.checkmark\n};\n\nStatusIcon.propTypes = {\n type: PropTypes.string,\n color: PropTypes.string,\n isComplete: PropTypes.bool,\n isError: PropTypes.bool,\n};\n\nexport default StatusIcon;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { colors } from \"style\";\n\n/**\n * ExpandIcon\n *\n * @param {Booleam} isExpanded\n * @param {String} color\n */\nconst ExpandIcon = ({ isExpanded, color, size, ...props }) => (\n \n
\n);\n\nconst styles = {\n container: (isExpanded, color) => css`\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease;\n cursor: pointer;\n color: ${color || colors.grayAnatomyLight1};\n user-select: none;\n\n &:hover {\n color: ${color || colors.purpleRainBase};\n }\n\n ${!isExpanded &&\n `\n transform: rotate(-90deg);\n `}\n\n ${isExpanded &&\n `\n color: ${color || colors.purpleRainBase};\n `}\n `,\n};\n\nExpandIcon.defaultProps = {\n size: ICON_SIZE.small,\n};\n\nExpandIcon.propTypes = {\n isExpanded: PropTypes.bool,\n color: PropTypes.string,\n size: PropTypes.string,\n};\n\nexport default ExpandIcon;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { ICON_SIZE } from \"./Icon\";\nimport { css } from \"@emotion/react\";\n\n/**\n * ColorIcon\n *\n * @params {String} size\n */\nconst NotifyIcon = ({ size }) => 📢;\n\nconst styles = {\n icon: (size) => css`\n color: inherit;\n font-size: ${size};\n `,\n};\n\nNotifyIcon.defaultProps = {\n size: ICON_SIZE.small,\n};\n\nNotifyIcon.propTypes = {\n size: PropTypes.string,\n};\n\nexport default NotifyIcon;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport Icon, { ICON_TYPE } from \"components/Icon\";\nimport { colors } from \"style\";\n\n/**\n * CloseIcon\n */\nconst CloseIcon = (props) => (\n \n
\n);\n\nconst styles = {\n icon_container: css`\n background: ${colors.grayAnatomyDark};\n color: #fff;\n border-radius: 100%;\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -1rem;\n right: -1rem;\n transition: all 0.3s ease;\n cursor: pointer;\n\n > * {\n transition: all 0.3s ease;\n }\n\n &:hover {\n transform: scale(1.2);\n\n > * {\n transform: rotate(180deg);\n }\n }\n `,\n};\n\nexport default CloseIcon;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport Row from \"components/Containers/Row\";\nimport { colors, fontSize } from \"style\";\nimport Icon, { ICON_SIZE } from \"components/Icon\";\nimport { Spinner, TextLoader } from \"components/Loader\";\n\n/**\n * MessageWithIcon\n *\n * @param {String} messageId\n * @param {Object} messageValues\n * @param {String} iconType\n * @param {Boolean} loading\n */\nconst MessageWithIcon = ({ messageId, iconType, messageValues, loading, ...props }) => (\n \n
\n );\n};\n\nImage.propTypes = {\n url: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n alt: PropTypes.string,\n onError: PropTypes.func,\n onLoad: PropTypes.func,\n};\n\nconst styles = {\n event_mage: css`\n display: flex;\n font-size: 20px;\n `,\n};\n\nexport default Image;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport styled from \"@emotion/styled\";\nimport { useAuth } from \"hooks\";\nimport { LINKS } from \"constants/index\";\nimport { Link } from \"components/Links\";\nimport { Row } from \"components/Containers\";\nimport { BUTTON_SIZE, PrimaryButton } from \"components/Buttons\";\nimport { breakpoints, fontSize } from \"style\";\nimport { NAV_WIDTH } from \"components/Nav/SideNav\";\nimport { ProfileLink } from \"components/Profile\";\n\n/**\n * Impersonating\n */\nconst Impersonating = (props) => {\n const { isImpersonating, trueUser, memberRole, ...me } = useAuth();\n\n if (!isImpersonating) return null;\n\n const profile = {\n firstName: me?.firstName,\n lastName: me?.lastName,\n avatarUrl: me?.avatarUrl,\n ...me?.profile,\n };\n\n const href = `${LINKS.stop_impersonating}${profile?.slug ? `?profile=${profile.slug}` : \"\"}`;\n\n return (\n {alt && alt?.split(\" \")?.[0]?.[0]}
\n {alt && alt?.split(\" \")?.[1]?.[0]}
\n \n {trueUser?.name},\n impersonatee: {memberRole} ,\n }}\n />\n
\n \n \n {text}\n
\n);\n\nconst styles = {\n beta_logo: css`\n background: ${gradients.missionLinearGradient};\n padding: 0.4rem 0.8rem;\n border-radius: 1.6rem;\n display: inline-block;\n color: #fff;\n font-size: 1.1rem;\n font-weight: 500;\n `,\n};\n\nGradientLabel.propTypes = {\n text: PropTypes.string,\n};\n\nGradientLabel.defaultProps = {\n text: \"Beta\",\n};\n\nexport default GradientLabel;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { H3 } from \"components/Text\";\nimport { colors, fontSize } from \"style\";\nimport { Paragraph } from \"components/Text\";\nimport { Header } from \"components/DisplayBox\";\nimport { LAYOUT_SIZE } from \".\";\n\n/**\n * MissionAbout\n *\n * @param {String} title\n * @param {String} body\n * @param {String} size\n * @param {Object} cta\n * @param {Boolean} isLoading\n */\nconst LayoutTextBlock = ({ title, body, size, cta, isLoading, ...props }) => (\n <>\n {title && (\n {title}
\n {cta}\n\n
\n \n);\n\nconst styles = {\n description: (size) => css`\n font-size: ${size === LAYOUT_SIZE.small ? fontSize.small : fontSize.normal};\n color: ${size === LAYOUT_SIZE.small ? colors.grayAnatomyLight1 : colors.purpleRainDark2};\n line-height: normal;\n `,\n};\n\nLayoutTextBlock.propTypes = {\n title: PropTypes.string,\n body: PropTypes.string,\n size: PropTypes.string,\n cta: PropTypes.node,\n isLoading: PropTypes.bool,\n};\n\nexport default LayoutTextBlock;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { Row } from \"components/Containers\";\nimport { breakpoints, colors, fontSize, margins } from \"style\";\nimport Icon, { ICON_TYPE } from \"components/Icon\";\n\n/**\n * Formats a page title\n *\n * @param {Element} title\n * @param {Element} actionBar\n * @param {Boolean} noMargin\n * @param {Boolean} isExpandable\n * @param {Boolean} isExpanded\n * @param {Function} onExpand\n * @param {String} expandableId\n */\nconst SectionTitle = ({ title, actionBar, noMargin, isExpandable, isExpanded, onExpand, expandableId, ...props }) => (\n onExpand?.(!isExpanded, expandableId)} {...props}>\n \n \n {isExpandable && (\n
\n \n
\n);\n\nconst StyledRow = styled(Row)`\n justify-content: space-between;\n align-items: center;\n`;\n\nconst styles = {\n container: (noMargin, isExpandable) => css`\n cursor: ${isExpandable ? \"pointer\" : \"default\"};\n margin: 1rem ${noMargin ? 0 : margins.normal} 0 ${noMargin ? 0 : margins.normal};\n\n @media (max-width: ${breakpoints.portrait}) {\n margin: 1rem ${noMargin ? 0 : `2.5rem`} 0rem ${noMargin ? 0 : `2.5rem`};\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n margin: 1rem ${noMargin ? 0 : `2rem`} 0rem ${noMargin ? 0 : `2rem`};\n }\n `,\n action_container: css`\n margin-left: auto;\n `,\n title: css`\n color: ${colors.purpleRainDark2};\n font-size: ${fontSize.medium};\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1;\n\n @media (max-width: ${breakpoints.tablet}) {\n font-size: ${fontSize.small};\n }\n `,\n expanded_container: (isExpanded) => css`\n transform: rotate(${isExpanded ? 0 : 270}deg);\n `,\n};\n\nSectionTitle.defaultProps = {\n isExpandable: false,\n};\n\nSectionTitle.propTypes = {\n title: PropTypes.element.isRequired,\n actionBar: PropTypes.any,\n noMargin: PropTypes.bool,\n isExpandable: PropTypes.bool,\n isExpanded: PropTypes.bool,\n onExpand: PropTypes.func,\n expandableId: PropTypes.string,\n};\n\nexport default SectionTitle;\n","export { default as TextBlock } from \"./TextBlock\";\nexport { default as SectionTitle } from \"./SectionTitle\";\n\nconst LAYOUT_SIZE = {\n small: \"small\",\n medium: \"medium\",\n large: \"large\",\n};\n\nexport { LAYOUT_SIZE };\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport { H3 } from \"components/Text\";\nimport { fontSize, colors } from \"style\";\n\n/**\n * Terms and Conditions Content\n */\nconst TermsAndConditionsContent = () => (\n <>\n {title}
\n \n
\n )}\n \n {actionBar}
\n
\n Effective July 1, 2024
\n\n These Terms and Conditions (the “Terms and Conditions” or the “Agreement”) are a legal\n agreement between you (the “Contractor” or “you”) and 9371-6793 Quebec Inc. d.b.a Mission.Dev, a\n corporation incorporated under the laws of Quebec (Canada), with its principal place of business located at 8 \n Laurier West Avenue, Montreal (QC) H2T 2N3, Canada (“Mission” or “we”) (each a “Party”\n and collectively, the “Parties”) setting forth, among other things, the terms and conditions for the\n provision by Contractor of the Services (as defined hereinafter) to Mission and its clients.\n
\n\n
Mission:
\n\n
- \n
- \n
\n Has a global network of independent contractors (the “Mission Network”) who are given service\n assignments by Mission to render project-specific technology services to clients of Mission (“\n Mission Clients”);\n
\n \n - \n
\n Wishes to retain the Contractor as an independent contractor to perform services for Mission, and the\n Contractor wishes to be so retained by Mission, on the terms and conditions set forth in these Terms and\n Conditions; and\n
\n \n - \n
\n Also wishes to retain the Contractor as member of the Mission Network on the terms and conditions set forth in\n this Master Agreement to render software development services to Mission Clients on a project-by-project basis\n (“Missions”), with the services for each such Mission to be rendered by the Contractor pursuant to a\n separate and distinct (i) general services assignment agreements (each, a “General Services Assignment\n ”); and/or (ii) Mission assignment agreements (each, a “Mission Assignment”), each of which will\n incorporate the terms of this Agreement.\n
\n \n
\n
\n
\n PLEASE READ ALL THE TERMS AND CONDITIONS CAREFULLY
\n\n
- \n
- \n
\n Your Agreement. BY CLICKING THE CHECK BOX INDICATING YOU THAT YOU HAVE READ, UNDERSTOOD AND ACCEPT\n THESE TERMS AND CONDITIONS, YOU ACCEPT AND AGREE TO BE BOUND BY THE PROVISIONS OF THESE TERMS AND CONDITIONS\n WITHOUT ANY RESERVATIONS, MODIFICATIONS, ADDITIONS OR DELETIONS.\n
\n \n - \n
\n Amendments. WE MAY FROM TIME TO TIME MODIFY THE TERMS AND CONDITIONS AND WILL POST A COPY OF THE\n AMENDED TERMS AND CONDITIONS AT THE FOLLOWING LINK https://app.mission.dev/legal/terms-and-conditions,\n SO WE ENCOURAGE YOU TO REVIEW THEM PERIODICALLY. If we make any substantial changes to the Terms and\n Conditions, we will notify you by email. If you wish to terminate this Agreement because you do not agree with\n the Terms and Conditions as amended, you may do so as described below in the Section “Term and Termination”.\n You will be deemed to have accepted the Terms and Conditions as amended if you continue to provide the\n Services after you have been notified by email of such substantial changes.\n
\n \n
- \n
- \n
TERM AND TERMINATION
\n
\n- \n
- \n The term of this Agreement shall be for the period commencing on the day on which the Contractor agrees to\n the Terms and Conditions and ending when terminated in accordance with the provisions contained herein (the\n “Term”). All General Service Assignments and Mission Assignments (each, an “Assignment”) shall\n terminate automatically upon the termination of the Agreement.\n \n
- \n The term of a given Assignment shall be for the period beginning on the Assignment Effective Date (as set\n forth in a given Assignment) and ending on upon completion of the Services (as defined hereinafter) set out\n therein (the “Assignment Term”), unless terminated earlier in accordance with the terms of this\n Agreement.\n \n
- \n This Agreement and any Assignment may be terminated at any time and for any reason during the Term by:\n
- \n
- \n immediately by Mission, at any time and for any reason during the Term, upon written notice to the\n Contractor;\n \n
- the Contractor providing Mission with 15 days prior written notice; \n
- at any time as mutually agreed upon by the Parties. \n
\n - \n Notwithstanding the foregoing, the first two weeks of each Assignment Term (the “Mission Onboarding Period”) \n constitute an onboarding period . Either Party may terminate an Assignment during a Mission Onboarding Period, \n immediately for any reason during the applicable Onboarding Period, by providing written notice of termination to the \n other Party. If the Assignment is terminated by either Party during the applicable Onboarding Period, and only in the \n case the Contractor is not able to demonstrate any proof of work during the applicable Onboarding Period, the Contractor \n will not be entitled to payment of any Fees (as defined hereinafter) incurred for any Services (as defined hereinafter) \n performed during the applicable Onboarding Period.\n \n
- \n With greater certainty, Mission may terminate this Agreement and any or all Assignments, remove the member from their list\n of members, and from the Mission Community, at any time without prior notice, for fraud, including suspicion of fraud, dishonesty,\n wilful neglect, misconduct, or any material breach of the terms of this Agreement or of an Assignment by the Contractor, subject\n only to Mission fully complying with any applicable minimum requirements under applicable legislation. If any of these events occur,\n the Contractor shall forfeit any right to payment of Fees for Services rendered from the last invoicing period up to the date of termination.\n \n
- \n Upon termination of this Agreement and/or an Assignment for any reason whatsoever:\n
- \n
- \n the Contractor shall have no further claims against Mission for damages of any nature whatsoever under\n common law, civil law or contract; and\n \n
- Mission shall only be responsible for the payment of; \n
- \n any reasonable expenditures properly incurred by the Contractor under this Agreement and any\n Assignment then in effect up to the effective date of termination; and\n \n
- \n for payment of any Fees accrued under this Agreement and any Assignment then in effect up to the\n effective date of termination or payment in lieu of Fees; and\n \n
- \n the Contractor shall be under a duty to mitigate all damages that the Contractor may claim or assert an\n entitlement to in respect of the termination of this Agreement or any Assignment.\n \n
\n- \n
\n \n
\n - \n
SERVICES TO BE PROVIDED
\n
\n- \n
- \n Mission hereby retains the Contractor to perform certain general services for Mission, including without\n limitation participating in content creation, leading technical interviews with Mission’s Network candidates\n and providing technical expertise to Mission as requested by Mission from time to time (the “\n General Services”). The Parties shall be required to enter into a General Services Assignment\n substantially in the form set forth in Exhibit 1 hereto for each General Service Mission. Each General\n Services Assignment shall (i) set forth the General Services to be provided by the Contractor; (ii)\n automatically incorporate the terms of this Agreement; and (iii) be a separate and distinct agreement from\n any other Assignment. If there is a contradiction between a provision of this Agreement and a provision of a\n General Services Assignment, the provision in this Agreement will take precedence unless the General\n Services Assignment specifically states otherwise.\n \n
- \n Mission hereby also retains the Contractor to perform the services for Mission's Clients pursuant to each\n Mission Assignment that is entered into between Mission and the Contractor from time to time during the Term\n (collectively, the “Mission Assignment Services” and together with the General Services, the “Services”).\n The Parties shall be required to enter into a Mission Assignment substantially in the form set forth in Exhibit 2 hereto\n for each Mission Assignment. Each Mission Assignment shall (i) set forth the Mission Assignment Services to be provided by\n the Contractor and the Mission Client who shall receive such Mission Assignment Services, amongst other things; (ii) automatically\n incorporate the terms of this Agreement; and (iii) be a separate and distinct agreement from any other Assignment. If there is a\n contradiction between a provision of this Agreement and a provision of a Mission Assignment, the provision in this Agreement will\n take precedence unless the Mission Assignment specifically states otherwise.\n \n
- \n You represent and warrants to Mission that: (i) you have the necessary technical skills, knowledge and\n expertise to ensure delivery of the best quality of services; (ii) you shall perform the Services with\n reasonable care, technical skill and diligence, and in a profession manner that complies with industry\n standards, best practices and all applicable legislation, regulations rules and standards (including without\n limitation any applicable privacy legislation); (iii) you have the full right, power and authority to enter\n into this Agreement and that you entering into this Agreement and providing the Services shall not result in\n a breach of or constitute a default under any agreement, restrictive covenants (such as non-disclosure or\n non-competition obligations) or instrument to which you are a party; (iv) none of the Services or\n developments that you provide, or that provided on your behalf under this Agreement will infringe on or\n otherwise violate any third party rights, including any intellectual property rights; (v) you have obtained\n and will maintain all licenses and permits required in order to perform the Services; and (vi) you will not\n reverse engineer, decompile or disassemble Mission’s proprietary software platform or attempt to gain\n unauthorized access to Mission’s proprietary software platform or Mission’s systems or networks.\n \n
- \n With respect to the General Services, the Contractor shall receive instructions from Stephane Rossi, CEO\n (the “Administrator”), anyone that has been explicitly designated by the\n Administrator or any other person designated in a General Services Assignment. The Contractor acknowledges\n and agrees that Mission is entitled to change the Administrator at any time without providing any prior\n notice to the Contractor.\n \n
- \n With respect to the Mission Assignment Services, the Contractor will report its activities and receive instructions about\n the project deliverables from Mission's Client. During the execution of the Mission Assignment Services,\n the Contractor will receive support from the “Squad Lead” or the “Customer Success Executive”, as applicable and as set forth in a given Mission Assignment,\n as their “Main Point of Contact”. The Contractor acknowledges and agrees that Mission is entitled to change\n the “Main Point of Contact” set forth in a given Mission Assignment at any time during the Assignment Term \n without providing prior notice to the Contractor. On the Mission Assignment start date, the Main Point of Contact will point out the name and contact the Contractor should address.\n \n
- \n In the case where the Contractor is an entity other than an individual, the Contractor may designate\n employees or independent contractors of the Contractor to render the Services, provided that such\n individuals must be evaluated and approved by Mission prior to that individual performing any Services (the\n “Designees”). If a Designee cannot perform any part of the Services for which Mission has approved\n them as a Designee, such tasks cannot be delegated to or performed by anyone else without Mission’s prior\n evaluation of an alternative Designee and approval thereof. Designees shall render the Services primarily at\n such places as Mission and the Contractor may mutually agree. The Parties agree that during the Term, the\n Designees will remain solely the employees or independent contractors of the Contractor and shall not be\n employees or independent contractors of Mission, and that the Contractor shall remain liable for the failure\n of the Designees to comply with the terms of this Agreement and any Assignment. For the purposes of this\n Agreement and any Assignment, all references to the “Contractor” shall also include and bind the\n Designees and for the sake of clarity, the Contractor shall be responsible for any breach of this Agreement\n or any Assignment entered into hereunder by its Designees\n \n
- \n The Contractor shall not have the authority or discretion to enter into any agreement, contract or\n understanding that legally binds Mission or otherwise assume, create or incur any obligations or liabilities\n on behalf of Mission, except as expressly provided for in this Agreement, without first obtaining the prior\n written consent of Mission.\n \n
- \n If, during the execution of the Services, the Contractor or their Designee needs to be absent and is not able\n to provide Services during the defined working hours as set forth in each active Mission Assignment, the Contractor\n is responsible for arranging a clear and detailed transition plan for work to be executed to minimize work disruption\n during their absence and must provide prior notice to their Main Point of Contact at Mission or to Mission's Client.\n \n
\n - \n
FEES & PAYMENT TERMS
\n
\n- \n
- \n In consideration of the Services rendered, Mission shall pay the Contractor the fees in the amount and\n manner set out in the applicable Assignment (the “Fees”).\n \n
- \n Fees may be increased by the Contractor upon providing one (1) month's notice to their Customer Success\n Executive at Mission. Mission reserves the right to terminate each active Mission Assignment Agreement\n with the Contractor, without notice, if the proposed Fees are not aligned with the budget agreed upon\n with Mission's Clients as set out in the applicable Assignment.\n \n
- \n For Canadian residents only, the Fees do not include sales tax, or other applicable duties as may be\n required by law. Any sales tax or duties required by law must be charged by the Contractor to Mission in\n addition to the Fees.\n \n
- \n Payment of the Fees to the Contractor for services rendered under each Assignment Agreement is contingent\n upon and subject to receipt of payment by Mission from Mission's Client for such services. In the event Mission's\n Clients fail to make payment to Mission for any reason, Mission shall have no obligation to make payment to the\n Contractor for those services, and the Contractor hereby waives any claim against Mission related to such non-payment.\n Mission hereby undertakes to employ all requisite efforts to secure timely payment from the relevant Clients as specified in the Assignment Agreement.\n \n
- \n Invoices for the Services shall be prepared and provided by the Contractor in accordance with Mission’s\n invoicing policy, available at: https://library.mission.dev/invoicing-guide.\n \n
- \n Contractor hereby appoints Deel Inc., a Delaware registered company having its headquarters at 425 1st St,\n San Francisco California, 94105-4621, United States (“Deel”) as Contractor’s limited payment agent\n for the purpose of facilitating the receipt of payments made by Mission for Services provided in connection\n with this Agreement and any Assignment hereunder, using a payment method supported by Deel or by one of\n Deel’s payment service providers, and the disbursement of those payments to Contractor. Contactor represents\n and warrants that they have carefully read, understood and accepted the Deel platform terms and conditions\n available on Deel’s website at: Terms of Service | Deel{\" \"}\n (the “Deel Terms and Conditions”). In the event of any conflict between this Agreement and the Deel\n Terms and Conditions, this Agreement will govern. Whenever requested to do so by Mission, you shall execute\n any and all instruments to give effect to the terms of this Section (the “Deel Documents\n ”).\n \n
- \n If necessary with the provision of the General Services under a given General Services Assignment, Mission\n will reimburse the Contractor for reasonable expenses legitimately incurred by the Contractor provided that\n the Administrator has pre-approved such expenses and the Contractor furnishes receipts to Mission for all\n such expenses. The pre-approval written statement and the proof of expenses sent in writing by email to:{\" \"}\n accounting@mission.dev.\n \n
- \n If necessary with the provision of the Mission Assignment Services under a given Mission Assignment (ie. requested by the\n Mission Client and/or the Squad Lead to perform the Mission Assignment Services), Mission will reimburse the Contractor\n for reasonable expenses legitimately incurred by the Contractor provided that their Customer Success Executive\n at Mission has pre-approved such expenses and the Contractor furnishes receipts to Mission for all such\n expenses. The pre-approval written statement and the proof of expenses sent in writing by email to:\n accounting@mission.dev.\n \n
- \n If a Contractor fails to submit their timesheet on the last day of the month as set out in the Mission invoicing process,\n Mission has the right to delay Contractor payment until the following payment cycle.\n \n
- \n If a Contractor submits a number of hours exceeding their working hours set out in the applicable Assignment terms,\n Mission cannot guarantee that a Contractor will be paid for the hours exceeded. Additionally, a contractor will be paid\n and only paid for the hours they log in their timesheet and submit on or before the last business day of a given month.\n \n
\n - \n
INDEPENDENT CONTRACTOR
\n
\n\n The Contractor is and shall remain at all times an independent contractor and is not and shall not represent\n the Contractor to be an agent, joint venturer, partner, officer, director or employee of Mission. Nothing\n contained in this Agreement or in any Assignment is intended to create nor shall be construed as creating an\n employment relationship between the Contractor (or the Designees) and Mission. The Contractor has sole\n responsibility, as an independent contractor, to comply with all laws, rules and regulations relating to the\n provision of Services, including without limitation, requirements under applicable legislation for deducting\n any and all applicable taxes, deductions, premiums, and amounts owing with respect to those Fees paid by\n Mission. The Contractor further agrees to indemnify and hold Mission, its directors, officers, agents and\n employees harmless from and against any and all liabilities, claims, demands, suits, losses, fines,\n surcharges, damages, costs and expenses in respect of any failure on the part of Mission to (i) withhold any\n taxes, premiums, payments, benefit overpayments, levies or other amounts from all or any part of the Fees or\n other amounts paid to the Contractor during the Term; or (ii) comply with requirements to make payments under\n applicable legislation.\n
\n \n - \n
NON-SOLICITATION
\n
\n\n During the Term and for a period of 12 months following the termination of this Agreement for whatever reason,\n the Contractor shall not, either directly or indirectly:\n
\n- \n
- \n discuss hiring, offer to hire, hire or recruit (or attempt to do any of the foregoing) any of the employees\n or independent contractors of Mission or any of its subsidiaries (including other members of the Mission\n Network) or encourage any of them to terminate their relationship with Mission or any of its subsidiaries,\n as the case may be;\n \n
- \n solicit, approach, contact, call upon or canvass (or attempt to do any of the foregoing), in connection with\n any undertaking that is in whole or in part competitive with the business of Mission or its subsidiaries (a\n “Competitive Business”), any customer or client of Mission or any of its subsidiaries to whom, at any\n time within the 12 month period prior to the termination of this Agreement, the Contractor (including any\n Designee), in the course of performing the Services had direct contact; or\n \n
- \n solicit, approach, contact, call upon or canvass (or attempt to do any of the foregoing) any Prospective\n Client in connection with a Competitive Business. For the purposes of this Agreement, “\n Prospective Client” means any person or entity that is not a client of Mission or any of its\n subsidiaries but for whom (i) there was an active proposal outstanding by Mission or any of its subsidiaries\n or on Mission’s or any of its subsidiaries’ behalf within the 12-month period prior to the termination of\n this Agreement and (ii) the Contractor was involved in the preparation or presentation of such proposal.\n \n
\n - \n
CONFIDENTIALITY OF INFORMATION AND OWNERSHIP OF PROPRIETARY PROPERTY
\n
\n\n The Confidentiality of Information and Ownership of Proprietary Property Agreement, included as Schedule A\n hereto forms an integral part of this Agreement, and by agreeing to be bound by these Terms and Conditions the\n Contractor agrees and accepts to be bound by the terms set forth therein. Furthermore, the Contractor agrees\n that it shall cause any Designees, approved by Mission in accordance with the terms of Section 2(f) of this\n Agreement, to execute a Confidentiality of Information and Ownership of Proprietary Property Agreement\n substantially in the form of the agreement included as Schedule A hereto, promptly upon request by Mission.\n
\n \n - \n
PRIVACY
\n
\n\n By agreeing to become a member of the Mission Network, you hereby and acknowledge that you are subject to\n Mission’s privacy policy available at: https://app.mission.dev/legal/privacy-policy, the terms of which\n are incorporated herein by reference (the “Privacy Policy”).\n
\n
\n\n For greater certainty, you hereby agree and acknowledge that Mission (including through third-party service\n providers) is permitted to conduct background checks (including ID verification checks or criminal record\n checks) on you to determine if you should be included in the Mission Network and reserves the right to\n terminate this Agreement and any Mission Assignments hereunder immediately at any time if it is not satisfied\n with the results of such background checks. Mission or Mission’s third-party service providers (including\n Certn) may collect your personal data in order to conduct such background checks. Such personal data may\n include the following (without limitation):\n
\n
\n- \n
- Full legal name (including middle name) \n
- Postal address \n
- Phone number \n
- Date of birth \n
- ID (national ID or passport) \n
- ID number \n
- Profile picture \n
- The expiry date of the ID \n
- Criminal record \n
\n\n Further, in the case where Mission collects such personal data directly you hereby consent to the transfer of\n such personal data by Mission to Certn or any other third-party service providers who provide background check\n services to Mission.\n
\n
\n\n Mission’s collection, use and disclosure of such personal data shall be limited to the purposes described in\n this Section and be subject to the terms of the Privacy Policy.\n
\n \n - \n
COOPERATION
\n
\n\n Whenever requested to do so by Mission, you shall execute any and all instruments and do such acts that\n Mission shall request to comply with any requirements set forth by Mission’s customers, including with respect\n to the safety, privacy, or confidentiality of such customer’s business, operations, or IT infrastructure.\n
\n
\n\n In the event Mission is required or compelled to disclose information to any governmental authority for\n regulatory compliance purposes, you hereby agree to share any such information with Mission promptly. Mission\n or Mission’s third-party service providers (including Deel) may collect your information (including personal\n data) in order to comply with governmental requirements. Such information (including personal data) may\n include the following (without limitation):\n
\n
\n- \n
- Full legal name \n
- Country of fiscal residence \n
- ID (national ID or passport) \n
- (Mexico) Proof of Federal Taxpayer Registry number \n
- \n (Mexico) Certificate of good standing issued by the Mexican Internal Revenue Service (Service Tax\n Administration)\n \n
- (Argentina) Proof of tax ID including tax ID number \n
- (UAE - Dubai) License to work as an independently as a freelancer OR NOC from employer or sponsor \n
- (UAE - Dubai) Residential visa to prove residency in the UAE \n
- \n (UAE - Dubai) Letter from contractor stating they are entitled perform the contract with no legal\n restrictions on their personal capacity.\n \n
- (India) Proof of GST and income tax registration \n
- (Pakistan) Proof of registration under income tax laws \n
- (Pakistan) Proof of annual returns payment \n
- (Brazil) Proof of CNPJ associated with his/her name \n
- (Brazil) Articles of Association \n
- (France) Declaration of fiscal regularity (Attestation de régularité fiscale) \n
- (Canada) for incorporated contractors: Proof of registration of the company \n
- (Dominican Republic) Proof of RNC \n
- (Dominican Republic) Proof of authorized NCF number \n
\n\n Further, in the case where Mission collects such personal data directly you hereby consent to the transfer of\n such personal data by Mission to (i) any relevant government authority; or (ii) Deel or any other third-party\n service providers who provide regulatory compliance services to Mission.\n
\n
\n\n Mission’s collection, use and disclosure of such personal data shall be limited to the purposes described in\n this Section and be subject to the terms of the Privacy Policy.\n
\n \n - \n
HEALTH AND SAFETY, DAMAGE TO PROPERTY
\n
\n\n The Contractor shall comply with applicable health and safety laws and all rules and procedures put in place\n from time to time by Mission or Mission Clients, and hereby agrees to indemnify and hold harmless Mission, its\n directors, officers, agents and employees from and against any and all claims, demands, suits, losses, fines,\n surcharges, damages, costs and expenses arising out of the Contractor’s failure to comply with such laws. The\n Contractor further agrees to indemnify and hold Mission, its directors, officers, agents and employees\n harmless from and against any and all liabilities, claims, demands, suits, losses, fines, surcharges, damages,\n costs and expenses relating to the injury or death of any person, damage to or destruction of any property,\n which is directly or indirectly caused by any act or omission on the part of the Contractor (or any Designees)\n engaged in providing Services.\n
\n \n - \n
INSURANCE
\n
\n\n The Contractor is responsible for obtaining, and maintaining for the duration of the Term, their own general\n liability and property damage insurance against loss or damage resulting from the Contractor’s (and any\n Designees’) actions in connection with the performance of the Services, which insurance coverage shall be\n consistent with the level of risk exposure associated with the Services. The Contractor acknowledges that\n failure to obtain such insurance exposes the Contractor to risk of financial loss resulting from liability of\n the Contractor for loss or damage caused by the Contractor (or any Designee) in connection with this Agreement\n or the Services. Upon request by Mission, the Contractor shall promptly provide evidence of its insurance\n coverage to Mission.\n
\n \n - \n
SEVERABILITY
\n
\n\n In the event that any covenant, provision or restriction contained in this Agreement or an Assignment is found\n to be void or unenforceable (in whole or in part) by a court of competent jurisdiction, it shall not affect or\n impair the validity of any other covenant, provisions or restrictions contained herein or therein, nor shall\n it affect the validity or enforceability of such covenants, provisions or restrictions in any other\n jurisdiction or in regard to other circumstances. Any covenants, provisions or restrictions found to be void\n or unenforceable are declared to be separate and distinct, and the remaining covenants, provisions and\n restrictions shall remain in full force and effect.\n
\n \n - \n
ENUREMENT
\n
\n\n This Agreement and each Assignment shall enure to the benefit of and be binding upon the Parties and their\n respective successors and assigns, including without limitation, the Contractor’s heirs, executors,\n administrators and personal representatives.\n
\n \n - \n
ASSIGNMENT
\n
\n\n The Contractor may not assign any of the Contractor’s rights or delegate any of the Contractor’s duties or\n responsibilities under this Agreement, any Assignment or any Deel Document, without Mission’s prior written\n consent. Mission may, without the consent of the Contractor, assign its rights, duties and obligations under\n this Agreement to an affiliate or to a purchaser of all, or substantially all of the assets of Mission.\n
\n \n - \n
ENTIRE AGREEMENT
\n
\n\n This Agreement, (including any Exhibits or Schedules hereto) together with any Assignments entered into under\n this Agreement or any Deel Documents between Mission and the Contractor, constitute the entire agreement\n between the Parties and supersedes and replaces any and all other representations, understandings,\n negotiations and previous agreements (including contractor agreements), written or oral, express or implied.\n
\n \n - \n
NOTICES
\n
\n\n All notices, requests, demands or other communications required or permitted by the terms of this Agreement or\n any Assignment will be given in writing and delivered to the Parties as follows:\n
\n
\n- \n
- to Mission by email to: Member Experience Department at members@mission.dev; and \n
- \n to Contractor at the contact details provided by the Contractor during the registration process to become a\n part of the Mission Network.\n \n
\nor to such other addresses as either Party may from time to time notify the other.
\n \n - \n
GOVERNING LAW AND JURISDICTION
\n
\n\n This Agreement and all Assignments shall be interpreted and construed in accordance with the laws of the\n Province of Quebec and the laws of Canada applicable therein without regard to the conflict of laws rules\n applicable therein. Each of the Parties hereby attorns to the exclusive jurisdiction of the courts of the\n Province of Quebec with respect to any dispute arising from this Agreement or any Assignment. The foregoing\n choice of jurisdiction and venue shall not prevent Mission from seeking injunctive relief with respect to a\n violation of intellectual property rights, confidentiality obligations or enforcement or recognition of any\n award or order in any appropriate jurisdiction.\n
\n \n - \n
SURVIVAL
\n
\n\n The following provisions shall survive the expiration or termination of this Agreement: 4, 5, 6, 7-9, 11-18;\n as will those other provisions of this Agreement that, by the nature of their terms, would apply after\n expiration or termination of this Agreement.\n
\n \n - \n
LANGUAGE
\n
\n\n The Parties have expressly required that this agreement and documents ancillary hereto be drafted in the\n English language.{\" \"}\n \n Les parties à la présente ont expressément exigé que le présent accord et les documents afférents soient\n rédigés en langue anglaise\n \n .\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n SCHEDULE A
\n\n
\n CONFIDENTIALITY OF INFORMATION
\n\n
\n AND OWNERSHIP OF PROPRIETARY PROPERTY AGREEMENT
\n\n
\n THIS CONFIDENTIALITY OF INFORMATION AND OWNERSHIP OF PROPRIETARY PROPERTY AGREEMENT (the “CIOPP”) is entered into\n as of the Effective Date of the Terms and Conditions between Mission and the Contractor and is considered an\n integral part of such Agreement.\n
\nBACKGROUND:
\n- \n
- \n Mission may give, has given and will give the Contractor access to proprietary or confidential information of\n Mission and its affiliates and subsidiaries (if any) (the “Company Group”), including information that,\n by its nature or by the nature of its disclosure, would reasonably be considered to be proprietary or\n confidential to the Company Group (which information is collectively referred to in this Agreement as “\n Confidential Information”). For greater certainty, Confidential Information includes all employee,\n customer or client personal information, customer and client information, technical data, unpublished know-how,\n techniques, records, formulae, processes, sketches, photographs, plans, drawings, specifications, samples,\n reports, manuals, documents, prototypes, hardware, software and other equipment, working materials, findings,\n inventions and ideas, whether patentable or not, whether they be trade secrets or not and whether they be in\n written, graphic, oral, electronic or any other form, that are now or hereafter owned, licensed or otherwise\n acquired by the Company Group, and shall include all such similar information of any customer of the Company\n Group.\n \n
- \n The Contractor may develop, conceive, generate, contribute to or use, in the course of engagement with Mission,\n alone and/or jointly with others, tangible and intangible property relating to actual or anticipated business\n and research and development of the Company Group, or that is suggested by or result from work performed for or\n on behalf of the Company Group, in any fields, which property includes software, hardware, know-how, designs,\n techniques, documentation and other material, including property created by the Contractor (whether within the\n scope of the Contractor’s engagement with Mission or not) and used in the course of the Contractor’s engagement\n with Mission, and for all of the preceding, regardless of the form or media in or on which it is stored, some or\n all of which property may be protected by patents, copyrights, trade secrets, trade-marks, industrial designs or\n mask works or any civil law, common law or statutory right anywhere in the world (which tangible and intangible\n property is collectively referred to in this CIOPP as “Proprietary Property”).\n \n
\n NOW, THEREFORE, in consideration of the Contractor’s engagement with Mission and other good and valuable\n consideration, the receipt and sufficiency of which is acknowledged by the Contractor agrees as follows:\n
\n- \n
- \n The Contractor, both during and after engagement with Mission, shall not disclose or use (or permit the use of)\n any Proprietary Property or Confidential Information, directly or indirectly, except in the course of carrying\n out authorized activities on behalf of Mission or except as expressly authorized by Mission in writing. The\n Contractor may, however, use or disclose Confidential Information that:\n \n
- is or becomes public, other than through a breach of this CIOPP; or \n
- \n is known to the Contractor prior to engagement by Mission and with respect to which the Contractor does not\n have any obligation of confidentiality; or\n \n
- \n is required to be disclosed, or the disclosure of which to regulators is protected, by law, whether under an\n order of a court or government tribunal, statutory provision or other legal process, provided that, where such\n disclosure is required of the Contractor, the Contractor informs Mission of such requirement as soon as the\n Contractor becomes aware of the requirement and in sufficient time to allow Mission to take such steps as are\n lawfully available to Mission to avoid or limit such disclosure by the Contractor.\n \n
- \n The Contractor, both during and after engagement with Mission, shall not disclose or use (or permit the use of),\n directly or indirectly, any trade secrets, confidential information or proprietary property of a third party\n obtained by the Contractor during the course of or as result of engagement with Mission, except as expressly\n authorized by Mission or such third party in writing.\n \n
- \n All right, title and interest in and to Proprietary Property (including the Proprietary Property described in\n paragraph 6 below), as between the Contractor and Mission, belongs to Mission, and the Contractor has no rights\n in any such Proprietary Property. For greater certainty, all right, title and interest (including any\n intellectual property rights) in and to all Proprietary Property that the Contractor may acquire in the course\n of engagement with Mission are hereby assigned to Mission. The Contractor agrees to make full disclosure to\n Mission of and to properly document each development of any Proprietary Property, and to provide written\n documentation describing such Proprietary Property to Mission, promptly after its creation. At the request and\n expense of Mission, both during and after engagement with Mission, the Contractor shall do all acts necessary\n and sign all documentation necessary in order to assign all right, title and interest in and to the Proprietary\n Property to Mission and to enable Mission to register patents, copyrights, trade-marks, mask works, industrial\n designs and such other protections as Mission deems advisable anywhere in the world. The Contractor irrevocably\n designates and appoints Mission and its duly authorized officers and agents as the Contractor’s agent and\n attorney-in-fact, to act for and in the Contractor’s behalf and stead to execute and file any such instruments\n and papers and to do all other lawfully permitted acts to further the application for, prosecution, issuance,\n maintenance or transfer of patents, copyrights, trade-marks, mask works, industrial designs and such other\n protections related to the Proprietary Property. This power of attorney is coupled with an interest and shall\n not be affected by the Contractor’s subsequent incapacity or death.\n \n
- \n If, during and in the course of engagement with Mission, the Contractor develops any Proprietary Property that\n is protected by copyright, the Contractor hereby waives unconditionally any “moral rights” the Contractor may\n have in such Proprietary Property.\n \n
- \n If any part of the services or Proprietary Property or information provided hereunder is based on, incorporates,\n or is an improvement or derivative of, or cannot be reasonably and fully made, used, reproduced, distributed and\n otherwise exploited without using or violating technology or intellectual property rights owned by or licensed\n to the Contractor (or any person involved in the services) and not assigned hereunder, the Contractor hereby\n grants Mission and its successors a perpetual, irrevocable, worldwide, royalty-free, non-exclusive,\n sublicensable right and licenses to exploit and exercise all such technology and intellectual property rights in\n support of Mission’s exercise or exploitation of the services, Proprietary Property, other work or information\n performed or provided hereunder, or any assigned rights (including any modifications, improvements and\n derivatives of any of them).\n \n
- \n The Contractor, both during and after engagement with Mission, shall not make any unauthorized use of Mission’s\n or of any Mission Client’s computer systems, communications networks, databases or files. The Contractor shall\n adhere to all Mission policies or Mission Client policies (as applicable) regarding the use of such computer\n systems, communications networks, databases or files.\n \n
- \n All notes, data, tapes, reference items, sketches, drawings, memoranda, records, documentation and other\n material regardless of the form or media in or on which it is stored, that is in or comes into the possession or\n control of the Contractor, and that is in any way obtained, conceived, developed, generated or contributed to by\n the Contractor, alone and/or jointly with others in the course of or as a result of the Contractor’s engagement\n with Mission, is and remains Confidential Information and/or Proprietary Property within the meaning of this\n CIOPP.\n \n
- \n The Contractor shall return or destroy, as directed by Mission, Confidential Information or Proprietary Property\n to Mission upon request by Mission at any time, and upon the cessation of engagement with Mission, regardless of\n how that cessation occurs. Such return or destruction shall include all originals and all copies of the\n Confidential Information and Proprietary Property, in whatever medium or form, that is then in the control or\n possession of the Contractor. Upon request by Mission, the Contractor shall certify, by way of affidavit or\n statutory declaration, that all such Confidential Information and Proprietary Property has been returned or\n destroyed, as applicable. Both during and after engagement with Mission, the Contractor shall not make or retain\n copies of the Confidential Information or Proprietary Property in the Contractor’s possession or control, except\n for the purpose of carrying out authorized activities on behalf of Mission or except as expressly authorized by\n Mission in writing. For information stored in electronic form:\n \n
- \n the Contractor shall be deemed to have returned it when the Contractor transmits an electronic copy to Mission\n and thereafter destroys it per (b) below; and\n \n
- \n the Contractor shall be deemed to have destroyed it when the Contractor performs a commercially reasonable\n “delete” function with respect to all of its copies of information, notwithstanding that such information may\n be forensically recoverable or restored from backups (provided always that if, at any time, the Contractor\n performs or permits such recovery or restoration, the Contractor shall treat such recovered or restored\n information as Confidential Information hereunder at all times).\n \n
- \n The Contractor shall not use unauthorized software on Mission’s or any Mission Client’s equipment during the\n course of engagement with Mission. Furthermore, the Contractor shall not incorporate into or link with the\n Confidential Information or Proprietary Property, any third-party intellectual property (including third party\n software, images, works or materials, third party patents or trade secrets, and open source software) without\n first (a) disclosing same to Mission together with the license therefor from such third party, and (b) receiving\n authorization from Mission for such incorporation or linkage.\n \n
- \n During the Contractor’s engagement with Mission, the Contractor shall not make use of or in any manner\n communicate to Mission any confidential information of any third party (including former employers of the\n Contractor) that may be in or may come into the Contractor’s possession or control, other than confidential\n information disclosed to the Contractor in his, her or its capacity as a representative of Mission.\n \n
- \n The Contractor shall, if requested from time to time by Mission, execute such further agreements as to\n confidentiality and proprietary rights as Mission requires to protect confidential information or proprietary\n property whether of the Company Group or of a Mission Client.\n \n
- \n Regardless of any changes in role, responsibilities, compensation or otherwise, including cessation of the\n Contractor’s engagement with Mission (regardless of how that cessation occurs), the Contractor shall continue to\n be subject to the terms and conditions of this CIOPP and any other(s) executed pursuant to paragraph 10 above.\n \n
- \n The Contractor’s sole and exclusive remedy for any breach of this CIOPP by Mission is limited to monetary\n damages, and the Contractor shall not make any claim in respect of any rights to or interest in any Confidential\n Information or Proprietary Property. The Contractor hereby waives, relinquishes and conveys to Mission any and\n all claims of any nature whatsoever, which the Contractor now or hereafter has for infringement of any\n proprietary rights assigned to Mission. The Contractor acknowledges that it would be difficult to compute the\n monetary loss to Mission arising from a breach or threatened breach of this CIOPP by the Contractor and that,\n accordingly, Mission shall be entitled to specific performance, injunctive or other equitable relief in addition\n to or instead of monetary damages, without the necessity of establishing that monetary damages would be\n inadequate.\n \n
- \n The Contractor’s engagement with Mission is subject to the terms and conditions of this CIOPP. This CIOPP shall\n enure to the benefit of Mission and its successors and assigns and be binding on the Contractor and the\n Contractor’s heirs, attorneys, guardians, estate trustees, executors, trustees and permitted assigns.\n \n
- \n This CIOPP shall be interpreted and construed in accordance with the laws of the Province of Quebec and the laws\n of Canada applicable therein without regard to the conflict of laws rules applicable therein. The Parties attorn\n to the exclusive jurisdiction of the courts of the Province of Quebec with respect to any dispute arising from\n this CIOPP.\n \n
- \n If any provision of this CIOPP is held by a court of competent jurisdiction to be invalid or unenforceable, that\n provision is to be deleted and the other provisions remain in effect and are valid and enforceable to the\n fullest extent permitted by law.\n \n
- \n The Contractor and Mission each intend and agree that in this CIOPP, the term “engagement” shall be deemed to\n include any period of time prior to the Contractor’s execution of this CIOPP and/or prior to the formal\n execution of any independent contractor agreement or contract for services relating to the engagement, during\n which period of time and in connection with or in contemplation of such engagement, the Contractor provided\n services to or performed work of any kind for the Company Group or for the benefit of the Company Group.\n \n
- \n The Contractor confirms that he or she had the opportunity to confer with an independent legal advisor if he or\n she so wished, in advance of signing this CIOPP. The Contractor further confirms that he or she has read this\n CIOPP and the Contractor accepts and agrees to be bound by its terms.\n \n
- \n The headings herein are for convenience only and do not interpret this CIOPP, the words “including” or\n “include”, when following any general statement or term, is not to be construed as limiting the general\n statement or term to the specific items or matters set forth or to similar items or matters, but rather as\n permitting the general statement or term to refer to all other items or matters that could reasonably fall\n within its broadest possible scope, and the word “or” does not imply an exclusive relationship between the\n matters being connected.\n \n
- \n The Contractor hereby authorizes Mission to notify the Contractor’s future employers (or other necessary third\n parties) of the terms of this CIOPP and the Contractor’s responsibilities hereunder.\n \n
- \n In the case where the Contractor is an entity other than an individual, the Contractor is responsible for\n ensuring that its directors, officers, shareholders, employees, agents, advisors, consultants and contractors\n (collectively, the “Representatives”) comply with all terms in this CIOPP. The Contractor represents and\n warrants that it owns all rights and title to all Proprietary Property generated by the Representatives, that\n the Contractor will take all necessary steps to require and cause the Representatives to execute assignments of\n all such Proprietary Property to the Contractor and to unconditionally waive in writing any moral rights that\n they may have in such Proprietary Property. The Contractor shall only disclose the Proprietary Property or\n Confidential Information to its Representatives on a need-to-know basis in connection with the delivery or\n performance of the terms of the master independent contractor agreement between Mission and the Contractor. The\n Contractor shall ensure that its Representatives are aware of and comply with the Contractor’s obligations under\n this CIOPP. Without limitation, in the case of disclosure of Confidential Information or Proprietary Property to\n any of the Representatives, such Representatives shall be informed at the time of disclosure of the confidential\n and proprietary nature of the Confidential Information and Proprietary Property and the Contractor shall ensure\n that such Representatives are under confidentiality obligations in favour of Mission that are substantially\n similar to the ones contained in this CIOPP. The Contractor fully indemnifies and will save harmless Mission\n from any damages, claims, demands, losses, liabilities and costs, including legal costs, incurred by the Company\n Group in respect of any breach of the Contractor’s obligations pursuant to this paragraph 20.\n \n
- \n This CIOPP, and the agreements and other documents required to be delivered pursuant to this CIOPP, constitute\n the entire agreement between Mission and the Contractor and set out all the covenants, promises, warranties,\n representations, conditions and agreements between Mission and the Contractor in connection with the subject\n matter of this CIOPP and supersede all prior agreements, understandings, negotiations and discussions with\n respect to the subject matter hereof, whether oral or written, pre-contractual or otherwise.\n \n
- \n The parties hereto have expressly required that this agreement and documents ancillary hereto be drafted in the\n English language.\n \n {\" \"}\n Les parties à la présente ont expressément exigé que le présent accord et les documents afférents soient\n rédigés en langue anglaise.\n \n \n
\n
- \n
\n
- \n
\n
\n \n);\n\nconst styles = {\n small: css`\n color: ${colors.grayAnatomyLight1};\n font-size: ${fontSize.small};\n `,\n centeredText: css`\n display: flex;\n justify-content: center;\n `,\n};\n\nexport default TermsAndConditionsContent;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport { H3 } from \"components/Text\";\nimport { fontSize, colors } from \"style\";\nimport { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell } from \"components/Table\";\nimport { PrimaryLink } from \"components/Links\";\n\n/**\n * Privacy Content\n */\nconst PrivacyContent = () => (\n <>\n
Effective February 1st, 2024
\n\n\n
Welcome!
\n\n\n Welcome to Mission! We hope you will enjoy and appreciate using our “Services”, which may be visiting\n or using our website at{\" \"}\n
\n 9371-6793 Quebec Inc. d.b.a Mission (the company that owns and operates the Services) takes your privacy and\n security of personal data very seriously. We have provided and will continue to provide a secure environment\n and this strict Privacy Policy (the “Policy”) that describes the limited ways your information is\n used and the limited access to such information. We ask that you read it carefully.\n
\n\n
Key Elements of this Policy
\n\n\n Here are the key elements of this Policy so you can know the important parts right away to make an informed\n decision about your consent for our collection, use and disclosure of your personal data. By submitting any\n personal data to us via any means, you consent to such collection, use and disclosure. You can find the\n details in the rest of the Policy.\n
\n\n\n
Some Terms
\n\nBefore we get started, here are a few terms we think you should know as you read this Policy.
\n\n\n “Data Protection Laws” refers to the laws that are designed to protect your personal data and privacy\n in the place where you live. This includes: (1) the “GDPR”, the European data protection law which\n stands for “General Data Protection Regulation”, with the official name{\" \"}\n Regulation (EU) 2016/679 of the European Parliament and of the Council; (2) “PIPEDA” (\n Personal Information Protection and Electronic Documents Act), which is the Canadian Data Protection\n Law that applies to our activities in Canada; (3){\" \"}\n An Act Respecting the Protection Of Personal Information in the Private Sector \n (the “Quebec Privacy Act”) which applies to our activities in Quebec; and (4) the “UK GDPR”\n which applies to our activities in the United Kingdom; please note that when this Policy refers only to the\n “GDPR”, this includes the UK GDPR as applicable. Mission is committed to adhering to all these applicable\n Data Protection laws.\n
\n\n\n “Personal data” – this is the information we collect from you or about you and which is defined in\n the GDPR as “any information relating to an identified or identifiable natural person.” It can be as simple\n as your name or your email, or something more complicated like an online identifier (usually a string of\n letters and / or numbers) that gets attached to you. Under PIPEDA and the Quebec Privacy Act, the equivalent\n concept is “personal information”, which is roughly the same. Any mention of “personal data” in this Policy\n shall also mean personal information.\n
\n \n\n
About Us and Contacting Us
\n\n\n 9371-6793 Quebec Inc. d.b.a Mission is a registered corporation located in the Province of Quebec, Canada,\n with an office at the address listed below. Where this Policy refers to “Mission”, it may refer to 9371-6793\n Quebec Inc. and / or its affiliates, subsidiaries and parent companies and / or their respective officers,\n directors, employees, agents, partners, principals, representatives, successors and assigns (collectively “\n Representatives”), depending on the context. Any reference to “we”, “our”, or “\n us” in this Policy shall also refer to Mission. In this Policy, a Website visitor or Services user\n may be referred to as “you”.\n
\n\n\n Under the GDPR, Mission is a “Data Controller”. That means we collect personal data directly from you and\n determine the purpose and means of “processing” that data. “Processing” is a broad term that means\n collection, use, storage, transfer or any other action related to your personal data; it is used in this\n Policy in that way.\n
\n\n\n Mission Privacy Officer\n
\n
or:
\n\n\n Mission Privacy Officer\n
\n 2-8 Laurier West Avenue\n
\n Montreal, QC\n
\n Canada\n
\n H3T 2N3\n
\n
\n
Your Rights
\n\n\n You have the following rights regarding your personal data held by Mission, and other rights. Please note\n that not necessarily all of these rights may be available to you; this depends on the Data Protection Laws\n where you are located that apply to you. These rights may be exercised without affecting the price you pay\n for any of the Services, if any.\n
\n\n- \n
- \n
The right to withdraw at any time your consent for Mission to process your personal data;
\n \n - \n
The right to have your personal data erased from Mission’s records;
\n \n - \n
The right to access your personal data and any relevant information around its processing and use;
\n \n - \n
\n The right to have a copy of your personal data given to you in an easy to read format so that you can\n transfer it to another data processor;\n
\n \n - \n
\n The right to have your personal data corrected or updated if you believe it is inaccurate or out of\n date;\n
\n \n - \n
The right to opt out of marketing communications we send you, at any time;
\n \n - \n
\n The right to know whether Mission sells or shares your personal data (and if so, who gets it). Please\n refer to that information elsewhere in this Policy, though you can contact our Privacy Officer if you\n need additional information or clarifications;\n
\n \n - \n
The right to demand that Mission not sell your Personal Data;
\n \n - \n
\n The right to restrict the processing of your personal data if it is inaccurate or if our processing or\n use of it is against the law; and\n
\n \n - \n
The right to refuse any marketing or advertising targeted at you by Mission.
\n \n
\n If you wish to exercise any of these rights, please contact our Privacy Officer at the contact information\n above, or refer to the relevant sections further in this Policy.\n
\n\n\n Please note that if you request the erasure of your personal data we shall do it to the extent feasible;\n however Mission reserves the right to retain some of your personal data for a reasonable time in order to\n satisfy certain legal obligations, protect our legal interests or under a legal procedure of any sort.\n
\n\n Furthermore, deletion of your personal data will prevent you from using all or a portion of the Services.\n
\n\n
Personal Data Collected from You and What We Use It For
\n\n\n In the Table below, please find all the personal data we may collect from you directly, what we use it for,\n and the legal basis under the GDPR for us having and processing this personal data. Under PIPEDA and the\n Quebec Privacy Act, the legal basis is your informed consent, and by submitting this personal data you\n acknowledge having granted this consent to Mission.\n
\n\n\n Where you have provided personal data further to the contract between you and us, if you fail to provide\n such data or withdraw your consent to use such data, you will no longer be able to access certain portions\n of the Services, including the Platform.\n
\n\n
Personal Data Collected About You from Third Parties and What We Use It For
\n\n Sometimes we get personal data about you from third parties. This Table explains the details about this\n personal data – what it is, where it came from, what we do with it, and legal basis for us having and\n processing this personal data under the GDPR. Under PIPEDA and the Quebec Privacy Act, the legal basis is\n your informed consent. None of this data comes from publicly-available sources.\n
\n\n\n To the extent that analytics or advertising identifiers are generated from third parties, these may be\n considered personal data collected from third parties, and you can find details about that further below in\n this Policy.\n
\n\n
Sensitive Personal Data
\n\n\n Under the GDPR and other Data Protection laws, biometric data is considered sensitive personal data. You can\n find details of our uses of such sensitive personal data elsewhere in this Policy. We shall treat such\n sensitive personal data with the higher level of security and safeguards required by the Data Protection\n Laws.\n
\n\n
Who We Transfer Your Personal Data To
\n\n\n We routinely share some of your personal data with certain types of third parties who are identified in the\n Table below along with what they do with it. Some of those third-party recipients may be based outside your\n home jurisdiction. If you are in the European Economic Area or the United Kingdom— please see the “Transfer\n of Your Personal Data Outside of the European Economic Area” further down in this Policy for more\n information including on how we safeguard your personal data when this occurs.\n
\n\n\n We will share personal data with law enforcement or other public authorities if: (1) we are required by\n applicable law in response to lawful requests, including to meet national security or law enforcement\n requirements; (2) if we believe it is necessary in order to investigate, prevent, or take action regarding\n illegal activities, fraud, or situations involving potential threats to the safety of any person, or any\n violation of Mission’s Terms of Service; or (3) if we believe it is necessary to investigate, prevent, or\n take action regarding situations that involve abuse of the Services infrastructure or the Internet in\n general (such as voluminous spamming, denial of service attacks.\n
\n\n\n We may also share personal data: (1) to a parent company, subsidiaries, joint ventures, or other companies\n under common control with Mission (in which case we will require such entities to honour this Policy); (2)\n if Mission merges with another entity, is subject to a corporate reorganization, sells or transfers all or\n part of its business, assets or shares (in which case we will require such entity to assume our obligations\n under this Policy, or inform you that you are covered by a new privacy policy).\n
\n\n\n We will never share your personal data with other third parties except under these circumstances. We do not\n sell or rent your personal data to any third party for direct marketing purposes or any other purpose.\n
\n\n\n *Please note the actual Member Identification Information and Member Security Information is not shared with\n Customers who are interested in having you join their squad; only the results of the identity or background\n check (as applicable) are shared with the Customer. Exceptionally, upon request the Customer may receive\n copies of a photo of your face (the facial biometric data) and identity document(s) on a report verifying\n your identity.\n
\n\nMission Advertising and Opting Out
\n\n\n Mission is continuously evaluating and modifying our use of various advertising networks, which may change\n from time to time. In this section you will find all the advertising networks that Mission may currently use\n and instructions for opting out of them. If we do additional advertising in the future, this section will be\n updated. If you would like to know exactly what advertising services are used at any given time, please\n contact our Privacy Officer with the contact information further up in this Policy.\n
\n\n\n Mission may use{\" \"}\n
\n Mission also may advertise using{\" \"}\n
\n
Limited Gathering of Information for Statistical, Analytical and Security Purposes
\n\n\n Mission automatically collects certain information using “Third-Party Analytics Programs” such as\n
\n Your IP address and other relevant information we collect using the Third-Party Analytics Programs may be\n used in order to trace any fraudulent or criminal activity, or any activity in violation of the Terms of\n Service or other contractual agreement with us.\n
\n\n\n
Email Communications and Compliance with Anti-Spam Laws
\n\n\n Mission uses Iterable to manage our mailing list and send out our newsletter and to send out emails related\n to various Services functions (Iterable and any other email provider the “Email Service Providers”).\n Personal data is transferred to the Email Service Providers in order to manage the mailing list and for the\n emails to be sent out properly. Your contact information in the form of your email address is only used to\n send out emails; the Email Service Providers do not use this personal data for any other purpose, and will\n not transfer or sell your personal data to any other third party.\n
\n\n\n You may unsubscribe from Mission’s mailing list at any time, by following the link at the bottom of all\n Mission emails. Other types of emails, such as transactional, relational, and other emails related to\n certain Platform functions will not have an opt-out option as they are necessary for the use of the\n Platform.\n
\n\n\n Mission’s practices in regards to its email are designed to be compliant with anti-spam laws, including the\n American CAN-SPAM Act and the law unofficially called “CASL”, or Canada’s Anti-Spam Law (S.C. 2010, c. 23).\n If you believe you have received email in violation of these laws or any other anti-spam law, please contact\n us using the contact information further up in this Policy.\n
\n\nTracking Technology (“Cookies” and Related Technologies)
\n\n\n Mission uses tracking technology (“cookies” and related technology such as tags, pixels and web beacons) in\n the Services and by interacting with the Services you agree to their use. Cookies are small text files\n placed on your computer or device when you visit a website or use an online service, in order to track use\n of the site or service and to improve the user experience by storing certain data on your computer or\n device.\n
\n\nSpecifically, we use cookies and related technologies for the following functions:
\n\n- \n
- \n
to enable your logging-in to the Platform;
\n \n - \n
\n to provide general internal and user analytics on the Website and Platform and to conduct research to\n improve the content of the Website and Platform using analytics programs listed above in this Policy;\n
\n \n - \n
\n to provide errors and crash reporting in the Platform using analytics programs listed above in this\n Policy; and\n
\n \n - \n
to assist in identifying possible fraudulent activities.
\n \n
\n Your browser or device can be set to refuse cookies or delete them after they have been stored. You can\n refer to your browser’s or device’s help section for instructions, but here are instructions for the most\n commonly-used browsers and operating systems:\n
\n\n- \n
- \n
\n
\n \n - \n
\n
\n \n - \n
\n
\n \n - \n
\n
\n \n - \n
\n
\n\n Opera\n \n \n - \n
\n
\n\n Apple Safari\n \n \n - \n
\n
\niOS \n \n - \n
\n
\n\n Android\n \n \n
\n Please note that deleting or blocking certain cookies may reduce your user experience by requiring you to\n re-enter certain information, including information required to use the Platform. Furthermore, deleting\n certain cookies may prevent certain functions, or the entirety of the Platform, from working at all.\n
\n \n\n
How We Protect Your Personal Data
\n\n\n We have implemented very strict technical and organisational procedures for ensuring that, by default, only\n personal data which are necessary for each specific purpose of the processing are processed by us. These\n procedures prevent your personal data from being lost; or used or accessed in any unauthorised way.\n
\n\n\n We also have procedures in place to deal with any suspected data security breach. We will notify you and any\n applicable supervisory authority of a suspected data security breach where the Data Protection Laws requires\n us to do so, and within the time frame required by the applicable Data Protection Law.\n
\n\n\n Mission uses only industry best practices (physical, electronic and procedural) in keeping any data\n collected (including personal data) secure. In addition, we use third-party vendors and hosting partners to\n provide the necessary hardware, software, networking, storage, and related technology required to operate\n the Services, and these third parties have been selected for their high standards of security, both\n electronic and physical. For example, Mission uses vendors such as{\" \"}\n
\n All information, including personal data, is transferred with encryption using Secure Sockets Layer (“SSL”)\n or Transport Layer Security (“TLS”), robust security standards for Internet data transfer and transactions.\n You can use your browser to check Mission’s valid SSL security certificates on the Website and Platform.\n
\n \n\n
\n Transfer of Your Personal Data Outside of the European Economic Area (EEA) and the United Kingdom (U.K.)\n
\n\n\n For our European users, we endeavour to keep your personal data inside the EEA or the U.K. (as applicable).\n However, certain of our data processors (and Mission) are in other countries where your\n
\n\n personal data may be transferred. However, these countries are limited to countries with particular\n circumstances that protect your data, specifically:\n
\n\n- \n
- \n
\n Canada. Canada has been determined to have an “adequate level of protection” for your personal data\n
\n \n - \n
\n The United States. Your personal data is only transferred to companies in the United States that: have\n signed agreements with us or have informed us that they are GDPR-compliant; and (2) have concluded the{\" \"}\n
\n \n
That’s it! You have the right, however, to refuse to have your data transferred outside the EEA or the
\n\n U.K. Please contact our privacy officer to make that request. Please note that making this request may\n prevent you from being able to use a portion or all of the Services.\n
\n \n\n
Supervisory Authorities and Complaints
\n\n\n If you are in the EEA or the U.K., under the GDPR you have the right to make a complaint to the appropriate\n supervisory authority. If you are not satisfied with the response received or the actions taken by our\n Privacy Officer, or if you would like to make a complaint directly about Mission’s data practices, we invite\n you to contact the supervisory authority in your country.\n
\n\n\n If you are in the U.K., you should contact the Information Commissioner’s Office who is the supervisory\n authority. You can{\" \"}\n
\n If you are in France, you should contact the{\" \"}\n Commission Nationale de l'Informatique et des Libertés\n which is the supervisory authority there. Their contact information{\" \"}\n
\n The full listing of all Data Protection Authorities (the supervisory authorities) across the EEA\n
\n If you are in Canada and you are not satisfied with the response received or the actions taken by our\n Privacy Officer, you can make a complaint to the Office of the Privacy Commissioner of Canada.\n
\n\n Instructions on how to do so can be found\n
Data Retention
\n\n\n Your personal data will only be kept for as long as it is necessary for the purpose needed for that\n processing. For example, we will retain your account information for as long as you need to have an account\n with us to use the Platform; or if you cease to be a Member, we will delete your Member Information.\n
\n\n\n We may have to keep your data for a longer period of time to satisfy our requirements under any applicable\n law or to protect our legal interests.\n
\n \n\n
Automated Decision-Making
\nMission does not use any automated decision-making processes in providing the Services.
\n \n\n
Children’s Privacy Statement
\n\n\n The Services are not intended for children under the age of 18. We do not knowingly collect any personal\n data from a child under 18. If we become aware that we have inadvertently received personal data from a\n person under the age of 18 through the Services, we will delete such information from our records.\n
\n\n\n
Changes to This Privacy Policy
\n\n\n The date at the top of this page indicates when this Policy was last updated. Every now and then, we will\n have to update this Policy, and we will update it no less than once every 12 months You can always find the\n most updated version at this URL, and we will always post a notice on our Website and Platform if we make\n big changes. If you have a Mission account to use the Platform, we will also email you to tell you the\n Policy has been updated, and what the important changes are.\n
\n\n© 9371-6793 Quebec Inc. 2023
\n \n);\n\nconst styles = {\n small: css`\n color: ${colors.grayAnatomyLight1};\n font-size: ${fontSize.small};\n `,\n centeredText: css`\n display: flex;\n justify-content: center;\n `,\n};\n\nexport default PrivacyContent;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { Row } from \"components/Containers\";\nimport { fontSize, margins } from \"style\";\n\n/**\n * Legend\n *\n * @param {Array} data\n * @param {String} labelKeyName\n * @param {String} colorKeyName\n * @param {String} marginSize\n */\nconst Legend = ({ data, marginSize, ...props }) => (\n\n {item[labelKeyName]}\n
\n);\n\nconst StyledLegend = styled(Row)`\n margin-bottom: 3rem;\n justify-content: flex-start;\n font-size: ${fontSize.xxsmall};\n font-weight: 500;\n`;\n\nconst styles = {\n legend: (color) => css`\n &:before {\n content: \"\";\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n background: ${color};\n border-radius: 100%;\n position: relative;\n top: 0.3rem;\n }\n `,\n};\n\nLegend.propTypes = {\n marginSize: PropTypes.string,\n data: PropTypes.array,\n labelKeyName: PropTypes.string,\n colorKeyName: PropTypes.string,\n};\n\nLegend.defaultProps = {\n marginSize: margins.normal,\n labelKeyName: \"name\",\n colorKeyName: \"color\",\n};\n\nLegendItem.propTypes = {\n item: PropTypes.object,\n colorKeyName: PropTypes.string,\n labelKeyName: PropTypes.string,\n};\n\nLegendItem.defaultProps = {\n labelKeyName: \"name\",\n colorKeyName: \"color\",\n};\n\nexport { LegendItem };\n\nexport default Legend;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { NavLink } from \"react-router-dom\";\n\n/**\n * Link\n *\n * @params {String} to\n * @params {String} href\n * @params {Boolean} routerEnabled\n * @params {Boolean} isActive\n * @params {Element} children\n */\nconst Link = ({ to, href, routerEnabled, isActive, children, ...props }) => {\n const passProps = Object.assign({}, props);\n delete passProps.hasIcon;\n\n const handleClick = (e) => e.stopPropagation();\n\n return routerEnabled ? (\n \n
\n \n \n );\n } else {\n return (\n \n \n
\n {title}
}\n {secondaryTitle}\n\n {row[labelKey] &&
\n {!singleColumn && {row[labelKey]}
}\n {row[descriptionKey] && {row[descriptionKey]}
}\n {singleColumn && {row[valueKey]}
}\n {row[valueKey]}
}\n \n \n
\n\n {isFavoriteList && (\n \n \n
\n )}\n \n \n );\n};\n\nconst styles = {\n margin: css`\n margin: 1rem 0 -2rem 0;\n `,\n showcaseMargin: css`\n margin: 3rem 0 -2rem 0;\n `,\n};\n\nListShareModal.propTypes = {\n onClose: PropTypes.func.isRequired,\n data: PropTypes.object.isRequired,\n show: PropTypes.bool.isRequired,\n};\n\nexport default ListShareModal;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { MUTATION_TYPE, useToast } from \"hooks\";\nimport { ModalForm, MODAL_SIZE } from \"components/Modal\";\nimport { UPDATE_PROFILE_LIST } from \"graphql/mutations\";\nimport { DECORATORS, SIZE, TYPE } from \"components/Form\";\nimport { ICON_POSITION, ICON_SIZE, ICON_TYPE } from \"components/Icon\";\n\n/**\n * ProfileListForm\n *\n * @param {Boolean} show\n * @param {Function} setProfileList\n * @param {Function} onClose\n * @param {Object} profileListData\n */\nconst ProfileListForm = ({ show, setProfileList, onClose, profileListData, ...props }) => {\n const { toast } = useToast();\n\n const initialValues = {\n negotiatedRate: profileListData?.negotiatedRate,\n negotiatedRateCurrency: profileListData?.negotiatedRateCurrency,\n note: profileListData?.note,\n };\n\n const handleComplete = (profileList) => {\n setProfileList(profileList.updateProfileList.profileList);\n onClose();\n toast.success(\n
\n);\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n ring: (size, margin) => css`\n display: inline-block;\n position: relative;\n width: ${size};\n height: ${size};\n margin: ${margin ? margin : `0 auto`};\n `,\n child: (i, size) => css`\n ${i === 1 && `animation-delay: -0.45s;`}\n ${i === 2 && `animation-delay: -0.3s;`}\n ${i === 3 && `animation-delay: -0.15s;`}\n box-sizing: border-box;\n display: block;\n position: absolute;\n width: ${size};\n height: ${size};\n border: 2px solid ${colors.grayAnatomyLight2};\n border-radius: 50%;\n animation: ${animationRotate} 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: ${colors.grayAnatomyLight2} transparent transparent transparent;\n `,\n};\n\nconst animationRotate = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(720deg);\n }\n`;\n\nSpinner.defaultProps = {\n size: `3rem`,\n};\n\nSpinner.propTypes = {\n size: PropTypes.string,\n margin: PropTypes.string,\n};\n\nexport default Spinner;\n","/** @jsx jsx */\nimport { jsx, css, keyframes } from \"@emotion/react\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\nimport PropTypes from \"prop-types\";\nimport { colors } from \"style\";\n\n/**\n * Shows a loading spinner\n *\n * @param {Number} size\n * @param {Boolean} refreshing\n */\nconst Refresher = ({ size, refreshing }) => (\n \n {[1, 2, 3, 4].map((i) => (\n \n ))}\n
\n \n
\n);\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n ring: (size, refreshing) => css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n color: ${refreshing ? colors.white : colors.grayAnatomyBase};\n background: ${refreshing ? colors.green : colors.grayAnatomyLight4};\n border-radius: 100%;\n width: ${size};\n height: ${size};\n animation: ${refreshing ? animationRotate : `none`} 3s linear infinite;\n `,\n};\n\nconst animationRotate = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(720deg);\n }\n`;\n\nRefresher.defaultProps = {\n size: `2rem`,\n refreshing: true,\n};\n\nRefresher.propTypes = {\n size: PropTypes.string,\n refreshing: PropTypes.bool,\n};\n\nexport default Refresher;\n","/** @jsx jsx */\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { colors } from \"style\";\n\nconst fade = keyframes`\n 0% {\n opacity:0.5;\n }\n 50% {\n opacity:1;\n }\n 100% {\n opacity:0.5;\n }\n`;\n\n/**\n * Shows a text loader\n */\nconst TextLoader = styled.div`\n width: ${(props) => props.width || `100%`};\n height: 1rem;\n display: inline-block;\n background: ${(props) => props.color || colors.grayAnatomyLight5};\n animation: ${fade} 1s ease infinite;\n border-radius: 5rem;\n max-width: 100%;\n`;\n\nexport default TextLoader;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextLoader from \"../Loader/TextLoader\";\nimport { TableRow, TableCell } from \"components/Table\";\n\n/**\n * Shows a row loader\n *\n * @param {Boolean} loading\n * @param {Number} numRows\n * @param {Number} numColumns\n */\nconst TableLoader = ({ loading, numRows, numColumns, ...props }) =>\n loading &&\n Array.from(Array(numRows).keys()).map((key) => (\n \n
\n \n \n \n \n \n \n \n
\n );\n};\n\nconst Video = styled.video`\n height: 65%;\n width: 64rem;\n object-fit: cover;\n`;\n\nconst styles = {\n logo_lettering: css`\n width: 14rem;\n height: 2rem;\n `,\n responsive_logo: css`\n display: none;\n @media (max-width: ${breakpoints.portrait}) {\n display: block;\n margin-right: auto;\n margin-bottom: 7rem;\n }\n `,\n grid_container: css`\n min-height: 100vh;\n width: 100vw;\n align-items: flex-start;\n `,\n side_branding: css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n position: relative;\n `,\n branded: (isVideo) => css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 50vw;\n height: 100%;\n position: fixed;\n padding: ${isVideo ? \"8rem 0rem 0rem 6rem\" : \"8rem 12rem 5rem 6rem\"};\n background: ${isVideo ? colors.purpleRainDark6 : \"var(--cover-shot) 50% 50% no-repeat\"};\n background-size: cover;\n background-position: bottom left;\n\n @media (max-width: ${breakpoints.tablet}) {\n padding-right: 5rem;\n }\n\n @media (max-width: ${breakpoints.portrait}) {\n display: none;\n }\n `,\n footer: css`\n color: ${colors.grayAnatomyLight1};\n line-height: normal;\n margin-bottom: 5rem;\n margin-left: 5rem;\n margin-right: auto;\n margin-top: auto;\n padding-top: 3rem;\n\n @media (max-width: ${breakpoints.portrait}) {\n margin: auto 0 5rem 0;\n }\n `,\n login: css`\n min-height: 100vh;\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n `,\n form_container: css`\n width: 38rem;\n max-width: 100%;\n margin: auto auto 0 auto;\n padding: 3rem 0;\n `,\n container: css`\n width: 100vw;\n min-height: 100vh;\n display: flex;\n align-items: center;\n background: #fff;\n flex-direction: column;\n justify-content: center;\n\n @media (max-width: ${breakpoints.portrait}) {\n padding: 0 3rem;\n }\n `,\n image_container: css`\n height: 65%;\n width: 64rem;\n overflow: hidden;\n `,\n title: (isVideo) => css`\n font-size: ${isVideo ? fontSize.xlarge : fontSize.xxxlarge};\n font-weight: 600;\n color: #fff;\n margin-bottom: 2rem;\n line-height: normal;\n margin-top: auto;\n\n @media (max-width: ${breakpoints.tablet}) {\n font-size: ${fontSize.xlarge};\n }\n `,\n body: css`\n color: ${colors.grayAnatomyLight1};\n font-size: ${fontSize.large};\n `,\n checklist: css`\n margin-top: auto;\n margin-bottom: auto;\n\n > * {\n margin-top: -14rem;\n }\n `,\n};\n\nLoginContainer.propTypes = {\n children: PropTypes.any,\n banner: PropTypes.object,\n isRoleApplication: PropTypes.bool,\n signupCompleted: PropTypes.bool,\n};\n\nexport default LoginContainer;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n/**\n * Logo\n *\n * @param {String} fill\n */\nconst WhiteLogo = ({ fill, ...props }) => {\n return (\n \n );\n};\n\nWhiteLogo.propTypes = {\n fill: PropTypes.string,\n};\n\nexport default WhiteLogo;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport { colors } from \"style\";\nimport MissionIcon from \"assets/images/MissionIconBlack.svg\";\nimport MissionGradient from \"assets/images/gradient_medium.webp\";\n\n/**\n * MarketingLogo\n */\nconst MarketingLogo = (props) => ;\n\nconst styles = {\n logo: css`\n width: 5rem;\n flex-shrink: 0;\n height: 2.2rem;\n mask-image: url(${MissionIcon});\n overflow: hidden;\n position: relative;\n width: 4.8rem;\n\n &:hover:after {\n opacity: 1;\n }\n\n &:before,\n &:after {\n bottom: 1px;\n content: \"\";\n left: 1px;\n position: absolute;\n right: 1px;\n top: 1px;\n }\n\n &:before {\n background-color: ${colors.black};\n }\n\n &:after {\n background-image: url(${MissionGradient});\n background-size: cover;\n opacity: 0;\n transition-duration: 0.3s;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n }\n `,\n};\n\nexport default MarketingLogo;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { useNavigate, useLocation, useParams } from \"react-router-dom\";\nimport { FormattedMessage } from \"react-intl\";\nimport { PrimaryButton, SecondaryButton } from \"components/Buttons\";\nimport { LINKS } from \"constants/index\";\nimport { useAuth, useLogout } from \"hooks\";\nimport { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { AdvancedButton } from \"components/Buttons\";\nimport { Link } from \"components/Links\";\nimport { colors, fontSize } from \"style\";\n\n/**\n * HeaderAuth\n *\n * @param {Array} pages\n */\nconst HeaderAuth = ({ pages }) => {\n const { isAuthenticated, isImpersonating, firstName } = useAuth();\n const { handleLogout } = useLogout();\n const navigate = useNavigate();\n\n const HamburgerMenu = () => (\n {children}
\n \n \n \n \n ),\n }}\n />\n
\n \n 
\n
\n )}\n \n \n \n
\n )}\n \n \n \n {firstName},\n }}\n />\n \n ({\n label: (\n \n {page.label}\n \n ),\n })),\n {\n label: (\n handleLogout(() => navigate(LINKS.login))} css={styles.link}>\n
\n );\n\n const ButtonMenu = () => {\n const { id, missionId } = useParams();\n const { search, pathname } = useLocation();\n let rolePath = \"\";\n\n if (pathname === LINKS.public_mission_role(missionId, id)) {\n rolePath = `${search ? \"&\" : \"?\"}role=${id}`;\n }\n\n return (\n \n \n \n \n \n \n \n \n \n
\n );\n };\n\n return isAuthenticated ? \n
\n);\n\nconst style = css`\n font-size: ${fontSize.xlarge};\n width: 100%;\n text-align: center;\n color: ${colors.grayAnatomyLight2};\n padding: 2rem 0;\n font-weight: 300;\n`;\n\nError.propTypes = {\n messageId: PropTypes.string,\n};\n\nexport default Error;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize } from \"style\";\nimport { FormattedMessage } from \"react-intl\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\nimport { PrimaryButton } from \"components/Buttons\";\n\n/**\n * Show a generic \"no results\" message\n *\n * @param {String} title\n * @param {String} description\n * @param {Object} button\n * @param {Object} icon\n */\nconst NoResults = ({ title, description, button, icon }) => (\n \n
\n);\n\nconst styles = {\n container: css`\n font-size: ${fontSize.small};\n width: 100%;\n text-align: center;\n color: ${colors.grayAnatomyLight1};\n padding: 2rem 0;\n font-weight: 400;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n line-height: normal;\n `,\n button_container: css`\n margin-top: 1rem;\n `,\n title: css`\n font-size: ${fontSize.normal};\n font-weight: 600;\n color: ${colors.grayAnatomyDark};\n `,\n icon_container: (bg, size) => css`\n width: ${size};\n height: ${size};\n background: ${bg};\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n `,\n};\n\nNoResults.defaultProps = {\n title: `Global.TitleNoResults`,\n description: `Global.DescriptionNoResults`,\n icon: {\n color: colors.black,\n background: colors.lightYellow,\n type: ICON_TYPE.warning,\n size: ICON_SIZE.large,\n container_size: `4rem`,\n },\n};\n\nNoResults.propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n button: PropTypes.shape({\n title: PropTypes.string,\n props: PropTypes.object,\n }),\n icon: PropTypes.shape({\n color: PropTypes.string,\n background: PropTypes.string,\n type: PropTypes.string,\n size: PropTypes.string,\n container_size: PropTypes.string,\n }),\n};\n\nexport default NoResults;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { colors } from \"style\";\n\n/**\n * Show a generic error message\n *\n * @params {String} children\n */\nconst Warning = ({ children, ...props }) => (\n \n
\n \n
\n \n \n \n
\n )}\n \n {children}\n
\n);\n\nconst style = css`\n width: 100%;\n background: ${colors.orangeCountyLight4};\n color: ${colors.orangeCountyDark3};\n padding: 1rem;\n border-radius: 0.6rem;\n font-weight: 500;\n line-height: normal;\n`;\n\nWarning.propTypes = {\n children: PropTypes.any,\n};\n\nexport default Warning;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport Modal from \"components/Modal\";\nimport { withIcon, ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { LINKS } from \"../../../constants\";\nimport { PrimaryLink } from \"components/Links\";\nimport { fontSize } from \"style\";\nimport { CopyToClipboardInput } from \"components/Form\";\nimport { useAuth } from \"hooks\";\n\n/**\n * ApplicantShareButton\n *\n * @params {string} missionRoleSlug\n * @params {string} applicantType\n * @params {number} missionId\n * @params {number} missionRoleId\n */\nconst ApplicantShareButton = ({ missionRoleSlug, applicantType, missionId, missionRoleId }) => {\n const { isAdmin } = useAuth();\n const [showModal, setShowModal] = useState(false);\n\n if (!missionId || !missionRoleId || !applicantType || !missionRoleSlug || !isAdmin) return null;\n\n const url = LINKS.applicant_public_link(missionRoleSlug, applicantType);\n const onClose = () => setShowModal(false);\n\n return (\n <>\n \n {snakeToCapitalized(key)}: {(value.score * 100).toFixed(0)}% {value.weight && ({value.weight}x)}\n
\n ));\n};\n\nconst styles = {\n tooltip: (fontSize) => css`\n text-align: left;\n font-size: ${fontSize};\n `,\n};\n\nScoreDisplay.propTypes = {\n subScores: PropTypes.object,\n fontSize: PropTypes.string,\n};\n\nScoreDisplay.defaultProps = {\n fontSize: fontSize.xxsmall,\n};\n\nexport default ScoreDisplay;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport PropTypes from \"prop-types\";\nimport { formatNumber, toUcFirst } from \"utils\";\nimport { PopoverCard } from \"components/ActivityLog\";\nimport ListTable from \"components/ListTable\";\nimport Score from \"components/Score\";\nimport { css } from \"@emotion/react\";\n\n/**\n * MatchScoreDisplay\n *\n * @params {Object} scores\n * @params {Object} scoreData\n */\nconst MatchScoreDisplay = ({ scores, scoreData }) => {\n if (!scores) return {formatNumber(scores[value.weightKey], \"x\", 1)}
\n {value.getDetail(scoreData[value.id])}
: <>}\n \n ),\n }));\n\nconst SCORE_KEYS_MAPPER = {\n matchActivityScore: {\n id: \"activity\",\n weightKey: \"weightActivity\",\n msgKey: \"Missions.MissionCandidateList.MatchScore.Activity\",\n getValue: ({ consideredDaysSinceLastActivity }) => consideredDaysSinceLastActivity,\n },\n matchSkillsScore: {\n id: \"skills\",\n weightKey: \"weightSkills\",\n msgKey: \"Missions.MissionCandidateList.MatchScore.Skills\",\n getValue: ({ matchingSkillCount }) => matchingSkillCount,\n getDetail: ({ matchingSkills }) => matchingSkills?.join(\", \"),\n },\n matchExperienceScore: {\n id: \"experience\",\n weightKey: \"weightExperience\",\n msgKey: \"Missions.MissionCandidateList.MatchScore.Experience\",\n getValue: ({ consideredExperienceYears }) => consideredExperienceYears,\n valueAdjusted: ({ consideredExperienceYears, rawExperienceYears }) =>\n consideredExperienceYears != rawExperienceYears,\n },\n matchTimeZoneScore: {\n id: \"timeZone\",\n weightKey: \"weightTimeZone\",\n msgKey: \"Missions.MissionCandidateList.MatchScore.Timezone\",\n getValue: ({ consideredTimeZoneOffset }) => consideredTimeZoneOffset,\n valueAdjusted: ({ consideredTimeZoneOffset, rawTimeZoneOffset }) =>\n !rawTimeZoneOffset || rawTimeZoneOffset !== consideredTimeZoneOffset,\n },\n matchScorePrevious: {\n id: \"Previous Score\",\n msgKey: \"Global.Value\",\n getValue: () => \"-\",\n },\n};\n\nconst styles = {\n weight: css`\n display: inline-block;\n font-weight: 400;\n width: 35px;\n `,\n popover_item_title: css`\n margin-left: 5px;\n `,\n description: css`\n margin-top: 5px;\n max-width: 15rem;\n `,\n spacer: css`\n margin-right: 25px;\n `,\n};\n\nMatchScoreDisplay.propTypes = {\n scores: PropTypes.object.isRequired,\n scoreData: PropTypes.object.isRequired,\n};\n\nexport default MatchScoreDisplay;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport PropTypes from \"prop-types\";\nimport { PopoverCard } from \"components/ActivityLog\";\nimport ListTable from \"components/ListTable\";\nimport { formatNumber } from \"utils\";\n\n/**\n * RateScoreDisplay\n *\n * @params {Object} rateData\n * @params {String} currency\n */\nconst RateScoreDisplay = ({ rateData, currency }) => {\n if (!rateData || !currency) return \n {commentsData?.map((comment, index) => (\n
\n )}\n \n
\n ))}\n \n \n
\n \n
\n \n \n
\n
{formatDate(row.completedAt, \"MMM DD, YYYY\")}
,\n width: \"15%\",\n },\n {\n label: {row.challenge.name}
,\n width: \"20%\",\n },\n {\n label: \n {row.score} / {row.maxScore}\n
\n ),\n width: \"15%\",\n },\n {\n label: \n {answers[id] ? <>A: {answers[id]} :
\n ),\n })) || []),\n ]}\n hideHeader\n {...props}\n />\n );\n};\n\nconst OptionalText = () => (\n \n (\n A:\n
\n ),\n },\n {\n title: \n A:\n
\n ),\n },\n];\n\nconst styles = {\n body: css`\n font-size: ${fontSize.small};\n font-weight: 400;\n `,\n optionalText: css`\n font-style: italic;\n color: ${colors.grayAnatomyBase2};\n font-size: ${fontSize.xsmall};\n margin-left: 0.25rem;\n `,\n};\n\nApplicationQuestionnaireResponses.propTypes = {\n data: PropTypes.object.isRequired,\n assessment: PropTypes.object,\n loading: PropTypes.bool,\n};\n\nexport default ApplicationQuestionnaireResponses;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { DestructableButton, PrimaryButton, SecondaryButton } from \"components/Buttons\";\nimport { Select, TextInput } from \"components/Form\";\nimport { Col, Row } from \"components/Containers\";\nimport Card from \"components/Card\";\nimport { colors } from \"style\";\nimport { ICON_POSITION, ICON_SIZE, ICON_TYPE, StatusIcon, withIcon } from \"components/Icon\";\nimport { computeMargin, computeSellingPriceFromMargin, formatCurrency } from \"utils\";\nimport { CURRENCIES, RATE_FREQUENCIES } from \"constants/index\";\nimport { Spinner } from \"components/Loader\";\n\n/**\n * ApplicantNegotiatedRate\n *\n * @param {Number} rate\n * @param {Boolean} loading\n * @param {String} messageFragment\n * @param {Function} onSave\n * @param {Function} onRemove\n * @param {Boolean} showMarginField\n * @param {Number} buyingAmount\n */\nconst ApplicantNegotiatedRate = ({\n rate,\n loading,\n messageFragment,\n showMarginField,\n buyingAmount,\n onSave,\n onRemove,\n}) => {\n const inputRef = useRef();\n const [isEditing, setIsEditing] = useState(false);\n const [value, setValue] = useState(rate?.amount);\n const [currency, setCurrency] = useState(rate?.currency);\n const [margin, setMargin] = useState();\n\n useEffect(() => {\n setValue(rate?.amount);\n setCurrency(rate?.currency);\n }, [rate]);\n\n const handleEdit = () => setIsEditing(true);\n\n const handleSave = () => {\n onSave?.({ amount: parseFloat(value), currency: currency, frequency: RATE_FREQUENCIES.hourly });\n setIsEditing(false);\n };\n\n const handleCancel = () => {\n setIsEditing(false);\n setValue(rate?.amount);\n setCurrency(rate?.currency);\n };\n\n return (\n \n
\n \n \n {\n setMargin(margin);\n if (!margin) return setValue(\"\");\n\n setValue(computeSellingPriceFromMargin(buyingAmount, margin));\n }}\n />\n
\n )}\n \n {\n setValue(val === \"0\" ? \"\" : val);\n setMargin(\n showMarginField && buyingAmount ? (val ? computeMargin(buyingAmount, val) : \"\") : margin\n );\n }}\n autoFocus={!buyingAmount}\n />\n
\n \n setCurrency(val)}\n options={CURRENCIES}\n placeholder=\"Currency\"\n />\n
\n \n
({counts[item.countField]})
\n );\n\n // Handle top-level objects\n return {\n label: {formatDate(row.onboardedAt)}
,\n },\n {\n label: {formatDate(row.offboardedAt)}
,\n },\n {\n label: \n
\n
\n \n \n
\n );\n};\n\nconst styles = {\n label: css`\n padding: 1rem 0;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:after,\n &:before {\n content: \"\";\n display: inline-block;\n border-bottom: 1px ${colors.grayAnatomyLight3} dashed;\n flex: 1;\n }\n `,\n button: css`\n border: 0;\n padding: 0 1rem;\n background: none;\n font-size: ${fontSize.small};\n font-weight: 600;\n color: ${colors.grayAnatomyBase};\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n `,\n};\n\nExpandable.propTypes = {\n children: PropTypes.element,\n onToggle: PropTypes.func,\n};\n\nexport default Expandable;\n","import React, { useMemo, useState } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport Form, { CheckBox, SIZE, Label } from \"components/Form\";\nimport { OperatorToggle } from \"components/Search\";\nimport { Grid, Row } from \"components/Containers\";\nimport { APPLICANT_LIST_FILTERS_CONFIG, canUseFilter } from \"constants/index\";\nimport Expandable from \"components/Expandable\";\nimport { TOGGLE_SIZE } from \"components/Form/Toggle\";\nimport { isEmpty } from \"utils\";\nimport { useAuth } from \"hooks\";\n\n/**\n * ApplicantListAdvancedFilters\n *\n * @param {Function} setSelected\n * @param {Object} formValues\n * @param {Object} selected\n * @param {Boolean} loading\n * @param {Array} initialStickyFilterKeys // Allows to set some filters as fixed on the UI\n */\nconst ApplicantListAdvancedFilters = ({\n setSelected,\n formValues,\n selected,\n loading,\n initialStickyFilterKeys,\n ...props\n}) => {\n const { roles } = useAuth();\n const { advancedFilters } = selected;\n const [isExpanded, setIsExpanded] = useState(false);\n const enabledFiltersFromUrl = useMemo(\n () =>\n Object.entries(advancedFilters || {}).reduce(\n (acc, [key, value]) => ({ ...acc, ...(value?.enabled ? { [key]: value } : {}) }),\n {}\n ),\n [advancedFilters]\n );\n const stickyFilterKeys = [...initialStickyFilterKeys, ...Object.keys(enabledFiltersFromUrl)];\n const filterConfig = Object.keys(APPLICANT_LIST_FILTERS_CONFIG)\n .filter((key) => canUseFilter(key, roles))\n .reduce((acc, key) => ({ ...acc, [key]: APPLICANT_LIST_FILTERS_CONFIG[key] }), {});\n const stickyFilters = useMemo(\n () =>\n Object.keys(filterConfig).reduce(\n (acc, key) => ({ ...acc, ...(stickyFilterKeys.includes(key) ? { [key]: filterConfig[key] } : {}) }),\n {}\n ),\n [stickyFilterKeys]\n );\n const expandableFilterKeys = Object.keys(filterConfig).filter((key) => !stickyFilterKeys.includes(key));\n const operators = Object.keys(advancedFilters || {}).reduce(\n (acc, key) => ({ ...acc, [key]: advancedFilters[key]?.operator }),\n {}\n );\n\n const handleToggle = (name, value) => {\n const key = name?.split(\"[enabled]\")[0];\n if (!key) return;\n\n setSelected((prev) => {\n const { advancedFilters, ...rest } = prev;\n const updatedFilters = { ...advancedFilters };\n\n updatedFilters[key] = {\n ...updatedFilters[key],\n enabled: value,\n };\n\n return { ...rest, advancedFilters: updatedFilters };\n });\n };\n\n const handleOperatorChange = (name, value) => {\n const key = name?.split(\"[operator]\")[0];\n if (!key) return;\n\n setSelected((prev) => {\n const { advancedFilters, ...rest } = prev;\n const updatedFilters = { ...advancedFilters };\n\n updatedFilters[key] = {\n ...updatedFilters[key],\n operator: value,\n };\n\n return { ...rest, advancedFilters: updatedFilters };\n });\n };\n\n const handleChange = (data) => {\n setSelected((prev) => {\n const { advancedFilters, ...rest } = prev;\n const updatedFilters = { ...advancedFilters };\n\n Object.keys(data).forEach((key) => {\n updatedFilters[key] = {\n enabled: !isEmpty(data[key]?.value) ? updatedFilters[key]?.enabled ?? true : updatedFilters[key]?.enabled,\n operator: !!updatedFilters[key]?.operator,\n value: data[key]?.value,\n };\n });\n\n return { ...rest, advancedFilters: updatedFilters };\n });\n };\n\n const formProps = {\n initialValues: advancedFilters,\n hideOptionalLabel: true,\n disabled: loading,\n onChange: handleChange,\n };\n const commonFormArgs = {\n operators,\n handleToggle,\n handleOperatorChange,\n formValues,\n enabledFilterKeys: Object.keys(enabledFiltersFromUrl),\n };\n\n return (\n <>\n {!isExpanded && stickyFilterKeys.length > 0 && (\n \n \n
\n {isExpanded && {children}
}\n \n \n \n
\n\n {formatDate(data?.appliedAt, \"MMM DD, YYYY\", true, true)}\n \n \n \n
\n {formatDate(data?.pendingSince, \"MMM DD, YYYY\", true, true)}\n \n \n \n
\n {formatDate(data?.invitedAt, \"MMM DD, YYYY\", true, true)}\n \n \n \n
\n\n {formatDate(data?.updatedAt, \"MMM DD, YYYY\", true, true)}\n \n
\n {role.name}
\n ))}\n \n }\n trigger={\n\n \n {scores?.vectorRank ? scores.vectorRank : `-`},\n }}\n />\n
\n
\n);\n\nApplicantAppliedRank.propTypes = {\n scores: PropTypes.object,\n};\n\nexport default ApplicantAppliedRank;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Overlay from \"components/Overlay\";\nimport { MatchScoreDisplay } from \"components/Missions/Applicants\";\nimport Score from \"components/Score\";\nimport { convertToPercent } from \"utils\";\n\n/**\n * ApplicantMatchScore\n *\n * @param {Object} scores\n * @param {Number} matchScore\n * @param {Object} scoreData\n */\nconst ApplicantMatchScore = ({ scores, matchScore, scoreData }) => (\n \n {hourlyRate},\n period:
\n 0)}>\n 0 ? `+` : `-`} ${hourlyRateDeltaCurrency}`,\n period:
\n \n );\n};\n\nconst styles = {\n container: css`\n align-items: center;\n white-space: nowrap;\n `,\n rate: css`\n font-weight: 500;\n `,\n delta_rate: (isPositive) => css`\n color: ${isPositive ? colors.red : colors.green};\n background: ${isPositive ? colors.lightRed : colors.lightGreen};\n font-size: ${fontSize.xxxsmall};\n padding: 0.25rem 0.5rem 0.25rem 0.5rem;\n border-radius: 0.6rem;\n white-space: nowrap;\n `,\n};\n\nApplicantRate.propTypes = {\n hourlyRateData: PropTypes.object,\n};\n\nexport default ApplicantRate;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { Tag, TAG_SIZE } from \"components/Tags\";\nimport { MEMBER_STATUS } from \"constants/index\";\nimport { colors } from \"style\";\nimport { Row } from \"components/Containers\";\n\n/**\n * ApplicantStatus\n *\n * @param {Object} row\n */\nconst ApplicantStatus = ({ data }) => (\n \n \n \n
\n )}\n \n
\n \n \n {scores?.vectorRank ? scores.vectorRank : `-`}\n \n
\n \n
\n \n
\n \n
\n \n \n setShowForm(true)}>\n \n
\n \n )}\n \n
\n - \n {data.map((item, index) => (\n
- \n
\n
\n\n\n {item}\n\n \n ))}\n
\n \n \n \n \n
: (\n \n \n \n \n \n \n \n handleNavigate(\"about-role\")}>\n \n )}\n
\n \n handleNavigate(\"how-it-works\")}>\n \n handleNavigate(\"about-mission\")}>\n \n handleNavigate(\"testimonials\")}>\n \n handleNavigate(\"our-team\")}>\n \n handleNavigate(\"member-stories\")}>\n \n
\n \n \n {role?.publicViewSettings?.videoLink && role?.publicViewSettings?.videoLinkEnabled && (\n \n \n )}\n \n \n
\n \n);\n\nconst handleNavigate = (sectionId) => document.getElementById(sectionId)?.scrollIntoView();\n \nconst formatList = (data, messageId) => {\n if (!data || data.length === 0) {\n return []\n } else {\n return [\n \n {role?.name}\n
\n\n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n {(role?.mission?.descriptionJson && !loading) ? (\n \n \n \n \n {role?.mission?.companyDescriptionJson ? (\n \n \n \n
\n)\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark}; \n font-size: ${fontSize.medium};\n background: ${colors.grayAnatomyLight8};\n border-radius: 3.4rem;\n padding: 14rem 0;\n z-index:1;\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 4rem 0;\n }\n `,\n divider: css`\n border-top: 1px ${colors.purpleRainLight7} solid;\n margin-bottom:4rem;\n `,\n description: css`\n margin-bottom:4rem;\n border-left: 1px ${colors.purpleRainLight7} solid;\n padding-left: 6rem;\n padding-bottom: 6rem;\n\n b, strong {\n color: ${colors.grayAnatomyDark};\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom:3rem;\n }\n `,\n text: css`\n color: ${colors.grayAnatomyDark}; \n `,\n title: css`\n color: ${colors.grayAnatomyDark};\n margin-bottom:4rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom:2rem;\n }\n `,\n body: css`\n margin: 0;\n padding: 0;\n border: 0;\n box-shadow: none;\n color: ${colors.grayAnatomyDark};\n `,\n company_container: css`\n @media (max-width: ${breakpoints.mobile}) {\n margin-top:3rem;\n }\n `,\n};\n\nMissionRolesPublicHeader.propTypes = {\n role: PropTypes.object.isRequired,\n loading: PropTypes.bool,\n};\n\nexport default MissionRolesPublicHeader;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Col, Grid, NarrowContainer, Row } from \"components/Containers\";\nimport { breakpoints, colors, fontSize } from \"style\";\nimport { H1, MarketingHeader } from \"components/Text\";\n\n/**\n * MissionRolesPublicHowItWorks\n */\nconst MissionRolesPublicHowItWorks = () => (\n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n);\n\nconst BodyContent = () => (\n <>\n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark};\n background: ${colors.white} url(${Background}) no-repeat center center;\n padding: 14rem 0 14rem 0;\n background-size: 50%;\n background-position: right;\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 6rem 0 0rem 0;\n background:#fff; \n }\n `,\n inner_container: css`\n @media (max-width: ${breakpoints.mobile}) {\n grid-column-gap: 2rem;\n grid-row-gap: 2rem;\n }\n `,\n checklist: css`\n color: ${colors.purpleRainBase};\n `,\n item_container: css`\n margin-bottom: 2rem;\n line-height: 1.5;\n margin-top: -0.4rem;\n color: ${colors.grayAnatomyBase};\n `,\n subtitle: css`\n font-weight:500;\n `,\n title_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n text-align:center;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom:0rem;\n }\n `,\n subtitle: css`\n font-weight:400;\n font-size: ${fontSize.large};\n line-height: 1.5;\n margin-bottom:8rem;\n text-align: center;\n `,\n image_container:css`\n max-width: 100%;\n overflow: hidden;\n `,\n image: css`\n width:100%;\n border-radius: 3rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n transform: scale(1.6);\n margin-bottom: -10rem;\n }\n `,\n};\n\nexport default MissionRolesPublicMemberExperience;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Col, Grid, NarrowContainer, Row } from \"components/Containers\";\nimport { breakpoints, colors, fontSize } from \"style\";\nimport Rating from \"assets/images/rating.svg\";\nimport Image from \"components/Image\";\nimport Thumb1 from \"assets/images/testimonial_thumb_xavier.webp\";\nimport Thumb2 from \"assets/images/testimonial_thumb_siamak.webp\";\nimport { H1, MarketingHeader } from \"components/Text\";\n\n/**\n * MissionRolesPublicTestimonials\n */\nconst MissionRolesPublicTestimonials = () => (\n \n
\n \n \n \n \n
\n);\n\nconst TESTIMONIAL_DATA = [\n {\n quote: \"Missions.Roles.Public.MissionRolesPublicTestimonials.Quote1\",\n name: \"Missions.Roles.Public.MissionRolesPublicTestimonials.Name1\",\n location: \"Missions.Roles.Public.MissionRolesPublicTestimonials.Location1\",\n thumb: Thumb1,\n },\n {\n quote: \"Missions.Roles.Public.MissionRolesPublicTestimonials.Quote2\",\n name: \"Missions.Roles.Public.MissionRolesPublicTestimonials.Name2\",\n location: \"Missions.Roles.Public.MissionRolesPublicTestimonials.Location2\",\n thumb: Thumb2,\n },\n];\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark};\n background: ${colors.white};\n padding: 12rem 0 12rem 0;\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 3rem 0;\n }\n `,\n inner_container: css`\n background: ${colors.grayAnatomyLight8};\n border-radius: 3.5rem;\n padding: 8rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 4rem 2rem;\n }\n `,\n item_container: css`\n font-size: ${fontSize.medium};\n line-height: 1.5;\n\n @media (max-width: ${breakpoints.mobile}) {\n font-size: ${fontSize.normal};\n margin-top: 3rem;\n }\n `,\n subtitle: css`\n font-weight:500;\n `,\n title_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n width:100%;\n margin-bottom: 8rem;\n text-align:center;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom: 0;\n }\n `,\n title: css`\n margin-bottom:4rem;\n `,\n image: css`\n width:1.75rem;\n height:1.75rem;\n `,\n author: css`\n margin-top: 3rem;\n flex-wrap: nowrap;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-top: 1rem;\n }\n `,\n name: css`\n font-weight: 600;\n `,\n thumb: (url) => css`\n background-image: url(${url});\n background-size: cover;\n width: 5rem;\n height: 5rem;\n border-radius: 50%;\n `,\n};\n\nexport default MissionRolesPublicTestimonials;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Col, Grid, NarrowContainer } from \"components/Containers\";\nimport { breakpoints, colors } from \"style\";\nimport { H1, MarketingHeader } from \"components/Text\";\n\n/**\n * MissionRolesPublicTalentSuccess\n */\nconst MissionRolesPublicTalentSuccess = () => (\n \n \n \n \n \n
\n \n \n \n {TESTIMONIAL_DATA.map((testimonial, index) => (\n \n \n
\n \n \n
\n \n \n ))} \n \n
\n \n
\n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n);\n\nconst styles = {\n container: css`\n color: ${colors.white};\n background: ${colors.purpleRainDark2};\n padding: 14rem 0 14rem 0;\n border-radius: 3.5rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 4rem 0;\n }\n `,\n inner_container: css`\n @media (max-width: ${breakpoints.mobile}) {\n grid-column-gap: 2rem;\n grid-row-gap: 2rem;\n }\n `,\n title_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n width:100%;\n text-align:center;\n `,\n title: css`\n color: ${colors.white};\n `,\n frame: css`\n background: #000;\n margin-bottom: 4rem;\n width: 100%;\n height:40rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n height:17rem;\n margin-bottom: 2rem;\n }\n `,\n};\n\nexport default MissionRolesPublicTalentSuccess;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Col, Grid, NarrowContainer } from \"components/Containers\";\nimport { breakpoints, colors, fontSize, } from \"style\";\nimport { H1, MarketingHeader } from \"components/Text\";\nimport Asad from \"assets/images/asadullah_closeup.jpg\";\nimport Image from \"components/Image\";\nimport { MarketingButton } from \"components/Buttons\";\nimport { Link } from \"components/Links\";\n\n\n/**\n * MissionRolesPublicStory\n */\nconst MissionRolesPublicStory = () => (\n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark};\n background: ${colors.grayAnatomyLight5};\n padding: 14rem 0 14rem 0;\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 6rem 0 4rem 0;\n }\n `,\n inner_container: css`\n @media (max-width: ${breakpoints.mobile}) {\n grid-column-gap: 2rem;\n grid-row-gap: 2rem;\n }\n `,\n item_container: css`\n height:100%;\n justify-content: center;\n font-size: ${fontSize.medium};\n line-height:1.5;\n\n @media (max-width: ${breakpoints.mobile}) {\n text-align: center;\n }\n `,\n container_left: css`\n align-items: flex-end;\n text-align: right;\n\n @media (max-width: ${breakpoints.mobile}) {\n align-items: center;\n text-align: center;\n }\n `,\n title_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n margin-bottom:4rem;\n text-align:center;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom:2rem;\n }\n `,\n subtitle: css`\n font-weight:600;\n `,\n image: css`\n width: 100%;\n border-radius: 2rem;\n margin-bottom:4rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom:0rem;\n }\n `,\n};\n\nexport default MissionRolesPublicStory;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Grid, NarrowContainer } from \"components/Containers\";\nimport { breakpoints, colors, fontSize } from \"style\";\nimport { H1 } from \"components/Text\";\nimport { MarketingButton } from \"components/Buttons\";\nimport { Link } from \"components/Links\";\nimport { LINKS } from \"constants/index\";\n\n/**\n * MissionRolesPublicFooter\n */\nconst MissionRolesPublicFooter = () => (\n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n);\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark};\n background: ${colors.white};\n padding: 8rem 0 8rem 0;\n font-size: ${fontSize.normal};\n `,\n title: css`\n margin:0;\n `,\n item_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n text-align:center;\n `, \n end: css`\n justify-content:flex-end;\n\n @media (max-width: ${breakpoints.mobile}) {\n justify-content:center;\n text-align:center;\n }\n `,\n signup: css`\n margin-bottom:8rem;\n `,\n copyright: css`\n @media (max-width: ${breakpoints.mobile}) {\n text-align:center;\n }\n `\n};\n\nexport default MissionRolesPublicFooter;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Col, Grid, NarrowContainer, Row } from \"components/Containers\";\nimport { breakpoints, colors, fontSize } from \"style\";\nimport { H1, MarketingHeader } from \"components/Text\";\nimport Icon, { ICON_TYPE } from \"components/Icon\";\n\n/**\n * MissionRolesFaq\n */\nconst MissionRolesFaq = () => (\n \n
\n \n \n \n \n \n \n \n
\n \n \n \n {[1,2,3,4,5,6,7,8,9,10].map((item, index) => \n \n \n
\n);\n\n/**\n * Question\n * \n * @param {Number} count \n */\nconst Question = ({ count }) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n \n
\n
\n \n \n setIsOpen(!isOpen)}>\n
\n
\n )\n}\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark};\n background: ${colors.white};\n padding: 14rem 0 14rem 0;\n font-size: ${fontSize.normal};\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 4rem 0;\n }\n `,\n title_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n width:100%;\n margin-bottom: 8rem;\n text-align:center;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-bottom: -2rem;\n }\n `,\n title: css`\n margin-bottom:4rem;\n `,\n item_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n `, \n icon_container: css`\n width:3rem;\n height:3rem;\n border-radius:50%;\n background:${colors.grayAnatomyLight4};\n display:flex;\n justify-content:center;\n align-items:center;\n `,\n question_container:css ` \n border-bottom: 1px solid ${colors.grayAnatomyLight3};\n cursor:pointer;\n `,\n question: css`\n padding: 3rem 0;\n font-size: ${fontSize.xlarge};\n justify-content: space-between;\n user-select: none;\n flex-wrap: nowrap;\n\n @media (max-width: ${breakpoints.mobile}) {\n font-size: ${fontSize.medium}; \n line-height:normal; \n }\n `,\n answer: isOpen => css` \n line-height:2.4rem; \n max-height: ${isOpen ? `500px` : `0px`};\n transition: max-height 0.8s ease;\n overflow:hidden;\n\n > div {\n max-width:60%;\n padding: 2.5rem 0 10rem 0;\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n > div {\n max-width:100%;\n padding: 1rem 0 3rem 0;\n line-height:normal;\n } \n }\n `\n};\n\n\nQuestion.propTypes = {\n count: PropTypes.number.isRequired\n}\n\nexport default MissionRolesFaq;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport Modal, { MODAL_SIZE } from \"components/Modal\";\nimport { Grid, Col } from \"components/Containers\";\nimport { fontSize } from \"style\";\nimport { BodyContent } from \"components/Missions/Roles/Public/MissionRolesPublicHowItWorks\";\nimport { H1 } from \"components/Text\";\n\n/**\n * MissionRolesPublicApplyModal\n *\n * @param {Boolean} show\n * @param {Function} onClose\n * @param {Object} data\n * @param {Function} onSubmit\n */\nconst MissionRolesPublicApplyModal = ({ show, onClose, onSubmit, role, ...props }) => (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {role?.descriptionJson ? (\n
\n);\n\nconst styles = {\n container: css`\n font-size: ${fontSize.normal};\n\n ol,\n ul {\n margin: 1rem 1rem;\n }\n `,\n description: (marginSize) => css`\n font-size: ${fontSize.normal};\n line-height: 1.75;\n color: ${colors.purpleRainDark2};\n position: relative;\n margin: -1rem ${marginSize} 4rem ${marginSize}; // -1 offsets paragraph\n `,\n body: css`\n margin: 0;\n padding: 0;\n border: 0;\n box-shadow: none;\n `,\n};\n\nRoleDescription.defaultProps = {\n marginSize: margins.normal,\n showArcheTypes: false,\n};\n\nRoleDescription.propTypes = {\n role: PropTypes.object,\n marginSize: PropTypes.string,\n isLoading: PropTypes.bool,\n showArcheTypes: PropTypes.bool,\n isAdmin: PropTypes.bool,\n};\n\nexport default RoleDescription;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Card from \"components/Card\";\nimport { Select, TextInput } from \"components/Form\";\nimport { Grid } from \"components/Containers\";\nimport { GET_ADMINS } from \"graphql/queries\";\nimport { ROLE_STATES_OPTIONS } from \"constants/index\";\n\n/**\n * Roles Filters\n *\n * @param {Object} selected\n * @param {Function} onChange\n */\nconst RolesFilters = ({ selected, onChange }) => {\n const { talentOwnerId, state, salesOwnerId, keyword } = selected || {};\n const handleChange = (name, value) => onChange((prev) => ({ ...prev, [name]: value }));\n\n return (\n \n
\n {role?.name}
\n \n {shortenText(role?.description, 200)}\n
\n {role?.primarySkills && role?.primarySkills.length > 0 && (\n \n \n \n
\n \n
\n )}\n \n \n \n )}\n
\n {!hideApplyButton && (\n \n
\n \n {isShowcase ? (\n \n {mission?.name}\n \n ) : (\n
\n \n
\n {role?.timezone?.name || mission?.timezone?.name}
\n \n
\n {(isAdmin || isRecruiter) && (\n {moment(role?.startDate || mission?.startDate).format(\"MMMM Do, YYYY\")}
\n \n
\n \n
\n \n
\n \n {[1, 2, 3, 4].map((item) => (\n
\n \n
\n )\n }\n mutationData={{\n mutationName: {\n add: ADD_MISSION_ROLE_APPLICANT,\n },\n }}\n {...props}\n {...modalFormProps}\n />\n \n );\n }\n};\n\nconst RATE_RECOMMENDATION = (rateRecommendation) =>\n rateRecommendation?.rate\n ? [\n {\n description: \n \n
\n \n {data.map((item, index) => (\n
\n);\n\nconst styles = {\n container: css`\n font-weight: 500;\n font-size: ${fontSize.xxsmall};\n border-radius: 2rem;\n white-space: nowrap;\n display: flex;\n overflow: hidden;\n width: 15rem;\n `,\n item: css`\n flex: 1;\n text-align: center;\n padding: 0.5rem 1rem;\n color: ${colors.darkGreen};\n background: ${colors.green2};\n\n &:first-of-type {\n background: ${colors.green6};\n font-weight: 400;\n }\n\n &:nth-of-type(2) {\n background: ${colors.green5};\n font-weight: 500;\n }\n\n &:nth-of-type(3) {\n background: ${colors.green4};\n font-weight: 600;\n }\n\n &:nth-of-type(4) {\n background: ${colors.green3};\n font-weight: 700;\n }\n\n &:nth-of-type(5) {\n font-weight: 700;\n }\n `,\n};\n\nRolePipeline.propTypes = {\n data: PropTypes.array,\n};\n\nexport default RolePipeline;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useMissionRoles, useSkillsMatch, useToast } from \"hooks\";\nimport { DECORATORS, SIZE, TYPE } from \"components/Form\";\nimport { ICON_TYPE, ICON_SIZE, ICON_POSITION, MessageWithIcon } from \"components/Icon\";\nimport { ADD_MISSION_ROLE, UPDATE_MISSION_ROLE } from \"graphql/mutations\";\nimport { MUTATION_TYPE } from \"hooks\";\nimport {\n GET_MISSION_ROLES,\n GET_TIME_ZONES,\n GET_ADMINS,\n GET_DISCIPLINES,\n GET_SKILLS,\n GET_LOCATIONS,\n GET_CHALLENGES,\n} from \"graphql/queries\";\nimport { PAGES, ARCHETYPES, WORK_ARRANGEMENT_OPTIONS, ENGAGEMENT_TYPES_OPTIONS } from \"constants/index\";\nimport { ModalForm, MODAL_SIZE } from \"components/Modal\";\nimport { getPlainText } from \"components/Form/Editor\";\n\n/**\n * RoleAddButton\n *\n * @param {Boolean} show\n * @param {Function} onClose\n * @param {Object} data\n * @param {String} missionId\n * @param {Boolean} loading\n * @param {Boolean} isEditing\n */\nconst RoleAddButton = ({ show, onClose, data, missionId, loading, isEditing }) => {\n const [skills, setSkills] = useState([]);\n const { toast } = useToast();\n const { buildFormData } = useMissionRoles({ skipQuery: true });\n const { count, loading: skillsLoading } = useSkillsMatch({ skills });\n\n if (isEditing && loading) return null;\n\n const formProps = {\n initialValues: buildFormData(data),\n updateId: data?.id,\n parentKeyValue: missionId,\n parentKeyName: \"missionId\",\n mutationType: isEditing ? MUTATION_TYPE.update : MUTATION_TYPE.add,\n mutationData: {\n mutationName: {\n add: ADD_MISSION_ROLE,\n update: UPDATE_MISSION_ROLE,\n },\n refetchQueries: [GET_MISSION_ROLES],\n refetchAfterMutate: true,\n },\n };\n\n const handleComplete = () => {\n onClose();\n toast.success(\n {item}\n
\n ))}\n \n
- \n {reason.map((error) => {\n switch (error) {\n case ERROR_CODES.archetypeMismatch:\n return (\n
- \n
- \n
\n \n );\n\n default:\n return
\n
\n {challengesExists && isAdmin && (\n \n
\n {shortenText(wording, 120)}
\n \n
\n \n ),\n width: \"70%\",\n },\n {\n label: \n
\n {questionsExists && (\n \n
\n {missionData?.name}
\n \n {shortenText(missionData?.description, 200)}\n
\n \n \n \n
\n \n
\n \n
\n \n {missionData?.timezone?.name}\n
\n \n
\n \n {moment(missionData?.startDate).format(\"MMMM Do, YYYY\")}\n
\n \n
\n \n {formatNumber(missionData?.rolesCount)}\n
\n \n
\n \n
\n \n {[1, 2, 3, 4].map((item) => (\n
\n \n
\n \n {isOrganizationConfidential ? (\n
\n \n );\n};\n\nconst styles = {\n description: css`\n line-height: normal;\n `,\n body: css`\n margin: 0;\n padding: 0;\n border: 0;\n box-shadow: none;\n `,\n};\n\nMissionAboutClient.propTypes = {\n mission: PropTypes.object,\n isLoading: PropTypes.bool,\n};\n\nexport default MissionAboutClient;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { Paragraph } from \"components/Text\";\nimport { Header } from \"components/DisplayBox\";\nimport { H3 } from \"components/Text\";\nimport { Editor } from \"components/Form\";\n\n/**\n * MissionAbout\n *\n * @param {Object} mission\n * @param {Boolean} isLoading\n */\nconst MissionAbout = ({ mission, isLoading }) => (\n <>\n \n
\n \n {mission?.descriptionJson ? (\n
\n \n);\n\nconst styles = {\n description: css`\n line-height: normal;\n `,\n body: css`\n margin: 0;\n padding: 0;\n border: 0;\n box-shadow: none;\n `,\n};\n\nMissionAbout.propTypes = {\n mission: PropTypes.object,\n isLoading: PropTypes.bool,\n};\n\nexport default MissionAbout;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useQueryData, useProfile } from \"hooks\";\nimport { GET_MISSION_BOARD_SUMMARY } from \"graphql/queries\";\nimport { MessagesError } from \"components/Messages\";\nimport { PrimaryLink } from \"components/Links\";\nimport { LINKS } from \"constants/index\";\nimport PageTitle from \"components/PageTitle\";\nimport styled from \"@emotion/styled\";\nimport { breakpoints, fontSize } from \"style\";\n\n/**\n * MissionBoardSummary\n *\n * @param {Number} id\n * @param {String} name\n */\nconst MissionBoardSummary = ({ id: profileId, name, ...props }) => {\n const { data: profileData, loading: profileLoading } = useProfile({ profileId });\n const { loading, data, error } = useQueryData({\n queryName: GET_MISSION_BOARD_SUMMARY,\n keyName: \"profile\",\n variables: {\n id: profileId,\n },\n });\n\n if ((!loading && !data) || error) {\n return \n \n
\n {acceptedCount > 0 && (\n <>\n \n
\n
\n \n \n \n
\n \n )\n};\n\nMisssionPublicLink.propTypes = {\n show: PropTypes.bool,\n onClose: PropTypes.func,\n data: PropTypes.object,\n};\n\nconst styles = {\n container: css`\n display: flex;\n flex-direction: row-reverse;\n `,\n button_radius: css`\n border-top-left-radius: unset;\n border-bottom-left-radius: unset;\n `,\n text_input_radius: css`\n border-top-right-radius: unset;\n border-bottom-right-radius: unset;\n `\n};\n\nexport default MisssionPublicLink;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useAuth } from \"hooks\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\nimport { Row } from \"components/Containers\";\n\n/**\n * MissionOrganizationName\n *\n * @param {Object} data\n * @param {String} iconSize\n * @param {Boolean} isLoading\n * @param {Boolean} hideConfidentialIcon\n */\nconst MissionOrganizationName = ({ data, iconSize, isLoading, hideConfidentialIcon }) => {\n const { isAdmin, isClient } = useAuth();\n const authorizedUser = isAdmin || isClient;\n const isOrganizationConfidential = !authorizedUser && data?.isConfidential;\n const showConfidentialIcon = !hideConfidentialIcon && authorizedUser && data?.isConfidential;\n\n const messageValues = {\n name: data?.name,\n icon: showConfidentialIcon && \n
\n {subTitle && {title}
\n {info}
\n {subTitle}
}\n \n {isDestructable && (\n \n \n )}\n {footer &&
\n {showCancel && (\n {footer}
}\n {description}
: null;\n\n return (\n {body}
\n {children}
\n \n );\n};\n\nconst styles = {\n text: css`\n font-size: ${fontSize.small};\n line-height: 1.33;\n `,\n};\n\nConfirmationModal.propTypes = {\n show: PropTypes.bool,\n children: PropTypes.node,\n onClose: PropTypes.func,\n onSubmit: PropTypes.func,\n};\n\nexport default ConfirmationModal;\n","import Modal from \"./Modal\";\n\nconst MODAL_SIZE = {\n small: \"sm\",\n medium: \"md\",\n large: \"lg\",\n xlarge: \"xlg\"\n};\n\nexport { default as ModalForm } from \"./ModalForm\";\nexport { default as ModalConfirmationProvider } from \"./ModalConfirmationProvider\";\nexport { ModalConfirmationContext } from \"./ModalConfirmationProvider\";\nexport { default as withModalForm } from \"./withModalForm\";\nexport { default as ConfirmationModal } from \"./ConfirmationModal\";\nexport { MODAL_SIZE };\n\nexport default Modal;\n","import React from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { FormattedMessage } from \"react-intl\";\nimport { ICON_TYPE } from \"components/Icon\";\nimport { LINKS } from \"constants/index\";\nimport { useAuth, useLogout } from \"hooks\";\nimport { SideNavLink } from \"components/Nav/SideNav\";\n\n/**\n * MenuItemLogout\n */\nconst MenuItemLogout = () => {\n const { isShowcase } = useAuth();\n const { handleLogout } = useLogout();\n const navigate = useNavigate();\n\n return (\n \n
\n )}\n {!hideName && (\n \n {data.name}\n {gradientLabel &&
\n \n
\n \n
\n);\n\nconst styles = {\n container: css`\n background: ${colors.grayAnatomyLight4};\n padding: 2rem 0;\n `,\n inner_container: css`\n max-width: ${PAGE_WRAPPER_MAX_WIDTH};\n margin: 0 auto;\n padding: 0 ${PAGE_WRAPPER_SIZE} 0 ${PAGE_WRAPPER_SIZE};\n `,\n offset: css`\n margin: 0 ${margins.normal};\n\n @media (max-width: ${breakpoints.portrait}) {\n margin: 0 2.5rem;\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n margin: 0 2rem;\n }\n `,\n};\n\nSubNav.propTypes = {\n children: PropTypes.any.isRequired,\n};\n\nexport default SubNav;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport PropTypes from \"prop-types\";\nimport { useNavigate } from \"react-router\";\nimport { css } from \"@emotion/react\";\nimport { breakpoints, colors } from \"style\";\nimport { AdvancedButton } from \"components/Buttons\";\nimport { NavLink } from \"components/Links\";\n\n/**\n * Navigation list\n *\n * @param {Array} pages\n * @param {Boolean} onDark\n * @param {Boolean} end\n * @param {Boolean} hideOnMobile\n */\nconst NavList = ({ pages, end, onDark, hideOnMobile, ...props }) => {\n const navigate = useNavigate();\n\n return (\n \n );\n};\n\nconst StyledNavLink = styled(NavLink, { shouldForwardProp: (prop) => prop !== \"isAdmin\" })`\n display: block;\n white-space: nowrap;\n ${({ isAdmin }) => isAdmin && `color: ${colors.peach} !important;`}\n`;\n\nconst styles = {\n container: (hideOnMobile) => css`\n ${hideOnMobile &&\n `\n @media (max-width: ${breakpoints.portrait}) {\n display: none;\n } \n `}\n `,\n list: css`\n display: flex;\n align-items: center;\n padding-left: 0;\n list-style: none;\n margin: 0;\n\n @media (max-width: ${breakpoints.portrait}) {\n display: none;\n }\n `,\n list_item: css`\n position: relative;\n display: inline-block;\n padding: 0 3.2rem 0 0;\n margin-right: 0;\n\n &:last-of-type {\n padding: 0;\n }\n `,\n mobile_menu: css`\n margin-bottom: 0rem;\n display: none;\n\n @media (max-width: ${breakpoints.portrait}) {\n display: block;\n }\n `,\n};\n\nNavList.propTypes = {\n pages: PropTypes.array,\n end: PropTypes.bool,\n onDark: PropTypes.bool,\n hideOnMobile: PropTypes.bool,\n};\n\nNavList.defaultProps = {\n end: true,\n hideOnMobile: false,\n};\n\nexport default NavList;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport { FormattedMessage } from \"react-intl\";\nimport { DataTableProvider } from \"components/DataTable\";\nimport { PAGINATION_TYPE } from \"components/Pagination\";\nimport { useAuth } from \"hooks\";\nimport Status from \"components/Status\";\nimport { Col, Row } from \"components/Containers\";\nimport { CAPACITY_STATUS, LINKS } from \"constants/index\";\nimport { UserArchetype, UserBadges, UserCapacity, UserFullName, UserLocation, UserPhoto } from \"components/User\";\nimport { PreferredRateTag, ProfileCard, ProfileModal, ProfileRateRange } from \"components/Profile\";\nimport Tags from \"components/Tags\";\nimport { Grid } from \"components/Containers\";\nimport Card from \"components/Card\";\nimport { colors, fontSize, margins } from \"style\";\nimport { TAG_COLORS, TAG_SIZE } from \"components/Tags/Tag\";\nimport { formatDate } from \"utils\";\nimport { CardList } from \"components/Card\";\nimport { ListNote } from \"components/Lists\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\n\n/**\n * NetworkList\n *\n * @param {Array} data\n * @param {Array} actions\n * @param {Array} columnData\n * @param {Array} profileModalActions\n * @param {String} resultsPerPage\n * @param {Function} handlePage\n * @param {Function} handlePageChange\n * @param {Number} totalCount\n * @param {Number} currentPage\n * @param {Boolean} hasNextPage\n * @param {Boolean} hasPreviousPage\n * @param {Boolean} loadingMore\n * @param {Boolean} isCardView\n * @param {String} marginSize\n * @param {Function} onItemClick\n * @param {Object} error\n * @param {Boolean} loading\n * @param {String} paginationType\n * @param {Boolean} forceDisplayRate\n */\nconst NetworkList = ({\n data,\n actions,\n columnData,\n profileModalActions,\n resultsPerPage,\n handleNextPage,\n handlePreviousPage,\n handlePageChange,\n totalCount,\n currentPage,\n hasNextPage,\n hasPreviousPage,\n loadingMore,\n isCardView,\n marginSize,\n onItemClick,\n error,\n loading,\n paginationType,\n forceDisplayRate,\n ...props\n}) => {\n const [selectedProfileId, setSelectedProfileId] = useState(null);\n const [selectedProfileData, setSelectedProfileData] = useState({});\n const [showProfileModal, setShowProfileModal] = useState(false);\n const [showProfileModalTab, setShowProfileModalTab] = useState(0);\n const { isPartner, isAdmin, isShowcase, isClient } = useAuth();\n\n const handleRowClick = (data, showProfileDetails) => {\n if (onItemClick) {\n return onItemClick(data);\n } else {\n setSelectedProfileId(data?.uuid);\n setSelectedProfileData(data);\n setShowProfileModal(true);\n setShowProfileModalTab(showProfileDetails ? 0 : 1);\n }\n };\n\n const handleOnNameClick = (data) => {\n setSelectedProfileId(data?.slug);\n setSelectedProfileData(data);\n setShowProfileModal(true);\n };\n\n const paginationProps = {\n type: paginationType ? paginationType : PAGINATION_TYPE.classic,\n onNextPage: handleNextPage,\n onPreviousPage: handlePreviousPage,\n hasNextPage: !loading && hasNextPage,\n hasPreviousPage: !loading && hasPreviousPage,\n countMessage: \"Global.Profiles.Count\",\n loading,\n resultsPerPage,\n handlePageChange,\n totalCount,\n currentPage,\n rightContainer: (isShowcase || isClient) && `2,683 members` /* Static - for display purposes for now */,\n };\n\n return (\n <>\n {isCardView && (\n \n
\n {children}
\n \n
\n {(loading || loadingMore) && \n {data?.map((comment, i) => (\n
\n )}\n \n \n \n
\n )}\n \n
\n \n );\n};\n\nconst styles = {\n container: css`\n margin: 0rem -3rem 0rem -3rem;\n border-top: 1px ${colors.grayAnatomyLight5} solid;\n border-radius: 0 0 0.6rem 0.6rem;\n position: relative;\n padding-bottom: 2rem;\n `,\n more_container: css`\n margin-top: 3rem;\n margin-left: 3rem;\n `,\n add_comment_container: css`\n margin-top: 1px;\n border-top: 1px ${colors.grayAnatomyLight5} solid;\n margin-left: -3rem;\n width: calc(100% + 6rem);\n padding: 2rem 3rem 0 3rem;\n `,\n};\n\nconst MoreLink = styled(PrimaryLink)`\n font-size: ${fontSize.xsmall};\n`;\n\nconst StyledNotesInput = styled(NotesInputBox)``;\n\nNoteComments.defaultProps = {\n resultsPerPage: 10,\n};\n\nNoteComments.propTypes = {\n commentableId: PropTypes.string.isRequired,\n user: PropTypes.object.isRequired,\n resultsPerPage: PropTypes.number,\n};\n\nexport default NoteComments;\n","import React, { useState } from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { CardMenu, CardPostTitle } from \"components/Card\";\nimport { NoteAdvancedOptions, NoteBody } from \"components/Notes\";\n\n/**\n * NoteComment\n *\n * @param {Object} comment\n * @param {Function} setReplyUser\n */\nconst NoteComment = ({ comment, setReplyUser, ...props }) => {\n const [isEditing, setIsEditing] = useState(false);\n\n return (\n <>\n \n setReplyUser({ user: userProp, cache: Math.random() })}\n isEditing={isEditing}\n onEdit={setIsEditing}\n isComment\n {...props}\n />\n \n \n
\n \n );\n};\n\nconst styles = {\n comment: css`\n position: relative;\n padding: 2rem 3rem 0 3rem;\n margin-bottom: -2.2rem;\n `,\n};\n\nNoteComment.propTypes = {\n comment: PropTypes.object,\n setReplyUser: PropTypes.func,\n};\n\nexport default NoteComment;\n","import React, { useState, useRef, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/react\";\nimport { useComments } from \"hooks\";\nimport { colors, fontSize } from \"style\";\nimport { Editor } from \"components/Form\";\nimport { PrimaryLink } from \"components/Links\";\nimport { Col, Row } from \"components/Containers\";\nimport { PrimaryButton, SecondaryButton, BUTTON_SIZE } from \"components/Buttons\";\nimport { COMMENTABLE_TYPES } from \"constants/index\";\n\n/**\n * NoteBody\n *\n * @param {Object} data\n * @param {Boolean} isComment\n * @param {Boolean} isEditing\n * @param {Function} onEdit\n * @param {Function} onReply\n * @param {Boolean} allowReply\n * @param {Boolean} isLast\n */\nconst NoteBody = ({ data, isComment, isEditing, onEdit, onReply, allowReply, isLast }) => {\n const [value, setValue] = useState(data?.messageJson);\n const [undoValue, setUndoValue] = useState(data?.messageJson);\n const handleChange = (name, value) => setValue(value);\n const editor = useRef(null);\n const focusEditor = () => editor.current.focus(true);\n const { handleUpdateComment, updating } = useComments({});\n const handleUpdateComplete = () => onEdit(false);\n const Container = isComment ? StyledRow : StyledCol;\n\n useEffect(() => {\n setUndoValue(data?.messageJson);\n }, [data?.messageJson]);\n\n const handleCancel = () => {\n setValue(undoValue);\n setTimeout(() => onEdit(false), 100);\n };\n\n useEffect(() => {\n if (isEditing) {\n focusEditor();\n }\n }, [isEditing]);\n\n return (\n <>\n \n \n \n \n {isEditing && (\n \n \n handleUpdateComment(\n value,\n data?.id,\n handleUpdateComplete,\n COMMENTABLE_TYPES[isComment ? \"comment\" : \"profile\"]\n )\n }\n disabled={updating}\n >\n \n \n
\n )}\n \n {isComment && !isEditing && allowReply && (\n onReply(data?.user)}>\n \n )}\n
\n \n );\n};\n\nconst StyledRow = styled(Row)`\n align-items: flex-end;\n`;\n\nconst StyledCol = styled(Col)`\n gap: 1rem;\n`;\n\nconst StyleEditor = styled(Editor)`\n flex: 1;\n`;\n\nconst EditorContainer = styled.div`\n flex: 1;\n`;\n\nconst styles = {\n container: (isComment, isLast) => css`\n font-size: ${fontSize.small};\n line-height: 1.5;\n margin: 1rem 0 1rem 0;\n\n ${isComment &&\n ` \n padding-left: 2.5rem;\n padding-bottom:1.5rem;\n margin: -0.5rem 0 0.5rem 1.5rem;\n position:relative;\n \n ${\n !isLast &&\n `\n &:before {\n content:\" \";\n position:absolute;\n top:0.5rem;\n left:-1px;\n bottom:-0.5rem;\n border-left: 2px ${colors.grayAnatomyLight3} solid; /* px OK for border */\n }\n `\n }\n `}\n `,\n edit_buttons: css`\n justify-content: flex-end;\n margin-left: 1rem;\n `,\n body: css`\n margin: 0;\n padding: 0;\n border: 0;\n box-shadow: none;\n `,\n editing: css`\n margin: 0;\n padding: 1rem;\n `,\n read_more_link: css`\n margin-top: 0.5rem;\n `,\n};\n\nconst ReplyLink = styled(PrimaryLink)`\n font-size: ${fontSize.xsmall};\n`;\n\nNoteBody.defaultProps = {\n isLast: false,\n allowReply: true,\n};\n\nNoteBody.propTypes = {\n data: PropTypes.object,\n isComment: PropTypes.bool,\n isEditing: PropTypes.bool,\n onEdit: PropTypes.func,\n onReply: PropTypes.func,\n allowReply: PropTypes.bool,\n isLast: PropTypes.bool,\n};\n\nexport default NoteBody;\n","import React, { useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useInView } from \"react-intersection-observer\";\nimport { NoteCard } from \"components/Notes\";\nimport { useComments } from \"hooks\";\nimport { COMMENTABLE_TYPES } from \"constants/index\";\nimport { Spinner } from \"components/Loader\";\nimport { Grid } from \"components/Containers\";\n\n/**\n * NotesList\n *\n * @param {String} profileId\n * @param {Object} user\n * @param {Number} resultsPerPage\n */\nconst NotesList = ({ profileId: commentableId, user, resultsPerPage }) => {\n const { ref, inView } = useInView();\n const commentableType = COMMENTABLE_TYPES.profile;\n const params = { commentableId, commentableType, resultsPerPage };\n const { loading, loadingMore, data, hasNextPage, handleNextPage } = useComments(params);\n\n useEffect(() => {\n if (inView && hasNextPage && !loading && !loadingMore) {\n handleNextPage();\n }\n }, [inView]);\n\n return (\n \n {!isEditing && (\n \n {tags && setIsEditing(true)}>\n \n )}\n
\n )}\n {isEditing && canEdit && (\n \n setTags(val)}\n placeholder=\"Add topic tags...\"\n labelKey=\"name\"\n valueKey=\"id\"\n queryName={GET_TOPICS}\n queryKeyName=\"topics\"\n autoFocus={true}\n defaultOpen={true}\n minLength={0}\n />\n \n handleUpdateTags(tags, data?.id, handleUpdateComplete)}\n disabled={updating}\n >\n \n \n
\n
\n )}\n
\n );\n};\n\nconst styles = {\n container: css`\n margin-top: 1rem;\n margin-bottom: 1rem;\n `,\n edit_buttons: css`\n order: 2;\n margin-left: 1rem;\n `,\n};\n\nNoteTags.propTypes = {\n data: PropTypes.object,\n};\n\nexport default NoteTags;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { AdvancedButton } from \"components/Buttons\";\nimport { ICON_TYPE } from \"components/Icon\";\nimport { useAuth, useComments } from \"hooks\";\nimport { COMMENTABLE_TYPES } from \"constants/index\";\n\n/**\n * NoteAdvancedOptions\n *\n * @param {Object} data\n * @param {Function} onEdit\n */\nconst NoteAdvancedOptions = ({ data, onEdit, isComment }) => {\n const { id, isAdmin } = useAuth();\n const [isDisabled, setIsDisabled] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n const { handleDeleteComment } = useComments({});\n\n useEffect(() => {\n setIsDisabled(!data);\n setIsVisible(id === data?.user?.id || isAdmin);\n }, [data, id]);\n\n const editOption = {\n label: \n
\n \n {loading ? (\n
\n \n {loading ? (\n
\n \n
\n \n
\n {formatNumber(data.noOfEmployees)}
\n \n
\n {formatNumber(data.noOfEngineers)}
\n \n \n \n \n \n
\n \n {isEditable &&
\n );\n};\n\n/**\n * Placeholder\n *\n * @param {String} width\n * @param {String} height\n */\nconst PlaceHolder = ({ width, height, isEditable }) => (\n \n {url ? (\n
\n \n \n
\n {layout === LAYOUT.vertical && (\n
\n );\n\n if (asHeader) {\n return (\n \n
\n {backLink}
\n {loading ? {title}
: null}\n {subtitle && (\n\n {!loading ? subtitle :
\n )}\n {layout === LAYOUT.horizontal &&
\n {actionBar}
}{actionBar}
\n )}\n \n {children}\n
\n \n {children}\n
\n);\n\nconst styles = {\n container: (marginSize) => css`\n padding: 4rem ${marginSize} 0rem ${marginSize};\n flex: 1;\n\n @media (max-width: ${breakpoints.portrait}) {\n padding: 2rem 2.5rem 0rem 2.5rem;\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 1.5rem 2rem 0rem 2rem !important;\n }\n `,\n subtitle: css`\n color: ${colors.purpleRainDark2};\n font-size: ${fontSize.medium};\n font-weight: 600;\n\n @media (max-width: ${breakpoints.tablet}) {\n font-size: ${fontSize.small};\n }\n `,\n inner_wrapper: css`\n max-width: ${PAGE_WRAPPER_MAX_WIDTH};\n margin: 0 auto;\n padding: 0 ${PAGE_WRAPPER_SIZE} 2rem ${PAGE_WRAPPER_SIZE};\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 0.5rem 2rem 0.5rem 2rem;\n }\n `,\n header_container: css`\n background: #fff;\n border-bottom: 1px ${colors.grayAnatomyLight4} solid;\n `,\n inner_container: css`\n align-items: flex-end;\n justify-content: space-between;\n min-height: 4rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n align-items: center;\n }\n `,\n title_container: css`\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n flex: 1;\n `,\n action_container: css`\n display: flex;\n position: relative;\n gap: 1.6rem;\n align-items: center;\n `,\n action_container_stacked: css`\n margin-top: 2rem;\n `,\n loader: css`\n width: 35rem;\n height: 3.5rem;\n background: ${colors.grayAnatomyLight4};\n\n @media (max-width: ${breakpoints.tablet}) {\n height: 2.5rem;\n }\n `,\n loader_subtitle: css`\n width: 25rem;\n height: 1.6rem;\n\n @media (max-width: ${breakpoints.tablet}) {\n height: 1.4rem;\n }\n `,\n back_link_container: css`\n position: absolute;\n top: -2.25rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n top: -1.5rem;\n }\n `,\n};\n\nconst LAYOUT = {\n vertical: \"vertical\",\n horizontal: \"horizontal\",\n};\n\nHeaderContainer.propTypes = {\n children: PropTypes.any,\n};\n\nPageTitle.defaultProps = {\n marginSize: margins.normal,\n asHeader: false,\n layout: LAYOUT.horizontal,\n};\n\nPageTitle.propTypes = {\n title: PropTypes.any,\n actionBar: PropTypes.any,\n subtitle: PropTypes.any,\n backLink: PropTypes.any,\n loading: PropTypes.bool,\n marginSize: PropTypes.string,\n asHeader: PropTypes.bool,\n layout: PropTypes.string,\n children: PropTypes.any,\n};\n\nexport { LAYOUT };\n\nexport default PageTitle;\n","/** @jsx jsx */\nimport { jsx } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { CursorPaginate, ClassicPaginate, PAGINATION_TYPE } from \"components/Pagination\";\n\n/**\n * Paginate\n *\n * @param {String} type\n */\nconst Paginate = ({ type, ...props }) => {\n const isClassic = type === PAGINATION_TYPE.classic;\n const PaginationComponent = isClassic ? ClassicPaginate : CursorPaginate;\n\n return \n \n
\n );\n};\n\nconst styles = {\n container: css`\n width: 100%;\n text-align: center;\n overflow: hidden;\n `,\n button: css`\n border: 0;\n width: 100%;\n text-align: center;\n background: #fff;\n padding-top: 2rem;\n color: ${colors.purpleRainBase};\n box-shadow: none;\n font-size: ${fontSize.xsmall};\n font-weight: 600;\n border: 0;\n border-top: 1px ${colors.grayAnatomyLight4} solid;\n border-radius: 0;\n border-radius: 1rem;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n\n &:hover {\n text-decoration: underline;\n }\n `,\n};\n\nShowMore.propTypes = {\n text: PropTypes.any,\n hasNextPage: PropTypes.bool,\n onNextPage: PropTypes.func.isRequired,\n loading: PropTypes.bool,\n};\n\nexport default ShowMore;\n","import React, { Fragment, useEffect, useState } from \"react\";\nimport { useLocation, useSearchParams } from \"react-router-dom\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { breakpoints, colors, fontSize, margins } from \"style\";\nimport { formatNumber } from \"utils\";\nimport { TextLoader } from \"components/Loader\";\nimport { useParamFunctions } from \"hooks\";\n\n/**\n * ClassicPaginate\n *\n * @param {Number} resultsPerPage\n * @param {Number} totalCount\n * @param {Any} rightContainer\n * @param {Number} currentPage\n * @param {Boolean} isTop\n * @param {Boolean} loading\n * @param {String} countMessage\n */\nconst ClassicPaginate = ({\n resultsPerPage,\n totalCount,\n rightContainer,\n currentPage: defaultPage,\n isTop,\n countMessage,\n loading,\n loadingMore,\n}) => {\n const location = useLocation();\n const [searchParams] = useSearchParams({});\n const [currentPage, setCurrentPage] = useState(defaultPage);\n const [perPage, setPerPage] = useState(resultsPerPage);\n const [totalPages, setTotalPages] = useState();\n const [pageNumbers, setPageNumbers] = useState([]);\n const [countStart, setCountStart] = useState(0);\n const [countEnd, setCountEnd] = useState(0);\n const { setParams } = useParamFunctions();\n\n const handleClick = (p) => {\n setCurrentPage(p);\n setParams(\"page\", p, false);\n };\n\n /**\n * @description On location change, set the page\n */\n useEffect(() => {\n setCurrentPage(searchParams.get(\"page\") ? parseInt(searchParams.get(\"page\")) : 1);\n }, [location]);\n\n useEffect(() => {\n const resultsStart = resultsPerPage * (currentPage - 1);\n const resultsEnd = resultsPerPage * currentPage;\n const resultsRemainder = totalCount % resultsPerPage;\n const isLastPage = currentPage === totalPages;\n\n setCountStart(resultsStart + 1);\n setCountEnd(isLastPage && resultsRemainder ? resultsStart + resultsRemainder : resultsEnd);\n }, [resultsPerPage, currentPage, totalCount, totalPages]);\n\n useEffect(() => {\n const displayPageNumbers = 10;\n const pNum = [];\n\n if (totalPages <= displayPageNumbers) {\n for (let i = 1; i <= totalPages; i++) {\n pNum.push(i);\n }\n } else {\n const middlePage = Math.max(1, currentPage - 5);\n const remainingPages = displayPageNumbers - 1;\n const startPage = Math.min(middlePage, totalPages - remainingPages);\n\n for (let i = startPage; i < startPage + displayPageNumbers; i++) {\n pNum.push(i);\n }\n }\n\n setPageNumbers(pNum);\n }, [totalPages, currentPage]);\n\n useEffect(() => {\n if (totalCount && perPage) {\n setTotalPages(Math.ceil(totalCount / perPage));\n }\n }, [totalCount, perPage]);\n\n useEffect(() => {\n if (resultsPerPage) {\n setPerPage(resultsPerPage);\n }\n }, [resultsPerPage]);\n\n useEffect(() => {\n if (defaultPage) {\n setCurrentPage(defaultPage);\n }\n }, [defaultPage]);\n\n return (\n \n
\n );\n};\n\nconst styles = {\n card_container: (isTop) => css`\n margin-left: -${margins.normal};\n margin-right: -${margins.normal};\n padding: 0 ${margins.normal};\n\n ${isTop\n ? `\n border-bottom: 1px solid ${colors.grayAnatomyLight5};\n padding-bottom: 2rem;\n `\n : `\n border-top: 1px solid ${colors.grayAnatomyLight5};\n padding-top: 2rem;\n `}\n\n @media (max-width: ${breakpoints.portrait}) {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n margin-right: -2.5rem;\n margin-left: -2.5rem;\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n padding-right: 2rem;\n padding-left: 2rem;\n margin-right: -2rem;\n margin-left: -2rem;\n padding-top: 2rem;\n }\n `,\n container: css`\n display: flex;\n justify-content: center;\n list-style: none;\n font-size: ${fontSize.small};\n font-weight: 600;\n gap: 2.5rem;\n min-height: 2.5rem;\n align-items: center;\n\n @media (max-width: ${breakpoints.mobile}) {\n flex-direction: column;\n justify-content: center;\n gap: 0;\n }\n `,\n start: css`\n flex: 1;\n font-weight: 400;\n color: ${colors.purpleRainDark2};\n font-size: ${fontSize.small};\n\n @media (max-width: ${breakpoints.mobile}) {\n flex: auto;\n width: 100%;\n text-align: center;\n border-bottom: 1px solid ${colors.grayAnatomyLight5};\n padding-bottom: 1rem;\n margin-bottom: 0.5rem;\n }\n `,\n bold: css`\n font-weight: 600;\n `,\n count: css`\n font-weight: 500;\n background: ${colors.grayAnatomyLight5};\n padding: 0.5rem 1rem;\n border-radius: 3rem;\n `,\n end: css`\n flex: 1;\n display: flex;\n justify-content: flex-end;\n font-weight: 400;\n color: ${colors.purpleRainDark2};\n font-size: ${fontSize.xsmall};\n `,\n page_container: css`\n display: flex;\n gap: 0.25rem;\n margin-left: auto;\n align-items: center;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-left: 0;\n }\n `,\n button: (selected) => css`\n background: ${selected ? colors.purpleRainBase : `none`};\n font-size: ${fontSize.xxsmall};\n padding: 0;\n border: 0;\n border-radius: 0.6rem;\n color: ${selected ? `#fff` : colors.purpleRainDark2};\n cursor: pointer;\n height: 2.5rem;\n width: 2.5rem;\n font-weight: ${selected ? `600` : `400`};\n\n &:hover {\n background: ${selected ? colors.purpleRainBase : colors.grayAnatomyLight4};\n }\n\n &:disabled {\n background: ${selected ? colors.purpleRainBase : `none`} !important;\n color: ${selected ? `#fff` : colors.grayAnatomyLight3};\n cursor: not-allowed;\n }\n `,\n icon: css`\n color: inherit;\n `,\n};\n\nClassicPaginate.defaultProps = {\n isTop: false,\n countMessage: \"Pagination.ShowingResults.Count\",\n};\n\nClassicPaginate.propTypes = {\n resultsPerPage: PropTypes.number,\n totalCount: PropTypes.number,\n rightContainer: PropTypes.any,\n currentPage: PropTypes.number,\n isTop: PropTypes.bool,\n loading: PropTypes.bool,\n loadingMore: PropTypes.bool,\n countMessage: PropTypes.string,\n};\n\nexport default ClassicPaginate;\n","/** @jsx jsx */\nimport { jsx, css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { useSearchParams } from \"react-router-dom\";\nimport Icon, { ICON_TYPE, ICON_SIZE } from \"components/Icon\";\nimport { FormattedMessage } from \"react-intl\";\nimport { breakpoints, colors, fontSize, margins } from \"style\";\n\n/**\n * CursorPaginate\n *\n * @param {Number} resultsPerPage\n * @param {Function} onNextPage\n * @param {Function} onPreviousPage\n * @param {Boolean} hasNextPage\n * @param {Boolean} hasPreviousPage\n * @param {Object} pageInfo\n */\nconst CursorPaginate = ({ resultsPerPage, onNextPage, onPreviousPage, hasNextPage, hasPreviousPage, pageInfo }) => {\n const [searchParams, setSearchParams] = useSearchParams({});\n\n const handleNextPage = () => {\n if (pageInfo) {\n setSearchParams((params) => {\n // Set params explicity to avoid overwriting other params\n params.set(\"after\", pageInfo?.endCursor);\n params.set(\"first\", resultsPerPage);\n params.set(\"before\", \"\");\n params.set(\"last\", \"\");\n return params;\n });\n }\n window.scrollTo({ top: 0 });\n onNextPage();\n };\n\n const handlePreviousPage = () => {\n if (pageInfo) {\n setSearchParams((params) => {\n // Set params explicity to avoid overwriting other params\n params.set(\"after\", \"\");\n params.set(\"first\", \"\");\n params.set(\"before\", pageInfo?.startCursor);\n params.set(\"last\", resultsPerPage);\n return params;\n });\n }\n window.scrollTo({ top: 0 });\n onPreviousPage();\n };\n\n return (\n \n
\n \n {loading ? (\n {formatNumber(countStart)},\n end: {formatNumber(countEnd)},\n }}\n />\n ),\n entity: (\n \n
\n \n {!totalCount && (loading || loadingMore) ? (\n \n handleClick(currentPage - 1)}\n disabled={loading || currentPage === 1 || totalPages === 0}\n >\n handleClick(pageNumber)}\n disabled={loading || pageNumber === currentPage}\n >\n {pageNumber}\n \n ))}\n handleClick(currentPage + 1)}\n disabled={loading || totalCount === 0 || currentPage === totalPages || totalPages === 0}\n >\n \n )}\n
\n {rightContainer && {rightContainer}
}\n \n
\n );\n};\n\nconst styles = {\n container: css`\n display: flex;\n justify-content: center;\n list-style: none;\n font-size: ${fontSize.small};\n font-weight: 600;\n gap: 2.5rem;\n align-items: center;\n margin-left: -${margins.normal};\n margin-right: -${margins.normal};\n padding: 0 ${margins.normal};\n border-top: 1px solid ${colors.grayAnatomyLight5};\n padding-top: 2rem;\n\n @media (max-width: ${breakpoints.portrait}) {\n padding: 0 2.5rem;\n margin-right: -2.5rem;\n margin-left: -2.5rem;\n padding-top: 2rem;\n }\n\n @media (max-width: ${breakpoints.mobile}) {\n padding: 0 2rem;\n margin-right: -2rem;\n margin-left: -2rem;\n padding-top: 2rem;\n }\n `,\n text_container: css`\n font-weight: 400;\n `,\n button: css`\n background: transparent;\n padding: 0;\n border: 0;\n `,\n icon: (isDisabled) => css`\n color: ${colors.purpleRainBase};\n\n &:hover {\n color: ${colors.purpleRainDark2};\n }\n\n ${isDisabled &&\n `\n color: ${colors.grayAnatomyLight3};\n `}\n `,\n};\n\nCursorPaginate.propTypes = {\n resultsPerPage: PropTypes.number.isRequired,\n onNextPage: PropTypes.func.isRequired,\n onPreviousPage: PropTypes.func.isRequired,\n hasNextPage: PropTypes.bool,\n hasPreviousPage: PropTypes.bool,\n pageInfo: PropTypes.object,\n};\n\nexport default CursorPaginate;\n","export { default as Paginate } from \"./Paginate\";\nexport { default as ShowMore } from \"./ShowMore\";\nexport { default as ClassicPaginate } from \"./ClassicPaginate\";\nexport { default as CursorPaginate } from \"./CursorPaginate\";\n\nconst PAGINATION_TYPE = {\n paginate: \"paginate\",\n append: \"append\",\n classic: \"classic\",\n cursor: \"cursor\",\n};\n\nexport { PAGINATION_TYPE };\n","import React, { useState } from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport PropTypes from \"prop-types\";\nimport { useAuth } from \"hooks\";\nimport { LINKS } from \"constants\";\nimport Overlay from \"components/Overlay\";\nimport { UserFullName } from \"components/User\";\nimport { PrimaryButton } from \"components/Buttons\";\nimport { ProfileCard, ProfileModal } from \"components/Profile\";\n\n/**\n * ProfileLink\n *\n * @param {Object} profile\n * @param {Boolean} withOverlay\n * @param {Boolean} openModalOnClick\n */\nconst ProfileLink = ({ profile, withOverlay, openModalOnClick, ...props }) => {\n const { isAdmin } = useAuth();\n const [showProfileModal, setShowProfileModal] = useState(false);\n\n const handleShowProfile = () => {\n if (!isAdmin) {\n window.open(LINKS.public_profile(profile?.uuid), \"_blank\");\n return;\n }\n\n setShowProfileModal(true);\n };\n const handleClick = () => setShowProfileModal(true);\n\n const Link = () => \n \n
\n \n {resultsPerPage},\n }}\n />\n
\n \n \n
\n \n
\n \n }\n editButtonText={\n
\n );\n } else if (!isEditable && isEmpty) {\n return null;\n }\n\n const [showResume, setShowResume] = useState(false);\n const { resumeUrl, id } = data;\n const updateResume = () => onEdit({ resume: resumeUrl }, id);\n\n if (isEmpty && isEditable) {\n return (\n \n \n \n
\n );\n }\n\n return (\n \n setShowResume(true)}>\n \n {isEditable && (\n \n \n )}\n
\n );\n};\n\nconst PlaceHolder = () => \n
\n);\n\nconst styles = {\n container: css`\n display: flex;\n font-size: 12px;\n\n @media (max-width: ${breakpoints.mobile}) {\n flex-direction: column-reverse;\n }\n `,\n left_column: css`\n flex: 1;\n margin-right: 4rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-right: 0;\n min-height: 0;\n }\n `,\n right_column: css`\n @media (max-width: ${breakpoints.mobile}) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n min-height: 0;\n }\n `,\n hire_button: css`\n margin-top: 1rem;\n `,\n};\n\nProfileBio.defaultProps = {\n marginSize: margins.normal,\n hideDescription: false,\n};\n\nProfileBio.propTypes = {\n profileCompletion: PropTypes.object,\n marginSize: PropTypes.string,\n hideDescription: PropTypes.bool,\n profilePicProps: PropTypes.object,\n};\n\nexport default ProfileBio;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { EditIcon } from \"components/Icon\";\nimport { withModalForm, MODAL_SIZE } from \"components/Modal\";\nimport { SIZE, TYPE } from \"components/Form\";\nimport { UPLOAD_AVATAR } from \"graphql/mutations\";\nimport { EditButton } from \"components/Buttons\";\nimport { UserPhoto } from \"components/User\";\nimport { PAGES } from \"constants/index\";\nimport { margins } from \"style\";\n\n/**\n * ProfilePic\n *\n * @param {Object} data\n * @param {Boolean} loading\n * @param {Boolean} isEditable\n * @param {Function} onEdit\n * @param {Boolean} isEmpty\n * @param {String} marginSize\n * @param {String} width\n * @param {String} height\n */\nconst ProfilePic = ({ data, loading, isEditable, onEdit, isEmpty, marginSize, width, height }) => {\n const handleOnEdit = () => onEdit({ avatar: data?.avatarUrl }, data?.id);\n const Edit = () => (isEditable ? \n
\n \n
\n \n
\n );\n};\n\nconst styles = {\n profile_image_wrapper: (width, height) => css`\n width: ${width};\n height: ${height};\n position: relative;\n margin: 0 auto;\n `,\n edit_icon: (marginSize) => css`\n position: absolute;\n margin: auto;\n top: 0;\n bottom: 0;\n left: inherit;\n right: calc(-${marginSize} - 2rem);\n `,\n button: (width, height) => css`\n width: ${width};\n height: ${height};\n text-align: center;\n justify-content: center;\n `,\n};\n\nconst FORM_DATA = [\n {\n style: css`\n width: 100%;\n `,\n items: [\n {\n type: TYPE.photo,\n size: SIZE.xlarge,\n properties: {\n name: \"avatar\",\n },\n },\n ],\n },\n];\n\nconst FORM_SETTINGS = {\n size: MODAL_SIZE.medium,\n data: FORM_DATA,\n title: \n
\n );\n }\n\n return (\n \n
\n
\n \n
\n \n
\n \n);\n\nconst styles = {\n container: css`\n @media (max-width: ${breakpoints.mobile}) {\n text-align: center;\n padding-top: 1rem;\n\n > * {\n margin: 0 auto;\n justify-content: center;\n }\n }\n `,\n engineering_icon: css`\n width: 2rem;\n height: 2rem;\n `,\n archetype_status: (styleOverride) => css`\n font-size: ${fontSize.small};\n font-weight: 500;\n line-height: 1.14;\n color: ${colors.grayAnatomyLight1};\n margin-bottom: 1.2rem;\n ${styleOverride}\n `,\n name: css`\n margin-left: 0;\n display: inline-flex;\n align-items: center;\n gap: 1rem;\n font-weight: 600;\n `,\n col: css`\n margin-bottom: 3.2rem;\n font-size: ${fontSize.normal};\n font-weight: 400;\n `,\n email: css`\n color: ${colors.grayAnatomyLight1};\n `,\n level: css`\n font-weight: 500;\n font-size: ${fontSize.medium};\n\n @media (max-width: ${breakpoints.mobile}) {\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n gap: 0.5rem;\n margin-bottom: 0.5rem;\n }\n `,\n};\n\nProfileHeader.propTypes = {\n data: PropTypes.object,\n loading: PropTypes.bool,\n};\n\nexport default ProfileHeader;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { css } from \"@emotion/react\";\nimport { breakpoints, colors, fontSize, margins } from \"style\";\nimport { PrimaryLink } from \"components/Links\";\nimport { withIcon, ICON_TYPE, ICON_SIZE, EditIcon } from \"components/Icon\";\nimport { FormattedMessage } from \"react-intl\";\nimport { TextLoader } from \"components/Loader\";\nimport { getLegacyCountryCode } from \"utils\";\nimport { withModalForm, MODAL_SIZE } from \"components/Modal\";\nimport { Editor, SIZE, TYPE } from \"components/Form\";\nimport { UPDATE_PROFILE } from \"graphql/mutations\";\nimport { EditButton } from \"components/Buttons\";\nimport { Paragraph } from \"components/Text\";\nimport { LINKS, PAGES } from \"constants/index\";\nimport { useAuth } from \"hooks\";\nimport { convertFromPlainText, getPlainText } from \"components/Form/Editor\";\n\n/**\n * ProfileDescription\n *\n * @param {Object} data\n * @param {Boolean} loading\n * @param {Boolean} isEditable\n * @param {Function} onEdit\n * @param {Boolean} isEmpty\n * @param {String} marginSize\n * @param {Boolean} hideProfileLink\n */\nconst ProfileDescription = ({ data, loading, isEditable, onEdit, isEmpty, marginSize, hideProfileLink }) => {\n const { isAdmin } = useAuth();\n\n const handleOnEdit = () =>\n onEdit(\n {\n firstName: data?.firstName,\n lastName: data?.lastName,\n description: data?.description,\n descriptionJson: data?.descriptionJson ?? convertFromPlainText(data?.description),\n location: {\n city: data?.location?.city || data?.oldLocation.city,\n state: data?.location?.state || data?.oldLocation.state,\n country: data?.location?.country || data?.oldLocation.country,\n country_code: data?.location?.country_code || getLegacyCountryCode(data?.oldLocation.country),\n country_flag: data?.location?.country_flag || data?.oldLocation.countryFlag,\n latitude: data?.location?.latitude,\n longitude: data?.location?.longitude,\n utc_offset: data?.location?.utc_offset,\n label: data?.location?.label || `${data?.oldLocation.city}, ${data?.oldLocation.country}`,\n place_id: data?.location?.place_id,\n },\n },\n data.id\n );\n\n const PublicLink = () => {\n if ((!loading && !isEditable && !isAdmin) || hideProfileLink) return null;\n\n if (!loading && isEditable) {\n return (\n \n
\n );\n};\n\nconst LinkProfile = withIcon(PrimaryLink, {\n type: ICON_TYPE.eye,\n size: ICON_SIZE.medium,\n color: \"inherit\",\n});\n\nconst PlaceHolder = () => (\n \n
\n);\n\nconst styles = {\n description: () => css`\n font-size: ${fontSize.normal};\n line-height: 1.5;\n color: ${colors.purpleRainDark2};\n position: relative;\n padding-left: 3rem;\n word-break: break-word;\n\n &::before {\n content: \"\";\n width: 0.8rem;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n background-image: radial-gradient(circle at 7% 5%, ${colors.purpleRainBase}, ${colors.orangeCountyBase} 100%);\n clip-path: polygon(100% 0, 100% calc(100% - 7px), 0 100%, 0 7px);\n }\n `,\n primary_link: css`\n font-size: ${fontSize.small};\n padding-top: 1rem;\n line-height: 1.3;\n `,\n icon: css`\n color: inherit;\n font-size: ${fontSize.xlarge};\n `,\n edit_icon: (marginSize) => css`\n position: absolute;\n left: -${marginSize};\n margin-left: -2rem;\n\n @media (max-width: ${breakpoints.mobile}) {\n margin-left: -0.5rem;\n width: 3rem;\n height: 3rem;\n box-shadow: none;\n }\n `,\n body: css`\n margin: 0;\n padding: 0;\n border: 0;\n box-shadow: none;\n `,\n};\n\nconst FORM_DATA = [\n {\n style: css`\n width: 100%;\n `,\n items: [\n {\n label: \"First Name\",\n type: TYPE.input,\n size: SIZE.medium,\n properties: {\n name: \"firstName\",\n type: \"text\",\n maxLength: 255,\n required: true,\n },\n },\n {\n label: \"Last Name\",\n type: TYPE.input,\n size: SIZE.medium,\n properties: {\n name: \"lastName\",\n type: \"text\",\n maxLength: 255,\n required: true,\n },\n },\n {\n type: TYPE.geoLocator,\n size: SIZE.xlarge,\n properties: {\n name: \"location\",\n type: \"text\",\n },\n },\n {\n label: \"Short Bio\",\n type: TYPE.editor,\n size: SIZE.xlarge,\n onChange: (name, value, handleOnChange) => {\n handleOnChange(\"description\", getPlainText(value));\n handleOnChange(name, value);\n },\n properties: {\n name: \"descriptionJson\",\n maxLength: 3000,\n required: true,\n placeholder: \"Describe this mission for prospective squad members\",\n showFormattingOptions: true,\n },\n },\n ],\n },\n];\n\nconst FORM_SETTINGS = {\n size: MODAL_SIZE.medium,\n data: FORM_DATA,\n title: \n \n \n
\n );\n }\n\n if (!data?.externalLinks?.ma && !isEditable) return null;\n\n return (\n \n {data?.externalLinks?.map((link) => (\n \n \n ))}\n {isEditable &&
\n );\n};\n\nconst styles = {\n edit_container: css`\n margin-top: 1.6rem;\n width: 100%;\n `,\n social_links_container: css`\n align-items: center;\n width: 13.6rem;\n margin-left: auto;\n margin-right: auto;\n gap: 0.8rem;\n margin-top: 1.6rem;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n position: relative;\n `,\n edit_icon: (marginSize) => css`\n position: absolute;\n margin: auto;\n top: 0;\n bottom: 0;\n left: inherit;\n right: calc(-${marginSize} - 4rem);\n `,\n};\n\nconst FORM_DATA = [\n {\n style: css`\n width: 100%;\n `,\n items: [\n {\n type: TYPE.links,\n size: SIZE.xlarge,\n properties: {\n name: \"externalLinks\",\n },\n },\n ],\n },\n];\n\nconst FORM_SETTINGS = {\n size: MODAL_SIZE.large,\n data: FORM_DATA,\n title: \n
\n
\n
\n \n
\n {isAdmin && data?.profile?.availabilityLastUpdatedAt && (\n \n
\n )}\n \n
\n );\n};\n\nconst PlaceHolder = () => (\n \n
\n \n
\n \n
\n {shortenText(data?.profile?.description, 100)}
\n \n \n \n
\n \n
\n);\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n flex-direction: column;\n padding: 0 3rem;\n `,\n name: css`\n font-size: ${fontSize.medium};\n margin-top: 1rem;\n font-weight: 600;\n max-width: 80%;\n text-align: center;\n `,\n archetype: css`\n font-size: ${fontSize.small};\n margin-top: 0.5rem;\n color: ${colors.grayAnatomyLight1};\n max-width: 80%;\n text-align: center;\n `,\n disciplines: css`\n margin-top: 1rem;\n\n > * {\n justify-content: center;\n }\n `,\n bio: css`\n font-size: ${fontSize.small};\n margin-top: 1.5rem;\n line-height: 1.3;\n font-weight: 300;\n max-width: 80%;\n text-align: center;\n `,\n link: css`\n font-size: ${fontSize.small};\n margin-top: 1.5rem;\n `,\n};\n\nProfileSummary.propTypes = {\n id: PropTypes.string.isRequired,\n};\n\nexport default ProfileSummary;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { useMutation } from \"@apollo/client\";\nimport PropTypes from \"prop-types\";\nimport { GET_PROFILE } from \"graphql/queries\";\nimport { ARCHIVE_MEMBER_PROFILE } from \"graphql/mutations\";\nimport { MODAL_SIZE, ModalForm } from \"components/Modal\";\nimport { useToast, useProfile } from \"hooks\";\nimport { ARCHIVE_REASON, PAGES } from \"constants/index\";\nimport { METHOD, SIZE, TYPE } from \"components/Form\";\n\n/**\n * Profile Archive Form\n *\n * @params {String} profileId\n * @params {Boolean} show\n * @params {Function} onClose\n *\n */\nconst ProfileArchiveForm = ({ profileId, show, onClose }) => {\n const { toast } = useToast();\n const { data } = useProfile({ profileId });\n\n const [handleArchive, { loading: archiveProfileLoading }] = useMutation(ARCHIVE_MEMBER_PROFILE, {\n refetchQueries: [GET_PROFILE],\n });\n\n const handleSubmit = (formData) => {\n const { archiveReason, message } = formData;\n handleArchiveProfile(data?.profile?.id, archiveReason, message);\n };\n\n const handleArchiveProfile = (id, archiveReason, message) => {\n handleArchive({\n variables: {\n input: {\n id: id,\n params: {\n archiveReason: archiveReason,\n archiveDescription: message,\n },\n },\n },\n onCompleted: () => {\n onClose(false);\n toast.success(\n
\n \n
\n \n
\n \n onClose(false)}\n data={FORM_DATA(data?.profile)}\n title={
\n );\n};\n\nconst FORM_DATA = () => [\n {\n style: css`\n width: 100%;\n padding-top: 0;\n padding-bottom: 0;\n `,\n items: [\n {\n type: TYPE.select,\n size: SIZE.xlarge,\n label: \n
\n \n
\n setShowForm({ ...showForm, list: true })}>\n \n \n
\n \n \n \n \n
\n setShowForm({ ...showForm, invite: true })}>\n \n \n
\n setShowForm({ ...showForm, badges: true })}>\n \n \n
\n setShowForm({ ...showForm, profile: true })}>\n \n \n
\n setShowForm({ ...showForm, engineeringLevel: true })}>\n \n \n
\n {isActive && (\n \n \n \n
\n )}\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n {primaryAction && {primaryAction}
}\n {actions?.length > 0 && (\n \n {actions?.map((Component, index) => (\n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n 1 ? `x${count}` : ``,\n }}\n />\n \n
\n );\n};\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0rem;\n color: ${colors.grayAnatomyLight1};\n font-size: ${fontSize.small};\n font-weight: 500;\n `,\n icon_container: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 3rem;\n `,\n};\n\nProfileFlag.propTypes = {\n count: PropTypes.number.isRequired,\n};\n\nexport default ProfileFlag;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { UPDATE_PROFILE } from \"graphql/mutations\";\nimport { GET_BADGES } from \"graphql/queries\";\nimport DisplayBox from \"components/DisplayBox\";\nimport Tags from \"components/Tags\";\nimport { SIZE, TYPE } from \"components/Form\";\nimport { withModalForm, MODAL_SIZE } from \"components/Modal\";\nimport { PAGES } from \"constants/index\";\n\n/**\n * ProfileBadges\n *\n * @params {Array} data\n */\nconst ProfileBadges = ({ data, ...props }) => (\n \n
\n \n {loading ?
\n \n {!loading && (\n \n )}\n
\n setShowMore(!showMore)}>\n {loading ? (\n <>\n
\n \n \n updatePreferences(key, !isEnabled)} />\n
\n );\n }}\n />\n );\n};\n\nconst styles = {\n info: css`\n max-width: 70%;\n line-height: ${fontSize.medium};\n `,\n container: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n `,\n};\n\nPreferencesComponent.propTypes = {\n id: PropTypes.string.isRequired,\n};\n\nexport default PreferencesComponent;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport PropTypes from \"prop-types\";\nimport styled from \"@emotion/styled\";\nimport { formatCurrency } from \"utils\";\nimport { TAG_COLORS, TAG_SIZE } from \"components/Tags/Tag\";\nimport { Tag } from \"components/Tags\";\n\n/**\n * RateTag\n *\n * @param {Object} price\n * @param {String} currencyDisplay\n * @param {Boolean} singleCurrencyDisplay\n * @param {Object} tagColor\n */\nconst RateTag = ({ price, currencyDisplay, singleCurrencyDisplay, tagColor, ...props }) => (\n \n
\n ) : (\n <>\n )}\n {negotiatedRate && (\n {currency}
\n \n
\n {challengeResponse.challenge?.name}
\n{children}
}\n \n )}\n {...props}\n />\n);\n\nconst styles = {\n label: (isComplete) => css`\n font-weight: ${isComplete ? `500` : `400`};\n color: ${colors.purpleRainDark2};\n `,\n children: css`\n margin-left: 4.2rem;\n border-bottom: 1px ${colors.grayAnatomyLight4} solid;\n `,\n};\n\nProgress.propTypes = {\n size: PropTypes.oneOf(Object.values(RENDER_SIZE)),\n steps: PropTypes.array.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nProgress.defaultProps = {\n size: RENDER_SIZE.small,\n};\n\nexport default Progress;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { NarrowContainer, Row } from \"components/Containers\";\nimport { breakpoints, colors } from \"style\";\nimport { Link } from \"components/Links\";\nimport { LINKS } from \"constants/index\";\nimport { MarketingSecondaryButton } from \"components/Buttons\";\nimport { MarketingLogo } from \"components/Logo\";\nimport Menu from \"components/Menu\";\nimport { useAuth } from \"hooks\";\n\n/**\n * PublicHeader\n * \n * @param {Array} pages\n */\nconst PublicHeader = ({ pages, children }) => {\n const { isAuthenticated } = useAuth();\n\n return (\n \n \n \n \n \n \n \n \n \n
\n ) : (\n \n )}\n
\n \n
\n );\n}\n\nconst styles = {\n container: css`\n background: ${colors.white};\n padding: 2rem 0; \n `,\n link_container: css`\n @media (max-width: ${breakpoints.mobile}) {\n gap: 1rem;\n }\n `,\n header: css`\n align-items:center;\n height:5rem;\n justify-content: space-between;\n position:relative;\n z-index:3;\n `,\n join: css`\n color: ${colors.grayAnatomyDark};\n font-size: 1.5rem; // for consistency with website\n font-weight:500;\n `\n};\n\nPublicHeader.propTypes = {\n pages: PropTypes.array,\n children: PropTypes.node,\n};\n\nexport default PublicHeader;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { Grid, NarrowContainer } from \"components/Containers\";\nimport { breakpoints, colors, fontSize } from \"style\";\nimport { LINKS } from \"constants\";\n\n/**\n * PublicFooter\n */\nconst PublicFooter = () => (\n \n);\n\nconst styles = {\n container: css`\n color: ${colors.grayAnatomyDark};\n background: ${colors.white};\n padding: 8rem 0 8rem 0;\n font-size: ${fontSize.normal};\n `,\n title: css`\n margin:0;\n `,\n item_container: css`\n display:flex;\n align-items:center; \n justify-content:center;\n text-align:center;\n `, \n end: css`\n justify-content:flex-end;\n\n @media (max-width: ${breakpoints.mobile}) {\n justify-content:center;\n text-align:center;\n }\n `,\n signup: css`\n margin-bottom:8rem;\n `,\n copyright: css`\n @media (max-width: ${breakpoints.mobile}) {\n text-align:center;\n }\n `\n};\n\nexport default PublicFooter;\n ;\n","import { colors, fontSize } from \"style\";\nimport styled from \"@emotion/styled\";\n\n/**\n * Score\n */\nconst Score = styled.span`\n font-weight: 500;\n font-size: ${fontSize.xsmall};\n background: ${(props) => (props.score < 60 ? colors.grayAnatomyBase : colors.green)};\n color: #fff;\n padding: 0.5rem 1rem;\n border-radius: 2rem;\n white-space: nowrap;\n width: 5rem;\n display: inline-block;\n text-align: center;\n`;\n\nexport default Score;\n","import React from \"react\";\nimport { css } from \"@emotion/react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { SIZE, TYPE } from \"components/Form\";\nimport { ModalForm, MODAL_SIZE } from \"components/Modal\";\n\n/**\n * ManageFilters\n *\n * @param {Boolean} show\n * @param {Object} initialValues\n * @param {Function} onClose\n * @param {Function} onSubmit\n * @param {array} allowedFilters\n */\nconst ManageFilters = ({ allowedFilters, show, initialValues, onClose, onSubmit, ...props }) => (\n \n
\n \n \n \n
\n ),\n },\n];\n\nconst PARTNER_COLUMN = [\n {\n label: \"Partner\",\n width: \"15%\",\n cell: (row) => row?.partner,\n },\n];\n\nconst SHOWCASE_COLUMN = [\n {\n label: \"Referrer\",\n width: \"15%\",\n cell: (row) => row?.referrer,\n },\n];\n\nconst CLIENT_COLUMN = [\n {\n label: \"Organization\",\n width: \"25%\",\n cell: (row) => row?.organization && \n
\n );\n};\n\nconst styles = {\n container: css`\n display: flex;\n align-items: center;\n flex-direction: column;\n padding: 0 3rem;\n `,\n name: css`\n font-size: ${fontSize.medium};\n margin-top: 1rem;\n font-weight: 600;\n max-width: 80%;\n text-align: center;\n `,\n link: css`\n font-size: ${fontSize.small};\n margin-top: 1.5rem;\n `,\n};\n\nexport default ShowcaseSignUpCard;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { PrimaryButton } from \"components/Buttons\";\nimport { ShowcaseInviteModal } from \"components/Showcase\";\nimport Icon, { ICON_SIZE, ICON_TYPE } from \"components/Icon\";\n\n/**\n * ShowcaseInviteButton\n *\n * @param {Boolean} isShowcase\n */\nconst ShowcaseInviteButton = ({ isShowcase, ...props }) => {\n if (!isShowcase) {\n return null;\n }\n\n const [showInviteForm, setShowInviteForm] = useState(false);\n\n return (\n <>\n \n
\n \n \n \n \n \n
\n \n \n
\n \n \n);\n\nconst styles = {\n margin: css`\n margin: 3rem 0 -2rem 0;\n `,\n};\n\nconst FORM_DATA = [\n {\n style: css`\n width: 100%;\n `,\n items: [\n {\n label: \n \n \n \n
\n);\n\nconst styles = {\n logo_container: css`\n position: absolute;\n top: 2.5rem;\n left: 2.5rem;\n right: 2.5rem;\n height: 3rem;\n display: flex;\n justify-content: flex-end;\n\n @media (max-width: ${breakpoints.mobile}) {\n position: static;\n width: 100%;\n height: auto;\n padding: 2rem 2.5rem;\n background: ${colors.greyBackground};\n }\n `,\n already_member: css`\n font-size: ${fontSize.small};\n color: ${colors.grayAnatomyLight1};\n `,\n link: css`\n @media (max-width: ${breakpoints.mobile}) {\n color: ${colors.purpleRainLight3};\n }\n `,\n};\n\nexport default SignupHeader;\n","import React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { colors, fontSize, breakpoints } from \"style\";\nimport { PrimaryLink } from \"components/Links\";\nimport { LINKS } from \"constants/index\";\n\n/**\n * Signup Footer\n */\nconst SignupFooter = () => (\n \n \n \n \n ),\n }}\n />\n
\n);\n\nconst styles = {\n footer: css`\n position: absolute;\n bottom: 2.5rem;\n left: 2.5rem;\n color: ${colors.grayAnatomyLight1};\n font-size: ${fontSize.small};\n\n @media (max-width: ${breakpoints.mobile}) {\n position: static;\n bottom: 0;\n left: 0;\n width: 100%;\n padding-left: 4rem;\n margin-top: 4rem;\n margin-bottom: 4rem;\n }\n `,\n};\n\nexport default SignupFooter;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { css } from \"@emotion/react\";\nimport { fontSize, colors } from \"style\";\n\n/**\n * Signup Complete Message\n *\n * @params {Object} formData\n * @params {String} msgId\n */\nconst SignupComplete = ({ formData, msgId, ...props }) => (\n \n
\n);\n\nconst styles = {\n container: css`\n margin-left: 4rem;\n `,\n title: css`\n font-size: ${fontSize.xxlarge};\n font-weight: 700;\n `,\n body: css`\n margin-top: 1rem;\n font-size: ${fontSize.medium};\n color: ${colors.grayAnatomyLight1};\n line-height: 1.5;\n `,\n};\n\nSignupComplete.defaultProps = {\n msgId: \"Signup.SignupComplete.Body\",\n};\n\nSignupComplete.propTypes = {\n formData: PropTypes.object.isRequired,\n msgId: PropTypes.string,\n};\n\nexport default SignupComplete;\n","import React from \"react\";\nimport { DatePicker } from \"components/Form\";\n\n/**\n * CodeTelemetryPeriodSelector\n */\nconst CodeTelemetryPeriodSelector = (props) => \n
\n \n
\n \n \n \n
\n )}\n \n );\n};\n\nconst styles = {\n comingSoon: css`\n margin-top: 1rem;\n font-weight: 600;\n font-size: ${fontSize.medium};\n gap: 0.5rem;\n display: flex;\n align-items: center;\n `,\n container: css`\n padding: 2rem 1rem 2rem 1rem;\n text-align: left;\n font-size: ${fontSize.xxsmall};\n flex: 1;\n border-right: 1px ${colors.grayAnatomyLight5} solid;\n margin-left: 3rem;\n &:last-child {\n border-right: none;\n }\n `,\n link_container: css`\n width: 100%;\n border: 0;\n border-top: 1px ${colors.grayAnatomyLight4} solid;\n border-radius: 0;\n border-radius: 1rem;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n margin-bottom: 0;\n `,\n link: css`\n margin-left: 33%;\n margin-top: 5%;\n `,\n};\n\nSquadInsights.propTypes = {\n teamId: PropTypes.string.isRequired,\n};\n\nexport default SquadInsights;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormattedMessage } from \"react-intl\";\nimport { toUcFirst } from \"utils\";\nimport { getEntityName } from \"components/Squads/Insights\";\n\n/**\n * LabelForCommentMetric\n *\n * @param {Object} insight\n * @param {String} word\n */\nconst LabelForCommentMetric = ({ insight, word }) => {\n const { insightType, insightMetric, observationPeriod, observationTargetName, valueString } = insight;\n\n return (\n