@codecademy/brand 4.0.0-alpha.af4a3e14fc.0 → 4.0.0-alpha.bec91dc078.0

package/dist/Carousel/index.cjs

@@ -1,194 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
-require("@splidejs/splide/dist/css/splide.min.css");
-let _emotion_is_prop_valid = require("@emotion/is-prop-valid");
-_emotion_is_prop_valid = require_rolldown_runtime.__toESM(_emotion_is_prop_valid);
-let _splidejs_react_splide = require("@splidejs/react-splide");
-
-//#region src/Carousel/index.tsx
-const CarouselWrapper = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  transform: translateX(-1rem);
-  width: calc(100% + 2rem);
-`;
-const SplideTrack = (0, _emotion_styled.default)(_splidejs_react_splide.SplideTrack, { shouldForwardProp: _emotion_is_prop_valid.default })`
-  padding-top: ${(props) => props.patternedBackground ? "1rem" : "0"};
-  padding-bottom: ${(props) => props.patternedBackground ? "2rem" : "0"};
-`;
-const SplideSlide = (0, _emotion_styled.default)(_splidejs_react_splide.SplideSlide, { shouldForwardProp: _emotion_is_prop_valid.default })`
-  display: flex;
-  flex-shrink: ${(props) => props.noShrink ? "initial" : 0};
-`;
-const defaultOptions = {
-	gap: "2rem",
-	perPage: 3,
-	pagination: false,
-	keyboard: false,
-	slideFocus: false,
-	arrows: false,
-	perMove: 2,
-	padding: "1rem",
-	breakpoints: { [parseInt(_codecademy_gamut_styles.breakpoints.md, 10)]: {
-		perPage: 2,
-		perMove: 1
-	} }
-};
-const StyledBox = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)`
-  list-style-type: none;
-`;
-const PatternedContainer = ({ as, children, bottomPadding, leftPadding, overflowAuto }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-		position: "relative",
-		py: 24,
-		px: 8,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			borderRadius: "lg",
-			overflow: "hidden",
-			position: "absolute",
-			top: 0,
-			bottom: 0,
-			left: 0,
-			width: "100%",
-			zIndex: 0,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.CheckerDense, {})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBox, {
-			as,
-			columnGap: 64,
-			position: "relative",
-			overflowX: overflowAuto ? "auto" : "hidden",
-			pt: 16,
-			pb: bottomPadding ? 24 : 0,
-			pl: { xl: leftPadding ? 16 : 0 },
-			m: 0,
-			zIndex: 1,
-			children
-		})]
-	});
-};
-const Carousel = ({ items, leftPadding = false, onArrowClick, options: optionsProp = {}, patternedBackground = false, showArrowDisplay, arrowPosition = "top", title, variant = "catalog_home" }) => {
-	const ref = (0, react.useRef)(null);
-	const [index, setIndex] = (0, react.useState)(0);
-	const [lastIndex, setLastIndex] = (0, react.useState)();
-	(0, react.useEffect)(() => {
-		if (ref.current?.splide?.options.perPage) setLastIndex(items.length - ref.current.splide.options.perPage);
-		else setLastIndex(items.length);
-	}, [items, ref.current?.splide?.options.perPage]);
-	const options = (0, react.useMemo)(() => {
-		return {
-			...defaultOptions,
-			...optionsProp
-		};
-	}, [optionsProp]);
-	const arrowDisplay = (0, react.useMemo)(() => {
-		switch (items.length) {
-			case 1:
-			case 2: return "none";
-			default: return "flex";
-		}
-	}, [items]);
-	const onClickForward = () => {
-		onArrowClick?.({ target: "forward_arrow" });
-		ref.current?.go(">");
-	};
-	const onClickBack = () => {
-		onArrowClick?.({ target: "backward_arrow" });
-		ref.current?.go("<");
-	};
-	const determineLastIndex = (perPage) => {
-		setLastIndex(items.length - perPage);
-	};
-	const isCatalogHubVariant = variant === "catalog_hub";
-	const CarouselContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_splidejs_react_splide.Splide, {
-		onMove: ({ index: index$1 }) => setIndex(index$1),
-		onUpdated: (splide) => {
-			if (splide.options.perPage) determineLastIndex(splide.options.perPage);
-		},
-		onMounted: (splide) => {
-			if (splide.options.perPage) determineLastIndex(splide.options.perPage);
-			if (splide.options.autoplay) splide.Components.Autoplay.play();
-		},
-		hasTrack: false,
-		ref,
-		options: { ...options },
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SplideTrack, {
-			patternedBackground,
-			children: items.map((item, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SplideSlide, {
-				noShrink: items.length === 1 && options.perPage !== 1,
-				children: item
-			}, index$1))
-		})
-	});
-	const shouldDisplayArrow = (showArrowDisplay$1) => {
-		if (showArrowDisplay$1) {
-			if (typeof showArrowDisplay$1 === "function") return showArrowDisplay$1(items.length) ? "flex" : "none";
-			const displayProps = {
-				_: "",
-				xs: "",
-				sm: "",
-				md: "",
-				lg: "",
-				xl: ""
-			};
-			Object.keys(displayProps).forEach((screensize) => {
-				displayProps[screensize] = isCatalogHubVariant || showArrowDisplay$1?.[screensize] ? "flex" : arrowDisplay;
-			});
-			return displayProps;
-		}
-		return isCatalogHubVariant ? "flex" : arrowDisplay;
-	};
-	const arrows = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-		display: shouldDisplayArrow(showArrowDisplay),
-		pr: 0,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.ArrowButton, {
-			disabled: index === 0,
-			icon: _codecademy_gamut_icons.MiniChevronLeftIcon,
-			mr: 8,
-			onClick: onClickBack,
-			px: 4,
-			tip: "Scroll backward",
-			tipProps: { placement: "floating" }
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.ArrowButton, {
-			disabled: index === lastIndex,
-			icon: _codecademy_gamut_icons.MiniChevronRightIcon,
-			onClick: onClickForward,
-			px: 4,
-			tip: "Scroll forward",
-			tipProps: { placement: "floating" }
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			justifyContent: {
-				_: title ? "space-between" : isCatalogHubVariant ? "start" : "end",
-				md: title ? "space-between" : "end"
-			},
-			pb: 8,
-			alignItems: "baseline",
-			children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-				pb: patternedBackground ? 8 : 0,
-				children: title
-			}) : null, arrowPosition === "top" ? arrows : null]
-		}),
-		patternedBackground ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PatternedContainer, {
-			leftPadding,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselWrapper, { children: CarouselContent })
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselWrapper, { children: CarouselContent }),
-		arrowPosition === "bottom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-			justifyContent: "flex-end",
-			pt: 8,
-			children: arrows
-		}) : null
-	] });
-};
-
-//#endregion
-exports.Carousel = Carousel;
-exports.PatternedContainer = PatternedContainer;

package/dist/Carousel/index.d.cts

@@ -1,27 +0,0 @@
-import React from "react";
-import { breakpoints } from "@codecademy/gamut-styles";
-import { UserClickData } from "@codecademy/tracking";
-import { Options } from "@splidejs/react-splide";
-
-//#region src/Carousel/index.d.ts
-type Breakpoint = keyof typeof breakpoints;
-type CarouselProps = {
-  items: JSX.Element[];
-  onArrowClick?: (props: UserClickData) => void;
-  options?: Options;
-  patternedBackground?: boolean;
-  leftPadding?: boolean;
-  showArrowDisplay?: Record<Breakpoint, boolean> | ((count: number) => boolean);
-  arrowPosition?: 'top' | 'bottom';
-  title?: JSX.Element;
-  variant?: 'catalog_home' | 'catalog_hub';
-};
-declare const PatternedContainer: React.FC<React.PropsWithChildren<{
-  as?: React.ElementType<any>;
-  bottomPadding?: boolean;
-  leftPadding?: boolean;
-  overflowAuto?: boolean;
-}>>;
-declare const Carousel: React.FC<CarouselProps>;
-//#endregion
-export { Carousel, PatternedContainer };

package/dist/CertificationPathCard/index.cjs

@@ -1,41 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_shared = require('../ContentGroupBaseCard/shared.cjs');
-const require_ContentGroupBaseCard_index = require('../ContentGroupBaseCard/index.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/CertificationPathCard/index.tsx
-const CertificationPathCard = (0, react.forwardRef)(({ title, courseCount, enrollmentStatus, shortDescription, difficulty, certificationProvider, headingLevel, timeToComplete, header, footer, openInNewTab = false, href, onClick }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentGroupBaseCard_index.ContentGroupBaseCard, {
-		headerBackgroundColor: "orange-100",
-		headerText: "Certification path",
-		title,
-		headingLevel,
-		description: shortDescription,
-		difficulty,
-		numLessons: courseCount,
-		shadow: "outline",
-		enrollmentStatus,
-		timeToComplete,
-		brandDetails: {
-			name: certificationProvider?.name || "",
-			logoUrl: certificationProvider?.logoUrl || "",
-			logoHeight: {
-				AWS: 28,
-				Microsoft: 20,
-				HRCI: 28,
-				"Red Hat": 20
-			}[certificationProvider?.name || ""] || 24
-		},
-		header,
-		footer,
-		openInNewTab,
-		href,
-		onClick,
-		ref,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shared.CourseCountComponent, { count: courseCount })
-	});
-});
-
-//#endregion
-exports.CertificationPathCard = CertificationPathCard;

package/dist/CertificationPathCard/index.d.cts

@@ -1,27 +0,0 @@
-import { CourseDifficulty, EnrollmentStatus } from "../ContentGroupBaseCard/types.cjs";
-import { HeadingTags } from "@codecademy/gamut";
-import * as react0 from "react";
-
-//#region src/CertificationPathCard/index.d.ts
-interface CertificationProviderDetails {
-  name: string;
-  logoUrl: string;
-}
-interface CertificationPathCardProps {
-  title: string;
-  courseCount: number;
-  enrollmentStatus: EnrollmentStatus;
-  shortDescription?: string | null;
-  difficulty?: CourseDifficulty | null;
-  certificationProvider?: CertificationProviderDetails | null;
-  headingLevel?: HeadingTags;
-  timeToComplete?: number | null;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  openInNewTab?: boolean;
-  href: string;
-  onClick: () => void;
-}
-declare const CertificationPathCard: react0.ForwardRefExoticComponent<CertificationPathCardProps & react0.RefAttributes<HTMLAnchorElement>>;
-//#endregion
-export { CertificationPathCard, CertificationPathCardProps };

package/dist/CoachingSessionCard/index.cjs

@@ -1,87 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-let date_fns_tz = require("date-fns-tz");
-
-//#region src/CoachingSessionCard/index.tsx
-const formatTime = (timeString, format) => {
-	return (0, date_fns_tz.formatInTimeZone)(new Date(timeString), Intl.DateTimeFormat().resolvedOptions().timeZone, format);
-};
-const CoachingSessionCard = ({ session, ctas }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Card, {
-	borderRadius: "xl",
-	p: 32,
-	height: "auto",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-		column: true,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Text, {
-				mb: 12,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-						fontWeight: "bold",
-						children: session.coachOfferingCategoryName
-					}),
-					" ",
-					"coaching session with",
-					" ",
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-						fontWeight: "bold",
-						children: session.participantName
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-				alignItems: "center",
-				gap: 16,
-				mb: 24,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						alignItems: "center",
-						gap: 8,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.CalendarIcon, { size: 16 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-							variant: "p-small",
-							color: "text-secondary",
-							children: new Date(session.startTime).toLocaleDateString(void 0, {
-								weekday: "long",
-								month: "long",
-								day: "numeric",
-								year: "numeric"
-							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						alignItems: "center",
-						gap: 8,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ClockIcon, { size: 16 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-							variant: "p-small",
-							color: "text-secondary",
-							children: `${formatTime(session.startTime, "h:mm aa")} - ${formatTime(session.endTime, "h:mm aa z")}`
-						})]
-					}),
-					session.status && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Text, {
-						variant: "p-small",
-						fontWeight: "bold",
-						children: ["Status: ", session.status]
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-				alignItems: "center",
-				gap: 8,
-				children: ctas?.map((cta) => {
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cta.buttonType === "fill" ? _codecademy_gamut.FillButton : cta.buttonType === "stroke" ? _codecademy_gamut.StrokeButton : _codecademy_gamut.TextButton, {
-						href: cta.href,
-						onClick: cta.onClick,
-						disabled: cta.disabled,
-						variant: cta.variant,
-						children: cta.text
-					}, cta.text);
-				})
-			})
-		]
-	})
-});
-
-//#endregion
-exports.CoachingSessionCard = CoachingSessionCard;

package/dist/CoachingSessionCard/index.d.cts

@@ -1,24 +0,0 @@
-//#region src/CoachingSessionCard/index.d.ts
-interface CoachingSessionCardProps {
-  session: {
-    id: string;
-    startTime: string;
-    endTime: string;
-    coachOfferingCategoryName: string;
-    participantName?: string | null;
-    zoomJoinUrl?: string | null;
-    rescheduleUrl?: string | null;
-    status?: string | null;
-  };
-  ctas?: {
-    text: string;
-    href?: string;
-    onClick?: () => void;
-    buttonType?: 'fill' | 'stroke' | 'text';
-    disabled?: boolean;
-    variant?: 'primary' | 'secondary' | 'danger';
-  }[];
-}
-declare const CoachingSessionCard: React.FC<CoachingSessionCardProps>;
-//#endregion
-export { CoachingSessionCard, CoachingSessionCardProps };

package/dist/CommunityEventCard/EventTypeIcon.cjs

@@ -1,61 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/CommunityEventCard/EventTypeIcon.tsx
-const eventTypeMap = {
-	careergrowth: {
-		icon: _codecademy_gamut_icons.BriefcaseIcon,
-		copy: "Career growth"
-	},
-	hackathon: {
-		icon: _codecademy_gamut_icons.KeyboardIcon,
-		copy: "Hackathon"
-	},
-	networking: {
-		icon: _codecademy_gamut_icons.PersonPonytailIcon,
-		copy: "Networking"
-	},
-	"q&a": {
-		icon: _codecademy_gamut_icons.QuestionMarkIcon,
-		copy: "Q&A"
-	},
-	studysession: {
-		icon: _codecademy_gamut_icons.BookFlipPageIcon,
-		copy: "Study session"
-	},
-	webinar: {
-		icon: _codecademy_gamut_icons.MicrophoneIcon,
-		copy: "Webinar"
-	},
-	workshop: {
-		icon: _codecademy_gamut_icons.RulerTriangleIcon,
-		copy: "Workshop"
-	},
-	youtube: {
-		icon: _codecademy_gamut_icons.YoutubePlayIcon,
-		copy: "YouTube"
-	}
-};
-const EventTypeIcon = ({ eventType }) => {
-	const key = eventType?.toLowerCase().replace(/\s/, "");
-	const IconComponent = key ? eventTypeMap[key]?.icon : void 0;
-	const iconLoaded = key && IconComponent;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-		display: "flex",
-		alignItems: "center",
-		fontFamily: "accent",
-		fontSize: 14,
-		"aria-label": key && `${key} event`,
-		"aria-hidden": !iconLoaded,
-		children: iconLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {
-			"aria-hidden": true,
-			alignSelf: "center",
-			mr: 8
-		}), eventTypeMap[key]?.copy] })
-	});
-};
-
-//#endregion
-exports.EventTypeIcon = EventTypeIcon;