@livechat/platform-workflows 0.0.88 → 0.0.89

package/dist/index.js

@@ -4090,9 +4090,9 @@ var helpdeskTaskConfigs = () => ({
       input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA(
         {
           type: "object",
-          required: ["tag_ids"],
+          required: ["tagIDs"],
           properties: {
-            tag_ids: {
+            tagIDs: {
               type: "array",
               title: "Tag IDs",
               items: {
@@ -4353,7 +4353,7 @@ var helpdeskTaskTemplates = () => ({
         )}/functions/add-tags-to-helpdesk-ticket?id=#{ticket_id}`,
         method: "POST",
         body: {
-          tag_ids: ["#{tag_id}"]
+          tagIDs: ["#{tag_id}"]
         },
         headers: {
           Accept: "application/json",
@@ -17541,10 +17541,12 @@ function DynamicCustomStringField(props) {
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomString/Modes/Predefined.tsx
 var import_react35 = require("react");
 var import_design_system_react_components19 = require("@livechat/design-system-react-components");
-var pickerCustomStyles = css`
+var pickerCustomStyles = (readonly) => css`
   flex: 1;
   button {
-    color: var(--content-basic-primary);
+    color: var(
+      ${readonly ? import_design_system_react_components19.DesignToken.ContentBasicDisabled : import_design_system_react_components19.DesignToken.ContentBasicPrimary}
+    );
   }
 `;
 function PredefinedCustomStringField(props) {
@@ -17565,7 +17567,7 @@ function PredefinedCustomStringField(props) {
   return /* @__PURE__ */ jsx4(
     import_design_system_react_components19.Picker,
     {
-      css: pickerCustomStyles,
+      css: pickerCustomStyles(props.readonly),
       disabled: props.readonly,
       error: Boolean((_a = props.rawErrors) == null ? void 0 : _a.length),
       hideClearButton: true,
@@ -17659,7 +17661,14 @@ function CustomStringField(props) {
       {
         options: modeSelectorOptions,
         selectedOptions: [isPredefinedMode ? "predefined" : "custom"],
-        triggerRenderer: /* @__PURE__ */ jsx4(import_design_system_react_components20.Button, { icon: /* @__PURE__ */ jsx4(import_design_system_react_components20.Icon, { source: import_design_system_icons10.MoreHoriz }), kind: "secondary" })
+        triggerRenderer: /* @__PURE__ */ jsx4(
+          import_design_system_react_components20.Button,
+          {
+            icon: /* @__PURE__ */ jsx4(import_design_system_react_components20.Icon, { source: import_design_system_icons10.MoreHoriz }),
+            kind: "secondary",
+            disabled: props.readonly
+          }
+        )
       }
     )
   ] });
@@ -17678,6 +17687,7 @@ function CustomAddButton(props) {
       onClick: (e) => {
         onClick && onClick(e);
       },
+      disabled: props.disabled,
       size: "medium",
       children: "Add property"
     }
@@ -17696,6 +17706,7 @@ function CustomRemoveButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(import_design_system_react_components21.Icon, { source: import_design_system_icons11.Delete }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17715,6 +17726,7 @@ function CustomMoveUpButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(import_design_system_react_components21.Icon, { source: import_design_system_icons11.ArrowUpward }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17734,6 +17746,7 @@ function CustomMoveDownButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(import_design_system_react_components21.Icon, { source: import_design_system_icons11.ArrowDownward }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }

package/dist/index.mjs

@@ -4107,9 +4107,9 @@ var helpdeskTaskConfigs = () => ({
       input: WORKFLOW_HTTP_TASK_INPUT_SCHEMA(
         {
           type: "object",
-          required: ["tag_ids"],
+          required: ["tagIDs"],
           properties: {
-            tag_ids: {
+            tagIDs: {
               type: "array",
               title: "Tag IDs",
               items: {
@@ -4370,7 +4370,7 @@ var helpdeskTaskTemplates = () => ({
         )}/functions/add-tags-to-helpdesk-ticket?id=#{ticket_id}`,
         method: "POST",
         body: {
-          tag_ids: ["#{tag_id}"]
+          tagIDs: ["#{tag_id}"]
         },
         headers: {
           Accept: "application/json",
@@ -16313,7 +16313,7 @@ tags.forEach(function(tagName) {
 // src/views/Workflows/Creator/Modals/Preview/Modal.tsx
 import {
   Button as Button23,
-  DesignToken as DesignToken31,
+  DesignToken as DesignToken32,
   Modal as Modal6,
   ModalHeader as ModalHeader4,
   RadiusToken as RadiusToken15,
@@ -16330,7 +16330,7 @@ import ReactFlow, {
   useEdgesState,
   useNodesState
 } from "reactflow";
-import { DesignToken as DesignToken30 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken31 } from "@livechat/design-system-react-components";
 
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/Add/Task/Task.tsx
 import { memo } from "react";
@@ -17715,11 +17715,13 @@ function DynamicCustomStringField(props) {
 
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomString/Modes/Predefined.tsx
 import { useEffect as useEffect8, useState as useState11 } from "react";
-import { Picker } from "@livechat/design-system-react-components";
-var pickerCustomStyles = css`
+import { DesignToken as DesignToken11, Picker } from "@livechat/design-system-react-components";
+var pickerCustomStyles = (readonly) => css`
   flex: 1;
   button {
-    color: var(--content-basic-primary);
+    color: var(
+      ${readonly ? DesignToken11.ContentBasicDisabled : DesignToken11.ContentBasicPrimary}
+    );
   }
 `;
 function PredefinedCustomStringField(props) {
@@ -17740,7 +17742,7 @@ function PredefinedCustomStringField(props) {
   return /* @__PURE__ */ jsx4(
     Picker,
     {
-      css: pickerCustomStyles,
+      css: pickerCustomStyles(props.readonly),
       disabled: props.readonly,
       error: Boolean((_a = props.rawErrors) == null ? void 0 : _a.length),
       hideClearButton: true,
@@ -17834,7 +17836,14 @@ function CustomStringField(props) {
       {
         options: modeSelectorOptions,
         selectedOptions: [isPredefinedMode ? "predefined" : "custom"],
-        triggerRenderer: /* @__PURE__ */ jsx4(Button11, { icon: /* @__PURE__ */ jsx4(Icon9, { source: MoreHoriz }), kind: "secondary" })
+        triggerRenderer: /* @__PURE__ */ jsx4(
+          Button11,
+          {
+            icon: /* @__PURE__ */ jsx4(Icon9, { source: MoreHoriz }),
+            kind: "secondary",
+            disabled: props.readonly
+          }
+        )
       }
     )
   ] });
@@ -17862,6 +17871,7 @@ function CustomAddButton(props) {
       onClick: (e) => {
         onClick && onClick(e);
       },
+      disabled: props.disabled,
       size: "medium",
       children: "Add property"
     }
@@ -17880,6 +17890,7 @@ function CustomRemoveButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(Icon10, { source: Delete }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17899,6 +17910,7 @@ function CustomMoveUpButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(Icon10, { source: ArrowUpward }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17918,6 +17930,7 @@ function CustomMoveDownButton(props) {
       `,
       icon: /* @__PURE__ */ jsx4(Icon10, { source: ArrowDownward }),
       kind: "text",
+      disabled: props.disabled,
       onClick: (e) => {
         onClick && onClick(e);
       }
@@ -17931,7 +17944,7 @@ import { getTemplate as getTemplate2, getUiOptions as getUiOptions2 } from "@rjs
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Templates/Other/CustomArrayFieldHeader.tsx
 import { getTemplate, getUiOptions } from "@rjsf/utils";
 import {
-  DesignToken as DesignToken11,
+  DesignToken as DesignToken12,
   SpacingToken as SpacingToken13
 } from "@livechat/design-system-react-components";
 import { Row as Row8 } from "@livechat/developer-studio-ui-react";
@@ -17984,7 +17997,7 @@ function CustomArrayFieldHeader(props) {
               font-size: 13px;
               font-weight: 400;
               line-height: 16px;
-              color: var(${DesignToken11.ContentBasicSecondary});
+              color: var(${DesignToken12.ContentBasicSecondary});
             `,
             children: "optional"
           }
@@ -18102,7 +18115,7 @@ import {
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Templates/Other/CustomFieldHeader.tsx
 import { descriptionId as descriptionId2, getTemplate as getTemplate3, getUiOptions as getUiOptions3, titleId as titleId2 } from "@rjsf/utils";
 import {
-  DesignToken as DesignToken12,
+  DesignToken as DesignToken13,
   SpacingToken as SpacingToken14
 } from "@livechat/design-system-react-components";
 import { Row as Row9 } from "@livechat/developer-studio-ui-react";
@@ -18110,7 +18123,7 @@ var OptionalWrapper = newStyled.div`
   font-size: 13px;
   font-weight: 400;
   line-height: 16px;
-  color: var(${DesignToken12.ContentBasicSecondary});
+  color: var(${DesignToken13.ContentBasicSecondary});
 `;
 function CustomFieldHeader(props) {
   const {
@@ -18306,7 +18319,7 @@ function CustomWrapIfAdditionalTemplate(props) {
 // src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Templates/CustomObjectField.tsx
 import { useState as useState13 } from "react";
 import { ADDITIONAL_PROPERTY_FLAG as ADDITIONAL_PROPERTY_FLAG3, canExpand } from "@rjsf/utils";
-import { Button as Button13, DesignToken as DesignToken13 } from "@livechat/design-system-react-components";
+import { Button as Button13, DesignToken as DesignToken14 } from "@livechat/design-system-react-components";
 function CustomObjectFieldTemplate(props) {
   const {
     description,
@@ -18371,7 +18384,7 @@ function CustomObjectFieldTemplate(props) {
           Button13,
           {
             css: css`
-              color: var(${DesignToken13.ContentBasicPrimary});
+              color: var(${DesignToken14.ContentBasicPrimary});
             `,
             kind: "link-light",
             onClick: () => {
@@ -18692,7 +18705,7 @@ var CustomToolbar_default = Toolbar_default;
 
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/Custom.tsx
 import {
-  DesignToken as DesignToken14,
+  DesignToken as DesignToken15,
   RadiusToken as RadiusToken6
 } from "@livechat/design-system-react-components";
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -18702,8 +18715,8 @@ var Wrapper2 = newStyled.div`
 
     .react-flow__handle {
       transition: background-color 0.15s ease-in-out 0s;
-      background: var(${DesignToken14.SurfacePrimaryDefault}) !important;
-      border: 1px solid var(${DesignToken14.BorderBasicPrimary}) !important;
+      background: var(${DesignToken15.SurfacePrimaryDefault}) !important;
+      border: 1px solid var(${DesignToken15.BorderBasicPrimary}) !important;
       pointer-events: all;
       cursor: pointer;
       border-radius: var(${RadiusToken6[1]}) !important;
@@ -18796,7 +18809,7 @@ var Node_default = memo4(ForkJoinNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/HttpNode/Base.tsx
 import { Automation } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken15,
+  DesignToken as DesignToken16,
   Icon as Icon14,
   RadiusToken as RadiusToken7,
   ShadowToken as ShadowToken2,
@@ -18805,10 +18818,10 @@ import {
 import { IntegrationNames as IntegrationNames15 } from "@livechat/developer-studio-api";
 import { Column as Column7 } from "@livechat/developer-studio-ui-react";
 var Node2 = newStyled.div`
-  color: var(${DesignToken15.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken15.SurfacePrimaryActive})` : `var(${DesignToken15.SurfacePrimaryDefault})`};
+  color: var(${DesignToken16.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken16.SurfacePrimaryActive})` : `var(${DesignToken16.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken15.BorderBasicNegative})` : editing ? `var(${DesignToken15.ActionPrimaryDefault})` : `var(${DesignToken15.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken16.BorderBasicNegative})` : editing ? `var(${DesignToken16.ActionPrimaryDefault})` : `var(${DesignToken16.BorderBasicSecondary})`};
   border-radius: var(${RadiusToken7[3]});
   width: ${DEFAULT_NODE_WIDTH.HTTP}px;
 
@@ -18820,7 +18833,7 @@ var Node2 = newStyled.div`
   transition: 0.15s ease-in-out 0s;
 
   &:hover {
-    background: var(${DesignToken15.SurfacePrimaryHover});
+    background: var(${DesignToken16.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken2.Float});
   }
 `;
@@ -19298,17 +19311,17 @@ var Node_default2 = memo5(HttpNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/JoinNode/Base.tsx
 import { DirectionsSignOff } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken16,
+  DesignToken as DesignToken17,
   Icon as Icon16,
   RadiusToken as RadiusToken8,
   ShadowToken as ShadowToken3,
   SpacingToken as SpacingToken19
 } from "@livechat/design-system-react-components";
 var Node3 = newStyled.div`
-  color: var(${DesignToken16.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken16.SurfacePrimaryActive})` : `var(${DesignToken16.Background01})`};
+  color: var(${DesignToken17.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken17.SurfacePrimaryActive})` : `var(${DesignToken17.Background01})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken16.BorderBasicNegative})` : editing ? `var(${DesignToken16.ActionPrimaryDefault})` : `var(${DesignToken16.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken17.BorderBasicNegative})` : editing ? `var(${DesignToken17.ActionPrimaryDefault})` : `var(${DesignToken17.BorderBasicSecondary})`};
   border-radius: var(${RadiusToken8[3]});
   width: ${DEFAULT_NODE_WIDTH.JOIN}px;
 
@@ -19320,7 +19333,7 @@ var Node3 = newStyled.div`
   transition: 0.15s ease-in-out 0s;
 
   &:hover {
-    background: var(${DesignToken16.SurfacePrimaryHover});
+    background: var(${DesignToken17.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken3.Float});
   }
 `;
@@ -19458,17 +19471,17 @@ var Node_default3 = memo6(JoinNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/SwitchNode/Base.tsx
 import { Channels } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken17,
+  DesignToken as DesignToken18,
   Icon as Icon17,
   RadiusToken as RadiusToken9,
   ShadowToken as ShadowToken4,
   SpacingToken as SpacingToken20
 } from "@livechat/design-system-react-components";
 var Node4 = newStyled.div`
-  color: var(${DesignToken17.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken17.SurfacePrimaryActive})` : `var(${DesignToken17.SurfacePrimaryDefault})`};
+  color: var(${DesignToken18.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken18.SurfacePrimaryActive})` : `var(${DesignToken18.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken17.BorderBasicNegative})` : editing ? `var(${DesignToken17.ActionPrimaryDefault})` : `var(${DesignToken17.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken18.BorderBasicNegative})` : editing ? `var(${DesignToken18.ActionPrimaryDefault})` : `var(${DesignToken18.BorderBasicSecondary})`};
   border-radius: var(${RadiusToken9[3]});
   width: ${({ source }) => source ? `${DEFAULT_NODE_WIDTH.default}px` : `${DEFAULT_NODE_WIDTH.SWITCH}px`};
   height: ${DEFAULT_NODE_HEIGHT.SWITCH}px;
@@ -19480,7 +19493,7 @@ var Node4 = newStyled.div`
   transition: 0.15s ease-in-out 0s;
 
   &:hover {
-    background: var(${DesignToken17.SurfacePrimaryHover});
+    background: var(${DesignToken18.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken4.Float});
   }
 `;
@@ -19599,7 +19612,7 @@ var Form_default5 = SwitchNodeForm;
 import { memo as memo7, useState as useState17 } from "react";
 import { Handle as Handle5, Position as Position7 } from "reactflow";
 import {
-  DesignToken as DesignToken18,
+  DesignToken as DesignToken19,
   ShadowToken as ShadowToken5
 } from "@livechat/design-system-react-components";
 var handlerWrapperCss = css`
@@ -19609,7 +19622,7 @@ var handlerWrapperCss = css`
 
   &:hover {
     > div:nth-of-type(3) {
-      background: var(${DesignToken18.SurfacePrimaryHover});
+      background: var(${DesignToken19.SurfacePrimaryHover});
       box-shadow: var(${ShadowToken5.Float});
     }
   }
@@ -19711,7 +19724,7 @@ var Node_default4 = memo7(SwitchNode);
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/TerminateNode/Base.tsx
 import { ArrowBarToRight } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken19,
+  DesignToken as DesignToken20,
   Icon as Icon18,
   ShadowToken as ShadowToken6,
   SpacingToken as SpacingToken21
@@ -19719,10 +19732,10 @@ import {
 import { Column as Column10 } from "@livechat/developer-studio-ui-react";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Node5 = newStyled.div`
-  color: var(${DesignToken19.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken19.SurfacePrimaryActive})` : `var(${DesignToken19.SurfacePrimaryDefault})`};
+  color: var(${DesignToken20.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken20.SurfacePrimaryActive})` : `var(${DesignToken20.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ hasErrors }) => !hasErrors ? `var(${DesignToken19.BorderBasicSecondary})` : `var(${DesignToken19.BorderBasicNegative})`};
+    ${({ hasErrors }) => !hasErrors ? `var(${DesignToken20.BorderBasicSecondary})` : `var(${DesignToken20.BorderBasicNegative})`};
   border-radius: 50%;
   width: ${DEFAULT_NODE_WIDTH.TERMINATE}px;
   height: ${DEFAULT_NODE_HEIGHT.TERMINATE}px;
@@ -19733,7 +19746,7 @@ var Node5 = newStyled.div`
   position: relative;
   transition: 0.15s ease-in-out 0s;
   &:hover {
-    background: var(${DesignToken19.SurfacePrimaryHover});
+    background: var(${DesignToken20.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken6.Float});
   }
 `;
@@ -19872,17 +19885,17 @@ var Node_default5 = memo8(TerminateNode);
 
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/TriggerNode/Base.tsx
 import {
-  DesignToken as DesignToken20,
+  DesignToken as DesignToken21,
   ShadowToken as ShadowToken7,
   SpacingToken as SpacingToken22
 } from "@livechat/design-system-react-components";
 import { IntegrationNames as IntegrationNames17 } from "@livechat/developer-studio-api";
 import { Column as Column11 } from "@livechat/developer-studio-ui-react";
 var Node6 = newStyled.div`
-  color: var(${DesignToken20.ContentBasicPrimary});
-  background-color: ${({ editing }) => editing ? `var(${DesignToken20.SurfacePrimaryActive})` : `var(${DesignToken20.SurfacePrimaryDefault})`};
+  color: var(${DesignToken21.ContentBasicPrimary});
+  background-color: ${({ editing }) => editing ? `var(${DesignToken21.SurfacePrimaryActive})` : `var(${DesignToken21.SurfacePrimaryDefault})`};
   border: 1px solid
-    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken20.BorderBasicNegative})` : editing ? `var(${DesignToken20.ActionPrimaryDefault})` : `var(${DesignToken20.BorderBasicSecondary})`};
+    ${({ editing, hasErrors }) => hasErrors ? `var(${DesignToken21.BorderBasicNegative})` : editing ? `var(${DesignToken21.ActionPrimaryDefault})` : `var(${DesignToken21.BorderBasicSecondary})`};
   border-radius: 50px;
   width: ${DEFAULT_NODE_WIDTH.HTTP}px;
 
@@ -19895,7 +19908,7 @@ var Node6 = newStyled.div`
   padding: 0 var(${SpacingToken22.Spacing3});
 
   &:hover {
-    background: var(${DesignToken20.SurfacePrimaryHover});
+    background: var(${DesignToken21.SurfacePrimaryHover});
     box-shadow: var(${ShadowToken7.Float});
   }
 `;
@@ -19988,34 +20001,34 @@ var Base_default6 = TriggerNodeBase;
 // src/views/Workflows/Creator/Builder/Nodes/CustomNodes/TriggerNode/Form.tsx
 import { useState as useState19 } from "react";
 import { Cron } from "react-js-cron";
-import { DesignToken as DesignToken21 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken22 } from "@livechat/design-system-react-components";
 var cronCss = css`
   width: 100%;
 
   .ant-select {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .ant-select-open .ant-select-selection-item {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .ant-select-selector {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
-    border: 1px solid var(${DesignToken21.BorderBasicPrimary}) !important;
-    background: var(${DesignToken21.SurfacePrimaryDefault}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
+    border: 1px solid var(${DesignToken22.BorderBasicPrimary}) !important;
+    background: var(${DesignToken22.SurfacePrimaryDefault}) !important;
 
     &:hover {
-      border-color: var(${DesignToken21.BorderBasicHover}) !important;
+      border-color: var(${DesignToken22.BorderBasicHover}) !important;
     }
   }
 
   svg {
-    fill: var(${DesignToken21.ContentBasicPrimary}) !important;
+    fill: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .ant-select-item {
-    color: var(${DesignToken21.ContentBasicPrimary}) !important;
+    color: var(${DesignToken22.ContentBasicPrimary}) !important;
   }
 
   .react-js-cron-clear-button {
@@ -20167,7 +20180,7 @@ import {
   ZoomOut
 } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken27,
+  DesignToken as DesignToken28,
   Icon as Icon25,
   Popover,
   RadiusToken as RadiusToken13
@@ -20180,12 +20193,12 @@ import { Button as Button16, Icon as Icon19 } from "@livechat/design-system-reac
 
 // src/views/Workflows/Common/One/widget/message-box/styles.ts
 import {
-  DesignToken as DesignToken22,
+  DesignToken as DesignToken23,
   RadiusToken as RadiusToken10,
   SpacingToken as SpacingToken23
 } from "@livechat/design-system-react-components";
 var popoverMessageBox = css`
-  border-top: 1px solid var(${DesignToken22.BorderBasicSecondary});
+  border-top: 1px solid var(${DesignToken23.BorderBasicSecondary});
 `;
 var contentEditable = css`
   max-height: calc(100% - 32px);
@@ -20195,7 +20208,7 @@ var contentEditable = css`
   line-height: 21px;
   font-size: 16px;
   outline: none;
-  color: var(${DesignToken22.ContentBasicPrimary});
+  color: var(${DesignToken23.ContentBasicPrimary});
   margin-right: var(${SpacingToken23.Spacing1});
   white-space: pre !important;
   -ms-overflow-style: none;
@@ -20203,7 +20216,7 @@ var contentEditable = css`
   -webkit-scrollbar: none;
 
   &:focus-visible {
-    border-color: var(${DesignToken22.BorderDefault});
+    border-color: var(${DesignToken23.BorderDefault});
   }
 
   p {
@@ -20224,7 +20237,7 @@ var messageBoxWrapper = css`
   }
 `;
 var placeholder = css`
-  color: var(${DesignToken22.ContentBasicDisabled});
+  color: var(${DesignToken23.ContentBasicDisabled});
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -20269,16 +20282,16 @@ var messageBoxTip = css`
   font-size: 14px;
   line-height: 24px;
   gap: var(${SpacingToken23.Spacing2});
-  color: var(${DesignToken22.ContentBasicDisabled});
+  color: var(${DesignToken23.ContentBasicDisabled});
 
   strong {
     width: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: var(${DesignToken22.ContentBasicPrimary});
+    color: var(${DesignToken23.ContentBasicPrimary});
     border-radius: var(${RadiusToken10[3]});
-    background-color: var(${DesignToken22.SurfaceSecondaryDefault});
+    background-color: var(${DesignToken23.SurfaceSecondaryDefault});
   }
 `;
 
@@ -20602,14 +20615,14 @@ import { Button as Button18, Icon as Icon20, Text as Text10 } from "@livechat/de
 
 // src/views/Workflows/Common/One/widget/events/styles.ts
 import {
-  DesignToken as DesignToken24,
+  DesignToken as DesignToken25,
   RadiusToken as RadiusToken12,
   SpacingToken as SpacingToken25
 } from "@livechat/design-system-react-components";
 
 // src/views/Workflows/Common/One/widget/styles.ts
 import {
-  DesignToken as DesignToken23,
+  DesignToken as DesignToken24,
   RadiusToken as RadiusToken11,
   ShadowToken as ShadowToken8,
   SpacingToken as SpacingToken24
@@ -20633,7 +20646,7 @@ var loaderText = css`
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-  color: var(${DesignToken23.ContentBasicDisabled});
+  color: var(${DesignToken24.ContentBasicDisabled});
 `;
 var relativeContainer = css`
   position: relative;
@@ -20650,11 +20663,11 @@ var typingIndicator = css`
   span {
     width: 4px;
     height: 4px;
-    background-color: var(${DesignToken23.ContentBasicDisabled});
+    background-color: var(${DesignToken24.ContentBasicDisabled});
   }
 `;
 var selected = css`
-  background-color: var(${DesignToken23.SurfacePrimaryActive});
+  background-color: var(${DesignToken24.SurfacePrimaryActive});
 `;
 var wrapper = css`
   ${resetLegacyLcBorderBox};
@@ -20675,13 +20688,13 @@ var wrapper = css`
   }
 
   &:hover {
-    background-color: var(${DesignToken23.SurfacePrimaryHover});
+    background-color: var(${DesignToken24.SurfacePrimaryHover});
     cursor: pointer;
   }
 `;
 var textWrapper = css`
   width: calc(100% - 2 * ${SIDE_PADDING}px - 2 * ${SIDE_MARGIN}px);
-  color: var(${DesignToken23.ContentBasicPrimary});
+  color: var(${DesignToken24.ContentBasicPrimary});
 `;
 var lastEventWrapper = css`
   display: flex;
@@ -20695,7 +20708,7 @@ var text = css`
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
-  color: var(${DesignToken23.ContentBasicSecondary});
+  color: var(${DesignToken24.ContentBasicSecondary});
 `;
 var chatFeed = css`
   display: flex;
@@ -20710,14 +20723,14 @@ var undreadMessageCount = css`
   min-width: 18px;
   font-size: 12px;
   border-radius: 50%;
-  color: var(${DesignToken23.ContentLockedWhite});
-  background-color: var(${DesignToken23.SurfaceAccentEmphasisHighNegative});
+  color: var(${DesignToken24.ContentLockedWhite});
+  background-color: var(${DesignToken24.SurfaceAccentEmphasisHighNegative});
   margin: 0 6px;
   text-align: center;
   font-weight: bold;
 `;
 var unreadMessageText = css`
-  color: var(${DesignToken23.ContentBasicSecondary});
+  color: var(${DesignToken24.ContentBasicSecondary});
   flex-grow: 1;
   font-size: 13px;
 `;
@@ -20725,7 +20738,7 @@ var loaderContainer = css`
   height: 100%;
 `;
 var loaderChatItem = css`
-  background-color: var(${DesignToken23.SurfaceSecondaryDisabled});
+  background-color: var(${DesignToken24.SurfaceSecondaryDisabled});
   width: 325px;
   padding: 15px;
   display: flex;
@@ -20744,7 +20757,7 @@ var container = () => css`
   width: 360px;
   height: auto;
   max-height: 75%;
-  color: var(${DesignToken23.ContentBasicPrimary});
+  color: var(${DesignToken24.ContentBasicPrimary});
 `;
 var headerWrapper = css`
   display: flex;
@@ -20774,7 +20787,7 @@ var headerWrapperExpanded = css`
   ${headerWrapper};
   box-sizing: border-box;
   height: 64px;
-  border-bottom: 1px solid var(${DesignToken23.BorderBasicTertiary});
+  border-bottom: 1px solid var(${DesignToken24.BorderBasicTertiary});
 
   > div:first-of-type {
     padding: 0 4px;
@@ -20785,7 +20798,7 @@ var oneLogo = css`
   display: inline-flex;
 `;
 var activeDetailsButton = css`
-  background-color: var(${DesignToken23.SurfaceOpacityBasicActive});
+  background-color: var(${DesignToken24.SurfaceOpacityBasicActive});
 `;
 var icon = css`
   color: white;
@@ -20801,13 +20814,13 @@ var scrollbar = `
   }
 
   ::-webkit-scrollbar-track {
-    background: var(${DesignToken23.SurfacePrimaryDefault});
+    background: var(${DesignToken24.SurfacePrimaryDefault});
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(${DesignToken23.SurfaceModerateDefault});
+    background: var(${DesignToken24.SurfaceModerateDefault});
     border-radius: 8px;
-    box-shadow: inset 0 0 0 3px var(${DesignToken23.SurfacePrimaryDefault});
+    box-shadow: inset 0 0 0 3px var(${DesignToken24.SurfacePrimaryDefault});
   }
 `;
 var scroller = css`
@@ -20903,7 +20916,7 @@ var loaderBubble = css`
   width: 41px;
   height: 46px;
   padding: var(${SpacingToken25.Spacing3});
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
   border-radius: var(${RadiusToken12[4]});
   background: linear-gradient(
     254.49deg,
@@ -20918,7 +20931,7 @@ var bubble = css`
   font-size: 14px;
   line-height: 1.5em;
   word-break: break-word;
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
   background: linear-gradient(
     254.49deg,
     rgb(187 154 255 / 18%) -0.38%,
@@ -20932,7 +20945,7 @@ var eventWrapper = (isAgentMessage) => css`
   align-items: ${isAgentMessage ? "center" : "flex-start"};
   justify-content: ${isAgentMessage ? "flex-end" : "flex-start"};
   margin: 2px;
-  color: ${isAgentMessage ? `var(${DesignToken24.ContentLockedWhite})` : `var(${DesignToken24.ContentBasicPrimary})`};
+  color: ${isAgentMessage ? `var(${DesignToken25.ContentLockedWhite})` : `var(${DesignToken25.ContentBasicPrimary})`};
 `;
 var eventText = css`
   padding: var(${SpacingToken25.Spacing3}) var(${SpacingToken25.Spacing5});
@@ -21016,7 +21029,7 @@ var agentMessage = css`
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
   width: 100%;
 `;
 var taskList = css`
@@ -21041,8 +21054,8 @@ var linkContainer = (type = "api_call") => css`
   margin-bottom: var(${SpacingToken25.Spacing2});
 
   span {
-    color: var(${DesignToken24.ContentBasicPrimary});
-    background-color: ${type === "url" ? `var(${DesignToken24.SurfacePrimaryActiveColored})` : `var(${DesignToken24.SurfaceTertiaryDefault})`};
+    color: var(${DesignToken25.ContentBasicPrimary});
+    background-color: ${type === "url" ? `var(${DesignToken25.SurfacePrimaryActiveColored})` : `var(${DesignToken25.SurfaceTertiaryDefault})`};
     width: 24px;
     height: 24px;
     padding: var(${SpacingToken25.Spacing1});
@@ -21058,10 +21071,10 @@ var sourcesContainer = css`
   align-items: center;
 `;
 var sourcesBadgeActive = css`
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
 `;
 var sourcesButtonActive = css`
-  color: var(${DesignToken24.ContentBasicPrimary});
+  color: var(${DesignToken25.ContentBasicPrimary});
 `;
 var sourcesList = css`
   margin: var(${SpacingToken25.Spacing3}) 0 0 var(${SpacingToken25.Spacing7});
@@ -21076,7 +21089,7 @@ var sourcesButton = css`
   border-radius: var(${RadiusToken12[3]});
   padding: var(${SpacingToken25.Spacing05}) var(${SpacingToken25.Spacing2})
     var(${SpacingToken25.Spacing05}) 6px;
-  color: var(${DesignToken24.ContentBasicSecondary});
+  color: var(${DesignToken25.ContentBasicSecondary});
   margin-top: var(${SpacingToken25.Spacing05});
 
   &:hover {
@@ -21090,13 +21103,13 @@ var button = css`
   margin: 0;
 
   svg {
-    color: var(${DesignToken24.ContentBasicSecondary});
+    color: var(${DesignToken25.ContentBasicSecondary});
   }
 
   &:hover {
     cursor: pointer;
     svg {
-      color: var(${DesignToken24.ContentBasicPrimary});
+      color: var(${DesignToken25.ContentBasicPrimary});
     }
   }
 `;
@@ -21145,7 +21158,7 @@ function OneErrorEvent({ eventId }) {
 import { useEffect as useEffect15, useState as useState23 } from "react";
 
 // src/views/Workflows/Common/One/components/SkeletonLine.tsx
-import { DesignToken as DesignToken25 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken26 } from "@livechat/design-system-react-components";
 var shine = keyframes`
   0% {
     background-position: 100% 50%;
@@ -21156,7 +21169,7 @@ var shine = keyframes`
   }
 `;
 var skeletonLine = css`
-  background: var(${DesignToken25.SurfaceSecondaryDisabled});
+  background: var(${DesignToken26.SurfaceSecondaryDisabled});
   width: 35%;
   height: 12px;
   border-radius: 6px;
@@ -21229,7 +21242,7 @@ function OneImageEvent({ imageUrl }) {
 
 // src/views/Workflows/Common/One/components/TypingIndicator.tsx
 import { memo as memo10 } from "react";
-import { DesignToken as DesignToken26 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken27 } from "@livechat/design-system-react-components";
 var typingAnimation = keyframes`
 	0% {
 		opacity: 0.2;
@@ -21253,7 +21266,7 @@ var typingIndicator2 = css`
     animation-duration: 1.4s;
     animation-iteration-count: infinite;
     animation-fill-mode: both;
-    background-color: var(${DesignToken26.ContentBasicPrimary});
+    background-color: var(${DesignToken27.ContentBasicPrimary});
     border-radius: 50%;
     display: block;
     height: 3px;
@@ -21930,7 +21943,7 @@ function CustomControls({
         css: css`
               max-width: 360px;
               border-radius: var(${RadiusToken13[4]});
-              background-color: var(${DesignToken27.SurfacePrimaryDefault});
+              background-color: var(${DesignToken28.SurfacePrimaryDefault});
             `,
         floatingStrategy: "fixed",
         isVisible: isOpen,
@@ -22116,7 +22129,7 @@ import {
   getSmoothStepPath
 } from "reactflow";
 import {
-  DesignToken as DesignToken28,
+  DesignToken as DesignToken29,
   RadiusToken as RadiusToken14
 } from "@livechat/design-system-react-components";
 var CustomEdge = ({
@@ -22151,7 +22164,7 @@ var CustomEdge = ({
               position: absolute;
               transform: translate(-50%, -100%)
                 translate(${targetX}px, ${targetY - 10}px);
-              background: ${typeof data.label === "object" ? "transparent" : `var(${DesignToken28.SurfaceTertiaryDefault})`};
+              background: ${typeof data.label === "object" ? "transparent" : `var(${DesignToken29.SurfaceTertiaryDefault})`};
               padding: 0 8px;
               border-radius: var(${RadiusToken14[3]});
               font-size: 13px;
@@ -22170,7 +22183,7 @@ var Edges_default = CustomEdge_default;
 // src/views/Workflows/Creator/Builder/utils.ts
 import { MarkerType } from "reactflow";
 import ElkConstructor from "elkjs";
-import { DesignToken as DesignToken29 } from "@livechat/design-system-react-components";
+import { DesignToken as DesignToken30 } from "@livechat/design-system-react-components";
 import { WorkflowDefinitionTaskType as WorkflowDefinitionTaskType13 } from "@livechat/developer-studio-api";
 var elk = new ElkConstructor({
   defaultLayoutOptions: {
@@ -22203,11 +22216,11 @@ var buildEdge = ({
       type: MarkerType.ArrowClosed,
       width: 10,
       height: 10,
-      color: `var(${DesignToken29.ContentBasicDisabled})`
+      color: `var(${DesignToken30.ContentBasicDisabled})`
     },
     style: {
       strokeWidth: 2,
-      stroke: `var(${DesignToken29.ContentBasicDisabled})`,
+      stroke: `var(${DesignToken30.ContentBasicDisabled})`,
       zIndex: 9999
     }
   };
@@ -22636,7 +22649,7 @@ function WorkflowBuilder() {
           /* @__PURE__ */ jsx14(
             Background,
             {
-              color: `var(${DesignToken30.SurfaceSecondaryActive})`,
+              color: `var(${DesignToken31.SurfaceSecondaryActive})`,
               size: 2,
               variant: BackgroundVariant.Dots
             }
@@ -22671,7 +22684,7 @@ var WorkflowBuilderWrapper = newStyled.div`
   min-height: 400px;
   max-height: 100%;
   border-radius: var(${RadiusToken15.Radius3});
-  background-color: var(${DesignToken31.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken32.SurfaceSecondaryDefault});
 
   > div {
     height: 400px !important;
@@ -22790,7 +22803,7 @@ var Modal_default4 = PreviewWorkflowModalWrapper;
 import { Error as Error5 } from "@livechat/design-system-icons";
 import {
   Button as Button24,
-  DesignToken as DesignToken32,
+  DesignToken as DesignToken33,
   Icon as Icon26,
   Modal as Modal7
 } from "@livechat/design-system-react-components";
@@ -22826,7 +22839,7 @@ function PublishWorkflowModal({
       icon: /* @__PURE__ */ jsx15(
         Icon26,
         {
-          customColor: `var(${DesignToken32.ContentBasicDisabled})`,
+          customColor: `var(${DesignToken33.ContentBasicDisabled})`,
           size: "xxlarge",
           source: Error5
         }
@@ -22841,7 +22854,7 @@ import { useEffect as useEffect19 } from "react";
 import { Route as Route2, Routes as Routes2 } from "react-router-dom";
 import { useReactFlow as useReactFlow3 } from "reactflow";
 import {
-  DesignToken as DesignToken38,
+  DesignToken as DesignToken39,
   RadiusToken as RadiusToken18,
   SpacingToken as SpacingToken35
 } from "@livechat/design-system-react-components";
@@ -22859,7 +22872,7 @@ import { useNavigate as useNavigate10, useParams as useParams3 } from "react-rou
 import { Close as Close3 } from "@livechat/design-system-icons";
 import {
   Button as Button25,
-  DesignToken as DesignToken35,
+  DesignToken as DesignToken36,
   Heading as Heading3,
   Icon as Icon28,
   Loader as Loader2,
@@ -22877,7 +22890,7 @@ import { Row as Row14 } from "@livechat/developer-studio-ui-react";
 import { CheckCircle as CheckCircle2, CloseCircle as CloseCircle2 } from "@livechat/design-system-icons";
 import {
   Badge as Badge2,
-  DesignToken as DesignToken33,
+  DesignToken as DesignToken34,
   Icon as Icon27,
   SpacingToken as SpacingToken29
 } from "@livechat/design-system-react-components";
@@ -22889,7 +22902,7 @@ var tableCss = css`
 
   width: 100%;
   border-spacing: 0;
-  color: var(${DesignToken33.ContentBasicSecondary});
+  color: var(${DesignToken34.ContentBasicSecondary});
 
   th {
     text-transform: uppercase;
@@ -22918,8 +22931,8 @@ function WorkflowExecutionList({
         {
           css: css`
                       display: flex;
-                      background-color: ${execution.status === "COMPLETED" ? `var(${DesignToken33.SurfaceAccentEmphasisLowPositive})` : `var(${DesignToken33.SurfaceAccentEmphasisLowNegative})`};
-                      color: ${execution.status === "COMPLETED" ? `var(${DesignToken33.ContentBasicPositive})` : `var(${DesignToken33.ContentBasicNegative})`};
+                      background-color: ${execution.status === "COMPLETED" ? `var(${DesignToken34.SurfaceAccentEmphasisLowPositive})` : `var(${DesignToken34.SurfaceAccentEmphasisLowNegative})`};
+                      color: ${execution.status === "COMPLETED" ? `var(${DesignToken34.ContentBasicPositive})` : `var(${DesignToken34.ContentBasicNegative})`};
                     `,
           children: /* @__PURE__ */ jsxs2(Row12, { gap: 4, notPadded: true, children: [
             /* @__PURE__ */ jsx4(
@@ -22939,7 +22952,7 @@ var List_default = WorkflowExecutionList;
 
 // src/views/Workflows/Creator/Panels/Details/Info/Info.tsx
 import {
-  DesignToken as DesignToken34,
+  DesignToken as DesignToken35,
   SpacingToken as SpacingToken30,
   Text as Text15
 } from "@livechat/design-system-react-components";
@@ -22949,13 +22962,13 @@ import {
   Row as Row13
 } from "@livechat/developer-studio-ui-react";
 var Label = newStyled.div`
-  color: var(${DesignToken34.ContentBasicSecondary});
+  color: var(${DesignToken35.ContentBasicSecondary});
 `;
 var IconWrapper = newStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(${DesignToken34.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken35.SurfaceSecondaryDefault});
   border-radius: 50%;
   width: var(${SpacingToken30.Spacing6});
   height: var(${SpacingToken30.Spacing6});
@@ -23017,7 +23030,7 @@ var WorkflowSidebar = newStyled.div`
   top: 0;
   display: flex;
   flex-direction: column;
-  background-color: var(${DesignToken35.SurfacePrimaryDefault});
+  background-color: var(${DesignToken36.SurfacePrimaryDefault});
   width: ${({ width }) => width != null ? width : "524px"};
   flex-shrink: 0;
   height: 100%;
@@ -23259,7 +23272,7 @@ var Panel_default2 = WorkflowEditorPanel;
 import { Automation as Automation2, Close as Close5 } from "@livechat/design-system-icons";
 import {
   Button as Button27,
-  DesignToken as DesignToken36,
+  DesignToken as DesignToken37,
   Icon as Icon30,
   RadiusToken as RadiusToken17,
   ShadowToken as ShadowToken10,
@@ -23276,7 +23289,7 @@ var formCss = () => css`
 var Wrapper4 = newStyled.div`
   height: 100%;
   overflow: auto;
-  background-color: var(${DesignToken36.SurfacePrimaryDefault});
+  background-color: var(${DesignToken37.SurfacePrimaryDefault});
   border-radius: 0 var(${RadiusToken17[4]}) var(${RadiusToken17[4]}) 0;
   width: 524px;
   flex-shrink: 0;
@@ -23486,7 +23499,7 @@ import { ChevronDown as ChevronDown3, Close as Close6 } from "@livechat/design-s
 import {
   ActionMenu as ActionMenu2,
   Button as Button28,
-  DesignToken as DesignToken37,
+  DesignToken as DesignToken38,
   FormField as FormField3,
   Icon as Icon31,
   Input as Input5,
@@ -23615,7 +23628,7 @@ function WorkflowCreatorNavbar() {
                     css: css`
                   background: transparent;
                   border: none;
-                  color: var(${DesignToken37.ContentBasicPrimary});
+                  color: var(${DesignToken38.ContentBasicPrimary});
                   border-radius: 0;
                   padding: 0;
 
@@ -23624,18 +23637,18 @@ function WorkflowCreatorNavbar() {
                     font-size: 18px;
                     font-weight: 600;
                     line-height: 24px;
-                    color: var(${DesignToken37.ContentBasicPrimary});
+                    color: var(${DesignToken38.ContentBasicPrimary});
                     margin-bottom: 1px;
                     width: ${((_c = inputRef.current) == null ? void 0 : _c.value.length) || 5}ch;
                     max-width: 30ch;
 
                     &:disabled {
-                      color: var(${DesignToken37.ContentBasicPrimary});
+                      color: var(${DesignToken38.ContentBasicPrimary});
                     }
 
                     ${isNameChanging && css`
                       border-bottom: 1px solid
-                        var(${DesignToken37.ContentBasicPrimary});
+                        var(${DesignToken38.ContentBasicPrimary});
                       margin-bottom: 0;
                     `}
                   }
@@ -23708,7 +23721,7 @@ function WorkflowCreatorNavbar() {
                   {
                     css: css`
                 width: 1px;
-                background-color: var(${DesignToken37.BorderBasicSecondary});
+                background-color: var(${DesignToken38.BorderBasicSecondary});
                 height: 36px;
               `
                   }
@@ -23771,7 +23784,7 @@ var WorkflowCreatorContent = newStyled.div`
   display: flex;
   flex-flow: row nowrap;
   border-radius: var(${RadiusToken18.Radius4});
-  ${({ grayBackground }) => grayBackground ? `background-color: var(${DesignToken38.SurfaceSecondaryDefault})` : `background-color: var(${DesignToken38.SurfacePrimaryDefault})`};
+  ${({ grayBackground }) => grayBackground ? `background-color: var(${DesignToken39.SurfaceSecondaryDefault})` : `background-color: var(${DesignToken39.SurfacePrimaryDefault})`};
   margin: var(${SpacingToken35.Spacing4});
   width: calc(100% - var(${SpacingToken35.Spacing8}));
   height: calc(100% - var(${SpacingToken35.Spacing8}) - 70px);
@@ -23976,7 +23989,7 @@ import { useNavigate as useNavigate14 } from "react-router-dom";
 import { ArrowBackFilled } from "@livechat/design-system-icons";
 import {
   Button as Button29,
-  DesignToken as DesignToken40,
+  DesignToken as DesignToken41,
   Heading as Heading5,
   Icon as Icon33,
   Modal as Modal8,
@@ -24001,7 +24014,7 @@ import {
   TargetArrow
 } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken39,
+  DesignToken as DesignToken40,
   Icon as Icon32,
   SpacingToken as SpacingToken36,
   Text as Text18
@@ -24020,7 +24033,7 @@ function WorkflowTemplateCategoryIcon(props) {
     /* @__PURE__ */ jsx4(
       Icon32,
       {
-        customColor: `var(${DesignToken39.ContentBasicSecondary})`,
+        customColor: `var(${DesignToken40.ContentBasicSecondary})`,
         size: "small",
         source: icons[props.category]
       }
@@ -24028,7 +24041,7 @@ function WorkflowTemplateCategoryIcon(props) {
     /* @__PURE__ */ jsx4(
       Text18,
       {
-        customColor: `var(${DesignToken39.ContentBasicSecondary})`,
+        customColor: `var(${DesignToken40.ContentBasicSecondary})`,
         noMargin: true,
         size: "xs",
         children: props.category
@@ -24047,7 +24060,7 @@ var WorkflowBuilderWrapper2 = newStyled.div`
   min-height: 400px;
   max-height: 100%;
   border-radius: var(${RadiusToken19.Radius3});
-  background-color: var(${DesignToken40.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken41.SurfaceSecondaryDefault});
 
   > div {
     height: 400px !important;
@@ -24213,7 +24226,7 @@ function WorkflowTemplatePreviewModal({
                     css: css`
                 margin-block-end: var(${SpacingToken37.Spacing1});
               `,
-                    customColor: `var(${DesignToken40.ContentBasicSecondary})`,
+                    customColor: `var(${DesignToken41.ContentBasicSecondary})`,
                     noMargin: true,
                     size: "xs",
                     children: "Products used:"
@@ -24276,7 +24289,7 @@ import { Modal as Modal9, ModalHeader as ModalHeader6 } from "@livechat/design-s
 import { useMemo as useMemo9, useState as useState31 } from "react";
 import { FiletypeOther, OneColored } from "@livechat/design-system-icons";
 import {
-  DesignToken as DesignToken42,
+  DesignToken as DesignToken43,
   SpacingToken as SpacingToken42,
   Text as Text20
 } from "@livechat/design-system-react-components";
@@ -24492,7 +24505,7 @@ var Scratch_default = WorkflowScratchCard;
 // src/views/Workflows/List/Home/Cards/Template.tsx
 import { useNavigate as useNavigate16 } from "react-router-dom";
 import {
-  DesignToken as DesignToken41,
+  DesignToken as DesignToken42,
   Heading as Heading7,
   SpacingToken as SpacingToken41
 } from "@livechat/design-system-react-components";
@@ -24501,7 +24514,7 @@ var IconWrapper2 = newStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(${DesignToken41.SurfaceSecondaryDefault});
+  background-color: var(${DesignToken42.SurfaceSecondaryDefault});
   border-radius: 50%;
   width: var(${SpacingToken41.Spacing7});
   height: var(${SpacingToken41.Spacing7});
@@ -24638,7 +24651,7 @@ function WorkflowsHome({ isOnModal }) {
         /* @__PURE__ */ jsx4(Grid, { children: filteredTemplates.length === 0 ? /* @__PURE__ */ jsx4(
           Text20,
           {
-            customColor: `var(${DesignToken42.ContentBasicSecondary})`,
+            customColor: `var(${DesignToken43.ContentBasicSecondary})`,
             size: "md",
             children: "No templates found"
           }
@@ -24698,7 +24711,7 @@ import { useState as useState33 } from "react";
 import { useNavigate as useNavigate20 } from "react-router-dom";
 import {
   Button as Button35,
-  DesignToken as DesignToken45,
+  DesignToken as DesignToken46,
   SpacingToken as SpacingToken45
 } from "@livechat/design-system-react-components";
 import { mergeDeep as mergeDeep2 } from "@livechat/developer-studio-api";
@@ -24716,7 +24729,7 @@ import { useNavigate as useNavigate18 } from "react-router-dom";
 import { LayoutSidebarLeft } from "@livechat/design-system-icons";
 import {
   Button as Button32,
-  DesignToken as DesignToken43,
+  DesignToken as DesignToken44,
   Heading as Heading8,
   Icon as Icon37,
   SpacingToken as SpacingToken43
@@ -24729,7 +24742,7 @@ var wrapperCss = (hasData) => css`
   padding: 0 var(${SpacingToken43.Spacing6}) 0 var(${SpacingToken43.Spacing4});
   align-items: center;
   gap: var(${SpacingToken43.Spacing2});
-  border-bottom: 1px solid var(${DesignToken43.BorderBasicSecondary});
+  border-bottom: 1px solid var(${DesignToken44.BorderBasicSecondary});
 
   ${hasData && `> button:last-of-type {
     margin-left: auto;
@@ -24854,7 +24867,7 @@ import {
   ActionMenu as ActionMenu6,
   ActionMenuItem as ActionMenuItem2,
   Button as Button34,
-  DesignToken as DesignToken44,
+  DesignToken as DesignToken45,
   Icon as Icon39,
   SpacingToken as SpacingToken44,
   Switch as Switch2,
@@ -24910,7 +24923,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
                     cursor: pointer;
 
                     &:hover {
-                      background: var(${DesignToken44.SurfacePrimaryHover});
+                      background: var(${DesignToken45.SurfacePrimaryHover});
                     }
                   `,
             onClick: () => {
@@ -25042,7 +25055,7 @@ function WorkflowsTable({ workflowsQuery, state }) {
       {
         css: css`
               background: transparent !important;
-              color: var(${DesignToken44.ContentBasicSecondary});
+              color: var(${DesignToken45.ContentBasicSecondary});
             `,
         children: /* @__PURE__ */ jsx4("td", { align: "left", colSpan: 6, children: /* @__PURE__ */ jsxs2(Text21, { as: "div", size: "md", children: [
           "There are no",
@@ -25113,7 +25126,7 @@ var Grid_default = WorkflowsGrid;
 
 // src/views/Workflows/List/View.tsx
 var markedStyles = css`
-  color: var(${DesignToken45.ActionPrimaryDefault});
+  color: var(${DesignToken46.ActionPrimaryDefault});
 `;
 function WorkflowListView() {
   var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/platform-workflows",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "description": "Text Platform | Workflows",
   "author": "Wojciech Dudek",
   "license": "MIT",
@@ -48,8 +48,8 @@
     "esbuild-sass-plugin": "^3.2.0",
     "tsup": "^8.0.0",
     "typescript": "^5.1.6",
-    "eslint-config-custom": "0.0.10",
-    "tsconfig": "0.0.1"
+    "tsconfig": "0.0.1",
+    "eslint-config-custom": "0.0.10"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.9",
@@ -82,8 +82,8 @@
     "validator": "^13.12.0",
     "web-worker": "^1.3.0",
     "@livechat/developer-studio-ui-react": "1.1.5",
-    "@livechat/developer-studio-api": "3.4.14",
-    "@livechat/platform-integrations": "0.0.52"
+    "@livechat/platform-integrations": "0.0.52",
+    "@livechat/developer-studio-api": "3.4.14"
   },
   "peerDependencies": {
     "@tanstack/react-query": "4.36.1",