@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/CommunityEventCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Anchor","Box","Card","FillButton","FlexBox","Spinner","Text","CalendarIcon","CheckFilledIcon","LockIcon","PeopleIcon","RoundPinIcon","pxRem","theme","styled","format","parseJSON","motion","isMobile","useEffect","useRef","useState","EventTypeIcon","HoverCard","StyledLink","colors","navy","formatTime","startDate","endDate","startTime","startHour","startMinutes","startTimeOfDay","toLowerCase","endTime","endHour","endMinutes","endTimeOfDay","text","CommunityEventCard","title","descriptionShort","url","totalAttendees","audienceType","inPersonLocation","isProEvent","isProUser","isAnonUser","isTrialEligible","upsellUrl","sendRSVP","hideButton","handleCardClick","handleAnonUserCardClick","handleRSVPClick","handleUpgradeCTAClick","handleOnRSVPSuccess","handleOnRSVPFailure","isRegistered","type","cannotShowButton","isMobileDevice","setIsMobileDevice","showCardButton","setShowCardButton","rsvpSuccessful","setRsvpSuccessful","rsvpLoading","setRsvpLoading","isAttending","cardLinkRef","mobileDevice","any","current","focus","nonProButtonText","eventTime","hideYear","length","canAccessPro","revealCardButton","isSafari","navigator","test","userAgent","display","flexDirection","height","justifyContent","variant","isInteractive","p","pt","position","overflow","onTouchStart","onFocus","onMouseEnter","onMouseLeave","tabIndex","undefined","href","onClick","e","preventDefault","ref","target","div","key","initial","opacity","y","animate","transition","ease","top","width","alignItems","borderBottom","borderStyleBottom","px","py","borderColor","bg","color","mr","fontSize","screenreader","aria-hidden","pb","flexGrow","truncate","truncateLines","as","mb","mt","size","fontFamily","my","alignSelf","eventType","mx","bottom","disabled","didRsvp","onBlur"],"sources":["../../src/CommunityEventCard/index.tsx"],"sourcesContent":["import {\n  Anchor,\n  Box,\n  Card,\n  FillButton,\n  FlexBox,\n  Spinner,\n  Text,\n} from '@codecademy/gamut';\nimport {\n  CalendarIcon,\n  CheckFilledIcon,\n  LockIcon,\n  PeopleIcon,\n  RoundPinIcon,\n} from '@codecademy/gamut-icons';\nimport { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { format, parseJSON } from 'date-fns';\nimport { motion } from 'framer-motion';\nimport isMobile from 'ismobilejs';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { EventTypeIcon } from './EventTypeIcon';\n\nexport interface CommunityEventCardProps {\n  title: string;\n  startDate: string;\n  endDate: string;\n  descriptionShort: string;\n  url: string;\n  totalAttendees?: number | null;\n  audienceType: string;\n  isProEvent?: boolean;\n  isProUser?: boolean;\n  isAnonUser?: boolean;\n  isTrialEligible?: boolean;\n  upsellUrl?: string;\n  venueType?: string;\n  inPersonLocation?: string | null;\n  sendRSVP?: () => Promise<boolean>;\n  handleCardClick?: () => void;\n  handleAnonUserCardClick?: () => void;\n  handleRSVPClick?: () => void;\n  handleUpgradeCTAClick?: () => void;\n  handleOnRSVPSuccess?: () => void;\n  handleOnRSVPFailure?: () => void;\n  isRegistered?: boolean;\n  hideButton?: boolean;\n  type?: string | null;\n}\n\nconst HoverCard = styled(Card)`\n  border-radius: 4px;\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nconst StyledLink = styled(Anchor)`\n  flex-grow: 1;\n  text-decoration: none;\n  color: ${theme.colors.navy};\n  &:hover,\n  &:focus {\n    text-decoration: none;\n  }\n`;\n\nexport const formatTime = (startDate: string, endDate: string) => {\n  const startTime = parseJSON(startDate);\n  const startHour = format(startTime, 'h');\n  const startMinutes = format(startTime, 'mm');\n  const startTimeOfDay = format(startTime, 'a').toLowerCase();\n  const endTime = parseJSON(endDate);\n  const endHour = format(endTime, 'h');\n  const endMinutes = format(endTime, 'mm');\n  const endTimeOfDay = format(endTime, 'a').toLowerCase();\n  let text = `${startHour}`;\n  if (startMinutes !== '00') {\n    text += `:${startMinutes}`;\n  }\n  if (startTimeOfDay !== endTimeOfDay) {\n    text += `${startTimeOfDay}`;\n  }\n  text += `-${endHour}`;\n  if (endMinutes !== '00') {\n    text += `:${endMinutes}`;\n  }\n  text += `${endTimeOfDay}`;\n  return text;\n};\n\nexport const CommunityEventCard: React.FC<CommunityEventCardProps> = ({\n  title,\n  startDate,\n  endDate,\n  descriptionShort,\n  url,\n  totalAttendees = null,\n  audienceType,\n  inPersonLocation = null,\n  isProEvent,\n  isProUser,\n  isAnonUser,\n  isTrialEligible,\n  upsellUrl,\n  sendRSVP,\n  hideButton,\n  handleCardClick,\n  handleAnonUserCardClick,\n  handleRSVPClick,\n  handleUpgradeCTAClick,\n  handleOnRSVPSuccess,\n  handleOnRSVPFailure,\n  isRegistered,\n  type,\n}) => {\n  const cannotShowButton = hideButton || isAnonUser;\n  const [isMobileDevice, setIsMobileDevice] = useState(true);\n  const [showCardButton, setShowCardButton] = useState(\n    cannotShowButton ? false : isMobileDevice\n  );\n  const [rsvpSuccessful, setRsvpSuccessful] = useState(false);\n  const [rsvpLoading, setRsvpLoading] = useState(false);\n  const isAttending = rsvpSuccessful || isRegistered;\n  const cardLinkRef = useRef<HTMLAnchorElement>(null);\n\n  useEffect(() => {\n    const mobileDevice: boolean = isMobile().any;\n    setIsMobileDevice(mobileDevice);\n    setShowCardButton(mobileDevice);\n  }, []);\n  useEffect(() => {\n    // focus should only be set once because we only set rsvp true after save a spot button is clicked\n    if (rsvpSuccessful) {\n      cardLinkRef.current?.focus();\n      setRsvpLoading(false);\n    }\n  }, [rsvpSuccessful]);\n\n  const nonProButtonText = isTrialEligible\n    ? 'Start 7-day free trial'\n    : 'Upgrade';\n  const eventTime = formatTime(startDate, endDate);\n  const hideYear = eventTime.length > 11;\n  const canAccessPro = !(isProEvent && !isProUser);\n  const revealCardButton = () => {\n    if (!cannotShowButton && !isAttending) {\n      setShowCardButton(true);\n    }\n  };\n  const isSafari =\n    typeof navigator !== 'undefined' &&\n    /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n  return (\n    <HoverCard\n      display=\"flex\"\n      flexDirection=\"column\"\n      height={pxRem(318)}\n      justifyContent=\"space-between\"\n      variant=\"white\"\n      isInteractive\n      p={0}\n      pt={isProEvent || isAttending ? 0 : 16}\n      position=\"relative\"\n      overflow=\"hidden\"\n      onTouchStart={revealCardButton}\n      onFocus={revealCardButton}\n      onMouseEnter={revealCardButton}\n      onMouseLeave={() => {\n        if (!rsvpLoading && !isMobileDevice) {\n          setShowCardButton(false);\n        }\n      }}\n      tabIndex={isSafari ? 0 : undefined}\n    >\n      <StyledLink\n        href={url}\n        onClick={\n          isAnonUser\n            ? (e: React.MouseEvent) => {\n                e.preventDefault();\n                handleCardClick?.();\n                handleAnonUserCardClick?.();\n              }\n            : () => handleCardClick?.()\n        }\n        ref={cardLinkRef}\n        target=\"_blank\"\n      >\n        {isAttending ? (\n          <motion.div\n            key=\"success\"\n            initial={{ opacity: 0, y: -16 }}\n            animate={{ opacity: 1, y: 0, transition: { ease: 'easeInOut' } }}\n          >\n            <FlexBox\n              position=\"absolute\"\n              top={0}\n              width=\"100%\"\n              alignItems=\"center\"\n              borderBottom=\"solid\"\n              borderStyleBottom={{\n                '1': 'solid',\n              }}\n              px={16}\n              py={4}\n              borderColor=\"black\"\n              bg=\"hyper\"\n              color=\"white\"\n            >\n              <CheckFilledIcon mr={8} />\n              <Text fontSize={14}>\n                <Text screenreader>\n                  {isRegistered\n                    ? \"You're going to the event\"\n                    : \"You've saved a spot for the event\"}\n                </Text>\n                <Text aria-hidden>You&apos;re going!</Text>\n              </Text>\n            </FlexBox>\n          </motion.div>\n        ) : (\n          isProEvent && (\n            <FlexBox\n              position=\"absolute\"\n              top={0}\n              width=\"100%\"\n              bg=\"navy\"\n              color=\"white\"\n              px={16}\n              py={4}\n              borderBottom=\"solid\"\n              borderStyleBottom={{ '1': 'solid' }}\n            >\n              <Text fontSize={14}>Pro/Plus</Text>\n            </FlexBox>\n          )\n        )}\n        <FlexBox\n          flexDirection=\"column\"\n          justifyContent=\"space-between\"\n          height=\"100%\"\n        >\n          <Box\n            p={16}\n            pb={8}\n            pt={isAttending || isProEvent ? (36 as never) : 0}\n            flexGrow={1}\n          >\n            <Text truncate=\"ellipsis\" truncateLines={2} fontSize={22} as=\"h3\">\n              {title}\n            </Text>\n            {audienceType === 'in_person' && (\n              <FlexBox alignItems=\"center\" mb={8} mt={4}>\n                <RoundPinIcon mr={8} mb={4} size={16} />\n                <Text\n                  fontFamily=\"accent\"\n                  color=\"navy-600\"\n                  truncate=\"ellipsis\"\n                  truncateLines={1}\n                  fontSize={14}\n                >\n                  {inPersonLocation ?? 'In-person event'}\n                </Text>\n              </FlexBox>\n            )}\n            <FlexBox\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n              fontSize={14}\n              fontFamily=\"accent\"\n              my={8}\n            >\n              <FlexBox alignItems=\"center\">\n                <CalendarIcon alignSelf=\"center\" mr={8} />\n                {format(\n                  parseJSON(startDate),\n                  hideYear ? \"MMM dd'...'\" : 'MMM dd, yyyy'\n                )}\n              </FlexBox>\n              {eventTime}\n            </FlexBox>\n            <Text truncate=\"ellipsis\" truncateLines={3}>\n              {descriptionShort}\n            </Text>\n          </Box>\n          <FlexBox justifyContent=\"space-between\" p={16} pt={8} tabIndex={0}>\n            <EventTypeIcon eventType={type} />\n            {totalAttendees !== null && totalAttendees > 0 && (\n              <Text display=\"flex\" fontFamily=\"accent\" fontSize={14}>\n                <PeopleIcon alignSelf=\"center\" mr={8} aria-hidden />\n                {totalAttendees === 100\n                  ? '100+'\n                  : rsvpSuccessful\n                  ? totalAttendees + 1\n                  : totalAttendees}\n              </Text>\n            )}\n          </FlexBox>\n        </FlexBox>\n      </StyledLink>\n      {showCardButton && sendRSVP && !isAttending && !isAnonUser && (\n        <motion.div\n          key=\"rsvp\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n        >\n          {canAccessPro ? (\n            <FillButton\n              width=\"calc(100% - 32px)\"\n              mx={16}\n              position=\"absolute\"\n              bottom={48}\n              disabled={rsvpLoading}\n              onClick={async () => {\n                setRsvpLoading(true);\n                handleRSVPClick?.();\n                const didRsvp = await sendRSVP();\n                if (didRsvp) {\n                  handleOnRSVPSuccess?.();\n                } else {\n                  handleOnRSVPFailure?.();\n                }\n                setRsvpSuccessful(didRsvp);\n              }}\n              onBlur={() => {\n                if (!rsvpLoading && !isMobileDevice) {\n                  setShowCardButton(false);\n                }\n              }}\n            >\n              {rsvpLoading ? <Spinner size={16} /> : 'Save a spot'}\n            </FillButton>\n          ) : (\n            <FillButton\n              width=\"calc(100% - 32px)\"\n              mx={16}\n              position=\"absolute\"\n              bottom={48}\n              href={upsellUrl}\n              variant=\"secondary\"\n              onClick={() => handleUpgradeCTAClick?.()}\n            >\n              <FlexBox alignItems=\"center\">\n                <LockIcon mr={8} />\n                {nonProButtonText}\n              </FlexBox>\n            </FillButton>\n          )}\n        </motion.div>\n      )}\n    </HoverCard>\n  );\n};\n"],"mappings":"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"}

package/dist/CommunityEventToast/index.cjs

@@ -0,0 +1,28 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/CommunityEventToast/index.tsx
+const CommunityEventToast = ({ onClose }) => {
+	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Toaster, {
+		toasts: [{
+			children: /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut_icons.CalendarIcon, {
+				size: 16,
+				mr: 8,
+				mb: 8
+			}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+				variant: "p-base",
+				fontWeight: "title",
+				mb: 4
+			}, "You're going!")), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { variant: "p-small" }, "Please remember to mark your calendar.")),
+			id: "you-are-going-toast"
+		}],
+		onClose
+	});
+};
+
+//#endregion
+exports.CommunityEventToast = CommunityEventToast;
+//# sourceMappingURL=index.cjs.map

package/dist/CommunityEventToast/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","FlexBox","Text","Toaster","CalendarIcon","React","CommunityEventToast","onClose","toasts","children","alignItems","size","mr","mb","variant","fontWeight","id"],"sources":["../../src/CommunityEventToast/index.tsx"],"sourcesContent":["import { Box, FlexBox, Text, Toaster } from '@codecademy/gamut';\nimport { CalendarIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\ninterface CommunityEventToastProps {\n  onClose: () => void;\n}\n\nexport const CommunityEventToast: React.FC<CommunityEventToastProps> = ({\n  onClose,\n}) => {\n  return (\n    <Toaster\n      toasts={[\n        {\n          children: (\n            <Box>\n              <FlexBox alignItems=\"center\">\n                <CalendarIcon size={16} mr={8} mb={8} />\n                <Text variant=\"p-base\" fontWeight=\"title\" mb={4}>\n                  You&apos;re going!\n                </Text>\n              </FlexBox>\n              <Text variant=\"p-small\">\n                Please remember to mark your calendar.\n              </Text>\n            </Box>\n          ),\n          id: 'you-are-going-toast',\n        },\n      ]}\n      onClose={onClose}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAQA,MAAaM,uBAA2D,EACtEC,cACD;AACC,QACE,8BAAA,cAACJ,2BAAAA;EACCK,QAAQ,CACN;GACEC,UACE,8BAAA,cAACT,uBAAAA,MACC,8BAAA,cAACC,2BAAAA,EAAQS,YAAW,YAClB,8BAAA,cAACN,sCAAAA;IAAaO,MAAM;IAAIC,IAAI;IAAGC,IAAI;OACnC,8BAAA,cAACX,wBAAAA;IAAKY,SAAQ;IAASC,YAAW;IAAQF,IAAI;MAAG,gBAAA,CAAA,EAInD,8BAAA,cAACX,wBAAAA,EAAKY,SAAQ,aAAU,yCAAA,CAAA;GAK5BE,IAAI;GACN,CACD;EACQT"}

package/dist/CommunityEventToast/index.d.cts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/CommunityEventToast/index.d.ts
+interface CommunityEventToastProps {
+  onClose: () => void;
+}
+declare const CommunityEventToast: React.FC<CommunityEventToastProps>;
+//#endregion
+export { CommunityEventToast };
+//# sourceMappingURL=index.d.cts.map

package/dist/CommunityEventToast/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/CommunityEventToast/index.tsx"],"mappings":";;;UAIU,wBAAA;EACR,OAAA;AAAA;AAAA,cAGW,mBAAA,EAAqB,KAAA,CAAM,EAAA,CAAG,wBAAA"}

package/dist/CommunityEventToast/index.d.ts

@@ -1,6 +1,10 @@
-import React from 'react';
+import React from "react";
+
+//#region src/CommunityEventToast/index.d.ts
 interface CommunityEventToastProps {
-    onClose: () => void;
+  onClose: () => void;
 }
-export declare const CommunityEventToast: React.FC<CommunityEventToastProps>;
-export {};
+declare const CommunityEventToast: React.FC<CommunityEventToastProps>;
+//#endregion
+export { CommunityEventToast };
+//# sourceMappingURL=index.d.ts.map

package/dist/CommunityEventToast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/CommunityEventToast/index.tsx"],"mappings":";;;UAIU,wBAAA;EACR,OAAA;AAAA;AAAA,cAGW,mBAAA,EAAqB,KAAA,CAAM,EAAA,CAAG,wBAAA"}

package/dist/CommunityEventToast/index.js

@@ -1,32 +1,26 @@
-import { Box, FlexBox, Text, Toaster } from '@codecademy/gamut';
-import { CalendarIcon } from '@codecademy/gamut-icons';
-import React from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CommunityEventToast = ({
-  onClose
-}) => {
-  return /*#__PURE__*/_jsx(Toaster, {
-    toasts: [{
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsxs(FlexBox, {
-          alignItems: "center",
-          children: [/*#__PURE__*/_jsx(CalendarIcon, {
-            size: 16,
-            mr: 8,
-            mb: 8
-          }), /*#__PURE__*/_jsx(Text, {
-            variant: "p-base",
-            fontWeight: "title",
-            mb: 4,
-            children: "You're going!"
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          variant: "p-small",
-          children: "Please remember to mark your calendar."
-        })]
-      }),
-      id: 'you-are-going-toast'
-    }],
-    onClose: onClose
-  });
-};
+import { Box, FlexBox, Text, Toaster } from "@codecademy/gamut";
+import React from "react";
+import { CalendarIcon } from "@codecademy/gamut-icons";
+
+//#region src/CommunityEventToast/index.tsx
+const CommunityEventToast = ({ onClose }) => {
+	return /* @__PURE__ */ React.createElement(Toaster, {
+		toasts: [{
+			children: /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(FlexBox, { alignItems: "center" }, /* @__PURE__ */ React.createElement(CalendarIcon, {
+				size: 16,
+				mr: 8,
+				mb: 8
+			}), /* @__PURE__ */ React.createElement(Text, {
+				variant: "p-base",
+				fontWeight: "title",
+				mb: 4
+			}, "You're going!")), /* @__PURE__ */ React.createElement(Text, { variant: "p-small" }, "Please remember to mark your calendar.")),
+			id: "you-are-going-toast"
+		}],
+		onClose
+	});
+};
+
+//#endregion
+export { CommunityEventToast };
+//# sourceMappingURL=index.js.map

package/dist/CommunityEventToast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","FlexBox","Text","Toaster","CalendarIcon","React","CommunityEventToast","onClose","toasts","children","alignItems","size","mr","mb","variant","fontWeight","id"],"sources":["../../src/CommunityEventToast/index.tsx"],"sourcesContent":["import { Box, FlexBox, Text, Toaster } from '@codecademy/gamut';\nimport { CalendarIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\ninterface CommunityEventToastProps {\n  onClose: () => void;\n}\n\nexport const CommunityEventToast: React.FC<CommunityEventToastProps> = ({\n  onClose,\n}) => {\n  return (\n    <Toaster\n      toasts={[\n        {\n          children: (\n            <Box>\n              <FlexBox alignItems=\"center\">\n                <CalendarIcon size={16} mr={8} mb={8} />\n                <Text variant=\"p-base\" fontWeight=\"title\" mb={4}>\n                  You&apos;re going!\n                </Text>\n              </FlexBox>\n              <Text variant=\"p-small\">\n                Please remember to mark your calendar.\n              </Text>\n            </Box>\n          ),\n          id: 'you-are-going-toast',\n        },\n      ]}\n      onClose={onClose}\n    />\n  );\n};\n"],"mappings":";;;;;AAQA,MAAaM,uBAA2D,EACtEC,cACD;AACC,QACE,sBAAA,cAACJ,SAAAA;EACCK,QAAQ,CACN;GACEC,UACE,sBAAA,cAACT,KAAAA,MACC,sBAAA,cAACC,SAAAA,EAAQS,YAAW,YAClB,sBAAA,cAACN,cAAAA;IAAaO,MAAM;IAAIC,IAAI;IAAGC,IAAI;OACnC,sBAAA,cAACX,MAAAA;IAAKY,SAAQ;IAASC,YAAW;IAAQF,IAAI;MAAG,gBAAA,CAAA,EAInD,sBAAA,cAACX,MAAAA,EAAKY,SAAQ,aAAU,yCAAA,CAAA;GAK5BE,IAAI;GACN,CACD;EACQT"}

package/dist/ContentGroupBaseCard/helpers.cjs

@@ -0,0 +1,16 @@
+const require_types = require('./types.cjs');
+
+//#region src/ContentGroupBaseCard/helpers.ts
+const getPathImageUrl = (enrollment, imageUrl) => {
+	if (enrollment === require_types.EnrollmentStatus.InProgress) return imageUrl.replace("-inProgress", "");
+	if (enrollment === require_types.EnrollmentStatus.Completed) return imageUrl.replace("-completed", "");
+	return imageUrl;
+};
+const getTimeToCompleteDisplayAmount = (amount) => amount <= 0 ? "< 1" : amount;
+const getTimeToCompleteDisplayDuration = (amount) => amount <= 1 ? "hour" : "hours";
+
+//#endregion
+exports.getPathImageUrl = getPathImageUrl;
+exports.getTimeToCompleteDisplayAmount = getTimeToCompleteDisplayAmount;
+exports.getTimeToCompleteDisplayDuration = getTimeToCompleteDisplayDuration;
+//# sourceMappingURL=helpers.cjs.map

package/dist/ContentGroupBaseCard/helpers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.cjs","names":["EnrollmentStatus","getPathImageUrl","enrollment","imageUrl","InProgress","replace","Completed","getTimeToCompleteDisplayAmount","amount","getTimeToCompleteDisplayDuration"],"sources":["../../src/ContentGroupBaseCard/helpers.ts"],"sourcesContent":["import { EnrollmentStatus } from './types';\n\nexport const getPathImageUrl = (\n  enrollment: EnrollmentStatus,\n  imageUrl: string\n) => {\n  if (enrollment === EnrollmentStatus.InProgress) {\n    return imageUrl.replace('-inProgress', '');\n  }\n  if (enrollment === EnrollmentStatus.Completed) {\n    return imageUrl.replace('-completed', '');\n  }\n  return imageUrl;\n};\n\nexport const getTimeToCompleteDisplayAmount = (amount: number) =>\n  amount <= 0 ? '< 1' : amount;\n\nexport const getTimeToCompleteDisplayDuration = (amount: number) =>\n  amount <= 1 ? 'hour' : 'hours';\n"],"mappings":";;;AAEA,MAAaC,mBACXC,YACAC,aAAAA;AAEA,KAAID,eAAeF,+BAAiBI,WAClC,QAAOD,SAASE,QAAQ,eAAe,GAAA;AAEzC,KAAIH,eAAeF,+BAAiBM,UAClC,QAAOH,SAASE,QAAQ,cAAc,GAAA;AAExC,QAAOF;;AAGT,MAAaI,kCAAkCC,WAC7CA,UAAU,IAAI,QAAQA;AAExB,MAAaC,oCAAoCD,WAC/CA,UAAU,IAAI,SAAS"}

package/dist/ContentGroupBaseCard/helpers.d.cts

@@ -0,0 +1,9 @@
+import { EnrollmentStatus } from "./types.cjs";
+
+//#region src/ContentGroupBaseCard/helpers.d.ts
+declare const getPathImageUrl: (enrollment: EnrollmentStatus, imageUrl: string) => string;
+declare const getTimeToCompleteDisplayAmount: (amount: number) => number | "< 1";
+declare const getTimeToCompleteDisplayDuration: (amount: number) => "hour" | "hours";
+//#endregion
+export { getPathImageUrl, getTimeToCompleteDisplayAmount, getTimeToCompleteDisplayDuration };
+//# sourceMappingURL=helpers.d.cts.map

package/dist/ContentGroupBaseCard/helpers.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.cts","names":[],"sources":["../../src/ContentGroupBaseCard/helpers.ts"],"mappings":";;;cAEa,eAAA,GACX,UAAA,EAAY,gBAAA,EACZ,QAAA;AAAA,cAWW,8BAAA,GAAkC,MAAA;AAAA,cAGlC,gCAAA,GAAoC,MAAA"}

package/dist/ContentGroupBaseCard/helpers.d.ts

@@ -1,4 +1,9 @@
-import { EnrollmentStatus } from './types';
-export declare const getPathImageUrl: (enrollment: EnrollmentStatus, imageUrl: string) => string;
-export declare const getTimeToCompleteDisplayAmount: (amount: number) => number | "< 1";
-export declare const getTimeToCompleteDisplayDuration: (amount: number) => "hour" | "hours";
+import { EnrollmentStatus } from "./types.js";
+
+//#region src/ContentGroupBaseCard/helpers.d.ts
+declare const getPathImageUrl: (enrollment: EnrollmentStatus, imageUrl: string) => string;
+declare const getTimeToCompleteDisplayAmount: (amount: number) => number | "< 1";
+declare const getTimeToCompleteDisplayDuration: (amount: number) => "hour" | "hours";
+//#endregion
+export { getPathImageUrl, getTimeToCompleteDisplayAmount, getTimeToCompleteDisplayDuration };
+//# sourceMappingURL=helpers.d.ts.map

package/dist/ContentGroupBaseCard/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","names":[],"sources":["../../src/ContentGroupBaseCard/helpers.ts"],"mappings":";;;cAEa,eAAA,GACX,UAAA,EAAY,gBAAA,EACZ,QAAA;AAAA,cAWW,8BAAA,GAAkC,MAAA;AAAA,cAGlC,gCAAA,GAAoC,MAAA"}

package/dist/ContentGroupBaseCard/helpers.js

@@ -1,12 +1,14 @@
-import { EnrollmentStatus } from './types';
-export const getPathImageUrl = (enrollment, imageUrl) => {
-  if (enrollment === EnrollmentStatus.InProgress) {
-    return imageUrl.replace('-inProgress', '');
-  }
-  if (enrollment === EnrollmentStatus.Completed) {
-    return imageUrl.replace('-completed', '');
-  }
-  return imageUrl;
+import { EnrollmentStatus } from "./types.js";
+
+//#region src/ContentGroupBaseCard/helpers.ts
+const getPathImageUrl = (enrollment, imageUrl) => {
+	if (enrollment === EnrollmentStatus.InProgress) return imageUrl.replace("-inProgress", "");
+	if (enrollment === EnrollmentStatus.Completed) return imageUrl.replace("-completed", "");
+	return imageUrl;
 };
-export const getTimeToCompleteDisplayAmount = amount => amount <= 0 ? '< 1' : amount;
-export const getTimeToCompleteDisplayDuration = amount => amount <= 1 ? 'hour' : 'hours';
+const getTimeToCompleteDisplayAmount = (amount) => amount <= 0 ? "< 1" : amount;
+const getTimeToCompleteDisplayDuration = (amount) => amount <= 1 ? "hour" : "hours";
+
+//#endregion
+export { getPathImageUrl, getTimeToCompleteDisplayAmount, getTimeToCompleteDisplayDuration };
+//# sourceMappingURL=helpers.js.map

package/dist/ContentGroupBaseCard/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":["EnrollmentStatus","getPathImageUrl","enrollment","imageUrl","InProgress","replace","Completed","getTimeToCompleteDisplayAmount","amount","getTimeToCompleteDisplayDuration"],"sources":["../../src/ContentGroupBaseCard/helpers.ts"],"sourcesContent":["import { EnrollmentStatus } from './types';\n\nexport const getPathImageUrl = (\n  enrollment: EnrollmentStatus,\n  imageUrl: string\n) => {\n  if (enrollment === EnrollmentStatus.InProgress) {\n    return imageUrl.replace('-inProgress', '');\n  }\n  if (enrollment === EnrollmentStatus.Completed) {\n    return imageUrl.replace('-completed', '');\n  }\n  return imageUrl;\n};\n\nexport const getTimeToCompleteDisplayAmount = (amount: number) =>\n  amount <= 0 ? '< 1' : amount;\n\nexport const getTimeToCompleteDisplayDuration = (amount: number) =>\n  amount <= 1 ? 'hour' : 'hours';\n"],"mappings":";;;AAEA,MAAaC,mBACXC,YACAC,aAAAA;AAEA,KAAID,eAAeF,iBAAiBI,WAClC,QAAOD,SAASE,QAAQ,eAAe,GAAA;AAEzC,KAAIH,eAAeF,iBAAiBM,UAClC,QAAOH,SAASE,QAAQ,cAAc,GAAA;AAExC,QAAOF;;AAGT,MAAaI,kCAAkCC,WAC7CA,UAAU,IAAI,QAAQA;AAExB,MAAaC,oCAAoCD,WAC/CA,UAAU,IAAI,SAAS"}

package/dist/ContentGroupBaseCard/index.cjs

@@ -0,0 +1,167 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_types = require('./types.cjs');
+const require_helpers = require('./helpers.cjs');
+const require_shared = require('./shared.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+let pluralize = require("pluralize");
+pluralize = require_runtime.__toESM(pluralize);
+
+//#region src/ContentGroupBaseCard/index.tsx
+const Image = _codecademy_gamut.Box.withComponent("img");
+const CardAnchor = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Anchor, {
+	target: "em7qvl80",
+	label: "brand-CardAnchor"
+})((0, _codecademy_gamut_styles.css)({
+	"&:hover, &:focus, &:focus-visible": { color: "text" },
+	"&:before": { inset: 2 }
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0NvbnRlbnRHcm91cEJhc2VDYXJkL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0NvbnRlbnRHcm91cEJhc2VDYXJkL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBbmNob3IsXG4gIEJveCxcbiAgQ2FyZCxcbiAgRmxleEJveCxcbiAgSGVhZGluZ1RhZ3MsXG4gIFRleHQsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IExldmVsSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IEJhY2tncm91bmQsIENvbG9ycywgY3NzLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgcGx1cmFsaXplIGZyb20gJ3BsdXJhbGl6ZSc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgUHJvcHNXaXRoUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBnZXRUaW1lVG9Db21wbGV0ZURpc3BsYXlBbW91bnQsXG4gIGdldFRpbWVUb0NvbXBsZXRlRGlzcGxheUR1cmF0aW9uLFxufSBmcm9tICcuL2hlbHBlcnMnO1xuaW1wb3J0IHsgRGl2aWRlciB9IGZyb20gJy4vc2hhcmVkJztcbmltcG9ydCB7IENvdXJzZURpZmZpY3VsdHksIEVucm9sbG1lbnRTdGF0dXMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgSW1hZ2UgPSBCb3gud2l0aENvbXBvbmVudCgnaW1nJyk7XG5cbmNvbnN0IENhcmRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICAnJjpob3ZlciwgJjpmb2N1cywgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOmJlZm9yZSc6IHtcbiAgICAgIGluc2V0OiAyLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBDb250ZW50R3JvdXBCYXNlQ2FyZFByb3BzID0ge1xuICBoZWFkZXJCYWNrZ3JvdW5kQ29sb3I6IENvbG9ycztcbiAgaGVhZGVyVGV4dDogc3RyaW5nO1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkaW5nTGV2ZWw/OiBIZWFkaW5nVGFncztcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmcgfCBudWxsO1xuICBkaWZmaWN1bHR5PzogQ291cnNlRGlmZmljdWx0eSB8IG51bGw7XG4gIG51bUxlc3NvbnM6IG51bWJlcjtcbiAgaW1hZ2VTcmM/OiBzdHJpbmc7XG4gIGlzRnVsbFNpemU/OiBib29sZWFuO1xuICBzaGFkb3c/OiAnbm9uZScgfCAnb3V0bGluZSc7XG4gIGVucm9sbG1lbnRTdGF0dXM/OiBFbnJvbGxtZW50U3RhdHVzO1xuICB0aW1lVG9Db21wbGV0ZT86IG51bWJlciB8IG51bGw7XG4gIGJyYW5kRGV0YWlscz86IHtcbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgbG9nb1VybDogc3RyaW5nO1xuICAgIGxvZ29IZWlnaHQ6IG51bWJlcjtcbiAgfTtcbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGhlYWRlcj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZm9vdGVyPzogUmVhY3QuUmVhY3ROb2RlO1xuICBvcGVuSW5OZXdUYWI/OiBib29sZWFuO1xuICBocmVmOiBzdHJpbmc7XG4gIG9uQ2xpY2s6ICgpID0+IHZvaWQ7XG59O1xuXG50eXBlIEVucm9sbG1lbnRTdGF0dXNBc3NldHMgPSB7XG4gIFtzdGF0dXMgaW5cbiAgICB8IEVucm9sbG1lbnRTdGF0dXMuSW5Qcm9ncmVzc1xuICAgIHwgRW5yb2xsbWVudFN0YXR1cy5Db21wbGV0ZWRcbiAgICB8IEVucm9sbG1lbnRTdGF0dXMuTm9uZV06IHtcbiAgICB0ZXh0OiBzdHJpbmc7XG4gICAgYmFja2dyb3VuZENvbG9yOiBDb2xvcnM7XG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgQ29udGVudEdyb3VwQmFzZUNhcmRIZWFkZXJCYWNrZ3JvdW5kID0gc3R5bGVkKEJhY2tncm91bmQpKFxuICBjc3Moe1xuICAgIHBsOiAxMixcbiAgICBweTogNCxcbiAgICBib3JkZXJSYWRpdXNUb3A6ICdtZCcsXG4gICAgYm9yZGVyUmFkaXVzQm90dG9tOiAnbm9uZScsXG4gICAgYm94U2hhZG93OiBgaW5zZXQgMCAwIDAgMXB4ICR7dGhlbWUuY29sb3JzLndoaXRlfWAsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQ29udGVudEdyb3VwQmFzZUNhcmQgPSBmb3J3YXJkUmVmPFxuICBIVE1MQW5jaG9yRWxlbWVudCxcbiAgUHJvcHNXaXRoUmVmPENvbnRlbnRHcm91cEJhc2VDYXJkUHJvcHM+XG4+KFxuICAoXG4gICAge1xuICAgICAgaGVhZGVyQmFja2dyb3VuZENvbG9yLFxuICAgICAgaGVhZGVyVGV4dCxcbiAgICAgIHRpdGxlLFxuICAgICAgaGVhZGluZ0xldmVsLFxuICAgICAgZGVzY3JpcHRpb24sXG4gICAgICBkaWZmaWN1bHR5LFxuICAgICAgbnVtTGVzc29ucyxcbiAgICAgIGltYWdlU3JjLFxuICAgICAgaXNGdWxsU2l6ZSA9IGZhbHNlLFxuICAgICAgc2hhZG93ID0gJ25vbmUnLFxuICAgICAgZW5yb2xsbWVudFN0YXR1cyxcbiAgICAgIHRpbWVUb0NvbXBsZXRlLFxuICAgICAgYnJhbmREZXRhaWxzLFxuICAgICAgY2hpbGRyZW4sXG4gICAgICBoZWFkZXIsXG4gICAgICBmb290ZXIsXG4gICAgICBvcGVuSW5OZXdUYWIgPSBmYWxzZSxcbiAgICAgIGhyZWYsXG4gICAgICBvbkNsaWNrLFxuICAgIH0sXG4gICAgcmVmXG4gICkgPT4ge1xuICAgIGNvbnN0IGVucm9sbG1lbnRBc3NldHM6IEVucm9sbG1lbnRTdGF0dXNBc3NldHMgPSB7XG4gICAgICBjb21wbGV0ZWQ6IHsgdGV4dDogaGVhZGVyVGV4dCArICcgY29tcGxldGVkIScsIGJhY2tncm91bmRDb2xvcjogJ2dyZWVuJyB9LFxuICAgICAgaW5Qcm9ncmVzczogeyB0ZXh0OiAnSW4gcHJvZ3Jlc3MuLi4nLCBiYWNrZ3JvdW5kQ29sb3I6ICd5ZWxsb3cnIH0sXG4gICAgICBub25lOiB7IHRleHQ6IGhlYWRlclRleHQsIGJhY2tncm91bmRDb2xvcjogaGVhZGVyQmFja2dyb3VuZENvbG9yIH0sXG4gICAgfTtcblxuICAgIGNvbnN0IGlzRW5yb2xsZWQgPVxuICAgICAgZW5yb2xsbWVudFN0YXR1cyA9PT0gRW5yb2xsbWVudFN0YXR1cy5JblByb2dyZXNzIHx8XG4gICAgICBlbnJvbGxtZW50U3RhdHVzID09PSBFbnJvbGxtZW50U3RhdHVzLkNvbXBsZXRlZDtcblxuICAgIGNvbnN0IGlzQmVnaW5uZXJDb250YWluZXIgPSBkaWZmaWN1bHR5ID09PSBDb3Vyc2VEaWZmaWN1bHR5LkJlZ2lubmVyO1xuXG4gICAgY29uc3QgcmVuZGVyVGltZVRvQ29tcGxldGVPck51bUxlc3NvbnMgPSAoKSA9PiB7XG4gICAgICBpZiAodHlwZW9mIHRpbWVUb0NvbXBsZXRlID09PSAnbnVtYmVyJyAmJiB0aW1lVG9Db21wbGV0ZSA+PSAwKSB7XG4gICAgICAgIGNvbnN0IGRpc3BsYXlBbW91bnQgPSBnZXRUaW1lVG9Db21wbGV0ZURpc3BsYXlBbW91bnQodGltZVRvQ29tcGxldGUpO1xuICAgICAgICBjb25zdCBkaXNwbGF5RHVyYXRpb24gPVxuICAgICAgICAgIGdldFRpbWVUb0NvbXBsZXRlRGlzcGxheUR1cmF0aW9uKHRpbWVUb0NvbXBsZXRlKTtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaXNwbGF5QW1vdW50fSAke2Rpc3BsYXlEdXJhdGlvbn1gfTwvVGV4dD5cbiAgICAgICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJwLXNtYWxsXCIgcGw9ezR9IHdoaXRlU3BhY2U9XCJub3dyYXBcIiBhcmlhLWhpZGRlbj5cbiAgICAgICAgICAgICAgPGI+e2Rpc3BsYXlBbW91bnR9PC9iPiB7ZGlzcGxheUR1cmF0aW9ufVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApO1xuICAgICAgfVxuICAgICAgaWYgKG51bUxlc3NvbnMgPiAwKSB7XG4gICAgICAgIGNvbnN0IGxhYmVsID0gcGx1cmFsaXplKCdMZXNzb24nLCBudW1MZXNzb25zKTtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtudW1MZXNzb25zfSAke2xhYmVsfWB9PC9UZXh0PlxuICAgICAgICAgICAgPFRleHQgdmFyaWFudD1cInAtc21hbGxcIiBwbD17NH0gd2hpdGVTcGFjZT1cIm5vd3JhcFwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8Yj57bnVtTGVzc29uc308L2I+IHtsYWJlbH1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKTtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8Q2FyZFxuICAgICAgICB2YXJpYW50PXtpc0Vucm9sbGVkID8gJ2JlaWdlJyA6ICd3aGl0ZSd9XG4gICAgICAgIGJvcmRlclJhZGl1cz1cIm1kXCJcbiAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItcHJpbWFyeVwiXG4gICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgc2hhZG93PXtzaGFkb3d9XG4gICAgICAgIGlzSW50ZXJhY3RpdmVcbiAgICAgICAgcD17MH1cbiAgICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgc3R5bGU9e3sgY3Vyc29yOiAncG9pbnRlcicgfX1cbiAgICAgICAgb25DbGljaz17KGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgICAgICAvLyBvbmx5IGhhbmRsZSBjbGlja3MgaWYgdGhleSBkaWRuJ3QgY29tZSBmcm9tIHRoZSBhbmNob3IgdG8gYXZvaWQgZG91YmxlIG5hdmlnYXRpb25cbiAgICAgICAgICBpZiAoKGUudGFyZ2V0IGFzIEhUTUxFbGVtZW50KS5jbG9zZXN0KCdhJykgPT09IG51bGwpIHtcbiAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIG9uQ2xpY2s/LigpO1xuICAgICAgICAgIH1cbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+XG4gICAgICAgICAgPENhcmRBbmNob3JcbiAgICAgICAgICAgIGhyZWY9e2hyZWZ9XG4gICAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgICAgICBkaXNwbGF5PVwiYmxvY2tcIlxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICB0YXJnZXQ9e29wZW5Jbk5ld1RhYiA/ICdfYmxhbmsnIDogdW5kZWZpbmVkfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtoZWFkZXIgfHwgKFxuICAgICAgICAgICAgICA8Q29udGVudEdyb3VwQmFzZUNhcmRIZWFkZXJCYWNrZ3JvdW5kXG4gICAgICAgICAgICAgICAgYmc9e1xuICAgICAgICAgICAgICAgICAgZW5yb2xsbWVudFN0YXR1c1xuICAgICAgICAgICAgICAgICAgICA/IGVucm9sbG1lbnRBc3NldHNbZW5yb2xsbWVudFN0YXR1c10uYmFja2dyb3VuZENvbG9yXG4gICAgICAgICAgICAgICAgICAgIDogaGVhZGVyQmFja2dyb3VuZENvbG9yXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPFRleHQgZm9udEZhbWlseT1cImFjY2VudFwiIGZvbnRTaXplPXsxNH0+XG4gICAgICAgICAgICAgICAgICB7ZW5yb2xsbWVudFN0YXR1c1xuICAgICAgICAgICAgICAgICAgICA/IGVucm9sbG1lbnRBc3NldHNbZW5yb2xsbWVudFN0YXR1c10udGV4dFxuICAgICAgICAgICAgICAgICAgICA6IGhlYWRlclRleHR9XG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICA8L0NvbnRlbnRHcm91cEJhc2VDYXJkSGVhZGVyQmFja2dyb3VuZD5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8RmxleEJveFxuICAgICAgICAgICAgICBweD17MTJ9XG4gICAgICAgICAgICAgIHB0PXs0fVxuICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7YnJhbmREZXRhaWxzPy5sb2dvVXJsICYmIChcbiAgICAgICAgICAgICAgICA8SW1hZ2VcbiAgICAgICAgICAgICAgICAgIHNyYz17YnJhbmREZXRhaWxzLmxvZ29Vcmx9XG4gICAgICAgICAgICAgICAgICBhbHQ9e2JyYW5kRGV0YWlscy5uYW1lfVxuICAgICAgICAgICAgICAgICAgd2lkdGg9XCJhdXRvXCJcbiAgICAgICAgICAgICAgICAgIGhlaWdodD17YnJhbmREZXRhaWxzLmxvZ29IZWlnaHR9XG4gICAgICAgICAgICAgICAgICBtdD17MTJ9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICB2YXJpYW50PVwidGl0bGUteHNcIlxuICAgICAgICAgICAgICAgIGFzPXtoZWFkaW5nTGV2ZWx9XG4gICAgICAgICAgICAgICAgcHQ9e2JyYW5kRGV0YWlscz8ubG9nb1VybCA/IDggOiAxMn1cbiAgICAgICAgICAgICAgICBwYj17NH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgIDwvQ2FyZEFuY2hvcj5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxGbGV4Qm94XG4gICAgICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgbXg9ezEyfVxuICAgICAgICAgIG15PXs0fVxuICAgICAgICAgIGhlaWdodD1cIjEwMCVcIlxuICAgICAgICAgIG1heFdpZHRoPXtpc0Z1bGxTaXplID8geyBtZDogJ2NhbGMoMTAwJSAtIDIyOHB4KScgfSA6ICcxMDAlJ31cbiAgICAgICAgPlxuICAgICAgICAgIHtkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXszfVxuICAgICAgICAgICAgICBtYj17MTZ9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICApfVxuICAgICAgICAgIDxCb3ggYXM9XCJ1bFwiIGxpc3RTdHlsZT1cIm5vbmVcIiBwPXswfSBtPXswfSBtdD1cImF1dG9cIj5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxCb3ggYXM9XCJsaVwiPlxuICAgICAgICAgICAgICA8RGl2aWRlciAvPlxuICAgICAgICAgICAgICA8RmxleEJveCBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIiBmbGV4V3JhcD1cIndyYXBcIj5cbiAgICAgICAgICAgICAgICB7ZGlmZmljdWx0eSAmJiAoXG4gICAgICAgICAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICAgIDxMZXZlbEljb24gLz5cbiAgICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICcgRnJpZW5kbHknIDogJydcbiAgICAgICAgICAgICAgICAgICAgfS5gfTwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgICAgICAgICAgICAgICAgICAgcGw9ezh9XG4gICAgICAgICAgICAgICAgICAgICAgd2hpdGVTcGFjZT1cIm5vd3JhcFwiXG4gICAgICAgICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJjYXJkLWRpZmZpY3VsdHlcIlxuICAgICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICA8Yj57ZGlmZmljdWx0eX08L2I+XG4gICAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIHtyZW5kZXJUaW1lVG9Db21wbGV0ZU9yTnVtTGVzc29ucygpfVxuICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgICB7Zm9vdGVyfVxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDxCb3hcbiAgICAgICAgICBkaXNwbGF5PXtpc0Z1bGxTaXplID8geyBfOiAnbm9uZScsIG1kOiAnZmxleCcgfSA6ICdub25lJ31cbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICAgICAgcHg9ezY0fVxuICAgICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICAgIHRvcD17MzJ9XG4gICAgICAgICAgYm90dG9tPXswfVxuICAgICAgICAgIHJpZ2h0PXswfVxuICAgICAgICA+XG4gICAgICAgICAgPEltYWdlIGFyaWEtaGlkZGVuIHdpZHRoPXsxMDB9IGhlaWdodD17MTAwfSBzcmM9e2ltYWdlU3JjfSAvPlxuICAgICAgICA8L0JveD5cbiAgICAgIDwvQ2FyZD5cbiAgICApO1xuICB9XG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCbUIifQ== */");
+const ContentGroupBaseCardHeaderBackground = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut_styles.Background, {
+	target: "em7qvl81",
+	label: "brand-ContentGroupBaseCardHeaderBackground"
+})((0, _codecademy_gamut_styles.css)({
+	pl: 12,
+	py: 4,
+	borderRadiusTop: "md",
+	borderRadiusBottom: "none",
+	boxShadow: `inset 0 0 0 1px ${_codecademy_gamut_styles.theme.colors.white}`
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0NvbnRlbnRHcm91cEJhc2VDYXJkL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0NvbnRlbnRHcm91cEJhc2VDYXJkL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBbmNob3IsXG4gIEJveCxcbiAgQ2FyZCxcbiAgRmxleEJveCxcbiAgSGVhZGluZ1RhZ3MsXG4gIFRleHQsXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IExldmVsSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IEJhY2tncm91bmQsIENvbG9ycywgY3NzLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgcGx1cmFsaXplIGZyb20gJ3BsdXJhbGl6ZSc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgUHJvcHNXaXRoUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBnZXRUaW1lVG9Db21wbGV0ZURpc3BsYXlBbW91bnQsXG4gIGdldFRpbWVUb0NvbXBsZXRlRGlzcGxheUR1cmF0aW9uLFxufSBmcm9tICcuL2hlbHBlcnMnO1xuaW1wb3J0IHsgRGl2aWRlciB9IGZyb20gJy4vc2hhcmVkJztcbmltcG9ydCB7IENvdXJzZURpZmZpY3VsdHksIEVucm9sbG1lbnRTdGF0dXMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgSW1hZ2UgPSBCb3gud2l0aENvbXBvbmVudCgnaW1nJyk7XG5cbmNvbnN0IENhcmRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICAnJjpob3ZlciwgJjpmb2N1cywgJjpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgY29sb3I6ICd0ZXh0JyxcbiAgICB9LFxuICAgICcmOmJlZm9yZSc6IHtcbiAgICAgIGluc2V0OiAyLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBDb250ZW50R3JvdXBCYXNlQ2FyZFByb3BzID0ge1xuICBoZWFkZXJCYWNrZ3JvdW5kQ29sb3I6IENvbG9ycztcbiAgaGVhZGVyVGV4dDogc3RyaW5nO1xuICB0aXRsZTogc3RyaW5nO1xuICBoZWFkaW5nTGV2ZWw/OiBIZWFkaW5nVGFncztcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmcgfCBudWxsO1xuICBkaWZmaWN1bHR5PzogQ291cnNlRGlmZmljdWx0eSB8IG51bGw7XG4gIG51bUxlc3NvbnM6IG51bWJlcjtcbiAgaW1hZ2VTcmM/OiBzdHJpbmc7XG4gIGlzRnVsbFNpemU/OiBib29sZWFuO1xuICBzaGFkb3c/OiAnbm9uZScgfCAnb3V0bGluZSc7XG4gIGVucm9sbG1lbnRTdGF0dXM/OiBFbnJvbGxtZW50U3RhdHVzO1xuICB0aW1lVG9Db21wbGV0ZT86IG51bWJlciB8IG51bGw7XG4gIGJyYW5kRGV0YWlscz86IHtcbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgbG9nb1VybDogc3RyaW5nO1xuICAgIGxvZ29IZWlnaHQ6IG51bWJlcjtcbiAgfTtcbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGhlYWRlcj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZm9vdGVyPzogUmVhY3QuUmVhY3ROb2RlO1xuICBvcGVuSW5OZXdUYWI/OiBib29sZWFuO1xuICBocmVmOiBzdHJpbmc7XG4gIG9uQ2xpY2s6ICgpID0+IHZvaWQ7XG59O1xuXG50eXBlIEVucm9sbG1lbnRTdGF0dXNBc3NldHMgPSB7XG4gIFtzdGF0dXMgaW5cbiAgICB8IEVucm9sbG1lbnRTdGF0dXMuSW5Qcm9ncmVzc1xuICAgIHwgRW5yb2xsbWVudFN0YXR1cy5Db21wbGV0ZWRcbiAgICB8IEVucm9sbG1lbnRTdGF0dXMuTm9uZV06IHtcbiAgICB0ZXh0OiBzdHJpbmc7XG4gICAgYmFja2dyb3VuZENvbG9yOiBDb2xvcnM7XG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgQ29udGVudEdyb3VwQmFzZUNhcmRIZWFkZXJCYWNrZ3JvdW5kID0gc3R5bGVkKEJhY2tncm91bmQpKFxuICBjc3Moe1xuICAgIHBsOiAxMixcbiAgICBweTogNCxcbiAgICBib3JkZXJSYWRpdXNUb3A6ICdtZCcsXG4gICAgYm9yZGVyUmFkaXVzQm90dG9tOiAnbm9uZScsXG4gICAgYm94U2hhZG93OiBgaW5zZXQgMCAwIDAgMXB4ICR7dGhlbWUuY29sb3JzLndoaXRlfWAsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQ29udGVudEdyb3VwQmFzZUNhcmQgPSBmb3J3YXJkUmVmPFxuICBIVE1MQW5jaG9yRWxlbWVudCxcbiAgUHJvcHNXaXRoUmVmPENvbnRlbnRHcm91cEJhc2VDYXJkUHJvcHM+XG4+KFxuICAoXG4gICAge1xuICAgICAgaGVhZGVyQmFja2dyb3VuZENvbG9yLFxuICAgICAgaGVhZGVyVGV4dCxcbiAgICAgIHRpdGxlLFxuICAgICAgaGVhZGluZ0xldmVsLFxuICAgICAgZGVzY3JpcHRpb24sXG4gICAgICBkaWZmaWN1bHR5LFxuICAgICAgbnVtTGVzc29ucyxcbiAgICAgIGltYWdlU3JjLFxuICAgICAgaXNGdWxsU2l6ZSA9IGZhbHNlLFxuICAgICAgc2hhZG93ID0gJ25vbmUnLFxuICAgICAgZW5yb2xsbWVudFN0YXR1cyxcbiAgICAgIHRpbWVUb0NvbXBsZXRlLFxuICAgICAgYnJhbmREZXRhaWxzLFxuICAgICAgY2hpbGRyZW4sXG4gICAgICBoZWFkZXIsXG4gICAgICBmb290ZXIsXG4gICAgICBvcGVuSW5OZXdUYWIgPSBmYWxzZSxcbiAgICAgIGhyZWYsXG4gICAgICBvbkNsaWNrLFxuICAgIH0sXG4gICAgcmVmXG4gICkgPT4ge1xuICAgIGNvbnN0IGVucm9sbG1lbnRBc3NldHM6IEVucm9sbG1lbnRTdGF0dXNBc3NldHMgPSB7XG4gICAgICBjb21wbGV0ZWQ6IHsgdGV4dDogaGVhZGVyVGV4dCArICcgY29tcGxldGVkIScsIGJhY2tncm91bmRDb2xvcjogJ2dyZWVuJyB9LFxuICAgICAgaW5Qcm9ncmVzczogeyB0ZXh0OiAnSW4gcHJvZ3Jlc3MuLi4nLCBiYWNrZ3JvdW5kQ29sb3I6ICd5ZWxsb3cnIH0sXG4gICAgICBub25lOiB7IHRleHQ6IGhlYWRlclRleHQsIGJhY2tncm91bmRDb2xvcjogaGVhZGVyQmFja2dyb3VuZENvbG9yIH0sXG4gICAgfTtcblxuICAgIGNvbnN0IGlzRW5yb2xsZWQgPVxuICAgICAgZW5yb2xsbWVudFN0YXR1cyA9PT0gRW5yb2xsbWVudFN0YXR1cy5JblByb2dyZXNzIHx8XG4gICAgICBlbnJvbGxtZW50U3RhdHVzID09PSBFbnJvbGxtZW50U3RhdHVzLkNvbXBsZXRlZDtcblxuICAgIGNvbnN0IGlzQmVnaW5uZXJDb250YWluZXIgPSBkaWZmaWN1bHR5ID09PSBDb3Vyc2VEaWZmaWN1bHR5LkJlZ2lubmVyO1xuXG4gICAgY29uc3QgcmVuZGVyVGltZVRvQ29tcGxldGVPck51bUxlc3NvbnMgPSAoKSA9PiB7XG4gICAgICBpZiAodHlwZW9mIHRpbWVUb0NvbXBsZXRlID09PSAnbnVtYmVyJyAmJiB0aW1lVG9Db21wbGV0ZSA+PSAwKSB7XG4gICAgICAgIGNvbnN0IGRpc3BsYXlBbW91bnQgPSBnZXRUaW1lVG9Db21wbGV0ZURpc3BsYXlBbW91bnQodGltZVRvQ29tcGxldGUpO1xuICAgICAgICBjb25zdCBkaXNwbGF5RHVyYXRpb24gPVxuICAgICAgICAgIGdldFRpbWVUb0NvbXBsZXRlRGlzcGxheUR1cmF0aW9uKHRpbWVUb0NvbXBsZXRlKTtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaXNwbGF5QW1vdW50fSAke2Rpc3BsYXlEdXJhdGlvbn1gfTwvVGV4dD5cbiAgICAgICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJwLXNtYWxsXCIgcGw9ezR9IHdoaXRlU3BhY2U9XCJub3dyYXBcIiBhcmlhLWhpZGRlbj5cbiAgICAgICAgICAgICAgPGI+e2Rpc3BsYXlBbW91bnR9PC9iPiB7ZGlzcGxheUR1cmF0aW9ufVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgIDwvPlxuICAgICAgICApO1xuICAgICAgfVxuICAgICAgaWYgKG51bUxlc3NvbnMgPiAwKSB7XG4gICAgICAgIGNvbnN0IGxhYmVsID0gcGx1cmFsaXplKCdMZXNzb24nLCBudW1MZXNzb25zKTtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtudW1MZXNzb25zfSAke2xhYmVsfWB9PC9UZXh0PlxuICAgICAgICAgICAgPFRleHQgdmFyaWFudD1cInAtc21hbGxcIiBwbD17NH0gd2hpdGVTcGFjZT1cIm5vd3JhcFwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8Yj57bnVtTGVzc29uc308L2I+IHtsYWJlbH1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKTtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8Q2FyZFxuICAgICAgICB2YXJpYW50PXtpc0Vucm9sbGVkID8gJ2JlaWdlJyA6ICd3aGl0ZSd9XG4gICAgICAgIGJvcmRlclJhZGl1cz1cIm1kXCJcbiAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItcHJpbWFyeVwiXG4gICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgc2hhZG93PXtzaGFkb3d9XG4gICAgICAgIGlzSW50ZXJhY3RpdmVcbiAgICAgICAgcD17MH1cbiAgICAgICAgaGVpZ2h0PVwiMTAwJVwiXG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgc3R5bGU9e3sgY3Vyc29yOiAncG9pbnRlcicgfX1cbiAgICAgICAgb25DbGljaz17KGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgICAgICAvLyBvbmx5IGhhbmRsZSBjbGlja3MgaWYgdGhleSBkaWRuJ3QgY29tZSBmcm9tIHRoZSBhbmNob3IgdG8gYXZvaWQgZG91YmxlIG5hdmlnYXRpb25cbiAgICAgICAgICBpZiAoKGUudGFyZ2V0IGFzIEhUTUxFbGVtZW50KS5jbG9zZXN0KCdhJykgPT09IG51bGwpIHtcbiAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIG9uQ2xpY2s/LigpO1xuICAgICAgICAgIH1cbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+XG4gICAgICAgICAgPENhcmRBbmNob3JcbiAgICAgICAgICAgIGhyZWY9e2hyZWZ9XG4gICAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgICAgICBkaXNwbGF5PVwiYmxvY2tcIlxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICB0YXJnZXQ9e29wZW5Jbk5ld1RhYiA/ICdfYmxhbmsnIDogdW5kZWZpbmVkfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtoZWFkZXIgfHwgKFxuICAgICAgICAgICAgICA8Q29udGVudEdyb3VwQmFzZUNhcmRIZWFkZXJCYWNrZ3JvdW5kXG4gICAgICAgICAgICAgICAgYmc9e1xuICAgICAgICAgICAgICAgICAgZW5yb2xsbWVudFN0YXR1c1xuICAgICAgICAgICAgICAgICAgICA/IGVucm9sbG1lbnRBc3NldHNbZW5yb2xsbWVudFN0YXR1c10uYmFja2dyb3VuZENvbG9yXG4gICAgICAgICAgICAgICAgICAgIDogaGVhZGVyQmFja2dyb3VuZENvbG9yXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPFRleHQgZm9udEZhbWlseT1cImFjY2VudFwiIGZvbnRTaXplPXsxNH0+XG4gICAgICAgICAgICAgICAgICB7ZW5yb2xsbWVudFN0YXR1c1xuICAgICAgICAgICAgICAgICAgICA/IGVucm9sbG1lbnRBc3NldHNbZW5yb2xsbWVudFN0YXR1c10udGV4dFxuICAgICAgICAgICAgICAgICAgICA6IGhlYWRlclRleHR9XG4gICAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICA8L0NvbnRlbnRHcm91cEJhc2VDYXJkSGVhZGVyQmFja2dyb3VuZD5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8RmxleEJveFxuICAgICAgICAgICAgICBweD17MTJ9XG4gICAgICAgICAgICAgIHB0PXs0fVxuICAgICAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7YnJhbmREZXRhaWxzPy5sb2dvVXJsICYmIChcbiAgICAgICAgICAgICAgICA8SW1hZ2VcbiAgICAgICAgICAgICAgICAgIHNyYz17YnJhbmREZXRhaWxzLmxvZ29Vcmx9XG4gICAgICAgICAgICAgICAgICBhbHQ9e2JyYW5kRGV0YWlscy5uYW1lfVxuICAgICAgICAgICAgICAgICAgd2lkdGg9XCJhdXRvXCJcbiAgICAgICAgICAgICAgICAgIGhlaWdodD17YnJhbmREZXRhaWxzLmxvZ29IZWlnaHR9XG4gICAgICAgICAgICAgICAgICBtdD17MTJ9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICB2YXJpYW50PVwidGl0bGUteHNcIlxuICAgICAgICAgICAgICAgIGFzPXtoZWFkaW5nTGV2ZWx9XG4gICAgICAgICAgICAgICAgcHQ9e2JyYW5kRGV0YWlscz8ubG9nb1VybCA/IDggOiAxMn1cbiAgICAgICAgICAgICAgICBwYj17NH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgIDwvQ2FyZEFuY2hvcj5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxGbGV4Qm94XG4gICAgICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgbXg9ezEyfVxuICAgICAgICAgIG15PXs0fVxuICAgICAgICAgIGhlaWdodD1cIjEwMCVcIlxuICAgICAgICAgIG1heFdpZHRoPXtpc0Z1bGxTaXplID8geyBtZDogJ2NhbGMoMTAwJSAtIDIyOHB4KScgfSA6ICcxMDAlJ31cbiAgICAgICAgPlxuICAgICAgICAgIHtkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXszfVxuICAgICAgICAgICAgICBtYj17MTZ9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICApfVxuICAgICAgICAgIDxCb3ggYXM9XCJ1bFwiIGxpc3RTdHlsZT1cIm5vbmVcIiBwPXswfSBtPXswfSBtdD1cImF1dG9cIj5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDxCb3ggYXM9XCJsaVwiPlxuICAgICAgICAgICAgICA8RGl2aWRlciAvPlxuICAgICAgICAgICAgICA8RmxleEJveCBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIiBmbGV4V3JhcD1cIndyYXBcIj5cbiAgICAgICAgICAgICAgICB7ZGlmZmljdWx0eSAmJiAoXG4gICAgICAgICAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICAgIDxMZXZlbEljb24gLz5cbiAgICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICcgRnJpZW5kbHknIDogJydcbiAgICAgICAgICAgICAgICAgICAgfS5gfTwvVGV4dD5cbiAgICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgICB2YXJpYW50PVwicC1zbWFsbFwiXG4gICAgICAgICAgICAgICAgICAgICAgcGw9ezh9XG4gICAgICAgICAgICAgICAgICAgICAgd2hpdGVTcGFjZT1cIm5vd3JhcFwiXG4gICAgICAgICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJjYXJkLWRpZmZpY3VsdHlcIlxuICAgICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICA8Yj57ZGlmZmljdWx0eX08L2I+XG4gICAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIHtyZW5kZXJUaW1lVG9Db21wbGV0ZU9yTnVtTGVzc29ucygpfVxuICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgICB7Zm9vdGVyfVxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDxCb3hcbiAgICAgICAgICBkaXNwbGF5PXtpc0Z1bGxTaXplID8geyBfOiAnbm9uZScsIG1kOiAnZmxleCcgfSA6ICdub25lJ31cbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICAgICAgcHg9ezY0fVxuICAgICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICAgIHRvcD17MzJ9XG4gICAgICAgICAgYm90dG9tPXswfVxuICAgICAgICAgIHJpZ2h0PXswfVxuICAgICAgICA+XG4gICAgICAgICAgPEltYWdlIGFyaWEtaGlkZGVuIHdpZHRoPXsxMDB9IGhlaWdodD17MTAwfSBzcmM9e2ltYWdlU3JjfSAvPlxuICAgICAgICA8L0JveD5cbiAgICAgIDwvQ2FyZD5cbiAgICApO1xuICB9XG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNFb0QifQ== */");
+const ContentGroupBaseCard = /* @__PURE__ */ (0, react.forwardRef)(({ headerBackgroundColor, headerText, title, headingLevel, description, difficulty, numLessons, imageSrc, isFullSize = false, shadow = "none", enrollmentStatus, timeToComplete, brandDetails, children, header, footer, openInNewTab = false, href, onClick }, ref) => {
+	const enrollmentAssets = {
+		completed: {
+			text: headerText + " completed!",
+			backgroundColor: "green"
+		},
+		inProgress: {
+			text: "In progress...",
+			backgroundColor: "yellow"
+		},
+		none: {
+			text: headerText,
+			backgroundColor: headerBackgroundColor
+		}
+	};
+	const isEnrolled = enrollmentStatus === require_types.EnrollmentStatus.InProgress || enrollmentStatus === require_types.EnrollmentStatus.Completed;
+	const isBeginnerContainer = difficulty === require_types.CourseDifficulty.Beginner;
+	const renderTimeToCompleteOrNumLessons = () => {
+		if (typeof timeToComplete === "number" && timeToComplete >= 0) {
+			const displayAmount = require_helpers.getTimeToCompleteDisplayAmount(timeToComplete);
+			const displayDuration = require_helpers.getTimeToCompleteDisplayDuration(timeToComplete);
+			return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { screenreader: true }, `${displayAmount} ${displayDuration}`), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+				variant: "p-small",
+				pl: 4,
+				whiteSpace: "nowrap",
+				"aria-hidden": true
+			}, /* @__PURE__ */ react.default.createElement("b", null, displayAmount), " ", displayDuration));
+		}
+		if (numLessons > 0) {
+			const label = (0, pluralize.default)("Lesson", numLessons);
+			return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { screenreader: true }, `${numLessons} ${label}`), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+				variant: "p-small",
+				pl: 4,
+				whiteSpace: "nowrap",
+				"aria-hidden": true
+			}, /* @__PURE__ */ react.default.createElement("b", null, numLessons), " ", label));
+		}
+		return null;
+	};
+	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Card, {
+		variant: isEnrolled ? "beige" : "white",
+		borderRadius: "md",
+		borderColor: "border-primary",
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column",
+		shadow,
+		isInteractive: true,
+		p: 0,
+		height: "100%",
+		style: { cursor: "pointer" },
+		onClick: (e) => {
+			if (e.target.closest("a") === null) {
+				e.preventDefault();
+				onClick?.();
+			}
+		}
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, { position: "relative" }, /* @__PURE__ */ react.default.createElement(CardAnchor, {
+		href,
+		onClick,
+		variant: "interface",
+		display: "block",
+		ref,
+		target: openInNewTab ? "_blank" : void 0
+	}, header || /* @__PURE__ */ react.default.createElement(ContentGroupBaseCardHeaderBackground, { bg: enrollmentStatus ? enrollmentAssets[enrollmentStatus].backgroundColor : headerBackgroundColor }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		fontFamily: "accent",
+		fontSize: 14
+	}, enrollmentStatus ? enrollmentAssets[enrollmentStatus].text : headerText)), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		px: 12,
+		pt: 4,
+		flexDirection: "column",
+		alignItems: "flex-start"
+	}, brandDetails?.logoUrl && /* @__PURE__ */ react.default.createElement(Image, {
+		src: brandDetails.logoUrl,
+		alt: brandDetails.name,
+		width: "auto",
+		height: brandDetails.logoHeight,
+		mt: 12
+	}), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		variant: "title-xs",
+		as: headingLevel,
+		pt: brandDetails?.logoUrl ? 8 : 12,
+		pb: 4
+	}, title)))), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		textAlign: "left",
+		mx: 12,
+		my: 4,
+		height: "100%",
+		maxWidth: isFullSize ? { md: "calc(100% - 228px)" } : "100%"
+	}, description && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		variant: "p-small",
+		truncate: "ellipsis",
+		truncateLines: 3,
+		mb: 16
+	}, description), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
+		as: "ul",
+		listStyle: "none",
+		p: 0,
+		m: 0,
+		mt: "auto"
+	}, children, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, { as: "li" }, /* @__PURE__ */ react.default.createElement(require_shared.Divider, null), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		justifyContent: "space-between",
+		flexWrap: "wrap"
+	}, difficulty && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut_icons.LevelIcon, null), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { screenreader: true }, `${difficulty}${isBeginnerContainer ? " Friendly" : ""}.`), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		variant: "p-small",
+		pl: 8,
+		whiteSpace: "nowrap",
+		"data-testid": "card-difficulty",
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.default.createElement("b", null, difficulty), isBeginnerContainer && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, " Friendly"))), renderTimeToCompleteOrNumLessons()))), footer), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
+		display: isFullSize ? {
+			_: "none",
+			md: "flex"
+		} : "none",
+		alignItems: "center",
+		justifyContent: "center",
+		px: 64,
+		position: "absolute",
+		top: 32,
+		bottom: 0,
+		right: 0
+	}, /* @__PURE__ */ react.default.createElement(Image, {
+		"aria-hidden": true,
+		width: 100,
+		height: 100,
+		src: imageSrc
+	})));
+});
+
+//#endregion
+exports.ContentGroupBaseCard = ContentGroupBaseCard;
+exports.ContentGroupBaseCardHeaderBackground = ContentGroupBaseCardHeaderBackground;
+//# sourceMappingURL=index.cjs.map

package/dist/ContentGroupBaseCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","Box","Card","FlexBox","Text","LevelIcon","Background","css","theme","styled","pluralize","React","forwardRef","getTimeToCompleteDisplayAmount","getTimeToCompleteDisplayDuration","Divider","CourseDifficulty","EnrollmentStatus","Image","withComponent","CardAnchor","color","inset","ContentGroupBaseCardHeaderBackground","pl","py","borderRadiusTop","borderRadiusBottom","boxShadow","colors","white","ContentGroupBaseCard","headerBackgroundColor","headerText","title","headingLevel","description","difficulty","numLessons","imageSrc","isFullSize","shadow","enrollmentStatus","timeToComplete","brandDetails","children","header","footer","openInNewTab","href","onClick","ref","enrollmentAssets","completed","text","backgroundColor","inProgress","none","isEnrolled","InProgress","Completed","isBeginnerContainer","Beginner","renderTimeToCompleteOrNumLessons","displayAmount","displayDuration","screenreader","variant","whiteSpace","aria-hidden","b","label","borderRadius","borderColor","overflow","display","flexDirection","isInteractive","p","height","style","cursor","e","target","closest","preventDefault","position","undefined","bg","fontFamily","fontSize","px","pt","alignItems","logoUrl","src","alt","name","width","logoHeight","mt","as","pb","textAlign","mx","my","maxWidth","md","truncate","truncateLines","mb","listStyle","m","justifyContent","flexWrap","data-testid","_","top","bottom","right"],"sources":["../../src/ContentGroupBaseCard/index.tsx"],"sourcesContent":["import {\n  Anchor,\n  Box,\n  Card,\n  FlexBox,\n  HeadingTags,\n  Text,\n} from '@codecademy/gamut';\nimport { LevelIcon } from '@codecademy/gamut-icons';\nimport { Background, Colors, css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport pluralize from 'pluralize';\nimport React, { forwardRef, PropsWithRef } from 'react';\n\nimport {\n  getTimeToCompleteDisplayAmount,\n  getTimeToCompleteDisplayDuration,\n} from './helpers';\nimport { Divider } from './shared';\nimport { CourseDifficulty, EnrollmentStatus } from './types';\n\nconst Image = Box.withComponent('img');\n\nconst CardAnchor = styled(Anchor)(\n  css({\n    '&:hover, &:focus, &:focus-visible': {\n      color: 'text',\n    },\n    '&:before': {\n      inset: 2,\n    },\n  })\n);\n\nexport type ContentGroupBaseCardProps = {\n  headerBackgroundColor: Colors;\n  headerText: string;\n  title: string;\n  headingLevel?: HeadingTags;\n  description?: string | null;\n  difficulty?: CourseDifficulty | null;\n  numLessons: number;\n  imageSrc?: string;\n  isFullSize?: boolean;\n  shadow?: 'none' | 'outline';\n  enrollmentStatus?: EnrollmentStatus;\n  timeToComplete?: number | null;\n  brandDetails?: {\n    name: string;\n    logoUrl: string;\n    logoHeight: number;\n  };\n  children?: React.ReactNode;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  openInNewTab?: boolean;\n  href: string;\n  onClick: () => void;\n};\n\ntype EnrollmentStatusAssets = {\n  [status in\n    | EnrollmentStatus.InProgress\n    | EnrollmentStatus.Completed\n    | EnrollmentStatus.None]: {\n    text: string;\n    backgroundColor: Colors;\n  };\n};\n\nexport const ContentGroupBaseCardHeaderBackground = styled(Background)(\n  css({\n    pl: 12,\n    py: 4,\n    borderRadiusTop: 'md',\n    borderRadiusBottom: 'none',\n    boxShadow: `inset 0 0 0 1px ${theme.colors.white}`,\n  })\n);\n\nexport const ContentGroupBaseCard = forwardRef<\n  HTMLAnchorElement,\n  PropsWithRef<ContentGroupBaseCardProps>\n>(\n  (\n    {\n      headerBackgroundColor,\n      headerText,\n      title,\n      headingLevel,\n      description,\n      difficulty,\n      numLessons,\n      imageSrc,\n      isFullSize = false,\n      shadow = 'none',\n      enrollmentStatus,\n      timeToComplete,\n      brandDetails,\n      children,\n      header,\n      footer,\n      openInNewTab = false,\n      href,\n      onClick,\n    },\n    ref\n  ) => {\n    const enrollmentAssets: EnrollmentStatusAssets = {\n      completed: { text: headerText + ' completed!', backgroundColor: 'green' },\n      inProgress: { text: 'In progress...', backgroundColor: 'yellow' },\n      none: { text: headerText, backgroundColor: headerBackgroundColor },\n    };\n\n    const isEnrolled =\n      enrollmentStatus === EnrollmentStatus.InProgress ||\n      enrollmentStatus === EnrollmentStatus.Completed;\n\n    const isBeginnerContainer = difficulty === CourseDifficulty.Beginner;\n\n    const renderTimeToCompleteOrNumLessons = () => {\n      if (typeof timeToComplete === 'number' && timeToComplete >= 0) {\n        const displayAmount = getTimeToCompleteDisplayAmount(timeToComplete);\n        const displayDuration =\n          getTimeToCompleteDisplayDuration(timeToComplete);\n        return (\n          <>\n            <Text screenreader>{`${displayAmount} ${displayDuration}`}</Text>\n            <Text variant=\"p-small\" pl={4} whiteSpace=\"nowrap\" aria-hidden>\n              <b>{displayAmount}</b> {displayDuration}\n            </Text>\n          </>\n        );\n      }\n      if (numLessons > 0) {\n        const label = pluralize('Lesson', numLessons);\n        return (\n          <>\n            <Text screenreader>{`${numLessons} ${label}`}</Text>\n            <Text variant=\"p-small\" pl={4} whiteSpace=\"nowrap\" aria-hidden>\n              <b>{numLessons}</b> {label}\n            </Text>\n          </>\n        );\n      }\n\n      return null;\n    };\n\n    return (\n      <Card\n        variant={isEnrolled ? 'beige' : 'white'}\n        borderRadius=\"md\"\n        borderColor=\"border-primary\"\n        overflow=\"hidden\"\n        display=\"flex\"\n        flexDirection=\"column\"\n        shadow={shadow}\n        isInteractive\n        p={0}\n        height=\"100%\"\n        // eslint-disable-next-line gamut/no-inline-style\n        style={{ cursor: 'pointer' }}\n        onClick={(e: React.MouseEvent) => {\n          // only handle clicks if they didn't come from the anchor to avoid double navigation\n          if ((e.target as HTMLElement).closest('a') === null) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        <Box position=\"relative\">\n          <CardAnchor\n            href={href}\n            onClick={onClick}\n            variant=\"interface\"\n            display=\"block\"\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n          >\n            {header || (\n              <ContentGroupBaseCardHeaderBackground\n                bg={\n                  enrollmentStatus\n                    ? enrollmentAssets[enrollmentStatus].backgroundColor\n                    : headerBackgroundColor\n                }\n              >\n                <Text fontFamily=\"accent\" fontSize={14}>\n                  {enrollmentStatus\n                    ? enrollmentAssets[enrollmentStatus].text\n                    : headerText}\n                </Text>\n              </ContentGroupBaseCardHeaderBackground>\n            )}\n            <FlexBox\n              px={12}\n              pt={4}\n              flexDirection=\"column\"\n              alignItems=\"flex-start\"\n            >\n              {brandDetails?.logoUrl && (\n                <Image\n                  src={brandDetails.logoUrl}\n                  alt={brandDetails.name}\n                  width=\"auto\"\n                  height={brandDetails.logoHeight}\n                  mt={12}\n                />\n              )}\n              <Text\n                variant=\"title-xs\"\n                as={headingLevel}\n                pt={brandDetails?.logoUrl ? 8 : 12}\n                pb={4}\n              >\n                {title}\n              </Text>\n            </FlexBox>\n          </CardAnchor>\n        </Box>\n        <FlexBox\n          flexDirection=\"column\"\n          textAlign=\"left\"\n          mx={12}\n          my={4}\n          height=\"100%\"\n          maxWidth={isFullSize ? { md: 'calc(100% - 228px)' } : '100%'}\n        >\n          {description && (\n            <Text\n              variant=\"p-small\"\n              truncate=\"ellipsis\"\n              truncateLines={3}\n              mb={16}\n            >\n              {description}\n            </Text>\n          )}\n          <Box as=\"ul\" listStyle=\"none\" p={0} m={0} mt=\"auto\">\n            {children}\n            <Box as=\"li\">\n              <Divider />\n              <FlexBox justifyContent=\"space-between\" flexWrap=\"wrap\">\n                {difficulty && (\n                  <FlexBox alignItems=\"center\">\n                    <LevelIcon />\n                    <Text screenreader>{`${difficulty}${\n                      isBeginnerContainer ? ' Friendly' : ''\n                    }.`}</Text>\n                    <Text\n                      variant=\"p-small\"\n                      pl={8}\n                      whiteSpace=\"nowrap\"\n                      data-testid=\"card-difficulty\"\n                      aria-hidden\n                    >\n                      <b>{difficulty}</b>\n                      {isBeginnerContainer && <> Friendly</>}\n                    </Text>\n                  </FlexBox>\n                )}\n                {renderTimeToCompleteOrNumLessons()}\n              </FlexBox>\n            </Box>\n          </Box>\n          {footer}\n        </FlexBox>\n        <Box\n          display={isFullSize ? { _: 'none', md: 'flex' } : 'none'}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          px={64}\n          position=\"absolute\"\n          top={32}\n          bottom={0}\n          right={0}\n        >\n          <Image aria-hidden width={100} height={100} src={imageSrc} />\n        </Box>\n      </Card>\n    );\n  }\n);\n"],"mappings":"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"}

package/dist/ContentGroupBaseCard/index.d.cts

@@ -0,0 +1,41 @@
+import { CourseDifficulty, EnrollmentStatus } from "./types.cjs";
+import { HeadingTags } from "@codecademy/gamut";
+import React from "react";
+import * as _emotion_react0 from "@emotion/react";
+import * as _emotion_styled0 from "@emotion/styled";
+import * as _codecademy_gamut_styles0 from "@codecademy/gamut-styles";
+import { Colors } from "@codecademy/gamut-styles";
+
+//#region src/ContentGroupBaseCard/index.d.ts
+type ContentGroupBaseCardProps = {
+  headerBackgroundColor: Colors;
+  headerText: string;
+  title: string;
+  headingLevel?: HeadingTags;
+  description?: string | null;
+  difficulty?: CourseDifficulty | null;
+  numLessons: number;
+  imageSrc?: string;
+  isFullSize?: boolean;
+  shadow?: 'none' | 'outline';
+  enrollmentStatus?: EnrollmentStatus;
+  timeToComplete?: number | null;
+  brandDetails?: {
+    name: string;
+    logoUrl: string;
+    logoHeight: number;
+  };
+  children?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  openInNewTab?: boolean;
+  href: string;
+  onClick: () => void;
+};
+declare const ContentGroupBaseCardHeaderBackground: _emotion_styled0.StyledComponent<Omit<_codecademy_gamut_styles0.BackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement> & {
+  theme?: _emotion_react0.Theme;
+}, {}, {}>;
+declare const ContentGroupBaseCard: React.ForwardRefExoticComponent<ContentGroupBaseCardProps & React.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { ContentGroupBaseCard, ContentGroupBaseCardHeaderBackground, ContentGroupBaseCardProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/ContentGroupBaseCard/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/ContentGroupBaseCard/index.tsx"],"mappings":";;;;;;;;;KAkCY,yBAAA;EACV,qBAAA,EAAuB,MAAA;EACvB,UAAA;EACA,KAAA;EACA,YAAA,GAAe,WAAA;EACf,WAAA;EACA,UAAA,GAAa,gBAAA;EACb,UAAA;EACA,QAAA;EACA,UAAA;EACA,MAAA;EACA,gBAAA,GAAmB,gBAAA;EACnB,cAAA;EACA,YAAA;IACE,IAAA;IACA,OAAA;IACA,UAAA;EAAA;EAEF,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,YAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,cAaW,oCAAA,mBAAoC,eAAA,CAAA,IAAA,CAQhD,yBAAA,CARgD,eAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;UAAA,eAAA,CAAA,KAAA;AAAA;AAAA,cAUpC,oBAAA,EAAoB,KAAA,CAAA,yBAAA,CAAA,yBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}