@common-origin/design-system 1.16.1 → 2.0.0

package/dist/index.js

@@ -2,7 +2,6 @@
 
 var React = require('react');
 var styled = require('styled-components');
-var Link = require('next/link');
 var dateFns = require('date-fns');
 
 function _extends() {
@@ -747,7 +746,7 @@ var semantic$a = {
 		h1: "700 3rem/3rem 'Inter', sans-serif",
 		h2: "700 2rem/2.5rem 'Inter', sans-serif",
 		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
-		h4: "500 1.5rem/2rem 'Inter', sans-serif",
+		h4: "700 1.5rem/2rem 'Inter', sans-serif",
 		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
 		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
 		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
@@ -806,7 +805,7 @@ var AvatarInitials = styled.span.withConfig({
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -869,7 +868,7 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$y, templateObject_2$l, templateObject_3$i;
+var templateObject_1$y, templateObject_2$l, templateObject_3$h;
 
 React.createElement;
 var _a$5 = tokensData.semantic,
@@ -1020,7 +1019,7 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? '8px' : '16px';
@@ -1076,7 +1075,7 @@ var Badge = function Badge(_a) {
     color: "inverse"
   }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
 };
-var templateObject_1$w, templateObject_2$k, templateObject_3$h, templateObject_4$e;
+var templateObject_1$w, templateObject_2$k, templateObject_3$g, templateObject_4$e;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1092,7 +1091,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$flexDirection && styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && styled.css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && styled.css(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
   return props.$alignItems && styled.css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
@@ -1278,7 +1277,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$v, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
+var templateObject_1$v, templateObject_2$j, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1608,16 +1607,6 @@ var StyledLink = styled.a.withConfig({
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
 })(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
-// Styled Next.js Link component (modern API without legacyBehavior)
-])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
-// Styled Next.js Link component (modern API without legacyBehavior)
-var StyledNextLink = styled(Link).withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "Button__StyledNextLink",
-  componentId: "sc-1eiuum9-2"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
 ])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
 // Helper function to get icon size based on button size
@@ -1654,18 +1643,21 @@ var Button = function Button(_a) {
     children = _a.children,
     target = _a.target,
     iconName = _a.iconName,
+    LinkComponent = _a.linkComponent,
     dataTestId = _a["data-testid"],
-    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", 'data-testid']);
-  // For internal links, use Next.js Link (modern API without legacyBehavior)
-  if (purpose === 'link' && url && !url.startsWith('http') && !target) {
-    return /*#__PURE__*/React.createElement(StyledNextLink, {
-      href: url,
+    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
+  // For links with custom link component (e.g., Next.js Link, React Router Link)
+  if (purpose === 'link' && url && LinkComponent) {
+    return /*#__PURE__*/React.createElement(LinkComponent, {
+      href: url
+    }, /*#__PURE__*/React.createElement(StyledLink, {
+      as: "span",
       $variant: variant,
       $size: size,
       "data-testid": dataTestId
-    }, renderButtonContent(children, iconName, size));
+    }, renderButtonContent(children, iconName, size)));
   }
-  // For external links or links with target
+  // For standard links (external or without custom component)
   if (purpose === 'link' && url) {
     var linkProps = rest;
     return /*#__PURE__*/React.createElement(StyledLink, _extends({
@@ -1706,7 +1698,7 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$t, templateObject_2$i, templateObject_3$f;
+var templateObject_1$t, templateObject_2$i;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles as objects for CSS custom properties
@@ -2737,7 +2729,8 @@ var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
 var Breadcrumbs = function Breadcrumbs(_a) {
-  var breadcrumbs = _a.breadcrumbs;
+  var breadcrumbs = _a.breadcrumbs,
+    LinkComponent = _a.linkComponent;
   return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(BreadcrumbNavStyled, {
     "aria-label": "breadcrumb"
   }, /*#__PURE__*/React.createElement("ol", null, breadcrumbs.map(function (breadcrumb, index) {
@@ -2745,15 +2738,16 @@ var Breadcrumbs = function Breadcrumbs(_a) {
       key: index
     }, index === breadcrumbs.length - 1 ? /*#__PURE__*/React.createElement(Typography, {
       variant: "caption"
-    }, breadcrumb.label) : isInternalUrl(breadcrumb.url) ? /*#__PURE__*/React.createElement(Link, {
+    }, breadcrumb.label) : LinkComponent && isInternalUrl(breadcrumb.url) ? /*#__PURE__*/React.createElement(LinkComponent, {
       href: breadcrumb.url
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "caption"
-    }, breadcrumb.label)) : /*#__PURE__*/React.createElement("a", {
-      href: breadcrumb.url,
+    }, breadcrumb.label)) : /*#__PURE__*/React.createElement("a", _extends({
+      href: breadcrumb.url
+    }, !isInternalUrl(breadcrumb.url) && {
       target: "_blank",
       rel: "noopener noreferrer"
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React.createElement(Typography, {
       variant: "caption"
     }, breadcrumb.label)));
   }))));
@@ -2770,14 +2764,12 @@ var CardSmall = function CardSmall(_a) {
     picture = _a.picture,
     subtitle = _a.subtitle,
     meta = _a.meta,
-    href = _a.href;
+    href = _a.href,
+    LinkComponent = _a.linkComponent;
   if (!picture || !meta) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(CardSmallStyled, null, /*#__PURE__*/React.createElement(Link, {
-    href: href || '#',
-    "aria-label": title
-  }, /*#__PURE__*/React.createElement(Stack, {
+  var content = /*#__PURE__*/React.createElement(Stack, {
     direction: "column",
     gap: "sm"
   }, /*#__PURE__*/React.createElement(Picture, {
@@ -2799,7 +2791,14 @@ var CardSmall = function CardSmall(_a) {
   }, subtitle), meta && /*#__PURE__*/React.createElement(Typography, {
     variant: "label",
     color: "subdued"
-  }, meta))))));
+  }, meta))));
+  return /*#__PURE__*/React.createElement(CardSmallStyled, null, LinkComponent && href ? /*#__PURE__*/React.createElement(LinkComponent, {
+    href: href,
+    "aria-label": title
+  }, content) : /*#__PURE__*/React.createElement("a", {
+    href: href || '#',
+    "aria-label": title
+  }, content));
 };
 var templateObject_1$h;