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

package/dist/ProductFeatureShowcase/index.js

@@ -1,120 +1,83 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { Badge, Box, ContentContainer, GridBox, StrokeButton, Text } from '@codecademy/gamut';
-import { DiagonalBDense } from '@codecademy/gamut-patterns';
-import { PausableImage } from '..';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledPattern = /*#__PURE__*/_styled(DiagonalBDense, {
-  target: "e72vrs1",
-  label: "StyledPattern"
-})("color:", ({
-  theme
-}) => theme.colors.yellow, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qcm9kdWN0RmVhdHVyZVNob3djYXNlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhNEMiLCJmaWxlIjoiLi4vLi4vc3JjL1Byb2R1Y3RGZWF0dXJlU2hvd2Nhc2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQmFkZ2UsXG4gIEJveCxcbiAgQ29udGVudENvbnRhaW5lcixcbiAgR3JpZEJveCxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBEaWFnb25hbEJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgUGF1c2FibGVJbWFnZSB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkUGF0dGVybiA9IHN0eWxlZChEaWFnb25hbEJEZW5zZSlgXG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy55ZWxsb3d9O1xuYDtcblxuY29uc3QgU3R5bGVkQmFkZ2UgPSBzdHlsZWQoQmFkZ2UpYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdG9wOiAtMC41cmVtO1xuYDtcblxuZXhwb3J0IGNvbnN0IFByb2R1Y3RGZWF0dXJlU2hvd2Nhc2U6IFJlYWN0LkZDPHtcbiAgaW1hZ2U6IHtcbiAgICBzcmM6IHN0cmluZztcbiAgICBhbHQ6IHN0cmluZztcbiAgfTtcbiAgZGlzcGxheUltYWdlQm9yZGVyPzogYm9vbGVhbjtcbiAgdGl0bGU6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGVzY3JpcHRpb246IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGl0bGVCYWRnZT86IHN0cmluZztcbiAgZXllYnJvdz86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgY3RhPzoge1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgaHJlZj86IHN0cmluZztcbiAgICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgfTtcbn0+ID0gKHtcbiAgaW1hZ2UsXG4gIGRpc3BsYXlJbWFnZUJvcmRlcixcbiAgdGl0bGUsXG4gIHRpdGxlQmFkZ2UsXG4gIGV5ZWJyb3csXG4gIGRlc2NyaXB0aW9uLFxuICBjdGEsXG59KSA9PiAoXG4gIDxCb3ggYmc9XCJwYWxlWWVsbG93XCIgcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgIDxTdHlsZWRQYXR0ZXJuXG4gICAgICBjb2xvcj1cInllbGxvd1wiXG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIGxlZnQ9ezB9XG4gICAgICB0b3A9ezB9XG4gICAgICBib3R0b209ezB9XG4gICAgICB3aWR0aD1cIjQwJVwiXG4gICAgICBwb2ludGVyRXZlbnRzPVwibm9uZVwiXG4gICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgbWQ6ICdibG9jaycgfX1cbiAgICAvPlxuICAgIDxDb250ZW50Q29udGFpbmVyPlxuICAgICAgPEdyaWRCb3hcbiAgICAgICAgZ3JpZFRlbXBsYXRlQ29sdW1ucz17eyBfOiAnMWZyJywgbWQ6ICcxZnIgMWZyJyB9fVxuICAgICAgICBnYXA9e3sgXzogNDgsIG1kOiA5NiB9fVxuICAgICAgICBweT17eyBfOiA0OCwgbWQ6IDY0IH19XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgPlxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgICAgICA8U3R5bGVkUGF0dGVyblxuICAgICAgICAgICAgY29sb3I9XCJ5ZWxsb3dcIlxuICAgICAgICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMHZ3XCJcbiAgICAgICAgICAgIHRvcD17LTQ4fVxuICAgICAgICAgICAgbGVmdD17eyBfOiAtMTYsIHhzOiAtMzIsIHNtOiAtNjQgfX1cbiAgICAgICAgICAgIGhlaWdodD1cImNhbGMoNTAlICsgNDhweClcIlxuICAgICAgICAgICAgcG9pbnRlckV2ZW50cz1cIm5vbmVcIlxuICAgICAgICAgICAgZGlzcGxheT17eyBtZDogJ25vbmUnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8Qm94XG4gICAgICAgICAgICB7Li4uKGRpc3BsYXlJbWFnZUJvcmRlclxuICAgICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyOiAnc29saWQnLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICduYXZ5LTQwMCcsXG4gICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICAgICAgICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA6IHVuZGVmaW5lZCl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFBhdXNhYmxlSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0JveD5cbiAgICAgICAgPEJveD5cbiAgICAgICAgICB7ZXllYnJvdyAmJiA8Qm94IG1iPXs4fT57ZXllYnJvd308L0JveD59XG5cbiAgICAgICAgICA8VGV4dCBhcz1cImgyXCIgdmFyaWFudD1cInRpdGxlLXhsXCI+XG4gICAgICAgICAgICA8VGV4dCBtcj17OH0gZGlzcGxheT1cImlubGluZVwiPlxuICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICB7dGl0bGVCYWRnZSAmJiAoXG4gICAgICAgICAgICAgIDxTdHlsZWRCYWRnZSB2YXJpYW50PVwidGVydGlhcnlcIiBmb250U2l6ZT17MTR9PlxuICAgICAgICAgICAgICAgIHt0aXRsZUJhZGdlfVxuICAgICAgICAgICAgICA8L1N0eWxlZEJhZGdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L1RleHQ+XG5cbiAgICAgICAgICA8VGV4dCBtdD17OH0+e2Rlc2NyaXB0aW9ufTwvVGV4dD5cblxuICAgICAgICAgIHtjdGEgJiYgKFxuICAgICAgICAgICAgPFN0cm9rZUJ1dHRvbiBocmVmPXtjdGEuaHJlZn0gb25DbGljaz17Y3RhLm9uQ2xpY2t9IG10PXsxNn0+XG4gICAgICAgICAgICAgIHtjdGEubGFiZWx9XG4gICAgICAgICAgICA8L1N0cm9rZUJ1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICA8L0JveD5cbiAgICAgIDwvR3JpZEJveD5cbiAgICA8L0NvbnRlbnRDb250YWluZXI+XG4gIDwvQm94PlxuKTtcbiJdfQ== */"));
-const StyledBadge = /*#__PURE__*/_styled(Badge, {
-  target: "e72vrs0",
-  label: "StyledBadge"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nsdp8s",
-  styles: "display:inline-block;position:relative;top:-0.5rem"
-} : {
-  name: "1nsdp8s",
-  styles: "display:inline-block;position:relative;top:-0.5rem/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qcm9kdWN0RmVhdHVyZVNob3djYXNlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9Qcm9kdWN0RmVhdHVyZVNob3djYXNlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJhZGdlLFxuICBCb3gsXG4gIENvbnRlbnRDb250YWluZXIsXG4gIEdyaWRCb3gsXG4gIFN0cm9rZUJ1dHRvbixcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgRGlhZ29uYWxCRGVuc2UgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1wYXR0ZXJucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IFBhdXNhYmxlSW1hZ2UgfSBmcm9tICcuLic7XG5cbmNvbnN0IFN0eWxlZFBhdHRlcm4gPSBzdHlsZWQoRGlhZ29uYWxCRGVuc2UpYFxuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMueWVsbG93fTtcbmA7XG5cbmNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKEJhZGdlKWBcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRvcDogLTAuNXJlbTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQcm9kdWN0RmVhdHVyZVNob3djYXNlOiBSZWFjdC5GQzx7XG4gIGltYWdlOiB7XG4gICAgc3JjOiBzdHJpbmc7XG4gICAgYWx0OiBzdHJpbmc7XG4gIH07XG4gIGRpc3BsYXlJbWFnZUJvcmRlcj86IGJvb2xlYW47XG4gIHRpdGxlOiBSZWFjdC5SZWFjdE5vZGU7XG4gIGRlc2NyaXB0aW9uOiBSZWFjdC5SZWFjdE5vZGU7XG4gIHRpdGxlQmFkZ2U/OiBzdHJpbmc7XG4gIGV5ZWJyb3c/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGN0YT86IHtcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIGhyZWY/OiBzdHJpbmc7XG4gICAgb25DbGljaz86ICgpID0+IHZvaWQ7XG4gIH07XG59PiA9ICh7XG4gIGltYWdlLFxuICBkaXNwbGF5SW1hZ2VCb3JkZXIsXG4gIHRpdGxlLFxuICB0aXRsZUJhZGdlLFxuICBleWVicm93LFxuICBkZXNjcmlwdGlvbixcbiAgY3RhLFxufSkgPT4gKFxuICA8Qm94IGJnPVwicGFsZVllbGxvd1wiIHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICA8U3R5bGVkUGF0dGVyblxuICAgICAgY29sb3I9XCJ5ZWxsb3dcIlxuICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICBsZWZ0PXswfVxuICAgICAgdG9wPXswfVxuICAgICAgYm90dG9tPXswfVxuICAgICAgd2lkdGg9XCI0MCVcIlxuICAgICAgcG9pbnRlckV2ZW50cz1cIm5vbmVcIlxuICAgICAgZGlzcGxheT17eyBfOiAnbm9uZScsIG1kOiAnYmxvY2snIH19XG4gICAgLz5cbiAgICA8Q29udGVudENvbnRhaW5lcj5cbiAgICAgIDxHcmlkQm94XG4gICAgICAgIGdyaWRUZW1wbGF0ZUNvbHVtbnM9e3sgXzogJzFmcicsIG1kOiAnMWZyIDFmcicgfX1cbiAgICAgICAgZ2FwPXt7IF86IDQ4LCBtZDogOTYgfX1cbiAgICAgICAgcHk9e3sgXzogNDgsIG1kOiA2NCB9fVxuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgID5cbiAgICAgICAgPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+XG4gICAgICAgICAgPFN0eWxlZFBhdHRlcm5cbiAgICAgICAgICAgIGNvbG9yPVwieWVsbG93XCJcbiAgICAgICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICAgICAgd2lkdGg9XCIxMDB2d1wiXG4gICAgICAgICAgICB0b3A9ey00OH1cbiAgICAgICAgICAgIGxlZnQ9e3sgXzogLTE2LCB4czogLTMyLCBzbTogLTY0IH19XG4gICAgICAgICAgICBoZWlnaHQ9XCJjYWxjKDUwJSArIDQ4cHgpXCJcbiAgICAgICAgICAgIHBvaW50ZXJFdmVudHM9XCJub25lXCJcbiAgICAgICAgICAgIGRpc3BsYXk9e3sgbWQ6ICdub25lJyB9fVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPEJveFxuICAgICAgICAgICAgey4uLihkaXNwbGF5SW1hZ2VCb3JkZXJcbiAgICAgICAgICAgICAgPyB7XG4gICAgICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMSxcbiAgICAgICAgICAgICAgICAgIGJvcmRlcjogJ3NvbGlkJyxcbiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnbmF2eS00MDAnLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgICAgICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgOiB1bmRlZmluZWQpfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxQYXVzYWJsZUltYWdlIHNyYz17aW1hZ2Uuc3JjfSBhbHQ9e2ltYWdlLmFsdH0gLz5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICAgIDxCb3g+XG4gICAgICAgICAge2V5ZWJyb3cgJiYgPEJveCBtYj17OH0+e2V5ZWJyb3d9PC9Cb3g+fVxuXG4gICAgICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS14bFwiPlxuICAgICAgICAgICAgPFRleHQgbXI9ezh9IGRpc3BsYXk9XCJpbmxpbmVcIj5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAge3RpdGxlQmFkZ2UgJiYgKFxuICAgICAgICAgICAgICA8U3R5bGVkQmFkZ2UgdmFyaWFudD1cInRlcnRpYXJ5XCIgZm9udFNpemU9ezE0fT5cbiAgICAgICAgICAgICAgICB7dGl0bGVCYWRnZX1cbiAgICAgICAgICAgICAgPC9TdHlsZWRCYWRnZT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9UZXh0PlxuXG4gICAgICAgICAgPFRleHQgbXQ9ezh9PntkZXNjcmlwdGlvbn08L1RleHQ+XG5cbiAgICAgICAgICB7Y3RhICYmIChcbiAgICAgICAgICAgIDxTdHJva2VCdXR0b24gaHJlZj17Y3RhLmhyZWZ9IG9uQ2xpY2s9e2N0YS5vbkNsaWNrfSBtdD17MTZ9PlxuICAgICAgICAgICAgICB7Y3RhLmxhYmVsfVxuICAgICAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9Cb3g+XG4gICAgICA8L0dyaWRCb3g+XG4gICAgPC9Db250ZW50Q29udGFpbmVyPlxuICA8L0JveD5cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const ProductFeatureShowcase = ({
-  image,
-  displayImageBorder,
-  title,
-  titleBadge,
-  eyebrow,
-  description,
-  cta
-}) => /*#__PURE__*/_jsxs(Box, {
-  bg: "paleYellow",
-  position: "relative",
-  children: [/*#__PURE__*/_jsx(StyledPattern, {
-    color: "yellow",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: "40%",
-    pointerEvents: "none",
-    display: {
-      _: 'none',
-      md: 'block'
-    }
-  }), /*#__PURE__*/_jsx(ContentContainer, {
-    children: /*#__PURE__*/_jsxs(GridBox, {
-      gridTemplateColumns: {
-        _: '1fr',
-        md: '1fr 1fr'
-      },
-      gap: {
-        _: 48,
-        md: 96
-      },
-      py: {
-        _: 48,
-        md: 64
-      },
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsxs(Box, {
-        position: "relative",
-        children: [/*#__PURE__*/_jsx(StyledPattern, {
-          color: "yellow",
-          position: "absolute",
-          width: "100vw",
-          top: -48,
-          left: {
-            _: -16,
-            xs: -32,
-            sm: -64
-          },
-          height: "calc(50% + 48px)",
-          pointerEvents: "none",
-          display: {
-            md: 'none'
-          }
-        }), /*#__PURE__*/_jsx(Box, {
-          ...(displayImageBorder ? {
-            borderWidth: 1,
-            border: 'solid',
-            borderColor: 'navy-400',
-            borderRadius: 'lg',
-            overflow: 'hidden'
-          } : undefined),
-          children: /*#__PURE__*/_jsx(PausableImage, {
-            src: image.src,
-            alt: image.alt
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        children: [eyebrow && /*#__PURE__*/_jsx(Box, {
-          mb: 8,
-          children: eyebrow
-        }), /*#__PURE__*/_jsxs(Text, {
-          as: "h2",
-          variant: "title-xl",
-          children: [/*#__PURE__*/_jsx(Text, {
-            mr: 8,
-            display: "inline",
-            children: title
-          }), titleBadge && /*#__PURE__*/_jsx(StyledBadge, {
-            variant: "tertiary",
-            fontSize: 14,
-            children: titleBadge
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          mt: 8,
-          children: description
-        }), cta && /*#__PURE__*/_jsx(StrokeButton, {
-          href: cta.href,
-          onClick: cta.onClick,
-          mt: 16,
-          children: cta.label
-        })]
-      })]
-    })
-  })]
-});
+import { PausableImage } from "../PausableImage/index.js";
+import { Badge, Box, ContentContainer, GridBox, StrokeButton, Text } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+import { DiagonalBDense } from "@codecademy/gamut-patterns";
+
+//#region src/ProductFeatureShowcase/index.tsx
+const StyledPattern = /* @__PURE__ */ styled(DiagonalBDense, {
+	target: "e1qcofst0",
+	label: "brand-StyledPattern"
+})("color:", ({ theme }) => theme.colors.yellow, ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1Byb2R1Y3RGZWF0dXJlU2hvd2Nhc2UvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUHJvZHVjdEZlYXR1cmVTaG93Y2FzZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQmFkZ2UsXG4gIEJveCxcbiAgQ29udGVudENvbnRhaW5lcixcbiAgR3JpZEJveCxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBEaWFnb25hbEJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgUGF1c2FibGVJbWFnZSB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkUGF0dGVybiA9IHN0eWxlZChEaWFnb25hbEJEZW5zZSlgXG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy55ZWxsb3d9O1xuYDtcblxuY29uc3QgU3R5bGVkQmFkZ2UgPSBzdHlsZWQoQmFkZ2UpYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdG9wOiAtMC41cmVtO1xuYDtcblxuZXhwb3J0IGNvbnN0IFByb2R1Y3RGZWF0dXJlU2hvd2Nhc2U6IFJlYWN0LkZDPHtcbiAgaW1hZ2U6IHtcbiAgICBzcmM6IHN0cmluZztcbiAgICBhbHQ6IHN0cmluZztcbiAgfTtcbiAgZGlzcGxheUltYWdlQm9yZGVyPzogYm9vbGVhbjtcbiAgdGl0bGU6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGVzY3JpcHRpb246IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGl0bGVCYWRnZT86IHN0cmluZztcbiAgZXllYnJvdz86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgY3RhPzoge1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgaHJlZj86IHN0cmluZztcbiAgICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgfTtcbn0+ID0gKHtcbiAgaW1hZ2UsXG4gIGRpc3BsYXlJbWFnZUJvcmRlcixcbiAgdGl0bGUsXG4gIHRpdGxlQmFkZ2UsXG4gIGV5ZWJyb3csXG4gIGRlc2NyaXB0aW9uLFxuICBjdGEsXG59KSA9PiAoXG4gIDxCb3ggYmc9XCJwYWxlWWVsbG93XCIgcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgIDxTdHlsZWRQYXR0ZXJuXG4gICAgICBjb2xvcj1cInllbGxvd1wiXG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIGxlZnQ9ezB9XG4gICAgICB0b3A9ezB9XG4gICAgICBib3R0b209ezB9XG4gICAgICB3aWR0aD1cIjQwJVwiXG4gICAgICBwb2ludGVyRXZlbnRzPVwibm9uZVwiXG4gICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgbWQ6ICdibG9jaycgfX1cbiAgICAvPlxuICAgIDxDb250ZW50Q29udGFpbmVyPlxuICAgICAgPEdyaWRCb3hcbiAgICAgICAgZ3JpZFRlbXBsYXRlQ29sdW1ucz17eyBfOiAnMWZyJywgbWQ6ICcxZnIgMWZyJyB9fVxuICAgICAgICBnYXA9e3sgXzogNDgsIG1kOiA5NiB9fVxuICAgICAgICBweT17eyBfOiA0OCwgbWQ6IDY0IH19XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgPlxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgICAgICA8U3R5bGVkUGF0dGVyblxuICAgICAgICAgICAgY29sb3I9XCJ5ZWxsb3dcIlxuICAgICAgICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMHZ3XCJcbiAgICAgICAgICAgIHRvcD17LTQ4fVxuICAgICAgICAgICAgbGVmdD17eyBfOiAtMTYsIHhzOiAtMzIsIHNtOiAtNjQgfX1cbiAgICAgICAgICAgIGhlaWdodD1cImNhbGMoNTAlICsgNDhweClcIlxuICAgICAgICAgICAgcG9pbnRlckV2ZW50cz1cIm5vbmVcIlxuICAgICAgICAgICAgZGlzcGxheT17eyBtZDogJ25vbmUnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8Qm94XG4gICAgICAgICAgICB7Li4uKGRpc3BsYXlJbWFnZUJvcmRlclxuICAgICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyOiAnc29saWQnLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICduYXZ5LTQwMCcsXG4gICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICAgICAgICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA6IHVuZGVmaW5lZCl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFBhdXNhYmxlSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0JveD5cbiAgICAgICAgPEJveD5cbiAgICAgICAgICB7ZXllYnJvdyAmJiA8Qm94IG1iPXs4fT57ZXllYnJvd308L0JveD59XG5cbiAgICAgICAgICA8VGV4dCBhcz1cImgyXCIgdmFyaWFudD1cInRpdGxlLXhsXCI+XG4gICAgICAgICAgICA8VGV4dCBtcj17OH0gZGlzcGxheT1cImlubGluZVwiPlxuICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICB7dGl0bGVCYWRnZSAmJiAoXG4gICAgICAgICAgICAgIDxTdHlsZWRCYWRnZSB2YXJpYW50PVwidGVydGlhcnlcIiBmb250U2l6ZT17MTR9PlxuICAgICAgICAgICAgICAgIHt0aXRsZUJhZGdlfVxuICAgICAgICAgICAgICA8L1N0eWxlZEJhZGdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L1RleHQ+XG5cbiAgICAgICAgICA8VGV4dCBtdD17OH0+e2Rlc2NyaXB0aW9ufTwvVGV4dD5cblxuICAgICAgICAgIHtjdGEgJiYgKFxuICAgICAgICAgICAgPFN0cm9rZUJ1dHRvbiBocmVmPXtjdGEuaHJlZn0gb25DbGljaz17Y3RhLm9uQ2xpY2t9IG10PXsxNn0+XG4gICAgICAgICAgICAgIHtjdGEubGFiZWx9XG4gICAgICAgICAgICA8L1N0cm9rZUJ1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICA8L0JveD5cbiAgICAgIDwvR3JpZEJveD5cbiAgICA8L0NvbnRlbnRDb250YWluZXI+XG4gIDwvQm94PlxuKTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhc0IifQ== */");
+const StyledBadge = /* @__PURE__ */ styled(Badge, {
+	target: "e1qcofst1",
+	label: "brand-StyledBadge"
+})("display:inline-block;position:relative;top:-0.5rem;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1Byb2R1Y3RGZWF0dXJlU2hvd2Nhc2UvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUHJvZHVjdEZlYXR1cmVTaG93Y2FzZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQmFkZ2UsXG4gIEJveCxcbiAgQ29udGVudENvbnRhaW5lcixcbiAgR3JpZEJveCxcbiAgU3Ryb2tlQnV0dG9uLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBEaWFnb25hbEJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgUGF1c2FibGVJbWFnZSB9IGZyb20gJy4uJztcblxuY29uc3QgU3R5bGVkUGF0dGVybiA9IHN0eWxlZChEaWFnb25hbEJEZW5zZSlgXG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy55ZWxsb3d9O1xuYDtcblxuY29uc3QgU3R5bGVkQmFkZ2UgPSBzdHlsZWQoQmFkZ2UpYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdG9wOiAtMC41cmVtO1xuYDtcblxuZXhwb3J0IGNvbnN0IFByb2R1Y3RGZWF0dXJlU2hvd2Nhc2U6IFJlYWN0LkZDPHtcbiAgaW1hZ2U6IHtcbiAgICBzcmM6IHN0cmluZztcbiAgICBhbHQ6IHN0cmluZztcbiAgfTtcbiAgZGlzcGxheUltYWdlQm9yZGVyPzogYm9vbGVhbjtcbiAgdGl0bGU6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGVzY3JpcHRpb246IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGl0bGVCYWRnZT86IHN0cmluZztcbiAgZXllYnJvdz86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgY3RhPzoge1xuICAgIGxhYmVsOiBzdHJpbmc7XG4gICAgaHJlZj86IHN0cmluZztcbiAgICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgfTtcbn0+ID0gKHtcbiAgaW1hZ2UsXG4gIGRpc3BsYXlJbWFnZUJvcmRlcixcbiAgdGl0bGUsXG4gIHRpdGxlQmFkZ2UsXG4gIGV5ZWJyb3csXG4gIGRlc2NyaXB0aW9uLFxuICBjdGEsXG59KSA9PiAoXG4gIDxCb3ggYmc9XCJwYWxlWWVsbG93XCIgcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgIDxTdHlsZWRQYXR0ZXJuXG4gICAgICBjb2xvcj1cInllbGxvd1wiXG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIGxlZnQ9ezB9XG4gICAgICB0b3A9ezB9XG4gICAgICBib3R0b209ezB9XG4gICAgICB3aWR0aD1cIjQwJVwiXG4gICAgICBwb2ludGVyRXZlbnRzPVwibm9uZVwiXG4gICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgbWQ6ICdibG9jaycgfX1cbiAgICAvPlxuICAgIDxDb250ZW50Q29udGFpbmVyPlxuICAgICAgPEdyaWRCb3hcbiAgICAgICAgZ3JpZFRlbXBsYXRlQ29sdW1ucz17eyBfOiAnMWZyJywgbWQ6ICcxZnIgMWZyJyB9fVxuICAgICAgICBnYXA9e3sgXzogNDgsIG1kOiA5NiB9fVxuICAgICAgICBweT17eyBfOiA0OCwgbWQ6IDY0IH19XG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgPlxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj5cbiAgICAgICAgICA8U3R5bGVkUGF0dGVyblxuICAgICAgICAgICAgY29sb3I9XCJ5ZWxsb3dcIlxuICAgICAgICAgICAgcG9zaXRpb249XCJhYnNvbHV0ZVwiXG4gICAgICAgICAgICB3aWR0aD1cIjEwMHZ3XCJcbiAgICAgICAgICAgIHRvcD17LTQ4fVxuICAgICAgICAgICAgbGVmdD17eyBfOiAtMTYsIHhzOiAtMzIsIHNtOiAtNjQgfX1cbiAgICAgICAgICAgIGhlaWdodD1cImNhbGMoNTAlICsgNDhweClcIlxuICAgICAgICAgICAgcG9pbnRlckV2ZW50cz1cIm5vbmVcIlxuICAgICAgICAgICAgZGlzcGxheT17eyBtZDogJ25vbmUnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8Qm94XG4gICAgICAgICAgICB7Li4uKGRpc3BsYXlJbWFnZUJvcmRlclxuICAgICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyOiAnc29saWQnLFxuICAgICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICduYXZ5LTQwMCcsXG4gICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICAgICAgICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICA6IHVuZGVmaW5lZCl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFBhdXNhYmxlSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0JveD5cbiAgICAgICAgPEJveD5cbiAgICAgICAgICB7ZXllYnJvdyAmJiA8Qm94IG1iPXs4fT57ZXllYnJvd308L0JveD59XG5cbiAgICAgICAgICA8VGV4dCBhcz1cImgyXCIgdmFyaWFudD1cInRpdGxlLXhsXCI+XG4gICAgICAgICAgICA8VGV4dCBtcj17OH0gZGlzcGxheT1cImlubGluZVwiPlxuICAgICAgICAgICAgICB7dGl0bGV9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICB7dGl0bGVCYWRnZSAmJiAoXG4gICAgICAgICAgICAgIDxTdHlsZWRCYWRnZSB2YXJpYW50PVwidGVydGlhcnlcIiBmb250U2l6ZT17MTR9PlxuICAgICAgICAgICAgICAgIHt0aXRsZUJhZGdlfVxuICAgICAgICAgICAgICA8L1N0eWxlZEJhZGdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L1RleHQ+XG5cbiAgICAgICAgICA8VGV4dCBtdD17OH0+e2Rlc2NyaXB0aW9ufTwvVGV4dD5cblxuICAgICAgICAgIHtjdGEgJiYgKFxuICAgICAgICAgICAgPFN0cm9rZUJ1dHRvbiBocmVmPXtjdGEuaHJlZn0gb25DbGljaz17Y3RhLm9uQ2xpY2t9IG10PXsxNn0+XG4gICAgICAgICAgICAgIHtjdGEubGFiZWx9XG4gICAgICAgICAgICA8L1N0cm9rZUJ1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICA8L0JveD5cbiAgICAgIDwvR3JpZEJveD5cbiAgICA8L0NvbnRlbnRDb250YWluZXI+XG4gIDwvQm94PlxuKTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQm9CIn0= */");
+const ProductFeatureShowcase = ({ image, displayImageBorder, title, titleBadge, eyebrow, description, cta }) => /* @__PURE__ */ React.createElement(Box, {
+	bg: "paleYellow",
+	position: "relative"
+}, /* @__PURE__ */ React.createElement(StyledPattern, {
+	color: "yellow",
+	position: "absolute",
+	left: 0,
+	top: 0,
+	bottom: 0,
+	width: "40%",
+	pointerEvents: "none",
+	display: {
+		_: "none",
+		md: "block"
+	}
+}), /* @__PURE__ */ React.createElement(ContentContainer, null, /* @__PURE__ */ React.createElement(GridBox, {
+	gridTemplateColumns: {
+		_: "1fr",
+		md: "1fr 1fr"
+	},
+	gap: {
+		_: 48,
+		md: 96
+	},
+	py: {
+		_: 48,
+		md: 64
+	},
+	alignItems: "center"
+}, /* @__PURE__ */ React.createElement(Box, { position: "relative" }, /* @__PURE__ */ React.createElement(StyledPattern, {
+	color: "yellow",
+	position: "absolute",
+	width: "100vw",
+	top: -48,
+	left: {
+		_: -16,
+		xs: -32,
+		sm: -64
+	},
+	height: "calc(50% + 48px)",
+	pointerEvents: "none",
+	display: { md: "none" }
+}), /* @__PURE__ */ React.createElement(Box, displayImageBorder ? {
+	borderWidth: 1,
+	border: "solid",
+	borderColor: "navy-400",
+	borderRadius: "lg",
+	overflow: "hidden"
+} : void 0, /* @__PURE__ */ React.createElement(PausableImage, {
+	src: image.src,
+	alt: image.alt
+}))), /* @__PURE__ */ React.createElement(Box, null, eyebrow && /* @__PURE__ */ React.createElement(Box, { mb: 8 }, eyebrow), /* @__PURE__ */ React.createElement(Text, {
+	as: "h2",
+	variant: "title-xl"
+}, /* @__PURE__ */ React.createElement(Text, {
+	mr: 8,
+	display: "inline"
+}, title), titleBadge && /* @__PURE__ */ React.createElement(StyledBadge, {
+	variant: "tertiary",
+	fontSize: 14
+}, titleBadge)), /* @__PURE__ */ React.createElement(Text, { mt: 8 }, description), cta && /* @__PURE__ */ React.createElement(StrokeButton, {
+	href: cta.href,
+	onClick: cta.onClick,
+	mt: 16
+}, cta.label)))));
+
+//#endregion
+export { ProductFeatureShowcase };
+//# sourceMappingURL=index.js.map

package/dist/ProductFeatureShowcase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Badge","Box","ContentContainer","GridBox","StrokeButton","Text","DiagonalBDense","styled","PausableImage","StyledPattern","theme","colors","yellow","StyledBadge","ProductFeatureShowcase","image","displayImageBorder","title","titleBadge","eyebrow","description","cta","bg","position","color","left","top","bottom","width","pointerEvents","display","_","md","gridTemplateColumns","gap","py","alignItems","xs","sm","height","borderWidth","border","borderColor","borderRadius","overflow","undefined","src","alt","mb","as","variant","mr","fontSize","mt","href","onClick","label"],"sources":["../../src/ProductFeatureShowcase/index.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  ContentContainer,\n  GridBox,\n  StrokeButton,\n  Text,\n} from '@codecademy/gamut';\nimport { DiagonalBDense } from '@codecademy/gamut-patterns';\nimport styled from '@emotion/styled';\n\nimport { PausableImage } from '..';\n\nconst StyledPattern = styled(DiagonalBDense)`\n  color: ${({ theme }) => theme.colors.yellow};\n`;\n\nconst StyledBadge = styled(Badge)`\n  display: inline-block;\n  position: relative;\n  top: -0.5rem;\n`;\n\nexport const ProductFeatureShowcase: React.FC<{\n  image: {\n    src: string;\n    alt: string;\n  };\n  displayImageBorder?: boolean;\n  title: React.ReactNode;\n  description: React.ReactNode;\n  titleBadge?: string;\n  eyebrow?: React.ReactNode;\n  cta?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n}> = ({\n  image,\n  displayImageBorder,\n  title,\n  titleBadge,\n  eyebrow,\n  description,\n  cta,\n}) => (\n  <Box bg=\"paleYellow\" position=\"relative\">\n    <StyledPattern\n      color=\"yellow\"\n      position=\"absolute\"\n      left={0}\n      top={0}\n      bottom={0}\n      width=\"40%\"\n      pointerEvents=\"none\"\n      display={{ _: 'none', md: 'block' }}\n    />\n    <ContentContainer>\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', md: '1fr 1fr' }}\n        gap={{ _: 48, md: 96 }}\n        py={{ _: 48, md: 64 }}\n        alignItems=\"center\"\n      >\n        <Box position=\"relative\">\n          <StyledPattern\n            color=\"yellow\"\n            position=\"absolute\"\n            width=\"100vw\"\n            top={-48}\n            left={{ _: -16, xs: -32, sm: -64 }}\n            height=\"calc(50% + 48px)\"\n            pointerEvents=\"none\"\n            display={{ md: 'none' }}\n          />\n          <Box\n            {...(displayImageBorder\n              ? {\n                  borderWidth: 1,\n                  border: 'solid',\n                  borderColor: 'navy-400',\n                  borderRadius: 'lg',\n                  overflow: 'hidden',\n                }\n              : undefined)}\n          >\n            <PausableImage src={image.src} alt={image.alt} />\n          </Box>\n        </Box>\n        <Box>\n          {eyebrow && <Box mb={8}>{eyebrow}</Box>}\n\n          <Text as=\"h2\" variant=\"title-xl\">\n            <Text mr={8} display=\"inline\">\n              {title}\n            </Text>\n            {titleBadge && (\n              <StyledBadge variant=\"tertiary\" fontSize={14}>\n                {titleBadge}\n              </StyledBadge>\n            )}\n          </Text>\n\n          <Text mt={8}>{description}</Text>\n\n          {cta && (\n            <StrokeButton href={cta.href} onClick={cta.onClick} mt={16}>\n              {cta.label}\n            </StrokeButton>\n          )}\n        </Box>\n      </GridBox>\n    </ContentContainer>\n  </Box>\n);\n"],"mappings":";;;;;;AAaA,MAAMS,gBAAgBF,uBAAOD,gBAAAA;;;cACjB,EAAEI,YAAYA,MAAMC,OAAOC,QAAM,KAAA,knIAAA;AAG7C,MAAMC,cAAcN,uBAAOP,OAAAA;;;;AAM3B,MAAac,0BAeP,EACJC,OACAC,oBACAC,OACAC,YACAC,SACAC,aACAC,UAEA,sBAAA,cAACpB,KAAAA;CAAIqB,IAAG;CAAaC,UAAS;GAC5B,sBAAA,cAACd,eAAAA;CACCe,OAAM;CACND,UAAS;CACTE,MAAM;CACNC,KAAK;CACLC,QAAQ;CACRC,OAAM;CACNC,eAAc;CACdC,SAAS;EAAEC,GAAG;EAAQC,IAAI;EAAQ;IAEpC,sBAAA,cAAC9B,kBAAAA,MACC,sBAAA,cAACC,SAAAA;CACC8B,qBAAqB;EAAEF,GAAG;EAAOC,IAAI;EAAU;CAC/CE,KAAK;EAAEH,GAAG;EAAIC,IAAI;EAAG;CACrBG,IAAI;EAAEJ,GAAG;EAAIC,IAAI;EAAG;CACpBI,YAAW;GAEX,sBAAA,cAACnC,KAAAA,EAAIsB,UAAS,cACZ,sBAAA,cAACd,eAAAA;CACCe,OAAM;CACND,UAAS;CACTK,OAAM;CACNF,KAAK;CACLD,MAAM;EAAEM,GAAG;EAAKM,IAAI;EAAKC,IAAI;EAAI;CACjCC,QAAO;CACPV,eAAc;CACdC,SAAS,EAAEE,IAAI,QAAO;IAExB,sBAAA,cAAC/B,KACMe,qBACD;CACEwB,aAAa;CACbC,QAAQ;CACRC,aAAa;CACbC,cAAc;CACdC,UAAU;CACZ,GACAC,QAEJ,sBAAA,cAACrC,eAAAA;CAAcsC,KAAK/B,MAAM+B;CAAKC,KAAKhC,MAAMgC;MAG9C,sBAAA,cAAC9C,KAAAA,MACEkB,WAAW,sBAAA,cAAClB,KAAAA,EAAI+C,IAAI,KAAI7B,QAAAA,EAEzB,sBAAA,cAACd,MAAAA;CAAK4C,IAAG;CAAKC,SAAQ;GACpB,sBAAA,cAAC7C,MAAAA;CAAK8C,IAAI;CAAGrB,SAAQ;GAClBb,MAAAA,EAEFC,cACC,sBAAA,cAACL,aAAAA;CAAYqC,SAAQ;CAAWE,UAAU;GACvClC,WAAAA,CAAAA,EAKP,sBAAA,cAACb,MAAAA,EAAKgD,IAAI,KAAIjC,YAAAA,EAEbC,OACC,sBAAA,cAACjB,cAAAA;CAAakD,MAAMjC,IAAIiC;CAAMC,SAASlC,IAAIkC;CAASF,IAAI;GACrDhC,IAAImC,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/QuizScore/index.cjs

@@ -0,0 +1,67 @@
+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/QuizScore/index.tsx
+const QuizScore = ({ correctCount, layout = "row", smallerFont, total, numOfRows, colorfulIcons, percentToPass }) => {
+	const isRowLayout = layout === "row";
+	const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;
+	const quizScore = total < 1 ? 0 : Math.round(correctCount / total * 100);
+	const affirmation = quizScore > 70 ? "Great job!" : "Practice makes perfect!";
+	return /* @__PURE__ */ react.createElement(_codecademy_gamut.GridBox, {
+		gridTemplateColumns: isRowLayout ? {
+			_: "minmax(0,1fr)",
+			md: "1fr min-content 1fr"
+		} : "",
+		gridTemplateRows: isRowLayout ? "" : "min-content 1fr min-content",
+		fontFamily: "accent",
+		gap: {
+			_: 16,
+			sm: 8
+		},
+		mb: {
+			_: !isRowLayout ? 16 : 32,
+			sm: 16
+		}
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		textAlign: "center"
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, { fontSize: smallerFont ? 34 : 44 }, `${quizScore}%`), percentToPass && quizScore < percentToPass && /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, { fontSize: 14 }, `Get ${percentToPass}% to pass`), /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, { fontSize: 14 }, affirmation)), /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
+		borderRight: 1,
+		borderBottom: 1,
+		display: {
+			_: "none",
+			xs: "block"
+		}
+	}), /* @__PURE__ */ react.createElement(_codecademy_gamut.GridBox, {
+		gridTemplateColumns: moreThan5Rows ? "repeat(2,minmax(0,max-content))" : layout === "row" ? "repeat(2,minmax(0,max-content))" : {
+			_: "repeat(2,minmax(0,max-content))",
+			xl: "20px 1fr 20px 1fr"
+		},
+		gridTemplateRows: moreThan5Rows ? "1fr 1fr" : "",
+		alignItems: "center",
+		columnGap: 16,
+		justifyContent: "center",
+		display: total === correctCount ? "flex" : "grid"
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut_icons.CheckFilledIcon, {
+		color: colorfulIcons ? "feedback-success" : "inherit",
+		"aria-hidden": true,
+		size: 24
+	}), /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+		fontSize: smallerFont ? 16 : 22,
+		lineHeight: 2
+	}, `${correctCount} correct`), correctCount < total && /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_codecademy_gamut_icons.DeleteFilledIcon, {
+		color: colorfulIcons ? "feedback-error" : "inherit",
+		"aria-hidden": true,
+		size: 24
+	}), /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+		fontSize: smallerFont ? 16 : 22,
+		lineHeight: 2
+	}, `${total - correctCount} to work on`))));
+};
+
+//#endregion
+exports.QuizScore = QuizScore;
+//# sourceMappingURL=index.cjs.map

package/dist/QuizScore/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","FlexBox","GridBox","Text","CheckFilledIcon","DeleteFilledIcon","React","QuizScore","correctCount","layout","smallerFont","total","numOfRows","colorfulIcons","percentToPass","isRowLayout","moreThan5Rows","quizScore","Math","round","affirmation","gridTemplateColumns","_","md","gridTemplateRows","fontFamily","gap","sm","mb","flexDirection","textAlign","fontSize","borderRight","borderBottom","display","xs","xl","alignItems","columnGap","justifyContent","color","aria-hidden","size","lineHeight"],"sources":["../../src/QuizScore/index.tsx"],"sourcesContent":["import { Box, FlexBox, GridBox, Text } from '@codecademy/gamut';\nimport { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\ninterface QuizScoreProps {\n  correctCount: number;\n  total: number;\n  layout?: 'row' | 'column';\n  smallerFont?: boolean;\n  numOfRows?: number;\n  colorfulIcons?: boolean;\n  percentToPass?: number;\n}\n\nexport const QuizScore: React.FC<QuizScoreProps> = ({\n  correctCount,\n  layout = 'row',\n  smallerFont,\n  total,\n  numOfRows,\n  colorfulIcons,\n  percentToPass,\n}) => {\n  const isRowLayout = layout === 'row';\n  const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;\n  const quizScore = total < 1 ? 0 : Math.round((correctCount / total) * 100);\n  const affirmation = quizScore > 70 ? 'Great job!' : 'Practice makes perfect!';\n  return (\n    <GridBox\n      gridTemplateColumns={\n        isRowLayout\n          ? {\n              _: 'minmax(0,1fr)',\n              md: '1fr min-content 1fr',\n            }\n          : ''\n      }\n      gridTemplateRows={isRowLayout ? '' : 'min-content 1fr min-content'}\n      fontFamily=\"accent\"\n      gap={{ _: 16, sm: 8 }}\n      mb={{ _: !isRowLayout ? 16 : 32, sm: 16 }}\n    >\n      <FlexBox flexDirection=\"column\" textAlign=\"center\">\n        <Text fontSize={smallerFont ? 34 : 44}>{`${quizScore}%`}</Text>\n        {percentToPass && quizScore < percentToPass && (\n          <Text fontSize={14}>{`Get ${percentToPass}% to pass`}</Text>\n        )}\n        <Text fontSize={14}>{affirmation}</Text>\n      </FlexBox>\n      <Box\n        borderRight={1}\n        borderBottom={1}\n        display={{ _: 'none', xs: 'block' }}\n      />\n      <GridBox\n        gridTemplateColumns={\n          moreThan5Rows\n            ? 'repeat(2,minmax(0,max-content))'\n            : layout === 'row'\n            ? 'repeat(2,minmax(0,max-content))'\n            : { _: 'repeat(2,minmax(0,max-content))', xl: '20px 1fr 20px 1fr' }\n        }\n        gridTemplateRows={moreThan5Rows ? '1fr 1fr' : ''}\n        alignItems=\"center\"\n        columnGap={16}\n        justifyContent=\"center\"\n        display={total === correctCount ? 'flex' : 'grid'}\n      >\n        <CheckFilledIcon\n          color={colorfulIcons ? 'feedback-success' : 'inherit'}\n          aria-hidden\n          size={24}\n        />\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>\n          {`${correctCount} correct`}\n        </Text>\n        {correctCount < total && (\n          <>\n            <DeleteFilledIcon\n              color={colorfulIcons ? 'feedback-error' : 'inherit'}\n              aria-hidden\n              size={24}\n            />\n            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n            <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>{`${\n              total - correctCount\n            } to work on`}</Text>\n          </>\n        )}\n      </GridBox>\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;;;AAcA,MAAaO,aAAuC,EAClDC,cACAC,SAAS,OACTC,aACAC,OACAC,WACAC,eACAC,oBACD;CACC,MAAMC,cAAcN,WAAW;CAC/B,MAAMO,gBAAgB,CAACD,eAAeH,aAAaA,YAAY;CAC/D,MAAMK,YAAYN,QAAQ,IAAI,IAAIO,KAAKC,MAAM,eAAgBR,QAAS,IAAA;CACtE,MAAMS,cAAcH,YAAY,KAAK,eAAe;AACpD,QACE,sBAAA,cAACf,2BAAAA;EACCmB,qBACEN,cACI;GACEO,GAAG;GACHC,IAAI;GACN,GACA;EAENC,kBAAkBT,cAAc,KAAK;EACrCU,YAAW;EACXC,KAAK;GAAEJ,GAAG;GAAIK,IAAI;GAAE;EACpBC,IAAI;GAAEN,GAAG,CAACP,cAAc,KAAK;GAAIY,IAAI;GAAG;IAExC,sBAAA,cAAC1B,2BAAAA;EAAQ4B,eAAc;EAASC,WAAU;IACxC,sBAAA,cAAC3B,wBAAAA,EAAK4B,UAAUrB,cAAc,KAAK,MAAK,GAAGO,UAAU,GAAE,EACtDH,iBAAiBG,YAAYH,iBAC5B,sBAAA,cAACX,wBAAAA,EAAK4B,UAAU,MAAK,OAAOjB,cAAc,WAAU,EAEtD,sBAAA,cAACX,wBAAAA,EAAK4B,UAAU,MAAKX,YAAAA,CAAAA,EAEvB,sBAAA,cAACpB,uBAAAA;EACCgC,aAAa;EACbC,cAAc;EACdC,SAAS;GAAEZ,GAAG;GAAQa,IAAI;GAAQ;KAEpC,sBAAA,cAACjC,2BAAAA;EACCmB,qBACEL,gBACI,oCACAP,WAAW,QACX,oCACA;GAAEa,GAAG;GAAmCc,IAAI;GAAoB;EAEtEZ,kBAAkBR,gBAAgB,YAAY;EAC9CqB,YAAW;EACXC,WAAW;EACXC,gBAAe;EACfL,SAASvB,UAAUH,eAAe,SAAS;IAE3C,sBAAA,cAACJ,yCAAAA;EACCoC,OAAO3B,gBAAgB,qBAAqB;EAC5C4B,eAAAA;EACAC,MAAM;KAGR,sBAAA,cAACvC,wBAAAA;EAAK4B,UAAUrB,cAAc,KAAK;EAAIiC,YAAY;IAChD,GAAGnC,aAAa,UAAS,EAE3BA,eAAeG,SACd,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACN,0CAAAA;EACCmC,OAAO3B,gBAAgB,mBAAmB;EAC1C4B,eAAAA;EACAC,MAAM;KAGR,sBAAA,cAACvC,wBAAAA;EAAK4B,UAAUrB,cAAc,KAAK;EAAIiC,YAAY;IAAW,GAC5DhC,QAAQH,aACT,aAAY,CAAA,CAAA,CAAA"}

package/dist/QuizScore/index.js

@@ -1,84 +1,65 @@
-import { Box, FlexBox, GridBox, Text } from '@codecademy/gamut';
-import { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';
-import * as React from 'react';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const QuizScore = ({
-  correctCount,
-  layout = 'row',
-  smallerFont,
-  total,
-  numOfRows,
-  colorfulIcons,
-  percentToPass
-}) => {
-  const isRowLayout = layout === 'row';
-  const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;
-  const quizScore = total < 1 ? 0 : Math.round(correctCount / total * 100);
-  const affirmation = quizScore > 70 ? 'Great job!' : 'Practice makes perfect!';
-  return /*#__PURE__*/_jsxs(GridBox, {
-    gridTemplateColumns: isRowLayout ? {
-      _: 'minmax(0,1fr)',
-      md: '1fr min-content 1fr'
-    } : '',
-    gridTemplateRows: isRowLayout ? '' : 'min-content 1fr min-content',
-    fontFamily: "accent",
-    gap: {
-      _: 16,
-      sm: 8
-    },
-    mb: {
-      _: !isRowLayout ? 16 : 32,
-      sm: 16
-    },
-    children: [/*#__PURE__*/_jsxs(FlexBox, {
-      flexDirection: "column",
-      textAlign: "center",
-      children: [/*#__PURE__*/_jsx(Text, {
-        fontSize: smallerFont ? 34 : 44,
-        children: `${quizScore}%`
-      }), percentToPass && quizScore < percentToPass && /*#__PURE__*/_jsx(Text, {
-        fontSize: 14,
-        children: `Get ${percentToPass}% to pass`
-      }), /*#__PURE__*/_jsx(Text, {
-        fontSize: 14,
-        children: affirmation
-      })]
-    }), /*#__PURE__*/_jsx(Box, {
-      borderRight: 1,
-      borderBottom: 1,
-      display: {
-        _: 'none',
-        xs: 'block'
-      }
-    }), /*#__PURE__*/_jsxs(GridBox, {
-      gridTemplateColumns: moreThan5Rows ? 'repeat(2,minmax(0,max-content))' : layout === 'row' ? 'repeat(2,minmax(0,max-content))' : {
-        _: 'repeat(2,minmax(0,max-content))',
-        xl: '20px 1fr 20px 1fr'
-      },
-      gridTemplateRows: moreThan5Rows ? '1fr 1fr' : '',
-      alignItems: "center",
-      columnGap: 16,
-      justifyContent: "center",
-      display: total === correctCount ? 'flex' : 'grid',
-      children: [/*#__PURE__*/_jsx(CheckFilledIcon, {
-        color: colorfulIcons ? 'feedback-success' : 'inherit',
-        "aria-hidden": true,
-        size: 24
-      }), /*#__PURE__*/_jsx(Text, {
-        fontSize: smallerFont ? 16 : 22,
-        lineHeight: 2,
-        children: `${correctCount} correct`
-      }), correctCount < total && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(DeleteFilledIcon, {
-          color: colorfulIcons ? 'feedback-error' : 'inherit',
-          "aria-hidden": true,
-          size: 24
-        }), /*#__PURE__*/_jsx(Text, {
-          fontSize: smallerFont ? 16 : 22,
-          lineHeight: 2,
-          children: `${total - correctCount} to work on`
-        })]
-      })]
-    })]
-  });
-};
+import { Box, FlexBox, GridBox, Text } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { CheckFilledIcon, DeleteFilledIcon } from "@codecademy/gamut-icons";
+
+//#region src/QuizScore/index.tsx
+const QuizScore = ({ correctCount, layout = "row", smallerFont, total, numOfRows, colorfulIcons, percentToPass }) => {
+	const isRowLayout = layout === "row";
+	const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;
+	const quizScore = total < 1 ? 0 : Math.round(correctCount / total * 100);
+	const affirmation = quizScore > 70 ? "Great job!" : "Practice makes perfect!";
+	return /* @__PURE__ */ React$1.createElement(GridBox, {
+		gridTemplateColumns: isRowLayout ? {
+			_: "minmax(0,1fr)",
+			md: "1fr min-content 1fr"
+		} : "",
+		gridTemplateRows: isRowLayout ? "" : "min-content 1fr min-content",
+		fontFamily: "accent",
+		gap: {
+			_: 16,
+			sm: 8
+		},
+		mb: {
+			_: !isRowLayout ? 16 : 32,
+			sm: 16
+		}
+	}, /* @__PURE__ */ React$1.createElement(FlexBox, {
+		flexDirection: "column",
+		textAlign: "center"
+	}, /* @__PURE__ */ React$1.createElement(Text, { fontSize: smallerFont ? 34 : 44 }, `${quizScore}%`), percentToPass && quizScore < percentToPass && /* @__PURE__ */ React$1.createElement(Text, { fontSize: 14 }, `Get ${percentToPass}% to pass`), /* @__PURE__ */ React$1.createElement(Text, { fontSize: 14 }, affirmation)), /* @__PURE__ */ React$1.createElement(Box, {
+		borderRight: 1,
+		borderBottom: 1,
+		display: {
+			_: "none",
+			xs: "block"
+		}
+	}), /* @__PURE__ */ React$1.createElement(GridBox, {
+		gridTemplateColumns: moreThan5Rows ? "repeat(2,minmax(0,max-content))" : layout === "row" ? "repeat(2,minmax(0,max-content))" : {
+			_: "repeat(2,minmax(0,max-content))",
+			xl: "20px 1fr 20px 1fr"
+		},
+		gridTemplateRows: moreThan5Rows ? "1fr 1fr" : "",
+		alignItems: "center",
+		columnGap: 16,
+		justifyContent: "center",
+		display: total === correctCount ? "flex" : "grid"
+	}, /* @__PURE__ */ React$1.createElement(CheckFilledIcon, {
+		color: colorfulIcons ? "feedback-success" : "inherit",
+		"aria-hidden": true,
+		size: 24
+	}), /* @__PURE__ */ React$1.createElement(Text, {
+		fontSize: smallerFont ? 16 : 22,
+		lineHeight: 2
+	}, `${correctCount} correct`), correctCount < total && /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(DeleteFilledIcon, {
+		color: colorfulIcons ? "feedback-error" : "inherit",
+		"aria-hidden": true,
+		size: 24
+	}), /* @__PURE__ */ React$1.createElement(Text, {
+		fontSize: smallerFont ? 16 : 22,
+		lineHeight: 2
+	}, `${total - correctCount} to work on`))));
+};
+
+//#endregion
+export { QuizScore };
+//# sourceMappingURL=index.js.map

package/dist/QuizScore/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","FlexBox","GridBox","Text","CheckFilledIcon","DeleteFilledIcon","React","QuizScore","correctCount","layout","smallerFont","total","numOfRows","colorfulIcons","percentToPass","isRowLayout","moreThan5Rows","quizScore","Math","round","affirmation","gridTemplateColumns","_","md","gridTemplateRows","fontFamily","gap","sm","mb","flexDirection","textAlign","fontSize","borderRight","borderBottom","display","xs","xl","alignItems","columnGap","justifyContent","color","aria-hidden","size","lineHeight"],"sources":["../../src/QuizScore/index.tsx"],"sourcesContent":["import { Box, FlexBox, GridBox, Text } from '@codecademy/gamut';\nimport { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\ninterface QuizScoreProps {\n  correctCount: number;\n  total: number;\n  layout?: 'row' | 'column';\n  smallerFont?: boolean;\n  numOfRows?: number;\n  colorfulIcons?: boolean;\n  percentToPass?: number;\n}\n\nexport const QuizScore: React.FC<QuizScoreProps> = ({\n  correctCount,\n  layout = 'row',\n  smallerFont,\n  total,\n  numOfRows,\n  colorfulIcons,\n  percentToPass,\n}) => {\n  const isRowLayout = layout === 'row';\n  const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;\n  const quizScore = total < 1 ? 0 : Math.round((correctCount / total) * 100);\n  const affirmation = quizScore > 70 ? 'Great job!' : 'Practice makes perfect!';\n  return (\n    <GridBox\n      gridTemplateColumns={\n        isRowLayout\n          ? {\n              _: 'minmax(0,1fr)',\n              md: '1fr min-content 1fr',\n            }\n          : ''\n      }\n      gridTemplateRows={isRowLayout ? '' : 'min-content 1fr min-content'}\n      fontFamily=\"accent\"\n      gap={{ _: 16, sm: 8 }}\n      mb={{ _: !isRowLayout ? 16 : 32, sm: 16 }}\n    >\n      <FlexBox flexDirection=\"column\" textAlign=\"center\">\n        <Text fontSize={smallerFont ? 34 : 44}>{`${quizScore}%`}</Text>\n        {percentToPass && quizScore < percentToPass && (\n          <Text fontSize={14}>{`Get ${percentToPass}% to pass`}</Text>\n        )}\n        <Text fontSize={14}>{affirmation}</Text>\n      </FlexBox>\n      <Box\n        borderRight={1}\n        borderBottom={1}\n        display={{ _: 'none', xs: 'block' }}\n      />\n      <GridBox\n        gridTemplateColumns={\n          moreThan5Rows\n            ? 'repeat(2,minmax(0,max-content))'\n            : layout === 'row'\n            ? 'repeat(2,minmax(0,max-content))'\n            : { _: 'repeat(2,minmax(0,max-content))', xl: '20px 1fr 20px 1fr' }\n        }\n        gridTemplateRows={moreThan5Rows ? '1fr 1fr' : ''}\n        alignItems=\"center\"\n        columnGap={16}\n        justifyContent=\"center\"\n        display={total === correctCount ? 'flex' : 'grid'}\n      >\n        <CheckFilledIcon\n          color={colorfulIcons ? 'feedback-success' : 'inherit'}\n          aria-hidden\n          size={24}\n        />\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>\n          {`${correctCount} correct`}\n        </Text>\n        {correctCount < total && (\n          <>\n            <DeleteFilledIcon\n              color={colorfulIcons ? 'feedback-error' : 'inherit'}\n              aria-hidden\n              size={24}\n            />\n            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n            <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>{`${\n              total - correctCount\n            } to work on`}</Text>\n          </>\n        )}\n      </GridBox>\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAaO,aAAuC,EAClDC,cACAC,SAAS,OACTC,aACAC,OACAC,WACAC,eACAC,oBACD;CACC,MAAMC,cAAcN,WAAW;CAC/B,MAAMO,gBAAgB,CAACD,eAAeH,aAAaA,YAAY;CAC/D,MAAMK,YAAYN,QAAQ,IAAI,IAAIO,KAAKC,MAAM,eAAgBR,QAAS,IAAA;CACtE,MAAMS,cAAcH,YAAY,KAAK,eAAe;AACpD,QACE,wBAAA,cAACf,SAAAA;EACCmB,qBACEN,cACI;GACEO,GAAG;GACHC,IAAI;GACN,GACA;EAENC,kBAAkBT,cAAc,KAAK;EACrCU,YAAW;EACXC,KAAK;GAAEJ,GAAG;GAAIK,IAAI;GAAE;EACpBC,IAAI;GAAEN,GAAG,CAACP,cAAc,KAAK;GAAIY,IAAI;GAAG;IAExC,wBAAA,cAAC1B,SAAAA;EAAQ4B,eAAc;EAASC,WAAU;IACxC,wBAAA,cAAC3B,MAAAA,EAAK4B,UAAUrB,cAAc,KAAK,MAAK,GAAGO,UAAU,GAAE,EACtDH,iBAAiBG,YAAYH,iBAC5B,wBAAA,cAACX,MAAAA,EAAK4B,UAAU,MAAK,OAAOjB,cAAc,WAAU,EAEtD,wBAAA,cAACX,MAAAA,EAAK4B,UAAU,MAAKX,YAAAA,CAAAA,EAEvB,wBAAA,cAACpB,KAAAA;EACCgC,aAAa;EACbC,cAAc;EACdC,SAAS;GAAEZ,GAAG;GAAQa,IAAI;GAAQ;KAEpC,wBAAA,cAACjC,SAAAA;EACCmB,qBACEL,gBACI,oCACAP,WAAW,QACX,oCACA;GAAEa,GAAG;GAAmCc,IAAI;GAAoB;EAEtEZ,kBAAkBR,gBAAgB,YAAY;EAC9CqB,YAAW;EACXC,WAAW;EACXC,gBAAe;EACfL,SAASvB,UAAUH,eAAe,SAAS;IAE3C,wBAAA,cAACJ,iBAAAA;EACCoC,OAAO3B,gBAAgB,qBAAqB;EAC5C4B,eAAAA;EACAC,MAAM;KAGR,wBAAA,cAACvC,MAAAA;EAAK4B,UAAUrB,cAAc,KAAK;EAAIiC,YAAY;IAChD,GAAGnC,aAAa,UAAS,EAE3BA,eAAeG,SACd,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAACN,kBAAAA;EACCmC,OAAO3B,gBAAgB,mBAAmB;EAC1C4B,eAAAA;EACAC,MAAM;KAGR,wBAAA,cAACvC,MAAAA;EAAK4B,UAAUrB,cAAc,KAAK;EAAIiC,YAAY;IAAW,GAC5DhC,QAAQH,aACT,aAAY,CAAA,CAAA,CAAA"}

package/dist/RatingsBar/index.cjs

@@ -0,0 +1,36 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+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);
+
+//#region src/RatingsBar/index.tsx
+const RatingsBarWrapper = /* @__PURE__ */ (0, _emotion_styled.default)("div", {
+	target: "e10q5efj0",
+	label: "brand-RatingsBarWrapper"
+})("border-width:", (0, _codecademy_gamut_styles.pxRem)(1), ";border-style:solid;border-radius:", (0, _codecademy_gamut_styles.pxRem)(80), ";background-color:", _codecademy_gamut_styles.theme.colors.white, ";height:", (0, _codecademy_gamut_styles.pxRem)(8), ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1JhdGluZ3NCYXIvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUmF0aW5nc0Jhci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgcHhSZW0sIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IHR5cGUgUmF0aW5nc0JhclByb3BzID0ge1xuICAvKipcbiAgICogTWluaW11bSBhbW91bnQgb2YgdGhlIGJhciB0byBmaWxsIGluIHZpc3VhbGx5LlxuICAgKi9cbiAgbWluaW11bVBlcmNlbnQ/OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIEhvdyBtdWNoIG9mIHRoZSBiYXIgdG8gZmlsbCBpbiwgYXMgYSBudW1iZXIgaW4gWzAsIDEwMF0uXG4gICAqL1xuICBwZXJjZW50OiBudW1iZXI7XG59O1xuXG5jb25zdCBSYXRpbmdzQmFyV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGJvcmRlci13aWR0aDogJHtweFJlbSgxKX07XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci1yYWRpdXM6ICR7cHhSZW0oODApfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMud2hpdGV9O1xuICBoZWlnaHQ6ICR7cHhSZW0oOCl9O1xuYDtcblxuY29uc3QgQmFyID0gc3R5bGVkLmRpdmBcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnllbGxvd307XG5gO1xuXG5leHBvcnQgY29uc3QgUmF0aW5nc0JhcjogUmVhY3QuRkM8UmF0aW5nc0JhclByb3BzPiA9ICh7XG4gIG1pbmltdW1QZXJjZW50ID0gMCxcbiAgcGVyY2VudCxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8UmF0aW5nc0JhcldyYXBwZXJcbiAgICAgIHJvbGU9XCJtZXRlclwiXG4gICAgICBhcmlhLXZhbHVlbm93PXtwZXJjZW50fVxuICAgICAgYXJpYS12YWx1ZW1pbj17MH1cbiAgICAgIGFyaWEtdmFsdWVtYXg9ezEwMH1cbiAgICAgIGFyaWEtbGFiZWw9XCJyYXRpbmdzIGJhclwiXG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgID5cbiAgICAgIDxCYXJcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJyYXRpbmdzLWJhci1iYXJcIlxuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZ2FtdXQvbm8taW5saW5lLXN0eWxlXG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgd2lkdGg6IGAke01hdGgubWF4KG1pbmltdW1QZXJjZW50LCBwZXJjZW50KX0lYCxcbiAgICAgICAgICBib3hTaGFkb3c6IHBlcmNlbnQgPiAwID8gYCR7cHhSZW0oMC41KX0gMCAwICR7cHhSZW0oMC41KX1gIDogJ25vbmUnLFxuICAgICAgICB9fVxuICAgICAgLz5cbiAgICA8L1JhdGluZ3NCYXJXcmFwcGVyPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjBCIn0= */");
+const Bar = /* @__PURE__ */ (0, _emotion_styled.default)("div", {
+	target: "e10q5efj1",
+	label: "brand-Bar"
+})("align-items:center;height:100%;display:flex;position:relative;border-radius:inherit;background-color:", _codecademy_gamut_styles.theme.colors.yellow, ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1JhdGluZ3NCYXIvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUmF0aW5nc0Jhci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgcHhSZW0sIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IHR5cGUgUmF0aW5nc0JhclByb3BzID0ge1xuICAvKipcbiAgICogTWluaW11bSBhbW91bnQgb2YgdGhlIGJhciB0byBmaWxsIGluIHZpc3VhbGx5LlxuICAgKi9cbiAgbWluaW11bVBlcmNlbnQ/OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIEhvdyBtdWNoIG9mIHRoZSBiYXIgdG8gZmlsbCBpbiwgYXMgYSBudW1iZXIgaW4gWzAsIDEwMF0uXG4gICAqL1xuICBwZXJjZW50OiBudW1iZXI7XG59O1xuXG5jb25zdCBSYXRpbmdzQmFyV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGJvcmRlci13aWR0aDogJHtweFJlbSgxKX07XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci1yYWRpdXM6ICR7cHhSZW0oODApfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMud2hpdGV9O1xuICBoZWlnaHQ6ICR7cHhSZW0oOCl9O1xuYDtcblxuY29uc3QgQmFyID0gc3R5bGVkLmRpdmBcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnllbGxvd307XG5gO1xuXG5leHBvcnQgY29uc3QgUmF0aW5nc0JhcjogUmVhY3QuRkM8UmF0aW5nc0JhclByb3BzPiA9ICh7XG4gIG1pbmltdW1QZXJjZW50ID0gMCxcbiAgcGVyY2VudCxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8UmF0aW5nc0JhcldyYXBwZXJcbiAgICAgIHJvbGU9XCJtZXRlclwiXG4gICAgICBhcmlhLXZhbHVlbm93PXtwZXJjZW50fVxuICAgICAgYXJpYS12YWx1ZW1pbj17MH1cbiAgICAgIGFyaWEtdmFsdWVtYXg9ezEwMH1cbiAgICAgIGFyaWEtbGFiZWw9XCJyYXRpbmdzIGJhclwiXG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgID5cbiAgICAgIDxCYXJcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJyYXRpbmdzLWJhci1iYXJcIlxuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZ2FtdXQvbm8taW5saW5lLXN0eWxlXG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgd2lkdGg6IGAke01hdGgubWF4KG1pbmltdW1QZXJjZW50LCBwZXJjZW50KX0lYCxcbiAgICAgICAgICBib3hTaGFkb3c6IHBlcmNlbnQgPiAwID8gYCR7cHhSZW0oMC41KX0gMCAwICR7cHhSZW0oMC41KX1gIDogJ25vbmUnLFxuICAgICAgICB9fVxuICAgICAgLz5cbiAgICA8L1JhdGluZ3NCYXJXcmFwcGVyPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QlkifQ== */");
+const RatingsBar = ({ minimumPercent = 0, percent }) => {
+	return /* @__PURE__ */ react.createElement(RatingsBarWrapper, {
+		role: "meter",
+		"aria-valuenow": percent,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-label": "ratings bar",
+		"aria-live": "polite"
+	}, /* @__PURE__ */ react.createElement(Bar, {
+		"data-testid": "ratings-bar-bar",
+		style: {
+			width: `${Math.max(minimumPercent, percent)}%`,
+			boxShadow: percent > 0 ? `${(0, _codecademy_gamut_styles.pxRem)(.5)} 0 0 ${(0, _codecademy_gamut_styles.pxRem)(.5)}` : "none"
+		}
+	}));
+};
+
+//#endregion
+exports.RatingsBar = RatingsBar;
+//# sourceMappingURL=index.cjs.map

package/dist/RatingsBar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["pxRem","theme","styled","React","RatingsBarWrapper","colors","white","Bar","yellow","RatingsBar","minimumPercent","percent","role","aria-valuenow","aria-valuemin","aria-valuemax","aria-label","aria-live","data-testid","style","width","Math","max","boxShadow"],"sources":["../../src/RatingsBar/index.tsx"],"sourcesContent":["import { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nexport type RatingsBarProps = {\n  /**\n   * Minimum amount of the bar to fill in visually.\n   */\n  minimumPercent?: number;\n\n  /**\n   * How much of the bar to fill in, as a number in [0, 100].\n   */\n  percent: number;\n};\n\nconst RatingsBarWrapper = styled.div`\n  border-width: ${pxRem(1)};\n  border-style: solid;\n  border-radius: ${pxRem(80)};\n  background-color: ${theme.colors.white};\n  height: ${pxRem(8)};\n`;\n\nconst Bar = styled.div`\n  align-items: center;\n  height: 100%;\n  display: flex;\n  position: relative;\n  border-radius: inherit;\n  background-color: ${theme.colors.yellow};\n`;\n\nexport const RatingsBar: React.FC<RatingsBarProps> = ({\n  minimumPercent = 0,\n  percent,\n}) => {\n  return (\n    <RatingsBarWrapper\n      role=\"meter\"\n      aria-valuenow={percent}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label=\"ratings bar\"\n      aria-live=\"polite\"\n    >\n      <Bar\n        data-testid=\"ratings-bar-bar\"\n        // eslint-disable-next-line gamut/no-inline-style\n        style={{\n          width: `${Math.max(minimumPercent, percent)}%`,\n          boxShadow: percent > 0 ? `${pxRem(0.5)} 0 0 ${pxRem(0.5)}` : 'none',\n        }}\n      />\n    </RatingsBarWrapper>\n  );\n};\n"],"mappings":";;;;;;;;AAgBA,MAAMI,oBAAoBF,6CAAAA,OAAAA;;;wDACF,EAAA,EAAA,0EAEC,GAAA,EAAA,sBACHD,+BAAMI,OAAOC,OAAK,gDACtB,EAAA,EAAA,KAAA,0qEAAA;AAGlB,MAAMC,MAAML,6CAAAA,OAAAA;;;4GAMUD,+BAAMI,OAAOG,QAAM,KAAA,0qEAAA;AAGzC,MAAaC,cAAyC,EACpDC,iBAAiB,GACjBC,cACD;AACC,QACE,sBAAA,cAACP,mBAAAA;EACCQ,MAAK;EACLC,iBAAeF;EACfG,iBAAe;EACfC,iBAAe;EACfC,cAAW;EACXC,aAAU;IAEV,sBAAA,cAACV,KAAAA;EACCW,eAAY;EAEZC,OAAO;GACLC,OAAO,GAAGC,KAAKC,IAAIZ,gBAAgBC,QAAAA,CAAS;GAC5CY,WAAWZ,UAAU,IAAI,uCAAS,GAAA,CAAK,2CAAa,GAAA,KAAS;GAC/D"}

package/dist/RatingsBar/index.d.cts

@@ -0,0 +1,17 @@
+import * as React$1 from "react";
+
+//#region src/RatingsBar/index.d.ts
+type RatingsBarProps = {
+  /**
+   * Minimum amount of the bar to fill in visually.
+   */
+  minimumPercent?: number;
+  /**
+   * How much of the bar to fill in, as a number in [0, 100].
+   */
+  percent: number;
+};
+declare const RatingsBar: React$1.FC<RatingsBarProps>;
+//#endregion
+export { RatingsBar, RatingsBarProps };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/RatingsBar/index.tsx"],"mappings":";;;KAIY,eAAA;;AAAZ;;EAIE,cAAA;EAAA;;AAyBF;EApBE,OAAA;AAAA;AAAA,cAoBW,UAAA,EAAY,OAAA,CAAM,EAAA,CAAG,eAAA"}

package/dist/RatingsBar/index.d.ts

@@ -1,12 +1,17 @@
-import * as React from 'react';
-export type RatingsBarProps = {
-    /**
-     * Minimum amount of the bar to fill in visually.
-     */
-    minimumPercent?: number;
-    /**
-     * How much of the bar to fill in, as a number in [0, 100].
-     */
-    percent: number;
+import * as React$1 from "react";
+
+//#region src/RatingsBar/index.d.ts
+type RatingsBarProps = {
+  /**
+   * Minimum amount of the bar to fill in visually.
+   */
+  minimumPercent?: number;
+  /**
+   * How much of the bar to fill in, as a number in [0, 100].
+   */
+  percent: number;
 };
-export declare const RatingsBar: React.FC<RatingsBarProps>;
+declare const RatingsBar: React$1.FC<RatingsBarProps>;
+//#endregion
+export { RatingsBar, RatingsBarProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/RatingsBar/index.tsx"],"mappings":";;;KAIY,eAAA;;AAAZ;;EAIE,cAAA;EAAA;;AAyBF;EApBE,OAAA;AAAA;AAAA,cAoBW,UAAA,EAAY,OAAA,CAAM,EAAA,CAAG,eAAA"}