@agentiffai/design 0.1.11 → 0.1.12

package/dist/index.js

@@ -2,12 +2,12 @@ import { memo, useRef, useState, useEffect, useCallback, useId, useMemo } from '
 import styled11, { keyframes, css, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useButton } from '@react-aria/button';
-import { useTextField } from '@react-aria/textfield';
 import { useMeter } from '@react-aria/meter';
 import { useTabList, useTabPanel, useTab } from '@react-aria/tabs';
 import { Item } from '@react-stately/collections';
 import { useTabListState } from '@react-stately/tabs';
 import { DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading } from 'react-aria-components';
+import { useTextField } from '@react-aria/textfield';
 
 // src/components/AssistantThinking/AssistantThinking.tsx
 
@@ -456,7 +456,7 @@ var SuggestionButton = styled11.button`
   font-weight: ${tokens.typography.fontWeight.regular};
   text-align: center;
   border: 1px solid ${tokens.colors.border.default};
-  border-radius: 20px;
+  border-radius: ${tokens.borderRadius.full};
   cursor: pointer;
   transition: all ${tokens.transitions.fast};
   white-space: nowrap;
@@ -490,9 +490,9 @@ var SuggestionButton = styled11.button`
 `;
 var InputWrapper = styled11.div`
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
+  align-items: flex-end; /* Align button to bottom when textarea expands */
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background-color: rgba(25, 25, 25, 0.4);
   border: 1px solid ${tokens.colors.border.subtle};
   border-radius: ${tokens.borderRadius.lg};
@@ -506,7 +506,7 @@ var InputWrapper = styled11.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled11.input`
+var InputField = styled11.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -514,6 +514,13 @@ var InputField = styled11.input`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   background: transparent;
+  resize: none; /* Disable manual resize, we auto-resize */
+  min-height: 24px; /* Single line height */
+  max-height: 150px; /* Max ~6 lines before scrolling */
+  overflow-y: auto;
+  line-height: 1.5;
+  padding: 0;
+  margin: 0;
 
   &::placeholder {
     color: ${tokens.colors.text.tertiary};
@@ -569,31 +576,29 @@ var ChatInput = ({
   isReadOnly = false,
   autoFocus = false,
   className,
-  "aria-label": ariaLabel = "Chat message input",
-  ...ariaProps
+  "aria-label": ariaLabel = "Chat message input"
+  // Note: Additional AriaTextFieldProps are accepted but not spread to textarea
+  // since useTextField is not compatible with textarea elements
 }) => {
   const [internalValue, setInternalValue] = useState(value);
   const inputRef = useRef(null);
   const currentValue = value !== void 0 ? value : internalValue;
   const setValue = onChange || setInternalValue;
-  const { inputProps } = useTextField(
-    {
-      ...ariaProps,
-      "aria-label": ariaLabel,
-      value: currentValue,
-      onChange: (newValue) => {
-        setValue(newValue);
-      },
-      isDisabled,
-      isReadOnly
-    },
-    inputRef
-  );
+  const autoResize = useCallback(() => {
+    const textarea = inputRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, []);
+  useEffect(() => {
+    autoResize();
+  }, [currentValue, autoResize]);
   const handleDirectChange = (e) => {
     setValue(e.target.value);
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
     }
@@ -602,6 +607,9 @@ var ChatInput = ({
     if (currentValue.trim() && onSubmit && !isDisabled && !isReadOnly) {
       onSubmit(currentValue.trim());
       setValue("");
+      if (inputRef.current) {
+        inputRef.current.style.height = "auto";
+      }
       inputRef.current?.focus();
     }
   };
@@ -625,16 +633,16 @@ var ChatInput = ({
       /* @__PURE__ */ jsx(
         InputField,
         {
-          ...inputProps,
           ref: inputRef,
-          type: "text",
+          "aria-label": ariaLabel,
           placeholder,
           onKeyDown: handleKeyDown,
           onChange: handleDirectChange,
           autoFocus,
           disabled: isDisabled,
           readOnly: isReadOnly,
-          value: currentValue
+          value: currentValue,
+          rows: 1
         }
       ),
       /* @__PURE__ */ jsx(
@@ -709,7 +717,7 @@ var NavigationContainer = styled11.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 6px;
+  padding-top: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
   width: 100%;
   height: 100%;
@@ -762,7 +770,7 @@ var CategoryButton = styled11.button`
 var CategoryLabel = styled11.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   text-align: center;
   max-width: 56px;
   overflow: hidden;
@@ -1611,7 +1619,7 @@ WorkflowStatusCard.displayName = "WorkflowStatusCard";
 var DarkNotificationCardContainer = styled11.div`
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background: ${tokens.colors.surface.base};
   border-radius: ${tokens.borderRadius.md};
   gap: ${tokens.spacing.xs};
@@ -1624,7 +1632,7 @@ var DarkSectionHeader = styled11.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: ${tokens.spacing.xs} 2px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   background: transparent;
   font-family: ${tokens.typography.fontFamily.primary};
@@ -1666,18 +1674,18 @@ var DarkChevronIcon = styled11.span`
 var DarkSectionContent = styled11.div`
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: ${tokens.spacing.xs};
   padding-left: ${tokens.spacing.xs};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   min-width: 0;
   overflow: hidden;
 `;
 var DarkNotificationItemWrapper = styled11.button`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: ${tokens.spacing.xs};
   width: 100%;
-  padding: ${tokens.spacing.xs} 6px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   cursor: pointer;
   text-align: left;
@@ -1733,7 +1741,7 @@ var DarkItemIcon = styled11.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var DarkItemText = styled11.span`
@@ -2011,7 +2019,7 @@ var TabButton = styled11.button`
   flex-shrink: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.xs};
   }
 
@@ -2109,7 +2117,7 @@ styled11.button`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: 13px;
     gap: ${tokens.spacing.sm};
   }
@@ -2191,7 +2199,7 @@ var CategoryTitle = styled11.div`
   gap: ${tokens.spacing.sm};
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
+    gap: ${tokens.spacing.xs};
   }
 `;
 styled11.img`
@@ -2248,7 +2256,7 @@ var CategoryDisclosurePanel = styled11(DisclosurePanel)`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding-left: 2px;
+    padding-left: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2270,7 +2278,7 @@ var ItemContainer = styled11.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 10px ${tokens.spacing.sm}; // Increased vertical padding from 4px to 10px for better breathing room
+  padding: ${tokens.spacing.sm} ${tokens.spacing.sm}; // Increased vertical padding from 4px to 8px for better breathing room
   border-radius: ${tokens.borderRadius.sm};
   cursor: pointer;
   transition: background-color ${tokens.transitions.fast};
@@ -2278,8 +2286,8 @@ var ItemContainer = styled11.div`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
-    padding: ${tokens.spacing.sm} 6px; // Increased vertical padding from 4px to 8px for mobile
+    gap: ${tokens.spacing.xs};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.xs}; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -2320,7 +2328,7 @@ var ItemHeader = styled11(Button)`
   }
 `;
 var ItemDisclosurePanel = styled11(DisclosurePanel)`
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
   margin-top: -${tokens.spacing.xs};
@@ -2331,7 +2339,7 @@ var ItemDisclosurePanel = styled11(DisclosurePanel)`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 6px;
+    padding: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2652,7 +2660,7 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: run.customContent })
-    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function normalizeCategory(category) {
@@ -2687,7 +2695,7 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsx(Heading, { level: 4, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2897,7 +2905,7 @@ function ConnectionsTabContent({
   return /* @__PURE__ */ jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsx(ConnectionDescription, { children: descriptionText }),
     /* @__PURE__ */ jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
+    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: tokens.colors.text.secondary }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
     ] })
@@ -3348,12 +3356,12 @@ var NotificationItemWrapper = styled11.button`
   align-items: center;
   gap: ${tokens.spacing.md};
   width: 100%;
-  padding: ${(props) => props.$isSelected ? `${tokens.spacing.md} ${tokens.spacing.md}` : `10px ${tokens.spacing.md}`};
+  padding: ${(props) => props.$isSelected ? `${tokens.spacing.md} ${tokens.spacing.md}` : `${tokens.spacing.sm} ${tokens.spacing.md}`};
   border: none;
   cursor: pointer;
   text-align: left;
   transition: all ${tokens.transitions.normal};
-  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : "10px"};
+  border-radius: ${(props) => props.$isSelected ? tokens.borderRadius.lg : tokens.borderRadius.lg};
 
   /* Default state - transparent background */
   background-color: ${(props) => props.$isSelected ? tokens.colors.secondary : "transparent"};
@@ -3402,7 +3410,7 @@ var ItemIcon2 = styled11.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var ItemText = styled11.span`
@@ -3646,7 +3654,7 @@ var StyledUserMessage = styled11.button`
   && {
     background: ${tokens.colors.message.user} !important;
     color: ${tokens.colors.text.primary} !important;
-    border-radius: ${tokens.borderRadius.full} !important; /* Pill shape - fully rounded ends */
+    border-radius: ${tokens.borderRadius["2xl"]} !important; /* Rounded corners that work for multi-line */
   }
 
   /* Subtle shadow and glow effect */
@@ -5229,6 +5237,9 @@ var Container12 = styled11.div`
   white-space: pre-wrap;
   word-break: break-word;
   line-height: ${tokens.typography.lineHeight.normal};
+  /* Performance optimizations for streaming text */
+  text-rendering: optimizeSpeed;
+  contain: content;
 `;
 var Cursor = styled11.span`
   display: inline-block;
@@ -5288,20 +5299,9 @@ var MessageContainer = styled11.div`
   align-items: flex-start;
   padding: ${tokens.spacing.sm} 0;
   max-width: 100%;
-
-  /* Fade in and slide up animation */
-  animation: fadeInSlideUp ${tokens.animation.duration.medium} ease-out;
-
-  @keyframes fadeInSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(${tokens.spacing.sm});
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+  /* GPU acceleration hint for smooth rendering during streaming */
+  will-change: contents;
+  contain: content;
 `;
 var AvatarContainer = styled11.div`
   flex-shrink: 0;
@@ -5336,9 +5336,8 @@ var ContentContainer = styled11.div`
   min-width: 0;
 `;
 var MessageContent = styled11.div`
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance during streaming */
+  background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
@@ -5348,24 +5347,25 @@ var MessageContent = styled11.div`
   font-family: ${tokens.typography.fontFamily.primary};
   word-wrap: break-word;
   white-space: pre-wrap;
+  /* Optimize text rendering */
+  text-rendering: optimizeSpeed;
 `;
 var LoadingDots3 = styled11.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance */
+  background-color: ${tokens.colors.surface.elevated};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
   width: fit-content;
 `;
-var bounce = keyframes`
-  0%, 60%, 100% {
-    transform: translateY(0);
+var pulse3 = keyframes`
+  0%, 100% {
+    opacity: 0.4;
   }
-  30% {
-    transform: translateY(-${tokens.spacing.sm});
+  50% {
+    opacity: 1;
   }
 `;
 var LoadingDot = styled11.div`
@@ -5373,7 +5373,8 @@ var LoadingDot = styled11.div`
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   background-color: ${tokens.colors.text.tertiary};
-  animation: ${bounce} 1.4s ease-in-out infinite;
+  /* Use simple opacity animation instead of transform bounce */
+  animation: ${pulse3} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
 var FileAttachmentContainer = styled11.div`
@@ -6764,6 +6765,161 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
+var StyledIconWrapper3 = styled11.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
+  border-radius: ${({ theme }) => theme?.radii?.sm ?? "4px"};
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => (theme?.colors?.primary && typeof theme.colors.primary === "object" ? theme.colors.primary.light : theme?.colors?.primary) ?? "#0066FF"};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Remove default focus outline, using focus-visible instead */
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+function PostizIcon({
+  variant = "colored",
+  size = 24,
+  className,
+  style,
+  "aria-label": ariaLabel = "Postiz",
+  onPress,
+  ...ariaProps
+}) {
+  const ref = useRef(null);
+  const isInteractive = Boolean(onPress);
+  const { buttonProps } = useButton(
+    {
+      ...ariaProps,
+      onPress,
+      "aria-label": ariaLabel,
+      isDisabled: !isInteractive
+    },
+    ref
+  );
+  const role = isInteractive ? "button" : "img";
+  const ariaHidden = !isInteractive && !ariaLabel;
+  const colors = {
+    colored: {
+      purple: "#612bd3",
+      dark: "#131019",
+      white: "#fff",
+      stroke: "#131019"
+    },
+    black: {
+      purple: "black",
+      dark: "black",
+      white: "black",
+      stroke: "black"
+    },
+    white: {
+      purple: "white",
+      dark: "white",
+      white: "white",
+      stroke: "white"
+    }
+  };
+  const c = colors[variant];
+  const svgElement = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "26.74 0.02 460.94 509.34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M103.4 82.6c.4 5.6.8 12 1.4 19.1L125 362.4c2.3 29.1 3.4 43.8 9.9 54.4 5.7 9.4 14.4 16.7 24.5 21 11.6 4.9 26.1 3.7 55.2 1.4l199.8-15.4c18.9-1.5 31.7-2.5 41.2-4.8-3.2 7.5-8.1 14.3-14.5 19.5-9.6 8-23.9 11.4-52.4 17.9l-195 45c-28.5 6.5-42.8 9.9-54.8 6.8-10.7-2.7-20.3-8.6-27.3-17.1-8-9.6-11.4-23.9-17.9-52.4L34.7 184c-6.5-28.5-9.9-42.8-6.8-54.8 2.7-10.7 8.6-20.3 17.1-27.3 9.6-8 23.9-11.4 52.4-17.9z",
+            fill: c.purple
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M112.8 101.1c-1.1-14.8-2-25.2-1.9-33.6 0-8.2.9-13.6 2.8-18 3.6-8.6 9.8-15.8 17.7-20.8 4.1-2.5 9.2-4.2 17.4-5.4 8.2-1.3 18.8-2.2 33.5-3.3L382 4.4c14.8-1.1 25.2-2 33.6-1.9 8.2 0 13.6.9 18 2.8 8.6 3.6 15.8 9.8 20.8 17.7 2.5 4.1 4.2 9.2 5.4 17.4s2.2 18.8 3.3 33.5l20.2 260.8c1.1 14.8 2 25.2 1.9 33.6 0 8.2-.9 13.6-2.8 18-3.6 8.6-9.8 15.8-17.7 20.8-4.1 2.5-9.2 4.2-17.4 5.4-8.2 1.3-18.8 2.2-33.5 3.3l-199.7 15.4c-14.8 1.1-25.2 2-33.6 1.9-8.2 0-13.6-.9-18-2.8-8.6-3.6-15.8-9.8-20.8-17.7-2.5-4.1-4.2-9.2-5.4-17.4-1.3-8.2-2.2-18.8-3.3-33.5z",
+            fill: "none",
+            stroke: c.stroke,
+            strokeWidth: "4.9373"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m182.9 27.9 199.7-15.4c14.9-1.2 25-1.9 33-1.9 7.7 0 11.9.9 14.9 2.2 7 3 13 8 17 14.6 1.7 2.9 3.2 6.8 4.5 14.5 1.3 7.8 2.1 18 3.2 32.9l20.2 260.8c1.2 14.9 1.9 25 1.9 33 0 7.7-.9 11.9-2.2 14.9-3 7-8 13-14.6 17-2.9 1.7-6.8 3.2-14.5 4.5-7.8 1.3-18 2.1-32.9 3.2l-199.7 15.3c-14.8 1.2-25 1.9-33 1.9-7.7 0-11.9-.9-14.9-2.2-7-3-13-8-17-14.6-1.7-2.9-3.2-6.8-4.5-14.5-1.3-7.8-2.1-18-3.2-32.9l-20.2-260.8c-1.2-14.8-1.9-25-1.9-33 0-7.7.9-11.9 2.2-14.9 3-7 8-13 14.6-17 2.9-1.7 6.8-3.2 14.5-4.5 7.9-1.1 18.1-1.9 32.9-3.1",
+            fill: c.white
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m269.4 88.3 1.9 24.8c3.5-4.3 7.9-7.9 13.4-11 5.4-3.3 12.3-5.2 20.4-5.8 7.4-.6 14.7.3 21.4 2.7 7 2.4 13.3 6.4 18.8 12.5 5.7 5.7 10.6 13.7 14.5 23.8s6.3 22.5 7.5 37.2c.8 10.5.7 21.2-.5 31.9-1 10.7-3.4 20.4-7.3 29.1-4 8.7-9.7 16-17.2 21.9-7.3 5.6-16.7 8.9-28.4 9.8-8.3.7-15 .1-20-1.8-5-2.1-8.8-4.6-11.5-7.4l6.2 80-46.5 15.5L221.8 92zm26.4 149c5.7-.4 10.4-2.7 14.1-6.7 3.7-4.3 6.3-9.5 8-15.8 2-6.3 3.1-13.3 3.4-20.8.5-7.7.5-15.3-.1-22.9-.9-12.1-2.8-21.6-5.5-28.4-2.5-6.8-5.3-11.9-8.4-14.9-3.2-3.3-6.1-5.2-9.1-5.9-2.7-.7-4.9-1-6.3-.8-4 .3-7.7 2.1-11.2 5.1-3.6 3-5.9 7.2-7.3 12.9l7.1 91.9c1.2 1.7 3.2 3.3 5.6 4.9 2.5 1.2 5.7 1.7 9.7 1.4",
+            fill: c.dark
+          }
+        )
+      ]
+    }
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx(
+      StyledIconWrapper3,
+      {
+        ...buttonProps,
+        ref,
+        className,
+        style,
+        $size: size,
+        children: svgElement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", width: size, height: size, ...style },
+      children: svgElement
+    }
+  );
+}
+PostizIcon.displayName = "PostizIcon";
 var ColoredVariant = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(
     "path",
@@ -7266,7 +7422,7 @@ var StyledXIcon = styled11.svg`
     &:focus-visible {
       outline: 2px solid ${theme?.colors?.primary ?? "#007bff"};
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: ${tokens.borderRadius.sm};
     }
   `}
 `;
@@ -7419,15 +7575,15 @@ YouTubeIcon.displayName = "YouTubeIcon";
 var PLATFORM_CONFIGS = {
   x: {
     icon: /* @__PURE__ */ jsx(XIcon, { variant: "white", size: 20 }),
-    color: "#FFFFFF",
-    bgColor: "#000000",
+    color: tokens.colors.text.primary,
+    bgColor: tokens.colors.platform.x,
     maxChars: 280,
     name: "X (Twitter)",
     description: "Concise, punchy posts with 1-2 hashtags"
   },
   linkedin: {
     icon: /* @__PURE__ */ jsx(LinkedInIcon, { variant: "colored", size: 20 }),
-    color: "#0A66C2",
+    color: tokens.colors.platform.linkedin,
     bgColor: "#f3f6f8",
     maxChars: 3e3,
     name: "LinkedIn",
@@ -7435,7 +7591,7 @@ var PLATFORM_CONFIGS = {
   },
   instagram: {
     icon: /* @__PURE__ */ jsx(InstagramIcon, { variant: "colored", size: 20 }),
-    color: "#E4405F",
+    color: tokens.colors.platform.instagram,
     bgColor: "#fafafa",
     maxChars: 2200,
     name: "Instagram",
@@ -7443,7 +7599,7 @@ var PLATFORM_CONFIGS = {
   },
   facebook: {
     icon: /* @__PURE__ */ jsx(FacebookIcon, { variant: "colored", size: 20 }),
-    color: "#1877F2",
+    color: tokens.colors.platform.facebook,
     bgColor: "#f0f2f5",
     maxChars: 63206,
     name: "Facebook",
@@ -7451,7 +7607,7 @@ var PLATFORM_CONFIGS = {
   },
   youtube: {
     icon: /* @__PURE__ */ jsx(YouTubeIcon, { variant: "colored", size: 20 }),
-    color: "#FF0000",
+    color: tokens.colors.platform.youtube,
     bgColor: "#f9f9f9",
     maxChars: 5e3,
     name: "YouTube",
@@ -7512,10 +7668,12 @@ function getCharacterCount(content, hashtags) {
   return (content + hashtagString).length;
 }
 function isWithinCharLimit(platform, characterCount) {
-  return characterCount <= PLATFORM_CONFIGS[platform].maxChars;
+  const config = PLATFORM_CONFIGS[platform] || PLATFORM_CONFIGS.x;
+  return characterCount <= config.maxChars;
 }
 function getCharacterLimitPercentage(platform, characterCount) {
-  return Math.min(100, characterCount / PLATFORM_CONFIGS[platform].maxChars * 100);
+  const config = PLATFORM_CONFIGS[platform] || PLATFORM_CONFIGS.x;
+  return Math.min(100, characterCount / config.maxChars * 100);
 }
 function getCharacterLimitColor(percentage) {
   if (percentage > 100) return "bg-red-500";
@@ -7833,7 +7991,7 @@ var PostPreviewCard = ({
   onContentChange,
   isLoading = false
 }) => {
-  const platformConfig = PLATFORM_CONFIGS[post.platform];
+  const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
   const currentCharCount = displayContent.length;
@@ -8030,13 +8188,13 @@ var ProgressBarTrack = styled11.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
-  border-radius: 2px;
+  border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
 var ProgressBarFill2 = styled11.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
-  border-radius: 2px;
+  border-radius: ${tokens.borderRadius.sm};
   transition: width 0.3s ease, background-color 0.3s ease;
   background: ${({ $colorClass }) => {
   if ($colorClass.includes("red")) return tokens.colors.error;
@@ -8108,9 +8266,21 @@ var PlatformCarousel = ({
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx(CarouselContainer, { children: /* @__PURE__ */ jsx(EmptyState, { children: "No posts available" }) });
   }
+  const defaultConfig = {
+    icon: null,
+    color: tokens.colors.text.secondary,
+    bgColor: tokens.colors.background.light,
+    maxChars: 1e3,
+    name: "Unknown",
+    description: "Unknown platform"
+  };
+  const getConfig = (platform) => {
+    const normalized = normalizePlatform(platform);
+    return normalized ? PLATFORM_CONFIGS[normalized] : defaultConfig;
+  };
   return /* @__PURE__ */ jsxs(CarouselContainer, { children: [
     /* @__PURE__ */ jsx(TabsContainer, { children: posts.map((post, index) => {
-      const config = PLATFORM_CONFIGS[post.platform];
+      const config = getConfig(post.platform);
       const isActive = index === activeIndex;
       return /* @__PURE__ */ jsxs(
         PlatformTab,
@@ -8143,7 +8313,7 @@ var PlatformCarousel = ({
       ) }, `slide-${post.platform}-${index}`);
     }) }),
     posts.length > 1 && /* @__PURE__ */ jsx(NavigationDotsContainer, { children: posts.map((post, index) => {
-      const config = PLATFORM_CONFIGS[post.platform];
+      const config = getConfig(post.platform);
       return /* @__PURE__ */ jsx(
         NavigationDot,
         {
@@ -8935,8 +9105,8 @@ var Indicators = styled11.div`
 var IndicatorPill = styled11.span`
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   background: ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}15` : `${tokens.colors.info}15`};
   border: 1px solid ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}30` : `${tokens.colors.info}30`};
@@ -9746,7 +9916,7 @@ var spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse3 = keyframes`
+var pulse4 = keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -9824,7 +9994,7 @@ var IconContainer3 = styled11.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse3;
+    if (props.$status === "pending") return pulse4;
   }
   return "none";
 }}
@@ -9952,6 +10122,6 @@ var WorkflowStatusBadge = ({
 };
 WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
 
-export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, RedditIcon, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, tokens };
+export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditIcon, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, tokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map