@common-origin/design-system 1.8.6 → 1.9.1

package/dist/components/molecules/ArtCard/ArtCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type ArtCardProps = {
     title: string;
     excerpt: string;

package/dist/components/molecules/CardLarge/CardLarge.d.ts

@@ -0,0 +1,10 @@
+export type CardLargeProps = {
+    title: string;
+    excerpt: string;
+    subtitle?: string;
+    labels?: string[];
+    picture: string;
+    onImageClick?: () => void;
+    imageHref?: string;
+};
+export declare const CardLarge: ({ title, excerpt, subtitle, labels, picture, onImageClick, imageHref, }: CardLargeProps) => import("react").JSX.Element;

package/dist/components/molecules/CardLarge/index.d.ts

@@ -0,0 +1 @@
+export * from './CardLarge';

package/dist/components/molecules/CardSmall/CardSmall.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CardSmallProps = {
+    title: string;
+    picture?: string;
+    subtitle?: string;
+    meta?: string;
+    href?: string;
+};
+export declare const CardSmall: React.FC<CardSmallProps>;

package/dist/components/molecules/CardSmall/index.d.ts

@@ -0,0 +1 @@
+export * from './CardSmall';

package/dist/components/molecules/FeatureBlock/FeatureBlock.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type FeatureBlockProps = {
+    title: string;
+    excerpt: string;
+    labels: string[];
+    coverImage: string;
+    date: string;
+    onReadMore?: () => void;
+    readMoreHref?: string;
+    readMoreText?: string;
+};
+export declare const FeatureBlock: React.FC<FeatureBlockProps>;

package/dist/components/molecules/FeatureBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './FeatureBlock';

package/dist/components/molecules/index.d.ts

@@ -1,8 +1,8 @@
-export * from './ArtCard';
 export * from './Breadcrumbs';
+export * from './CardSmall';
+export * from './CardLarge';
 export * from './ChipGroup';
 export * from './CodeBlock';
-export * from './DesignCard';
+export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './PageTitle';
-export * from './ReleaseCard';

package/dist/index.esm.js

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import Link from 'next/link';
 import { parseISO, format } from 'date-fns';
-import Image from 'next/image';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -1949,7 +1948,7 @@ var Picture = function Picture(_a) {
     dataTestId = _a["data-testid"];
   var image = /*#__PURE__*/React.createElement(StyledImage, {
     src: src,
-    alt: "Cover Image for ".concat(title),
+    alt: title,
     width: width,
     height: height
   });
@@ -2341,65 +2340,12 @@ var Stack = function Stack(_a) {
 };
 var templateObject_1$9;
 
-React.createElement;
-var border$3 = tokens.base.border;
-var ArtCardStyled = styled.div.withConfig({
-  displayName: "ArtCard__ArtCardStyled",
-  componentId: "sc-1788cyb-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
-var ArtCard = function ArtCard(_a) {
-  var title = _a.title;
-    _a.excerpt;
-    var tag = _a.tag,
-    artist = _a.artist,
-    labels = _a.labels,
-    coverImage = _a.coverImage,
-    onImageClick = _a.onImageClick,
-    imageHref = _a.imageHref;
-  if (tag === 'art') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArtCardStyled, null, /*#__PURE__*/React.createElement(Stack, {
-      direction: "column",
-      gap: "md"
-    }, /*#__PURE__*/React.createElement(Picture, {
-      title: title,
-      src: coverImage,
-      onClick: onImageClick,
-      href: imageHref
-    }), /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "flex-start",
-      justifyContent: "space-between",
-      gap: "xs"
-    }, /*#__PURE__*/React.createElement(Stack, {
-      direction: "column",
-      gap: "xs"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "h6"
-    }, title), /*#__PURE__*/React.createElement(Typography, {
-      variant: "small",
-      color: "subdued"
-    }, artist)), /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "center",
-      gap: "xs"
-    }, Array.isArray(labels) && labels.map(function (label, index) {
-      return /*#__PURE__*/React.createElement(Chip, {
-        key: index,
-        title: label,
-        variant: "default"
-      });
-    }))))));
-  }
-  return null;
-};
-var templateObject_1$8;
-
 React.createElement;
 var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokens.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokens.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
@@ -2429,13 +2375,108 @@ var Breadcrumbs = function Breadcrumbs(_a) {
     }, breadcrumb.label)));
   }))));
 };
-var templateObject_1$7, templateObject_2$4;
+var templateObject_1$8, templateObject_2$4;
+
+React.createElement;
+var CardSmallStyled = styled.div.withConfig({
+  displayName: "CardSmall__CardSmallStyled",
+  componentId: "sc-jpcqvd-0"
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokens.base.border.radius[2], tokens.semantic.color.border.strong);
+var CardSmall = function CardSmall(_a) {
+  var title = _a.title,
+    picture = _a.picture,
+    subtitle = _a.subtitle,
+    meta = _a.meta,
+    href = _a.href;
+  if (!picture || !meta) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(CardSmallStyled, null, /*#__PURE__*/React.createElement(Link, {
+    href: href || '#',
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "sm"
+  }, /*#__PURE__*/React.createElement(Picture, {
+    title: title,
+    src: picture,
+    width: 300,
+    height: 300
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "xs"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "small"
+  }, title), /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "none"
+  }, subtitle && /*#__PURE__*/React.createElement(Typography, {
+    variant: "label",
+    color: "subdued"
+  }, subtitle), meta && /*#__PURE__*/React.createElement(Typography, {
+    variant: "label",
+    color: "subdued"
+  }, meta))))));
+};
+var templateObject_1$7;
+
+React.createElement;
+var border$3 = tokens.base.border;
+var CardLargeStyled = styled.div.withConfig({
+  displayName: "CardLarge__CardLargeStyled",
+  componentId: "sc-1rfgdzl-0"
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
+var CardLarge = function CardLarge(_a) {
+  var title = _a.title,
+    excerpt = _a.excerpt,
+    subtitle = _a.subtitle,
+    _b = _a.labels,
+    labels = _b === void 0 ? [] : _b,
+    picture = _a.picture,
+    onImageClick = _a.onImageClick,
+    imageHref = _a.imageHref;
+  return /*#__PURE__*/React.createElement(CardLargeStyled, null, /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "md"
+  }, /*#__PURE__*/React.createElement(Picture, {
+    title: title,
+    src: picture,
+    onClick: onImageClick,
+    href: imageHref
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: "xs"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "xs"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
+    variant: "small",
+    color: "subdued"
+  }, subtitle), excerpt && /*#__PURE__*/React.createElement(Typography, {
+    variant: "body"
+  }, excerpt)), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "xs"
+  }, Array.isArray(labels) && labels.map(function (label, index) {
+    return /*#__PURE__*/React.createElement(Chip, {
+      key: index,
+      title: label,
+      variant: "default"
+    });
+  })))));
+};
+var templateObject_1$6;
 
 React.createElement;
 var ChipGroupWrapper = styled.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
     _b = _a.variant,
@@ -2454,7 +2495,7 @@ var ChipGroup = function ChipGroup(_a) {
     });
   })));
 };
-var templateObject_1$6;
+var templateObject_1$5;
 
 React.createElement;
 var _a$2 = tokens.semantic,
@@ -2464,7 +2505,7 @@ var _a$2 = tokens.semantic,
 var StyledCodeBlock = styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokens.base.border.radius[2], spacing$2.layout.md, tokens.base.fontFamily.monospace, tokens.base.fontSize[1], tokens.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokens.base.border.radius[2], spacing$2.layout.md, tokens.base.fontFamily.monospace, tokens.base.fontSize[1], tokens.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
 var CodeBlockWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
@@ -2549,76 +2590,72 @@ var CodeBlock = function CodeBlock(_a) {
     onCopy: onCopy
   }));
 };
-var templateObject_1$5, templateObject_2$3, templateObject_3$3;
+var templateObject_1$4, templateObject_2$3, templateObject_3$3;
 
 React.createElement;
 var _a$1 = tokens.base,
   spacing$1 = _a$1.spacing,
   border$1 = _a$1.border;
-var DesignCardStyled = styled.div.withConfig({
-  displayName: "DesignCard__DesignCardStyled",
-  componentId: "sc-1lah9zd-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.base.breakpoint.md, tokens.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
+var FeatureBlockStyled = styled.div.withConfig({
+  displayName: "FeatureBlock__FeatureBlockStyled",
+  componentId: "sc-1mi4lso-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.base.breakpoint.md, tokens.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
 var ImageWrapper = styled.div.withConfig({
-  displayName: "DesignCard__ImageWrapper",
-  componentId: "sc-1lah9zd-1"
+  displayName: "FeatureBlock__ImageWrapper",
+  componentId: "sc-1mi4lso-1"
 })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.base.breakpoint.lg);
 var ContentSection = styled.div.withConfig({
-  displayName: "DesignCard__ContentSection",
-  componentId: "sc-1lah9zd-2"
+  displayName: "FeatureBlock__ContentSection",
+  componentId: "sc-1mi4lso-2"
 })(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokens.base.breakpoint.lg, spacing$1[8], tokens.base.breakpoint.xl, spacing$1[24]);
 var ButtonWrapper = styled.div.withConfig({
-  displayName: "DesignCard__ButtonWrapper",
-  componentId: "sc-1lah9zd-3"
+  displayName: "FeatureBlock__ButtonWrapper",
+  componentId: "sc-1mi4lso-3"
 })(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
 var ContentWrapper = styled.div.withConfig({
-  displayName: "DesignCard__ContentWrapper",
-  componentId: "sc-1lah9zd-4"
+  displayName: "FeatureBlock__ContentWrapper",
+  componentId: "sc-1mi4lso-4"
 })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
-var DesignCard = function DesignCard(_a) {
+var FeatureBlock = function FeatureBlock(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
     _b = _a.labels,
     labels = _b === void 0 ? [] : _b,
-    tag = _a.tag,
     coverImage = _a.coverImage,
     date = _a.date,
     onReadMore = _a.onReadMore,
     readMoreHref = _a.readMoreHref,
     _c = _a.readMoreText,
     readMoreText = _c === void 0 ? "Read more" : _c;
-  if (tag === 'design') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DesignCardStyled, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Picture, {
-      title: title,
-      src: coverImage
-    })), /*#__PURE__*/React.createElement(ContentSection, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Stack, {
-      direction: "column",
-      gap: "md"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "h3"
-    }, title), /*#__PURE__*/React.createElement(DateFormatter, {
-      dateString: date
-    }), /*#__PURE__*/React.createElement(Typography, {
-      variant: "small"
-    }, excerpt), /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      gap: "xs"
-    }, Array.isArray(labels) && labels.map(function (label, index) {
-      return /*#__PURE__*/React.createElement(Chip, {
-        key: index,
-        title: label,
-        variant: "default"
-      });
-    })), (onReadMore || readMoreHref) && /*#__PURE__*/React.createElement(ButtonWrapper, null, readMoreHref ? /*#__PURE__*/React.createElement(Button, {
-      purpose: "link",
-      url: readMoreHref
-    }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
-      onClick: onReadMore
-    }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
-  }
-  return null;
-};
-var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FeatureBlockStyled, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Picture, {
+    title: title,
+    src: coverImage
+  })), /*#__PURE__*/React.createElement(ContentSection, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "md"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h3"
+  }, title), /*#__PURE__*/React.createElement(DateFormatter, {
+    dateString: date
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "small"
+  }, excerpt), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    gap: "xs"
+  }, Array.isArray(labels) && labels.map(function (label, index) {
+    return /*#__PURE__*/React.createElement(Chip, {
+      key: index,
+      title: label,
+      variant: "default"
+    });
+  })), (onReadMore || readMoreHref) && /*#__PURE__*/React.createElement(ButtonWrapper, null, readMoreHref ? /*#__PURE__*/React.createElement(Button, {
+    purpose: "link",
+    url: readMoreHref
+  }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
+    onClick: onReadMore
+  }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
+};
+var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
 
 React.createElement;
 var _a = tokens.base,
@@ -2632,7 +2669,7 @@ var _a = tokens.base,
 var DropdownContainer = styled.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var DropdownTrigger = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2829,7 +2866,7 @@ var Dropdown = function Dropdown(_a) {
     }, option.label);
   })));
 };
-var templateObject_1$3, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
+var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
 React.createElement;
 var PageTitleStyled = styled.div.withConfig({
@@ -2838,7 +2875,7 @@ var PageTitleStyled = styled.div.withConfig({
   },
   displayName: "PageTitle__PageTitleStyled",
   componentId: "sc-16h256f-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokens.base.spacing[6], function (_a) {
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokens.base.spacing[6], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
   return $hasBackButton ? tokens.base.spacing[0] : tokens.base.spacing[12];
 });
@@ -2865,52 +2902,6 @@ var PageTitle = function PageTitle(_a) {
     color: "subdued"
   }, subtitle)));
 };
-var templateObject_1$2;
-
-React.createElement;
-var ReleaseCardStyled = styled.div.withConfig({
-  displayName: "ReleaseCard__ReleaseCardStyled",
-  componentId: "sc-44tbzg-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokens.base.border.radius[2], tokens.semantic.color.border.strong);
-var ReleaseCard = function ReleaseCard(_a) {
-  var title = _a.title,
-    coverImage = _a.coverImage,
-    artist = _a.artist,
-    date = _a.date,
-    slug = _a.slug;
-  if (!coverImage || !date) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ReleaseCardStyled, null, /*#__PURE__*/React.createElement(Link, {
-    href: "/releases/".concat(slug),
-    "aria-label": title
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "sm"
-  }, /*#__PURE__*/React.createElement(Image, {
-    alt: title,
-    src: coverImage,
-    width: 300,
-    height: 300,
-    sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 25vw, (max-width: 1280px) 16.66vw, 14.28vw",
-    placeholder: "blur",
-    blurDataURL: coverImage,
-    style: {
-      width: '100%',
-      height: 'auto'
-    }
-  }), /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    gap: "none"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "small"
-  }, title), /*#__PURE__*/React.createElement(Typography, {
-    variant: "label",
-    color: "subdued"
-  }, artist), /*#__PURE__*/React.createElement(DateFormatter, {
-    dateString: date
-  })))));
-};
 var templateObject_1$1;
 
 React.createElement;
@@ -3113,5 +3104,5 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
-export { ArtCard, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Divider, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, Stack, Typography, iconsData, tokens };
+export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map