@common-origin/design-system 1.15.1 → 1.15.3

package/dist/components/atoms/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import iconsData from '@/styles/icons.json';
+import { type IconName } from '../Icon';
 export interface BaseButtonProps {
     variant?: 'primary' | 'secondary' | 'naked';
     size?: 'small' | 'medium' | 'large';
@@ -7,7 +7,7 @@ export interface BaseButtonProps {
     purpose?: 'button' | 'link';
     target?: string;
     children: React.ReactNode;
-    iconName?: keyof typeof iconsData;
+    iconName?: IconName;
     id?: string;
     'data-testid'?: string;
 }

package/dist/index.esm.js

@@ -804,7 +804,7 @@ var AvatarInitials = styled.span.withConfig({
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(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"
+})(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"
 // Helper function to get initials from name
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -867,7 +867,7 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$y, templateObject_2$l, templateObject_3$h;
+var templateObject_1$y, templateObject_2$l, templateObject_3$i;
 
 React.createElement;
 var _a$5 = tokensData.semantic,
@@ -1018,7 +1018,7 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(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) {
+})(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) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
   return props.$isDot ? '8px' : '16px';
@@ -1074,7 +1074,7 @@ var Badge = function Badge(_a) {
     color: "inverse"
   }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
 };
-var templateObject_1$w, templateObject_2$k, templateObject_3$g, templateObject_4$e;
+var templateObject_1$w, templateObject_2$k, templateObject_3$h, templateObject_4$e;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1090,7 +1090,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$flexDirection && css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
   return props.$alignItems && css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
@@ -1276,7 +1276,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-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 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 add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1571,6 +1571,16 @@ 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
@@ -1609,18 +1619,14 @@ var Button = function Button(_a) {
     iconName = _a.iconName,
     dataTestId = _a["data-testid"],
     rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", 'data-testid']);
-  // For internal links, use Next.js Link
+  // For internal links, use Next.js Link (modern API without legacyBehavior)
   if (purpose === 'link' && url && !url.startsWith('http') && !target) {
-    var linkProps = rest;
-    return /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(StyledNextLink, {
       href: url,
-      passHref: true,
-      legacyBehavior: true
-    }, /*#__PURE__*/React.createElement(StyledLink, _extends({
       $variant: variant,
       $size: size,
       "data-testid": dataTestId
-    }, linkProps), renderButtonContent(children, iconName, size)));
+    }, renderButtonContent(children, iconName, size));
   }
   // For external links or links with target
   if (purpose === 'link' && url) {
@@ -1663,7 +1669,7 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$t, templateObject_2$i;
+var templateObject_1$t, templateObject_2$i, templateObject_3$f;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles as objects for CSS custom properties