hunk.code_window: const StyledContentWrapper = styled.div`
     padding-right: 10px;
   `;
   const Button = styled(UnstyledButton)`
     position: relative;
     @media screen and (max-width: 1400px) {
       padding: 0 5px;
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit: const Dropzone = styled.div<{ dark: boolean }>`
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background: ${({ dark }) => (dark ? colors.B17 : colors.B98)};
     color: ${({ dark }) => (dark ? colors.B98 : colors.B17)};
     border-radius: 7px;
     text-align: center;
     line-height: 75px;
     z-index: 1000000;
     border: 1px dashed ${({ dark }) => (dark ? colors.B30 : colors.B80)};
   `;
  
hunk.file_path: apps/web/src/design-system/template-button/ChannelButton.tsx
hunk.type: add
file: import React, { memo, useCallback } from 'react';
  import { Handle, Position, useStore } from 'react-flow-renderer';
  import { ChannelButton } from '../../design-system';
  
  interface NodeData {
    Icon: React.FC<any>;
    description: string;
    label: string;
    tabKey: string;
    index: number;
    testId: string;
    onDelete: () => void;
  }
  
  export default memo(({ data, selected, id }: { data: NodeData; selected: boolean; id: string }) => {
    const targetNode = useStore(useCallback((store) => store.nodeInternals.get(id), [id]));
    const noChildStyle = typeof targetNode?.isParent === 'undefined' ? { border: 'none', background: 'transparent' } : {};
  
    return (
      <div data-test-id={`node-${data.testId}`} style={{ pointerEvents: 'none' }}>
        <ChannelButton onDelete={data.onDelete} Icon={data.Icon} label={data.label} active={selected} id={id} />
        <Handle type="target" id="b" position={Position.Top} />
        <Handle style={noChildStyle} type="source" id="a" position={Position.Bottom} />
      </div>
    );
  });
  