@shapesos/clay 0.13.1 → 0.14.0

package/dist/artifacts.js

@@ -11,16 +11,16 @@ import {
   artifactToClipboardText,
   artifactTypes,
   isSafeDownloadUrl
-} from "./chunk-DT44KNCV.js";
+} from "./chunk-XFJ6XMJZ.js";
+import "./chunk-PYDVANWI.js";
 import "./chunk-LXYCT4YO.js";
-import "./chunk-QXGYMDIA.js";
+import "./chunk-OLJIJYB5.js";
+import "./chunk-YZB6YXKK.js";
 import "./chunk-C77QMQNT.js";
-import "./chunk-SV24ONND.js";
+import "./chunk-UXT2H3FM.js";
+import "./chunk-JF3P66JF.js";
 import "./chunk-4MZZH3WX.js";
 import "./chunk-P6GUNIAE.js";
-import "./chunk-OBOXCBDL.js";
-import "./chunk-OLJIJYB5.js";
-import "./chunk-JF3P66JF.js";
 import "./chunk-5WRI5ZAA.js";
 export {
   ArtifactCopyAsImageButton,

package/dist/blocks.cjs

@@ -492,6 +492,59 @@ var BORDER_RADIUS = {
   small: 6,
   medium: 10
 };
+var intentStyles = {
+  secondary: ({ $isSelected }) => import_styled_components2.css`
+    background: ${$isSelected ? colors["brown-40"] : "transparent"};
+    color: ${colors["brown-100"]};
+
+    &:hover:not(:disabled) {
+      background: ${$isSelected ? colors["brown-40"] : colors["brown-20"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-40"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: transparent;
+    }
+  `,
+  primary: () => import_styled_components2.css`
+    background: ${colors["brown-100"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["brown-90"]};
+    }
+
+    &:disabled {
+      color: ${colors["brown-50"]};
+      background: ${colors["brown-20"]};
+    }
+  `,
+  error: () => import_styled_components2.css`
+    background: ${colors["red-500"]};
+    color: ${colors.white};
+
+    &:hover:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:active:not(:disabled) {
+      background: ${colors["red-600"]};
+    }
+
+    &:disabled {
+      color: ${colors["red-200"]};
+      background: ${colors["red-100"]};
+    }
+  `
+};
 var Button = import_styled_components2.default.button`
   display: inline-flex;
   align-items: center;
@@ -499,22 +552,12 @@ var Button = import_styled_components2.default.button`
   padding: ${({ $size, $variant }) => PADDING[$variant][$size]};
   border: none;
   border-radius: ${({ $size }) => BORDER_RADIUS[$size]}px;
-  background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : "transparent"};
-  color: ${colors["brown-100"]};
   cursor: pointer;
   transition: background-color 100ms ease;
 
-  &:hover {
-    background: ${({ $isSelected }) => $isSelected ? colors["brown-40"] : colors["brown-20"]};
-  }
-
-  &:active {
-    background: ${colors["brown-40"]};
-  }
+  ${({ $intent, $isSelected }) => intentStyles[$intent]({ $isSelected })}
 
   &:disabled {
-    color: ${colors["brown-50"]};
-    background: transparent;
     cursor: not-allowed;
   }
 `;
@@ -529,6 +572,7 @@ var IconButton = (0, import_react4.forwardRef)(function IconButton2({
   icon,
   size = "small",
   variant = "short",
+  intent = "secondary",
   isSelected = false,
   disabled = false,
   onClick,
@@ -548,6 +592,7 @@ var IconButton = (0, import_react4.forwardRef)(function IconButton2({
       as,
       $size: size,
       $variant: variant,
+      $intent: intent,
       $isSelected: isSelected,
       disabled,
       onClick: disabled ? void 0 : onClick,
@@ -920,7 +965,7 @@ init_colors();
 var fontFamilies = {
   /** Geist — primary UI font for body text, labels, headings, and display. */
   GEIST: "Geist",
-  /** Crimson Pro — editorial/serif font, always italic. Used for decorative headings and pull quotes. */
+  /** Crimson Pro — editorial/serif font, mostly italic. Used for decorative headings and pull quotes. */
   CRIMSON_PRO: "Crimson Pro"
 };
 var typographyTypes = {
@@ -960,14 +1005,16 @@ var typographyTypes = {
   GEIST_HEADING_L_BOLD: "GEIST_HEADING_L_BOLD",
   // Geist Display Large (36px)
   GEIST_DISPLAY_L_MEDIUM: "GEIST_DISPLAY_L_MEDIUM",
-  // Crimson Pro Body Small (16px)
-  CRIMSON_PRO_BODY_S_LIGHT: "CRIMSON_PRO_BODY_S_LIGHT",
-  // Crimson Pro Body Medium (18px)
-  CRIMSON_PRO_BODY_M_LIGHT: "CRIMSON_PRO_BODY_M_LIGHT",
-  // Crimson Pro Heading Medium (24px)
-  CRIMSON_PRO_HEADING_M_MEDIUM: "CRIMSON_PRO_HEADING_M_MEDIUM",
-  // Crimson Pro Display Extra Large (46px)
-  CRIMSON_PRO_DISPLAY_XL_REGULAR: "CRIMSON_PRO_DISPLAY_XL_REGULAR"
+  // Crimson Pro Body Small (16px, italic)
+  CRIMSON_PRO_BODY_S_LIGHT_ITALIC: "CRIMSON_PRO_BODY_S_LIGHT_ITALIC",
+  // Crimson Pro Body Medium (18px, italic)
+  CRIMSON_PRO_BODY_M_LIGHT_ITALIC: "CRIMSON_PRO_BODY_M_LIGHT_ITALIC",
+  // Crimson Pro Heading Medium (24px, italic)
+  CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC: "CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC",
+  // Crimson Pro Display Large (40px, upright)
+  CRIMSON_PRO_DISPLAY_L_REGULAR: "CRIMSON_PRO_DISPLAY_L_REGULAR",
+  // Crimson Pro Display Extra Large (46px, italic)
+  CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC: "CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC"
 };
 var typographyStyles = {
   // Geist Label Caption (12px)
@@ -1162,8 +1209,8 @@ var typographyStyles = {
     lineHeight: 44,
     letterSpacing: -0.72
   },
-  // Crimson Pro Body Small (16px)
-  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT]: {
+  // Crimson Pro Body Small (16px, italic)
+  [typographyTypes.CRIMSON_PRO_BODY_S_LIGHT_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 16,
     fontWeight: 300,
@@ -1171,8 +1218,8 @@ var typographyStyles = {
     letterSpacing: -0.32,
     fontStyle: "italic"
   },
-  // Crimson Pro Body Medium (18px)
-  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT]: {
+  // Crimson Pro Body Medium (18px, italic)
+  [typographyTypes.CRIMSON_PRO_BODY_M_LIGHT_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 18,
     fontWeight: 300,
@@ -1180,8 +1227,8 @@ var typographyStyles = {
     letterSpacing: 0,
     fontStyle: "italic"
   },
-  // Crimson Pro Heading Medium (24px)
-  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM]: {
+  // Crimson Pro Heading Medium (24px, italic)
+  [typographyTypes.CRIMSON_PRO_HEADING_M_MEDIUM_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 24,
     fontWeight: 400,
@@ -1189,8 +1236,16 @@ var typographyStyles = {
     letterSpacing: -0.48,
     fontStyle: "italic"
   },
-  // Crimson Pro Display Extra Large (46px)
-  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR]: {
+  // Crimson Pro Display Large (40px, upright)
+  [typographyTypes.CRIMSON_PRO_DISPLAY_L_REGULAR]: {
+    fontFamily: fontFamilies.CRIMSON_PRO,
+    fontSize: 40,
+    fontWeight: 300,
+    lineHeight: 48,
+    letterSpacing: -1.6
+  },
+  // Crimson Pro Display Extra Large (46px, italic)
+  [typographyTypes.CRIMSON_PRO_DISPLAY_XL_REGULAR_ITALIC]: {
     fontFamily: fontFamilies.CRIMSON_PRO,
     fontSize: 46,
     fontWeight: 400,