@agentiffai/design 1.3.16 → 1.3.18

package/dist/index.cjs

@@ -10389,13 +10389,13 @@ var WorkflowCard = ({
   name,
   description,
   integrations = [],
-  requiresInput = false,
+  needsSetup = false,
   onClick,
   disabled = false,
   className
 }) => {
-  const missingCount = integrations.filter((i) => i.connected === false).length;
-  const hasFooter = integrations.length > 0 || requiresInput;
+  const missingCount = integrations.filter((i) => i.connected === false && !i.optional).length;
+  const hasFooter = integrations.length > 0 || needsSetup;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Card3,
     {
@@ -10412,7 +10412,8 @@ var WorkflowCard = ({
             IntegrationIconWrapper,
             {
               $connected: integration.connected !== false,
-              title: `${integration.name}${integration.connected === false ? " (not connected)" : ""}`,
+              $optional: !!integration.optional,
+              title: `${integration.name}${integration.connected === false ? integration.optional ? " (optional)" : " (not connected)" : ""}`,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 IntegrationIcon,
                 {
@@ -10438,9 +10439,9 @@ var WorkflowCard = ({
                 ]
               }
             ),
-            requiresInput && /* @__PURE__ */ jsxRuntime.jsxs(IndicatorPill, { $variant: "info", title: "Requires input", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(IndicatorDot, { $variant: "info" }),
-              /* @__PURE__ */ jsxRuntime.jsx(IndicatorText, { children: "Input required" })
+            needsSetup && /* @__PURE__ */ jsxRuntime.jsxs(IndicatorPill, { $variant: "warning", title: "Setup required before use", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IndicatorDot, { $variant: "warning" }),
+              /* @__PURE__ */ jsxRuntime.jsx(IndicatorText, { children: "Needs Setup" })
             ] })
           ] })
         ] })
@@ -10527,16 +10528,16 @@ var IntegrationIconWrapper = styled47__default.default.span`
   height: 24px;
   border-radius: ${tokens.borderRadius.sm};
   background: ${tokens.colors.background.light};
-  opacity: ${({ $connected }) => $connected ? 1 : 0.4};
+  opacity: ${({ $connected, $optional }) => $connected ? 1 : $optional ? 0.3 : 0.4};
   position: relative;
   flex-shrink: 0;
 
-  ${({ $connected }) => !$connected && `
+  ${({ $connected, $optional }) => !$connected && `
     &::after {
       content: '';
       position: absolute;
       inset: 0;
-      border: 1px dashed ${tokens.colors.warning};
+      border: 1px dashed ${$optional ? tokens.colors.border.default : tokens.colors.warning};
       border-radius: ${tokens.borderRadius.sm};
     }
   `}