@common-origin/design-system 1.8.6 → 1.9.0

package/dist/index.js

@@ -4,7 +4,6 @@ var React = require('react');
 var styled = require('styled-components');
 var Link = require('next/link');
 var dateFns = require('date-fns');
-var Image = require('next/image');
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -1951,7 +1950,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
   });
@@ -2343,65 +2342,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"
@@ -2431,13 +2377,105 @@ 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: "none"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "small"
+  }, title), 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,
@@ -2456,7 +2494,7 @@ var ChipGroup = function ChipGroup(_a) {
     });
   })));
 };
-var templateObject_1$6;
+var templateObject_1$5;
 
 React.createElement;
 var _a$2 = tokens.semantic,
@@ -2466,7 +2504,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"
@@ -2551,7 +2589,7 @@ 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,
@@ -2560,7 +2598,7 @@ var _a$1 = tokens.base,
 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]);
+})(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"
@@ -2620,7 +2658,7 @@ var DesignCard = function DesignCard(_a) {
   }
   return null;
 };
-var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
+var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
 
 React.createElement;
 var _a = tokens.base,
@@ -2634,7 +2672,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('$');
@@ -2831,7 +2869,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({
@@ -2840,7 +2878,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];
 });
@@ -2867,52 +2905,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;
@@ -3115,13 +3107,14 @@ 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;
 
-exports.ArtCard = ArtCard;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BooleanChip = BooleanChip;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
+exports.CardLarge = CardLarge;
+exports.CardSmall = CardSmall;
 exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
 exports.CodeBlock = CodeBlock;
@@ -3139,7 +3132,6 @@ exports.LegacyChip = LegacyChip;
 exports.PageTitle = PageTitle;
 exports.Picture = Picture;
 exports.ProgressBar = ProgressBar;
-exports.ReleaseCard = ReleaseCard;
 exports.ResponsiveGrid = ResponsiveGrid;
 exports.Stack = Stack;
 exports.Typography = Typography;