@salesmind-ai/design-system 0.4.1 → 0.5.0

package/dist/{SectionShell-D1YC7vey.d.cts → SectionShell-CrgrzWK6.d.cts}

@@ -17,4 +17,4 @@ interface SectionShellProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const SectionShell: React__default.ForwardRefExoticComponent<SectionShellProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { SectionHeader as S, type SectionHeaderProps as a, SectionShell as b, type SectionShellProps as c };
+export { type SectionHeaderProps as S, type SectionShellProps as a, SectionHeader as b, SectionShell as c };

package/dist/{SectionShell-D1YC7vey.d.ts → SectionShell-CrgrzWK6.d.ts}

@@ -17,4 +17,4 @@ interface SectionShellProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const SectionShell: React__default.ForwardRefExoticComponent<SectionShellProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { SectionHeader as S, type SectionHeaderProps as a, SectionShell as b, type SectionShellProps as c };
+export { type SectionHeaderProps as S, type SectionShellProps as a, SectionHeader as b, SectionShell as c };

package/dist/{StatsSection-Bs1ugbAt.d.ts → StatsSection-BvgUXtrd.d.ts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as SectionShellProps } from './SectionShell-D1YC7vey.js';
+import { a as SectionShellProps } from './SectionShell-CrgrzWK6.js';
 
 interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {
     variant?: 'left' | 'center' | 'split';

package/dist/{StatsSection-Bdrm8XsT.d.cts → StatsSection-WaiVrRH0.d.cts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as SectionShellProps } from './SectionShell-D1YC7vey.cjs';
+import { a as SectionShellProps } from './SectionShell-CrgrzWK6.cjs';
 
 interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {
     variant?: 'left' | 'center' | 'split';

package/dist/{audit-DwCmg32J.d.cts → audit-CQvTUO39.d.cts}

@@ -1,4 +1,4 @@
-import { c as UtmCampaign, g as UtmContent, h as UtmMedium, i as UtmMediumAppPage, j as UtmMediumMessaging, k as UtmMediumWebPage, n as UtmSource, o as UtmSourceRequiringSeller, p as UtmTerm, m as UtmParams, b as UtmBlockedError, d as UtmComplianceResult, U as UrlClassification, F as FirstTouchAttribution, f as UtmConfidence, a as UtmAuditEntry } from './types-DAlgDGzw.cjs';
+import { d as UtmCampaign, h as UtmContent, i as UtmMedium, j as UtmMediumAppPage, k as UtmMediumMessaging, l as UtmMediumWebPage, n as UtmSource, o as UtmSourceRequiringSeller, p as UtmTerm, U as UtmParams, c as UtmBlockedError, e as UtmComplianceResult, a as UrlClassification, F as FirstTouchAttribution, g as UtmConfidence, b as UtmAuditEntry } from './types-D5bPCZi6.cjs';
 
 declare const UTM_SOURCES: readonly UtmSource[];
 declare const UTM_MEDIUMS_MESSAGING: readonly UtmMediumMessaging[];

package/dist/{audit-BS2fn7M4.d.ts → audit-oRc-Dccv.d.ts}

@@ -1,4 +1,4 @@
-import { c as UtmCampaign, g as UtmContent, h as UtmMedium, i as UtmMediumAppPage, j as UtmMediumMessaging, k as UtmMediumWebPage, n as UtmSource, o as UtmSourceRequiringSeller, p as UtmTerm, m as UtmParams, b as UtmBlockedError, d as UtmComplianceResult, U as UrlClassification, F as FirstTouchAttribution, f as UtmConfidence, a as UtmAuditEntry } from './types-DAlgDGzw.js';
+import { d as UtmCampaign, h as UtmContent, i as UtmMedium, j as UtmMediumAppPage, k as UtmMediumMessaging, l as UtmMediumWebPage, n as UtmSource, o as UtmSourceRequiringSeller, p as UtmTerm, U as UtmParams, c as UtmBlockedError, e as UtmComplianceResult, a as UrlClassification, F as FirstTouchAttribution, g as UtmConfidence, b as UtmAuditEntry } from './types-D5bPCZi6.js';
 
 declare const UTM_SOURCES: readonly UtmSource[];
 declare const UTM_MEDIUMS_MESSAGING: readonly UtmMediumMessaging[];

package/dist/blog/index.d.cts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as SectionShellProps } from '../SectionShell-D1YC7vey.cjs';
+import { a as SectionShellProps } from '../SectionShell-CrgrzWK6.cjs';
 
 interface ArticleCardProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
     /** Target URL */

package/dist/blog/index.d.ts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { c as SectionShellProps } from '../SectionShell-D1YC7vey.js';
+import { a as SectionShellProps } from '../SectionShell-CrgrzWK6.js';
 
 interface ArticleCardProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
     /** Target URL */

package/dist/index.cjs

@@ -31,21 +31,22 @@ var chunkVM7WFMKI_cjs = require('./chunk-VM7WFMKI.cjs');
 var chunkBJZ2DKS5_cjs = require('./chunk-BJZ2DKS5.cjs');
 var chunkLJADZITX_cjs = require('./chunk-LJADZITX.cjs');
 var chunkMDB2WCRQ_cjs = require('./chunk-MDB2WCRQ.cjs');
-var react = require('react');
-var clsx = require('clsx');
+var React4 = require('react');
+var clsx4 = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
+var clsx4__default = /*#__PURE__*/_interopDefault(clsx4);
 
-var GradientText = react.forwardRef(
+var GradientText = React4.forwardRef(
   ({ gradient = "brand", as: Tag = "span", className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tag,
       {
         ref,
-        className: clsx__default.default("ds-gradient-text", `ds-gradient-text--${gradient}`, className),
+        className: clsx4__default.default("ds-gradient-text", `ds-gradient-text--${gradient}`, className),
         ...props,
         children
       }
@@ -53,6 +54,66 @@ var GradientText = react.forwardRef(
   }
 );
 GradientText.displayName = "GradientText";
+var FlowchartBadge = React4__default.default.forwardRef(
+  ({ className, icon, color = "default", size = "md", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx4__default.default("ds-flowchart-badge", `ds-flowchart-badge--${color}`, `ds-flowchart-badge--${size}`, className),
+        ...props,
+        children: [
+          icon,
+          children
+        ]
+      }
+    );
+  }
+);
+FlowchartBadge.displayName = "FlowchartBadge";
+var FlowchartConnector = React4__default.default.forwardRef(
+  ({
+    className,
+    direction = "down",
+    showArrow = true,
+    showJunction = false,
+    length = "md",
+    ...props
+  }, ref) => {
+    const classes = clsx4__default.default(
+      "ds-flowchart-connector",
+      `ds-flowchart-connector--${direction}`,
+      `ds-flowchart-connector--${length}`,
+      showArrow && "ds-flowchart-connector--arrow",
+      showJunction && "ds-flowchart-connector--junction",
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, ...props, "aria-hidden": "true" });
+  }
+);
+FlowchartConnector.displayName = "FlowchartConnector";
+var FlowchartCard = React4__default.default.forwardRef(
+  ({ className, active, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: clsx4__default.default(
+        "ds-flowchart-card",
+        active && "ds-flowchart-card--active",
+        variant === "compact" && "ds-flowchart-card--compact",
+        className
+      ),
+      ...props
+    }
+  )
+);
+FlowchartCard.displayName = "FlowchartCard";
+var FlowchartCardHeader = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx4__default.default("ds-flowchart-card__header", className), ...props }));
+FlowchartCardHeader.displayName = "FlowchartCardHeader";
+var FlowchartCardTitle = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: clsx4__default.default("ds-flowchart-card__title", className), ...props }));
+FlowchartCardTitle.displayName = "FlowchartCardTitle";
+var FlowchartCardContent = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx4__default.default("ds-flowchart-card__content", className), ...props }));
+FlowchartCardContent.displayName = "FlowchartCardContent";
 
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
@@ -1510,6 +1571,12 @@ Object.defineProperty(exports, "resolveSpacing", {
   enumerable: true,
   get: function () { return chunkMDB2WCRQ_cjs.resolveSpacing; }
 });
+exports.FlowchartBadge = FlowchartBadge;
+exports.FlowchartCard = FlowchartCard;
+exports.FlowchartCardContent = FlowchartCardContent;
+exports.FlowchartCardHeader = FlowchartCardHeader;
+exports.FlowchartCardTitle = FlowchartCardTitle;
+exports.FlowchartConnector = FlowchartConnector;
 exports.GradientText = GradientText;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GradientText/GradientText.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,UAAU;AAgBX;AAHN,IAAM,eAAe;AAAA,EACnB,CAAC,EAAE,WAAW,SAAS,IAAI,MAAM,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,oBAAoB,qBAAqB,QAAQ,IAAI,SAAS;AAAA,QAC7E,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc","sourcesContent":["import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport './GradientText.css'\n\nexport type GradientPreset = 'brand' | 'rainbow' | 'sunset'\n\nexport interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Gradient color preset. Default: 'brand' (SalesMind pink→gold) */\n  gradient?: GradientPreset\n  /** HTML element tag. Default: 'span' */\n  as?: 'span' | 'em' | 'strong' | 'mark'\n  children: React.ReactNode\n}\n\nconst GradientText = forwardRef<HTMLSpanElement, GradientTextProps>(\n  ({ gradient = 'brand', as: Tag = 'span', className, children, ...props }, ref) => {\n    return (\n      <Tag\n        ref={ref}\n        className={clsx('ds-gradient-text', `ds-gradient-text--${gradient}`, className)}\n        {...props}\n      >\n        {children}\n      </Tag>\n    )\n  }\n)\nGradientText.displayName = 'GradientText'\n\nexport { GradientText }\n"]}
+{"version":3,"sources":["../src/components/GradientText/GradientText.tsx","../src/components/FlowchartBadge/FlowchartBadge.tsx","../src/components/FlowchartConnector/FlowchartConnector.tsx","../src/components/FlowchartCard/FlowchartCard.tsx"],"names":["React","clsx","jsx"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react'\nimport clsx from 'clsx'\nimport './GradientText.css'\n\nexport type GradientPreset = 'brand' | 'rainbow' | 'sunset'\n\nexport interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Gradient color preset. Default: 'brand' (SalesMind pink→gold) */\n  gradient?: GradientPreset\n  /** HTML element tag. Default: 'span' */\n  as?: 'span' | 'em' | 'strong' | 'mark'\n  children: React.ReactNode\n}\n\nconst GradientText = forwardRef<HTMLSpanElement, GradientTextProps>(\n  ({ gradient = 'brand', as: Tag = 'span', className, children, ...props }, ref) => {\n    return (\n      <Tag\n        ref={ref}\n        className={clsx('ds-gradient-text', `ds-gradient-text--${gradient}`, className)}\n        {...props}\n      >\n        {children}\n      </Tag>\n    )\n  }\n)\nGradientText.displayName = 'GradientText'\n\nexport { GradientText }\n","import React from 'react';\nimport clsx from 'clsx';\nimport './FlowchartBadge.css';\n\nexport interface FlowchartBadgeProps extends React.ComponentPropsWithoutRef<'div'> {\n  icon?: React.ReactNode;\n  color?: 'default' | 'accent' | 'success' | 'warning';\n  size?: 'sm' | 'md';\n}\n\nexport const FlowchartBadge = React.forwardRef<HTMLDivElement, FlowchartBadgeProps>(\n  ({ className, icon, color = 'default', size = 'md', children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('ds-flowchart-badge', `ds-flowchart-badge--${color}`, `ds-flowchart-badge--${size}`, className)}\n        {...props}\n      >\n        {icon}\n        {children}\n      </div>\n    );\n  },\n);\n\nFlowchartBadge.displayName = 'FlowchartBadge';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './FlowchartConnector.css';\n\nexport interface FlowchartConnectorProps extends React.ComponentPropsWithoutRef<'div'> {\n  direction?: 'down' | 'up';\n  showArrow?: boolean;\n  showJunction?: boolean;\n  length?: 'sm' | 'md' | 'lg';\n}\n\nexport const FlowchartConnector = React.forwardRef<HTMLDivElement, FlowchartConnectorProps>(\n  (\n    {\n      className,\n      direction = 'down',\n      showArrow = true,\n      showJunction = false,\n      length = 'md',\n      ...props\n    },\n    ref,\n  ) => {\n    const classes = clsx(\n      'ds-flowchart-connector',\n      `ds-flowchart-connector--${direction}`,\n      `ds-flowchart-connector--${length}`,\n      showArrow && 'ds-flowchart-connector--arrow',\n      showJunction && 'ds-flowchart-connector--junction',\n      className,\n    );\n\n    return <div ref={ref} className={classes} {...props} aria-hidden=\"true\" />;\n  },\n);\n\nFlowchartConnector.displayName = 'FlowchartConnector';\n","import React from 'react';\nimport clsx from 'clsx';\nimport './FlowchartCard.css';\n\n/* ============================================================================\n   FLOWCHART CARD — Compound component for flowchart step cards\n   ============================================================================ */\n\nexport interface FlowchartCardProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Highlights the card as the currently active step */\n  active?: boolean;\n  /** Visual density variant */\n  variant?: 'default' | 'compact';\n}\n\nexport const FlowchartCard = React.forwardRef<HTMLDivElement, FlowchartCardProps>(\n  ({ className, active, variant, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={clsx(\n        'ds-flowchart-card',\n        active && 'ds-flowchart-card--active',\n        variant === 'compact' && 'ds-flowchart-card--compact',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nFlowchartCard.displayName = 'FlowchartCard';\n\nexport const FlowchartCardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={clsx('ds-flowchart-card__header', className)} {...props} />\n));\nFlowchartCardHeader.displayName = 'FlowchartCardHeader';\n\nexport const FlowchartCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentPropsWithoutRef<'h3'>\n>(({ className, ...props }, ref) => (\n  <h3 ref={ref} className={clsx('ds-flowchart-card__title', className)} {...props} />\n));\nFlowchartCardTitle.displayName = 'FlowchartCardTitle';\n\nexport const FlowchartCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={clsx('ds-flowchart-card__content', className)} {...props} />\n));\nFlowchartCardContent.displayName = 'FlowchartCardContent';\n"]}

package/dist/index.css

@@ -17477,6 +17477,195 @@
   }
 }
 
+/* src/components/FlowchartBadge/FlowchartBadge.css */
+.ds-flowchart-badge {
+  --flowchart-badge-size: var(--space-8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--flowchart-badge-size);
+  height: var(--flowchart-badge-size);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--surface-alpha-1);
+  color: var(--text-primary);
+  box-shadow: inset 0 0 0 1px var(--surface-alpha-2);
+  transition:
+    background var(--transition-glass),
+    color var(--transition-glass),
+    box-shadow var(--transition-glass),
+    transform var(--transition-glass);
+}
+.ds-flowchart-badge--accent {
+  background: rgba(var(--brand-pink-rgb), 0.12);
+  color: var(--brand-pink);
+}
+.ds-flowchart-badge--success {
+  background: rgba(var(--status-success-rgb), 0.12);
+  color: var(--status-success);
+}
+.ds-flowchart-badge--warning {
+  background: rgba(var(--status-warning-rgb), 0.12);
+  color: var(--status-warning);
+}
+.ds-flowchart-badge--sm {
+  --flowchart-badge-size: var(--space-6);
+}
+.ds-flowchart-badge--md {
+  --flowchart-badge-size: var(--space-8);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-flowchart-badge {
+    transition: none;
+  }
+}
+
+/* src/components/FlowchartConnector/FlowchartConnector.css */
+.ds-flowchart-connector {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 100%;
+  color: inherit;
+}
+.ds-flowchart-connector--sm {
+  min-height: var(--space-4);
+}
+.ds-flowchart-connector--md {
+  min-height: var(--space-8);
+}
+.ds-flowchart-connector--lg {
+  min-height: var(--space-12);
+}
+.ds-flowchart-connector::before,
+.ds-flowchart-connector::after {
+  position: absolute;
+  left: 50%;
+  pointer-events: none;
+  transform: translateX(-50%);
+  transition: none;
+}
+.ds-flowchart-connector::before {
+  content: "";
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: 1px solid var(--border-default);
+}
+.ds-flowchart-connector--junction.ds-flowchart-connector--down::before {
+  background:
+    radial-gradient(
+      circle at 50% 3px,
+      transparent 0 1.5px,
+      var(--border-default) 1.5px 3px,
+      transparent 3px);
+  background-repeat: no-repeat;
+}
+.ds-flowchart-connector--junction.ds-flowchart-connector--up::before {
+  background:
+    radial-gradient(
+      circle at 50% calc(100% - 3px),
+      transparent 0 1.5px,
+      var(--border-default) 1.5px 3px,
+      transparent 3px);
+  background-repeat: no-repeat;
+}
+.ds-flowchart-connector::after {
+  content: none;
+}
+.ds-flowchart-connector--arrow::after {
+  content: "";
+  width: 0;
+  height: 0;
+}
+.ds-flowchart-connector--down.ds-flowchart-connector--arrow::after {
+  bottom: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 6px solid var(--border-default);
+}
+.ds-flowchart-connector--up.ds-flowchart-connector--arrow::after {
+  top: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 6px solid var(--border-default);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-flowchart-connector::before,
+  .ds-flowchart-connector::after {
+    transition: none;
+  }
+}
+@media (prefers-contrast: more) {
+  .ds-flowchart-connector::before {
+    border-left-width: 2px;
+  }
+  .ds-flowchart-connector--junction.ds-flowchart-connector--down::before {
+    background:
+      radial-gradient(
+        circle at 50% 3px,
+        transparent 0 1px,
+        var(--border-default) 1px 3px,
+        transparent 3px);
+  }
+  .ds-flowchart-connector--junction.ds-flowchart-connector--up::before {
+    background:
+      radial-gradient(
+        circle at 50% calc(100% - 3px),
+        transparent 0 1px,
+        var(--border-default) 1px 3px,
+        transparent 3px);
+  }
+  .ds-flowchart-connector--down.ds-flowchart-connector--arrow::after {
+    border-left-width: 5px;
+    border-right-width: 5px;
+    border-top-width: 7px;
+  }
+  .ds-flowchart-connector--up.ds-flowchart-connector--arrow::after {
+    border-left-width: 5px;
+    border-right-width: 5px;
+    border-bottom-width: 7px;
+  }
+}
+
+/* src/components/FlowchartCard/FlowchartCard.css */
+.ds-flowchart-card {
+  border: 1px solid var(--border-default);
+  background: var(--surface-primary);
+  border-radius: var(--radius-2);
+  padding: var(--space-4) var(--space-5);
+  transition: border-color 150ms ease, background 150ms ease;
+}
+.ds-flowchart-card--active {
+  border-color: rgba(var(--brand-pink-rgb), 0.4);
+  background: rgba(var(--brand-pink-rgb), 0.03);
+}
+.ds-flowchart-card--compact {
+  padding: var(--space-3) var(--space-4);
+}
+.ds-flowchart-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.ds-flowchart-card__title {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  color: var(--text-primary);
+  line-height: var(--line-height-tight);
+}
+.ds-flowchart-card__content {
+  margin-top: var(--space-3);
+  color: var(--text-secondary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-flowchart-card {
+    transition: none;
+  }
+}
+
 /* src/components/ReportShell/ReportShell.css */
 .ds-report-shell {
   --report-max-width: 1200px;