@common-origin/design-system 1.9.0 → 1.9.2

package/dist/index.js

@@ -752,7 +752,7 @@ var AvatarContainer = styled.div.withConfig({
 }, function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.avatar[$size];
-}, tokens.base.border.radius.circle, tokens.semantic.color.background.subtle);
+}, tokens.base.border.radius.circle, tokens.semantic.color.background.surface);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2406,16 +2406,19 @@ var CardSmall = function CardSmall(_a) {
     height: 300
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "column",
-    gap: "none"
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "small"
-  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
+  }, 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)))));
+  }, meta))))));
 };
 var templateObject_1$7;
 
@@ -2595,68 +2598,64 @@ 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"
+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;
+  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;
 
@@ -3120,9 +3119,9 @@ exports.ChipGroup = ChipGroup;
 exports.CodeBlock = CodeBlock;
 exports.Container = Container;
 exports.DateFormatter = DateFormatter;
-exports.DesignCard = DesignCard;
 exports.Divider = Divider;
 exports.Dropdown = Dropdown;
+exports.FeatureBlock = FeatureBlock;
 exports.FilterChip = FilterChip;
 exports.Grid = Grid;
 exports.GridCol = GridCol;