= ({\n options,\n value,\n onChange,\n maxMenuHeight = \"250px\",\n maxValueContainerHeight = \"unset\",\n formatCreateLabel,\n placeholder = \"Search for teammates by name or email\",\n creatable = false,\n isPortal = false,\n}) => {\n const Container = creatable ? CreatableSelect : Select;\n return (\n \n null,\n IndicatorSeparator: () => null,\n MultiValueRemove,\n MultiValueLabel,\n }}\n formatOptionLabel={formatOptionLabel}\n formatCreateLabel={formatCreateLabel}\n noOptionsMessage={() => null}\n menuPosition={isPortal && \"absolute\"}\n menuPortalTarget={isPortal && document.body}\n styles={{\n multiValue: (base) => ({\n ...base,\n borderRadius: \"100px\",\n padding: \"0 3px\",\n fontSize: 14,\n }),\n multiValueRemove: (base) => ({\n ...base,\n borderRadius: \"100px\",\n \"&:hover\": {\n backgroundColor: COLORS.NEUTRAL_200,\n },\n }),\n menuPortal: (base) => ({\n ...base,\n zIndex: 9999,\n }),\n }}\n />\n
\n );\n};\n\nconst Select = styled(Select_)`\n ${DROPDOWN_STYLES};\n .Select__control {\n ${({ maxValueContainerHeight }) =>\n maxValueContainerHeight && `max-height: ${maxValueContainerHeight};`}\n overflow-y: auto;\n }\n .Select__menu-list {\n ${({ maxMenuHeight }) => `max-height: ${maxMenuHeight}`};\n }\n`;\n\nconst CreatableSelect = styled(CreatableSelect_)`\n ${DROPDOWN_STYLES};\n .Select__control {\n ${({ maxValueContainerHeight }) =>\n maxValueContainerHeight && `max-height: ${maxValueContainerHeight};`}\n overflow-y: auto;\n }\n .Select__menu-list {\n ${({ maxMenuHeight }) => `max-height: ${maxMenuHeight}`};\n }\n`;\n\nconst Option = styled.div`\n display: grid;\n grid-template-columns: 36px 1fr;\n grid-gap: 0 10px;\n align-items: flex-start;\n margin: 10px 8px;\n`;\n\nconst OptionName = styled.div`\n flex-grow: 1;\n ${FONTS.SEMIBOLD_2}\n ${STYLES.ONE_LINE}\n`;\n\nconst OptionEmail = styled.div`\n ${FONTS.REGULAR_3}\n ${STYLES.ONE_LINE}\n`;\n\nconst LabelText = styled.p`\n ${(props) => props.error && `color: ${COLORS.RED}`};\n`;\n\nconst CreateLabel = styled.span`\n ${FONTS.REGULAR_2}\n`;\n\nconst LabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nconst TagContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n pointer-events: none;\n`;\n\nexport default UserDropdown;\n","import { COLORS, FONTS, STYLES } from \"@constants\";\nimport { css } from \"styled-components\";\n\n// Only make changes here that are intended to be applicable to all standard dropdowns!\n// This should go first in a dropdown's styles. If a particular dropdown needs specific\n// styles, that should go into that dropdown's styles\n\nconst DROPDOWN_STYLES = css`\n .Select__control {\n border: 1px solid ${COLORS.NEUTRAL_300};\n min-height: 36px;\n transition: initial;\n &:hover {\n &:not(.Select__control--is-focused) {\n border: 1px solid ${COLORS.NEUTRAL_400};\n cursor: pointer;\n }\n &.Select__control--is-focused {\n border: 1px solid ${COLORS.HALO_BLUE};\n }\n cursor: pointer;\n }\n }\n .Select__control--is-focused {\n box-shadow: none;\n border: 1px solid ${COLORS.HALO_BLUE};\n }\n .Select__placeholder {\n color: ${COLORS.NEUTRAL_500};\n ${FONTS.REGULAR_2};\n }\n .Select__input-container {\n ${FONTS.REGULAR_2};\n }\n .Select__indicator-separator {\n display: none;\n }\n .Select__indicator {\n color: ${COLORS.BLACK};\n margin-right: 10px;\n padding: 0;\n &:hover {\n color: ${COLORS.BLACK};\n }\n }\n .Select__menu {\n white-space: nowrap;\n width: 100%;\n border-radius: 8px;\n padding: 16px 12px;\n box-shadow: ${STYLES.SHADOW_B};\n cursor: default;\n }\n .Select__menu-list {\n max-height: unset;\n }\n .Select__group {\n padding: 0;\n }\n .Select__option {\n min-width: 225px;\n margin: 0 12px;\n width: calc(100% - 24px);\n border-radius: 4px;\n background-color: ${COLORS.WHITE};\n ${FONTS.REGULAR_2};\n cursor: pointer;\n &:hover {\n background-color: ${COLORS.NEUTRAL_100};\n }\n &:active {\n background-color: ${COLORS.NEUTRAL_200};\n }\n }\n .Select__option--is-selected {\n ${FONTS.MEDIUM_2};\n color: ${COLORS.HALO_BLUE};\n }\n`;\n\nexport default DROPDOWN_STYLES;\n\nexport const MULTI_SELECT_TAG_STYLES = css`\n .Select__input-container {\n margin: 0 2px;\n }\n .Select__multi-value {\n display: flex;\n align-items: center;\n height: 24px;\n background-color: ${COLORS.NEUTRAL_100};\n padding: 0 14px;\n border-radius: 100px;\n &:not(:last-of-type) {\n margin-right: 8px;\n }\n }\n .Select__multi-value__label {\n ${FONTS.MEDIUM_3};\n padding: 0;\n }\n .Select__multi-value__remove {\n padding: 0;\n &:hover {\n opacity: 0.4;\n background-color: transparent;\n }\n }\n`;\n","// USAGE:\n// 1. Copy the medium icon SVG code from Figma and add it as a new case to the switch statement in getSvg\n// 2. The icon's name is also listed in Figma and should be added to the IconName type (camelCase)\n// 3. Replace height and width with {size} and instances of hex color codes with {color}\n\nimport { COLORS } from \"@constants\";\nimport styled from \"styled-components\";\n\nexport interface IconProps {\n name: IconName;\n color?: string;\n size?: \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | number;\n margin?: string | 0;\n display?: string;\n \"data-testid\"?: string;\n}\n\nconst SIZES = {\n xxs: 10,\n xs: 16,\n sm: 20,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56,\n};\n\nconst Icon = ({\n name,\n color = COLORS.BLACK,\n size = \"md\",\n margin = 0,\n display = \"flex\",\n \"data-testid\": dataTestId,\n}: IconProps) => {\n const numericSize = typeof size === \"number\" ? size : SIZES[size];\n\n const svg = getSvg(name, color, numericSize);\n\n if (!svg) return null;\n\n return (\n \n {svg}\n \n );\n};\n\nexport default Icon;\n\nconst IconContainer = styled.div`\n height: ${({ size }) => `${size}px`};\n width: ${({ size }) => `${size}px`};\n margin: ${({ margin }) => margin};\n display: ${({ display }) => display};\n align-items: center;\n`;\n\nexport type IconName =\n | \"3D Printing\"\n | \"Accelerator\"\n | \"Accelerator Complete\"\n | \"Add\"\n | \"Add to collection\"\n | \"Adhesives\"\n | \"Agriculture\"\n | \"Arrow Left\"\n | \"Arrow Right\"\n | \"Arrow Right Filled\"\n | \"Arrow Up\"\n | \"Attachment\"\n | \"Attention\"\n | \"Attention Filled\"\n | \"Audio Mute\"\n | \"Audio Unmute\"\n | \"Australia\"\n | \"Avatar Edit\"\n | \"Bell\"\n | \"Burger\"\n | \"Calendar\"\n | \"Canada\"\n | \"Change\"\n | \"Checkup\"\n | \"Chevron Down\"\n | \"Chevron Left\"\n | \"Chevron Right\"\n | \"Chevron Up\"\n | \"China\"\n | \"Close\"\n | \"Compounds\"\n | \"Copy\"\n | \"Crown\"\n | \"Data\"\n | \"Delete\"\n | \"Diamond\"\n | \"Download\"\n | \"Dot\"\n | \"Easy Apply\"\n | \"Edit\"\n | \"Employees\"\n | \"Evaluate\"\n | \"Expand\"\n | \"Expertise\"\n | \"Facebook\"\n | \"Filter\"\n | \"Filter & sort\"\n | \"Followers\"\n | \"Food\"\n | \"Frame\"\n | \"Funding\"\n | \"Help\"\n | \"Hide\"\n | \"History\"\n | \"Hygiene\"\n | \"Idea\"\n | \"India\"\n | \"Info\"\n | \"Info Small\"\n | \"Info Inverted\"\n | \"Invite\" // From a mockup, not the design system\n | \"Jewel\"\n | \"Lead Reviewer\"\n | \"LinkedIn\"\n | \"Location\"\n | \"Lock\"\n | \"Magic\"\n | \"Magic Full\"\n | \"Magic Refresh\"\n | \"Malaysia\"\n | \"Materials\"\n | \"Medal\"\n | \"Medicine\"\n | \"Message\"\n | \"Messaging\"\n | \"Mexico\"\n | \"Minimize\"\n | \"More Actions\"\n | \"Notification Filled\"\n | \"Open Call\"\n | \"Open Call Paused\"\n | \"Open Call Complete\"\n | \"Open in a new tab\"\n | \"Opportunity\"\n | \"Organization\"\n | \"Packaging\"\n | \"Paused\"\n | \"Play\" // From a mockup, not the design system\n | \"Private\"\n | \"Private Company\"\n | \"Profile\"\n | \"Proposal\"\n | \"Proposal Privacy\"\n | \"Publication\"\n | \"Public\"\n | \"Quota-Based RFP\"\n | \"Radio Small\"\n | \"Radio Small Filled\"\n | \"Reduce\"\n | \"Refresh\"\n | \"Reorder\"\n | \"Request for experts\"\n | \"RFP\"\n | \"RFP Complete\"\n | \"RFP Filled\"\n | \"Row height\"\n | \"Row height - short\"\n | \"Row height - medium\"\n | \"Row height - full\"\n | \"Save\"\n | \"Search\"\n | \"Send Message\"\n | \"Share\"\n | \"Sort\"\n | \"Sort By\"\n | \"Star\"\n | \"Status\"\n | \"Success\"\n | \"Technology\"\n | \"Thumb Down\"\n | \"Thumb Down Filled\"\n | \"Thumb Up\"\n | \"Thumb Up Filled\"\n | \"Tick\"\n | \"Twitter\"\n | \"Unlocked\"\n | \"Unsave\"\n | \"USA\"\n | \"Verified\"\n | \"View\"\n | \"Water\"\n | \"X\"\n | \"X Filled\"\n | undefined;\n\nconst getSvg = (name: IconName, color: string, size: number) => {\n switch (name) {\n case \"Request for experts\": {\n return (\n \n );\n }\n case \"Radio Small\": {\n return (\n \n );\n }\n case \"Radio Small Filled\": {\n return (\n \n );\n }\n case \"Accelerator\": {\n return (\n \n );\n }\n case \"Accelerator Complete\": {\n return (\n \n );\n }\n case \"Add to collection\": {\n return (\n \n );\n }\n case \"More Actions\": {\n return (\n \n );\n }\n case \"View\": {\n return (\n \n );\n }\n case \"Paused\": {\n return (\n \n );\n }\n case \"Play\": {\n return (\n \n );\n }\n case \"Tick\": {\n return (\n \n );\n }\n case \"Messaging\": {\n return (\n \n );\n }\n case \"Location\": {\n return (\n \n );\n }\n case \"Filter\": {\n return (\n \n );\n }\n case \"Filter & sort\": {\n return (\n \n );\n }\n case \"Notification Filled\": {\n return (\n \n );\n }\n case \"Open Call\": {\n return (\n \n );\n }\n case \"Open Call Paused\": {\n return (\n \n );\n }\n case \"Open Call Complete\": {\n return (\n \n );\n }\n case \"Medal\": {\n return (\n \n );\n }\n case \"Send Message\": {\n return (\n \n );\n }\n case \"X\": {\n return (\n \n );\n }\n case \"Change\": {\n return (\n \n );\n }\n case \"Twitter\": {\n return (\n \n );\n }\n case \"LinkedIn\": {\n return (\n \n );\n }\n case \"Facebook\": {\n return (\n \n );\n }\n case \"Delete\": {\n return (\n \n );\n }\n case \"Download\": {\n return (\n \n );\n }\n case \"Dot\": {\n return (\n \n );\n }\n case \"Lead Reviewer\": {\n return (\n \n );\n }\n case \"Add\": {\n return (\n \n );\n }\n case \"Arrow Left\": {\n return (\n \n );\n }\n case \"Arrow Up\": {\n return (\n \n );\n }\n case \"Private\": {\n return (\n \n );\n }\n case \"Employees\": {\n return (\n \n );\n }\n case \"Proposal Privacy\": {\n return (\n \n );\n }\n case \"Proposal\": {\n return (\n \n );\n }\n case \"Minimize\": {\n return (\n \n );\n }\n case \"Expand\": {\n return (\n \n );\n }\n case \"Reduce\": {\n return (\n \n );\n }\n case \"Calendar\": {\n return (\n \n );\n }\n case \"Share\": {\n return (\n \n );\n }\n case \"Open in a new tab\": {\n return (\n \n );\n }\n case \"Profile\": {\n return (\n \n );\n }\n case \"Message\": {\n return (\n \n );\n }\n case \"Chevron Down\": {\n return (\n \n );\n }\n case \"Chevron Up\": {\n return (\n \n );\n }\n case \"Chevron Left\": {\n return (\n \n );\n }\n case \"Chevron Right\": {\n return (\n \n );\n }\n case \"Copy\": {\n return (\n \n );\n }\n case \"Data\": {\n return (\n \n );\n }\n case \"Refresh\": {\n return (\n \n );\n }\n case \"Close\": {\n return (\n \n );\n }\n case \"Search\": {\n return (\n \n );\n }\n case \"Verified\": {\n return (\n \n );\n }\n case \"Agriculture\": {\n return (\n \n );\n }\n case \"Hygiene\": {\n return (\n \n );\n }\n case \"Water\": {\n return (\n \n );\n }\n case \"Bell\": {\n return (\n \n );\n }\n case \"Success\": {\n return (\n \n );\n }\n case \"Opportunity\": {\n return (\n \n );\n }\n case \"3D Printing\": {\n return (\n \n );\n }\n case \"Packaging\": {\n return (\n \n );\n }\n case \"Adhesives\": {\n return (\n \n );\n }\n case \"Food\": {\n return (\n \n );\n }\n case \"Medicine\": {\n return (\n \n );\n }\n case \"Private Company\": {\n return (\n \n );\n }\n case \"Easy Apply\": {\n return (\n \n );\n }\n case \"Attention\": {\n return (\n \n );\n }\n case \"Idea\": {\n return (\n \n );\n }\n case \"Info\": {\n return (\n \n );\n }\n case \"Info Small\": {\n return (\n \n );\n }\n case \"Info Inverted\": {\n return (\n \n );\n }\n case \"Invite\": {\n return (\n \n );\n }\n case \"Jewel\": {\n return (\n \n );\n }\n case \"Materials\": {\n return (\n \n );\n }\n case \"Arrow Right\": {\n return (\n \n );\n }\n case \"Attachment\": {\n return (\n \n );\n }\n case \"Help\": {\n return (\n \n );\n }\n case \"History\": {\n return (\n \n );\n }\n case \"USA\": {\n return (\n \n );\n }\n case \"Australia\": {\n return (\n \n );\n }\n case \"China\": {\n return (\n \n );\n }\n case \"India\": {\n return (\n \n );\n }\n case \"Canada\": {\n return (\n \n );\n }\n case \"Malaysia\": {\n return (\n \n );\n }\n case \"Mexico\": {\n return (\n \n );\n }\n case \"Burger\": {\n return (\n \n );\n }\n case \"Technology\": {\n return (\n \n );\n }\n case \"Funding\": {\n return (\n \n );\n }\n case \"Expertise\": {\n return (\n \n );\n }\n case \"Organization\": {\n return (\n \n );\n }\n case \"Compounds\": {\n return (\n \n );\n }\n case \"Checkup\": {\n return (\n \n );\n }\n case \"Publication\": {\n // Have to use unoptimized SVG otherwise the middle bar of the book disappears at small sizes\n return (\n \n );\n }\n case \"Star\": {\n return (\n \n );\n }\n case \"Status\": {\n return (\n \n );\n }\n case \"Edit\": {\n return (\n \n );\n }\n case \"RFP\": {\n return (\n \n );\n }\n case \"RFP Complete\": {\n return (\n \n );\n }\n case \"RFP Filled\": {\n return (\n \n );\n }\n case \"Row height\": {\n return (\n \n );\n }\n case \"Row height - short\": {\n return (\n \n );\n }\n case \"Row height - medium\": {\n return (\n \n );\n }\n case \"Row height - full\": {\n return (\n \n );\n }\n case \"Save\": {\n return (\n \n );\n }\n case \"Sort\": {\n return (\n \n );\n }\n case \"Public\": {\n return (\n \n );\n }\n case \"Quota-Based RFP\": {\n return (\n \n );\n }\n case \"Hide\": {\n return (\n \n );\n }\n case \"Followers\": {\n return (\n \n );\n }\n case \"Reorder\": {\n return (\n \n );\n }\n case \"Sort By\": {\n return (\n \n );\n }\n case \"Thumb Up\": {\n return (\n \n );\n }\n case \"Thumb Up Filled\": {\n return (\n \n );\n }\n case \"Thumb Down\": {\n return (\n \n );\n }\n case \"Thumb Down Filled\": {\n return (\n \n );\n }\n case \"Attention Filled\": {\n return (\n \n );\n }\n case \"Audio Mute\": {\n return (\n \n );\n }\n case \"Audio Unmute\": {\n return (\n \n );\n }\n case \"Lock\": {\n return (\n \n );\n }\n case \"Unlocked\": {\n return (\n \n );\n }\n case \"Unsave\": {\n return (\n \n );\n }\n case \"Crown\": {\n return (\n \n );\n }\n case \"Magic\": {\n return (\n \n );\n }\n case \"Magic Full\": {\n return (\n \n );\n }\n case \"Magic Refresh\": {\n return (\n \n );\n }\n case \"Diamond\": {\n return (\n \n );\n }\n case \"Evaluate\": {\n return (\n \n );\n }\n case \"Avatar Edit\": {\n return (\n \n );\n }\n case \"X Filled\": {\n return (\n \n );\n }\n case \"Arrow Right Filled\": {\n return (\n \n );\n }\n case \"Frame\": {\n return (\n \n );\n }\n default: {\n return null;\n }\n }\n};\n","import { ChipCheckbox, RemovableInputWrapper } from \"@components/library\";\nimport { ChangeEvent, useState } from \"react\";\nimport styled from \"styled-components\";\n\ninterface Props {\n label?: string;\n options: { value: string; label: string }[];\n selectedValues: string[] | null;\n disabledValues?: string[];\n onChange: (values: string[] | null) => void;\n gap?: string;\n hideAll?: boolean;\n \"data-testid\"?: string;\n}\n\nconst ChipsInput = ({\n label,\n options,\n selectedValues,\n disabledValues = [],\n onChange,\n gap = \"16px 8px\",\n hideAll = false,\n \"data-testid\": dataTestId,\n}: Props) => {\n const [isExpanded, setIsExpanded] = useState(Number(selectedValues?.length) > 0);\n\n const handleChange = (e: ChangeEvent, value: string) => {\n let newValues: string[];\n if (e.target.checked) {\n newValues = [...(selectedValues ?? []), value];\n } else {\n newValues = (selectedValues ?? []).filter((selectedValue) => selectedValue !== value);\n }\n onChange(newValues);\n };\n\n const areAllSelected = selectedValues?.length === options.length - disabledValues.length;\n\n const handleAllChange = () => {\n if (areAllSelected) {\n onChange([]);\n } else {\n const nonDisabledValues = options\n .map((option) => option.value)\n .filter((value) => !disabledValues.includes(value));\n onChange(nonDisabledValues);\n }\n };\n\n const chips = (\n \n {!hideAll && }\n {options.map((option) => (\n handleChange(e, option.value)}\n />\n ))}\n \n );\n\n return (\n \n {label ? (\n onChange(null)}\n isExpanded={isExpanded}\n setIsExpanded={setIsExpanded}\n data-testid={`${dataTestId}-wrapper`}\n >\n {chips}\n \n ) : (\n chips\n )}\n
\n );\n};\n\nexport default ChipsInput;\n\nconst Chips = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: ${({ gap }) => gap};\n`;\n","import { Icon } from \"@components/library\";\nimport { COLORS, FONTS } from \"@constants\";\nimport resizeGrabber from \"@images/icons/resize_grabber.svg\";\nimport { ChangeEvent, ForwardedRef, ReactNode, forwardRef } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport FormLabel from \"../Texts/FormLabel\";\n\nexport type TextInputError = { hasError: boolean; errorMessage: string };\n\ninterface Props {\n id?: string;\n value: string;\n onChange:\n | ((e: ChangeEvent) => void)\n | ((e: ChangeEvent) => void);\n name?: string;\n label?: ReactNode;\n labelFont?: string;\n placeholder?: string;\n placeholderColor?: string;\n onBlur?: (...args: any[]) => void;\n optional?: boolean;\n characterLimit?: number;\n warningLimit?: number;\n errors?: TextInputError[];\n textarea?: boolean;\n rows?: number; // applicable if textarea\n type?: string;\n hideClearButton?: boolean;\n resize?: string;\n disabled?: boolean;\n startingHeight?: string;\n min?: number;\n max?: number;\n \"data-testid\"?: string;\n}\n\nconst TextInput = (\n {\n id,\n value,\n onChange,\n name,\n label,\n labelFont,\n placeholder,\n placeholderColor = COLORS.NEUTRAL_500,\n type = \"text\",\n onBlur,\n optional = false,\n characterLimit,\n warningLimit,\n errors,\n hideClearButton = false,\n textarea = false,\n rows,\n resize = \"vertical\",\n disabled,\n startingHeight = \"84px\",\n min,\n max,\n \"data-testid\": dataTestId,\n }: Props,\n ref: ForwardedRef\n) => {\n const hasExceededCharacterLimit = characterLimit && value.length > characterLimit;\n const hasExceededWarningLimit = warningLimit && value.length > warningLimit;\n const hasAnyError =\n // If the other error conditions are all false, we still want to check the character limit\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n Boolean(errors?.map((error) => error.hasError).includes(true) || hasExceededCharacterLimit);\n\n const handleClear = (e) => {\n const newEvent = {\n ...e,\n target: {\n ...e.target,\n value: type === \"number\" ? undefined : \"\",\n },\n };\n\n onChange(newEvent);\n };\n\n const input = textarea ? (\n